feat: Skeleton component

src-next/skeleton/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-skeleton van-skeleton--animate">
+      <div class="van-skeleton__content">
+        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 60%;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-skeleton van-skeleton--animate">
+      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+      <div class="van-skeleton__content">
+        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 60%;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
+      <div class="van-switch__node"></div>
+    </div>
+    <div class="van-skeleton van-skeleton--animate">
+      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+      <div class="van-skeleton__content">
+        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 100%;"></div>
+        <div class="van-skeleton__row" style="width: 60%;"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src-next/skeleton/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`avatar shape 1`] = `
+<div class="van-skeleton van-skeleton--animate">
+  <div class="van-skeleton__avatar van-skeleton__avatar--square" style="width: 20px; height: 20px;"></div>
+  <div class="van-skeleton__content"></div>
+</div>
+`;
+
+exports[`disable animate 1`] = `
+<div class="van-skeleton van-skeleton--animate">
+  <div class="van-skeleton__content">
+    <div class="van-skeleton__row" style="width: 60%;"></div>
+  </div>
+</div>
+`;
+
+exports[`render chidren 1`] = `<div>Content</div>`;
+
+exports[`round prop 1`] = `
+<div class="van-skeleton van-skeleton--animate van-skeleton--round">
+  <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+  <div class="van-skeleton__content">
+    <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+  </div>
+</div>
+`;
+
+exports[`row-width array 1`] = `
+<div class="van-skeleton van-skeleton--animate">
+  <div class="van-skeleton__content">
+    <div class="van-skeleton__row" style="width: 100%;"></div>
+    <div class="van-skeleton__row" style="width: 30px;"></div>
+    <div class="van-skeleton__row" style="width: 5rem;"></div>
+    <div class="van-skeleton__row"></div>
+  </div>
+</div>
+`;

src-next/skeleton/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

src-next/skeleton/test/index.spec.js

@@ -0,0 +1,56 @@
+import { mount } from '../../../test';
+import Skeleton from '..';
+
+test('row-width array', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      row: 4,
+      rowWidth: ['100%', 30, '5rem'],
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render chidren', () => {
+  const wrapper = mount({
+    template: `
+      <skeleton :loading="false">
+        <div>Content</div>
+      </skeleton>
+    `,
+    components: { Skeleton },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('avatar shape', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      avatar: true,
+      avatarSize: 20,
+      avatarShape: 'square',
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('round prop', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      title: true,
+      round: true,
+      avatar: true,
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('disable animate', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      row: 1,
+      aniamte: false,
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});