test(Seketon): update test cases

src/skeleton/test/__snapshots__/index.legacy.js.snap

@@ -1,38 +0,0 @@
-// 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/skeleton/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should change avatar shape when using avatar-shape prop 1`] = `<div class="van-skeleton__avatar van-skeleton__avatar--square" style="width: 32px; height: 32px;"></div>`;
+
+exports[`should change avatar size when using avatar-size prop: 20rem 1`] = `"20rem"`;
+
+exports[`should change avatar size when using avatar-size prop: 20ren 1`] = `"20rem"`;
+
+exports[`should render default slot when loading is false 1`] = `<div>Content</div>`;
+
+exports[`should render with row width array correctly 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/skeleton/test/index.legacy.js

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

src/skeleton/test/index.spec.js

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import Skeleton from '..';
+
+test('should render with row width array correctly', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      row: 4,
+      rowWidth: ['100%', 30, '5rem'],
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render default slot when loading is false', () => {
+  const wrapper = mount({
+    render: () => (
+      <Skeleton loading={false}>
+        <div>Content</div>
+      </Skeleton>
+    ),
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should change avatar size when using avatar-size prop', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      avatar: true,
+      avatarSize: '20rem',
+    },
+  });
+
+  const avatar = wrapper.find('.van-skeleton__avatar').element;
+  expect(avatar.style.width).toMatchSnapshot('20rem');
+  expect(avatar.style.height).toMatchSnapshot('20ren');
+});
+
+test('should change avatar shape when using avatar-shape prop', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      avatar: true,
+      avatarShape: 'square',
+    },
+  });
+  expect(wrapper.find('.van-skeleton__avatar').html()).toMatchSnapshot();
+});
+
+test('should be round when using round prop', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      title: true,
+      round: true,
+      avatar: true,
+    },
+  });
+  expect(wrapper.find('.van-skeleton--round').exists()).toBeTruthy();
+});
+
+test('should allow to disable animation', async () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      row: 1,
+    },
+  });
+
+  expect(wrapper.find('.van-skeleton--animate').exists()).toBeTruthy();
+
+  await wrapper.setProps({ animate: false });
+  expect(wrapper.find('.van-skeleton--animate').exists()).toBeFalsy();
+});