test(snackbar): add test

varletjs · May 18, 2021 · 4f4e290 · 4f4e290
1 parent 0b403cc
commit 4f4e290
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 5 deletions.
diff --git a/packages/varlet-ui/src/snackbar/__tests__/__snapshots__/component.spec.js.snap b/packages/varlet-ui/src/snackbar/__tests__/__snapshots__/component.spec.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test snackbar example 1`] = `
+"<div class=\\"snackbar-demo\\">
+  <div class=\\"app-type\\">组件调用</div><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">基本使用</div>
+  </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">垂直排列</div>
+  </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">底部显示</div>
+  </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">显示时长</div>
+  </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">禁止穿透点击</div>
+  </button>
+</div>
+<div class=\\"snackbar-demo\\">
+  <div class=\\"app-type\\">函数调用</div><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">基本使用</div>
+  </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">显示时长</div>
+  </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+    <!--v-if-->
+    <div class=\\"var-button__content\\">底部显示</div>
+  </button>
+</div>
+<div class=\\"snackbar-demo\\">
+  <div class=\\"app-type\\">Snackbar 类型</div>
+  <div class=\\"snackbar-demo__type-block\\"><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\">成功</div>
+    </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\">警告</div>
+    </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\">消息</div>
+    </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\">错误</div>
+    </button><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\">加载</div>
+    </button></div>
+</div>
+<div class=\\"snackbar-demo\\">
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`test snackbar style 1`] = `"<transition-stub><div class=\\"var-snackbar var-snackbar-transition\\" style=\\"pointer-events: auto; z-index: 2001;\\"><div class=\\"var-snackbar__wrapper var-snackbar__wrapper-center var-elevation--4 var-snackbar__vertical var-snackbar__wrapper-loading\\" style=\\"z-index: 2001;\\"><div class=\\"var-snackbar__content test-snackbar\\">test snackbar</div><div class=\\"var-snackbar__action\\"><!--v-if--><div class=\\"var--box var-loading\\"><!--v-if--><div class=\\"var-loading__wave var-loading__wave-large\\"><div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-large\\"></div><div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-large\\"></div><div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-large\\"></div><div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-large\\"></div><div style=\\"background-color: currentColor;\\" class=\\"var-loading__wave-item var-loading__wave-item-large\\"></div></div><!--v-if--><!--v-if--><!--v-if--></div></div></div></div></transition-stub>"`;
diff --git a/packages/varlet-ui/src/snackbar/__tests__/component.spec.js b/packages/varlet-ui/src/snackbar/__tests__/component.spec.js
@@ -0,0 +1,52 @@
+import Snackbar from '..'
+import VarSnackbar from '../Snackbar'
+import example from '../example'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
+
+test('test snackbar example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.unmount()
+})
+
+test('test snackbar component plugin', () => {
+  const app = createApp({}).use(Snackbar.Component)
+  expect(app.component(Snackbar.Component.name)).toBeTruthy()
+})
+
+test('test snackbar style', async () => {
+  const template = `
+     <var-snackbar
+      v-model:show="show"
+      type="loading"
+      position="center"
+      content-class="test-snackbar"
+      vertical
+      :duration="500"
+      loading-type="wave"
+      loading-size="large"
+      content="test snackbar"
+      forbid-click
+      lock-scroll
+    />
+   `
+  mount({
+    components: {
+      [VarSnackbar.name]: VarSnackbar
+    },
+    data() {
+      return {
+        show: true
+      }
+    },
+    template
+  })
+
+  await delay(200)
+  expect(document.body.innerHTML).toMatchSnapshot()
+
+  await delay(500)
+  expect(document.querySelector('.var-snackbar').style.display).toBe('none')
+})
diff --git a/packages/varlet-ui/src/snackbar/__tests__/index.spec.js b/packages/varlet-ui/src/snackbar/__tests__/index.spec.js
@@ -0,0 +1,112 @@
+import Snackbar from '../index'
+import VarSnackbar from '../Snackbar'
+import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
+
+test('test snackbar plugin', () => {
+  const app = createApp({}).use(Snackbar)
+  expect(app.component(VarSnackbar.name)).toBeTruthy()
+})
+
+test('test snackbar functional', async () => {
+  expect(document.body.querySelector('.var-snackbar')).toBeFalsy()
+
+  const { clear } = Snackbar('test snackbar')
+
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar')).toBeTruthy()
+
+  clear()
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar')).toBeFalsy()
+
+  Snackbar.clear()
+})
+
+test('test snackbar type', async () => {
+  Snackbar.success('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-success')).toBeTruthy()
+
+  Snackbar.warning('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-warning')).toBeTruthy()
+
+  Snackbar.error('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-error')).toBeTruthy()
+
+  Snackbar.info({
+    content: 'test snackbar',
+    forbidClick: true
+  })
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-info')).toBeTruthy()
+
+  Snackbar.loading('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-loading')).toBeTruthy()
+
+  Snackbar.clear()
+})
+
+test('test snackbar event', async () => {
+  const open = jest.fn()
+  const opened = jest.fn()
+  const close = jest.fn()
+  const closed = jest.fn()
+
+  const { clear } = Snackbar({
+    content: 'test snackbar',
+    duration: 500,
+    onOpen: open,
+    onOpened: opened,
+    onClose: close,
+    onClosed: closed
+  })
+
+  await delay(200)
+
+  clear()
+
+  await delay(200)
+
+  expect(open).toHaveBeenCalledTimes(1)
+  expect(opened).toHaveBeenCalled()
+  expect(close).toHaveBeenCalledTimes(1)
+  expect(closed).toHaveBeenCalledTimes(1)
+})
+
+test('test snackbar allowMultiple and clear', async () => {
+  Snackbar.success('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-success')).toBeTruthy()
+
+  Snackbar.warning('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-success')).toBeFalsy()
+
+  Snackbar.allowMultiple(true)
+  await delay(0)
+  expect(Snackbar.isAllowMultiple).toBe(true)
+
+  const { clear } = Snackbar.info('test snackbar')
+  await delay(200)
+  clear()
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-info')).toBeFalsy()
+
+  Snackbar.success('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-success')).toBeTruthy()
+
+  Snackbar.warning('test snackbar')
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-success')).toBeTruthy()
+  expect(document.body.querySelector('.var-snackbar__wrapper-warning')).toBeTruthy()
+
+  Snackbar.clear()
+  await delay(200)
+  expect(document.body.querySelector('.var-snackbar__wrapper-success')).toBeFalsy()
+  expect(document.body.querySelector('.var-snackbar__wrapper-warning')).toBeFalsy()
+})
diff --git a/packages/varlet-ui/src/snackbar/example/index.vue b/packages/varlet-ui/src/snackbar/example/index.vue
@@ -59,11 +59,11 @@
 import Snackbar from '../index'
 import Button from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { defineComponent, reactive, toRefs } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang } from '../../utils/components'
 
-export default defineComponent({
+export default {
   name: 'SnackbarExample',
   components: {
     [Snackbar.Component.name]: Snackbar.Component,
@@ -117,7 +117,7 @@ export default defineComponent({
       create,
     }
   },
-})
+}
 </script>
 
 <style lang="less" scoped>

diff --git a/packages/varlet-ui/src/snackbar/index.ts b/packages/varlet-ui/src/snackbar/index.ts
@@ -72,8 +72,6 @@ const transitionGroupProps: any = {
   name: 'var-snackbar-fade',
   tag: 'div',
   class: 'var-transition-group',
-  afterEnter: 'onOpened',
-  afterLeave: 'onClosed',
 }
 
 const TransitionGroupHost = {