test(Toast): add test cases (#8324)

* test(Toast): add test cases

* test(Toast): add test cases

Co-authored-by: nemo-shen <1034131477@qq.com>

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

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`create a forbidClick toast 1`] = `
-<div class="van-toast van-toast--middle van-toast--success" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
-    <!----></i></div>
-`;
-
-exports[`icon prop 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2005;" name="van-fade"><i class="van-icon van-icon-star-o van-toast__icon">
-    <!----></i>
-  <div class="van-toast__text">Message</div>
-</div>
-`;
-
-exports[`icon-prefix prop 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2006;" name="van-fade"><i class="my-icon my-icon-star-o van-toast__icon">
-    <!----></i>
-  <div class="van-toast__text">Message</div>
-</div>
-`;
-
-exports[`show html toast 1`] = `
-<div class="van-toast van-toast--middle van-toast--html" style="z-index: 2004;" name="van-fade">
-  <div class="van-toast__text">
-    <div>Message</div>
-  </div>
-</div>
-`;
-
-exports[`show loading toast 1`] = `
-<div class="van-toast van-toast--middle van-toast--loading" style="z-index: 2003;" name="van-fade">
-  <div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  <div class="van-toast__text">Message</div>
-</div>
-`;

src/toast/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`create a forbidClick toast 1`] = `
+<transition-stub>
+  <div class="van-popup van-popup--center van-toast van-toast--middle van-toast--success"
+       style="z-index: 2004;"
+  >
+    <i class="van-badge__wrapper van-icon van-icon-success van-toast__icon">
+    </i>
+  </div>
+</transition-stub>
+`;

src/toast/test/function.spec.ts

@@ -0,0 +1,176 @@
+import { later } from '../../../test';
+import Toast from '../index';
+import ToastComponent from '../Toast';
+import { createApp } from 'vue';
+
+test('toast disappeared after duration', async () => {
+  const onClose = jest.fn();
+  Toast({
+    duration: 10,
+    onClose,
+  });
+
+  expect(onClose).toHaveBeenCalledTimes(0);
+  await later(50);
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('show loading toast', async () => {
+  Toast.loading({ className: 'loading-toast' });
+
+  await later();
+  expect(
+    document.querySelector('.van-toast.van-toast--loading.loading-toast')
+  ).toBeTruthy();
+});
+
+test('show html toast', async () => {
+  Toast({
+    type: 'html',
+    className: 'html-toast',
+    message: '<div>Message</div>',
+  });
+
+  await later(1000);
+  const toastText = document.querySelector(
+    '.html-toast .van-toast__text'
+  ) as HTMLDivElement;
+  expect(toastText.innerHTML).toEqual('<div>Message</div>');
+});
+
+test('icon prop', async () => {
+  Toast({ icon: 'star-o' });
+
+  await later();
+  expect(document.querySelector('.van-icon-star-o')).toBeTruthy();
+});
+
+test('icon-prefix prop', async () => {
+  Toast({
+    icon: 'star-o',
+    iconPrefix: 'my-icon',
+  });
+
+  await later();
+  expect(document.querySelector('.my-icon.my-icon-star-o')).toBeTruthy();
+});
+
+test('clear toast', async () => {
+  const onClose1 = jest.fn();
+  const onClose2 = jest.fn();
+  const onClose3 = jest.fn();
+
+  Toast({ onClose: onClose1 });
+
+  await later();
+  expect(onClose1).toBeCalledTimes(0);
+  await Toast.clear();
+  expect(onClose1).toBeCalledTimes(1);
+
+  Toast.allowMultiple();
+
+  Toast({ onClose: onClose2 });
+  await later();
+
+  Toast({ onClose: onClose3 });
+  await later();
+
+  await Toast.clear(true);
+
+  expect(onClose2).toBeCalledTimes(1);
+  expect(onClose3).toBeCalledTimes(1);
+  Toast.allowMultiple(false);
+});
+
+test('clear multiple toast', async () => {
+  Toast.allowMultiple();
+  Toast.clear(true);
+
+  const onClose1 = jest.fn();
+  const onClose2 = jest.fn();
+
+  Toast.success({ onClose: onClose1 });
+  await later();
+  Toast.success({ onClose: onClose2 });
+  await later();
+  await Toast.clear();
+  expect(onClose1).toHaveBeenCalledTimes(1);
+  expect(onClose2).toHaveBeenCalledTimes(0);
+  await Toast.clear();
+  expect(onClose2).toHaveBeenCalledTimes(1);
+  Toast.allowMultiple(false);
+});
+
+test('remove toast DOM when cleared in multiple mode', async function () {
+  Toast.allowMultiple();
+  Toast.clear(true);
+  const toast = Toast({ className: 'remove-toast' });
+  await later();
+
+  await toast.clear();
+  await later(100);
+  expect(document.querySelector('.remove-toast')).toBeNull();
+  Toast.allowMultiple(false);
+});
+
+test('set default options', async () => {
+  const className = 'my-toast';
+  Toast.setDefaultOptions({ className });
+  Toast();
+  await later();
+  expect(document.querySelector('.my-toast')).toBeTruthy();
+
+  Toast.resetDefaultOptions();
+  Toast();
+  await later();
+  expect(document.querySelector('.my-toast')).toBeFalsy();
+});
+
+test('set default options by type', async () => {
+  const className = 'my-toast';
+  Toast.setDefaultOptions('loading', { className });
+
+  Toast.loading('');
+  await later();
+  expect(document.querySelector('.my-toast')).toBeTruthy();
+
+  Toast.success('');
+  await later();
+  expect(document.querySelector('.my-toast')).toBeFalsy();
+
+  Toast.resetDefaultOptions();
+  Toast.loading('');
+  await later();
+  expect(document.querySelector('.my-toast')).toBeFalsy();
+});
+
+test('toast duration 0', async () => {
+  Toast.allowMultiple();
+  const onClose = jest.fn();
+  Toast({ duration: 0, onClose });
+
+  await later(2100);
+  expect(onClose).toHaveBeenCalledTimes(0);
+  Toast.allowMultiple(false);
+});
+
+test('should trigger onClose callback after closed', async () => {
+  Toast.allowMultiple();
+  const onClose = jest.fn();
+  const toast = Toast({ onClose });
+
+  await later();
+  await toast.clear();
+  expect(onClose).toHaveBeenCalledTimes(1);
+
+  // onClose should only be called once
+  await toast.clear();
+  expect(onClose).toHaveBeenCalledTimes(1);
+  Toast.allowMultiple(false);
+});
+
+test('should register component to app', () => {
+  const app = createApp(document.body);
+  app.use(Toast);
+  expect(app.component(ToastComponent.name)).toBeTruthy();
+});

src/toast/test/index.legacy.js

@@ -1,172 +0,0 @@
-import Vue from 'vue';
-import { Toast } from '..';
-import ToastVue from '../Toast';
-import { later } from '../../../test';
-
-test('create a forbidClick toast', async () => {
-  const toast = Toast({
-    forbidClick: true,
-    type: 'success',
-  });
-
-  await later();
-  expect(toast.$el.outerHTML).toMatchSnapshot();
-
-  await later();
-  expect(
-    document.body.classList.contains('van-toast--unclickable')
-  ).toBeTruthy();
-  toast.forbidClick = false;
-
-  await later();
-  expect(
-    document.body.classList.contains('van-toast--unclickable')
-  ).toBeFalsy();
-});
-
-test('toast disappeared after duration', async () => {
-  const toast = Toast({
-    duration: 10,
-  });
-
-  await later(50);
-  expect(toast.$el.style.display).toEqual('none');
-});
-
-test('show loading toast', async () => {
-  const toast = Toast.loading({
-    message: 'Message',
-  });
-
-  await later();
-  expect(toast.$el.outerHTML).toMatchSnapshot();
-});
-
-test('show html toast', async () => {
-  const toast = Toast({
-    type: 'html',
-    message: '<div>Message</div>',
-  });
-
-  await later();
-  expect(toast.$el.outerHTML).toMatchSnapshot();
-});
-
-test('icon prop', async () => {
-  const toast = Toast({
-    message: 'Message',
-    icon: 'star-o',
-  });
-
-  await later();
-  expect(toast.$el.outerHTML).toMatchSnapshot();
-});
-
-test('icon-prefix prop', async () => {
-  const toast = Toast({
-    message: 'Message',
-    icon: 'star-o',
-    iconPrefix: 'my-icon',
-  });
-
-  await later();
-  expect(toast.$el.outerHTML).toMatchSnapshot();
-});
-
-test('clear toast', async () => {
-  const toast1 = Toast('1');
-  await later();
-  expect(toast1.value).toBeTruthy();
-  Toast.clear();
-  expect(toast1.value).toBeFalsy();
-
-  Toast.allowMultiple();
-  const toast2 = Toast('2');
-  await later();
-  const toast3 = Toast('3');
-  await later();
-  Toast.clear(true);
-  expect(toast2.value).toBeFalsy();
-  expect(toast3.value).toBeFalsy();
-  Toast.allowMultiple(false);
-});
-
-test('clear multiple toast', async () => {
-  Toast.allowMultiple();
-  Toast.clear(true);
-  const toast1 = Toast.success('1');
-  await later();
-  const toast2 = Toast.success('2');
-  await later();
-  Toast.clear();
-  expect(toast1.value).toBeFalsy();
-  expect(toast2.value).toBeTruthy();
-  Toast.clear();
-  Toast.clear();
-  expect(toast2.value).toBeFalsy();
-  Toast.allowMultiple(false);
-});
-
-test('remove toast DOM when cleared in multiple mode', async () => {
-  Toast.allowMultiple();
-  Toast.clear(true);
-  const toast = Toast({ message: '1' });
-  await later();
-
-  // mock onAfterLeave
-  toast.clear();
-  toast.onAfterLeave();
-  await later();
-
-  expect(toast.$el.parentNode).toEqual(null);
-  Toast.allowMultiple(false);
-});
-
-test('set default options', () => {
-  const className = 'my-toast';
-  Toast.setDefaultOptions({ className });
-  expect(Toast().className).toEqual(className);
-  Toast.resetDefaultOptions();
-  expect(Toast().className).toEqual('');
-});
-
-test('set default options by type', () => {
-  const className = 'my-toast';
-  Toast.setDefaultOptions('loading', { className });
-  expect(Toast.loading().className).toEqual(className);
-  expect(Toast.success().className).toEqual('');
-  Toast.resetDefaultOptions();
-  expect(Toast.loading().className).toEqual('');
-});
-
-test('toast duration 0', () => {
-  Toast.allowMultiple();
-  const toast = Toast({
-    message: 'toast',
-    duration: 0,
-  });
-  expect(toast.timer).toBeFalsy();
-  Toast.allowMultiple(false);
-});
-
-test('should trigger onClose callback after closed', () => {
-  Toast.allowMultiple();
-  const onClose = jest.fn();
-  const toast = Toast({
-    message: 'toast',
-    onClose,
-  });
-
-  toast.clear();
-  expect(onClose).toHaveBeenCalledTimes(1);
-
-  // onClose should only be called once
-  toast.clear();
-  expect(onClose).toHaveBeenCalledTimes(1);
-  Toast.allowMultiple(false);
-});
-
-test('register component', () => {
-  Vue.use(Toast);
-  expect(Vue.component(ToastVue.name)).toBeTruthy();
-});

src/toast/test/index.spec.ts

@@ -40,3 +40,24 @@ test('should close Toast when using closeOnClickOverlay prop and overlay is clic
   wrapper.find('.van-overlay').trigger('click');
   expect(wrapper.emitted('update:show')![0]).toEqual([false]);
 });
+
+test('create a forbidClick toast', async () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      forbidClick: true,
+      type: 'success',
+    },
+  });
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+  expect(
+    document.body.classList.contains('van-toast--unclickable')
+  ).toBeTruthy();
+
+  await wrapper.setProps({ forbidClick: false });
+  expect(
+    document.body.classList.contains('van-toast--unclickable')
+  ).toBeFalsy();
+});