test(Overlay): update test cases

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" name="van-fade"></div>`;
-
-exports[`custom style prop 1`] = `<div class="van-overlay" style="background-color: red;" name="van-fade"></div>`;
-
-exports[`default slot 1`] = `<div class="van-overlay" style="display: none;" name="van-fade">Custom Default</div>`;
-
-exports[`duration prop 1`] = `<div class="van-overlay" style="animation-duration: 1s;" name="van-fade"></div>`;
-
-exports[`z-index prop 1`] = `<div class="van-overlay" style="z-index: 99;" name="van-fade"></div>`;

src/overlay/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render default slot correctly 1`] = `
+<transition-stub>
+</transition-stub>
+`;

src/overlay/test/index.legacy.js

@@ -1,98 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Overlay from '..';
-
-test('z-index prop', () => {
-  const wrapper = mount(Overlay, {
-    props: {
-      show: true,
-      zIndex: 99,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('class-name prop', () => {
-  const wrapper = mount(Overlay, {
-    props: {
-      show: true,
-      className: 'my-overlay',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('custom style prop', () => {
-  const wrapper = mount(Overlay, {
-    props: {
-      show: true,
-      customStyle: {
-        backgroundColor: 'red',
-      },
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('duration prop', () => {
-  const wrapper = mount(Overlay, {
-    props: {
-      show: true,
-      duration: 1,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('click event', () => {
-  const onClick = jest.fn();
-  const wrapper = mount(Overlay, {
-    context: {
-      on: {
-        click: onClick,
-      },
-    },
-  });
-
-  wrapper.trigger('click');
-  expect(onClick).toHaveBeenCalledTimes(1);
-});
-
-test('default slot', () => {
-  const wrapper = mount(Overlay, {
-    slots: {
-      default: () => 'Custom Default',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('lock-scroll prop', () => {
-  const onTouchMove = jest.fn();
-  const wrapper = mount({
-    template: `
-      <div @touchmove="onTouchMove">
-        <van-overlay :lock-scroll="lockScroll" />
-      </div>
-    `,
-    data() {
-      return {
-        lockScroll: true,
-      };
-    },
-    methods: {
-      onTouchMove,
-    },
-  });
-
-  wrapper.find('.van-overlay').trigger('touchmove');
-  expect(onTouchMove).toHaveBeenCalledTimes(0);
-
-  wrapper.setData({ lockScroll: false });
-  wrapper.find('.van-overlay').trigger('touchmove');
-  expect(onTouchMove).toHaveBeenCalledTimes(1);
-});

src/overlay/test/index.spec.js

@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils';
+import Overlay from '..';
+
+test('should change z-index when using z-index prop', () => {
+  const wrapper = mount(Overlay, {
+    props: {
+      show: true,
+      zIndex: 99,
+    },
+  });
+
+  const overlay = wrapper.find('.van-overlay').element;
+  expect(overlay.style.zIndex).toEqual('99');
+});
+
+test('should allow to custom class name with class-name prop', () => {
+  const wrapper = mount(Overlay, {
+    props: {
+      show: true,
+      className: 'foo',
+    },
+  });
+
+  const overlay = wrapper.find('.van-overlay').element;
+  expect(overlay.classList.contains('foo')).toBeTruthy();
+});
+
+test('should allow to custom style with custom-style prop', () => {
+  const wrapper = mount(Overlay, {
+    props: {
+      show: true,
+      customStyle: {
+        backgroundColor: 'red',
+      },
+    },
+  });
+
+  const overlay = wrapper.find('.van-overlay').element;
+  expect(overlay.style.backgroundColor).toEqual('red');
+});
+
+test('should change animation duration when using duration prop', () => {
+  const wrapper = mount(Overlay, {
+    props: {
+      show: true,
+      duration: 1,
+    },
+  });
+
+  const overlay = wrapper.find('.van-overlay').element;
+  expect(overlay.style.animationDuration).toEqual('1s');
+});
+
+test('should render default slot correctly', () => {
+  const wrapper = mount(Overlay, {
+    slots: {
+      default: () => 'Custom Default',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should allow to touchmove when lock-scroll is false', async () => {
+  const onTouchMove = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <div onTouchmove={onTouchMove}>
+          <Overlay show lockScroll={false} />
+        </div>
+      );
+    },
+  });
+
+  const overlay = wrapper.find('.van-overlay');
+  overlay.trigger('touchmove');
+  expect(onTouchMove).toHaveBeenCalledTimes(1);
+});
+
+test('should not allow to touchmove when lock-scroll is true', async () => {
+  const onTouchMove = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <div onTouchmove={onTouchMove}>
+          <Overlay show lockScroll />
+        </div>
+      );
+    },
+  });
+
+  const overlay = wrapper.find('.van-overlay');
+  overlay.trigger('touchmove');
+  expect(onTouchMove).toHaveBeenCalledTimes(0);
+});