diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a26c683f1a..56e5184a8bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.4.0](https://github.com/haoziqaq/varlet/compare/v1.3.5...v1.4.0) (2021-05-19) + + +### Bug Fixes + +* **slider:** fix error method ([6e1774f](https://github.com/haoziqaq/varlet/commit/6e1774fa57f805027603b2b2c3ed5be08067ea91)) +* **snackbar:** add install method of snackbar component ([0b403cc](https://github.com/haoziqaq/varlet/commit/0b403cccfb53685488c45ecf86aedd58b96f1553)) +* **type:** fix error type of snackbar ([430e382](https://github.com/haoziqaq/varlet/commit/430e3828a68e595f049599231a36b379dfa81a37)) +* **types:** fix snackbar option type ([a04588e](https://github.com/haoziqaq/varlet/commit/a04588e7f1c181670681024ede8e038471185f1f)) +* **ui/button:** fix button block style to class ([433633c](https://github.com/haoziqaq/varlet/commit/433633cf82e1adccb542b69e04ad7a458884a313)) + + +### Features + +* 添加form组件单元测试 ([93420c1](https://github.com/haoziqaq/varlet/commit/93420c1d344e906d5a7f5ec7a91bc4ece82d40f5)) + + + + + ## [1.3.5](https://github.com/haoziqaq/varlet/compare/v1.3.4...v1.3.5) (2021-05-14) diff --git a/lerna.json b/lerna.json index 828ac82fa66..e79e35fbdf0 100644 --- a/lerna.json +++ b/lerna.json @@ -15,5 +15,5 @@ "ignoreChanges": [ "**/*.md" ], - "version": "1.3.5" + "version": "1.4.0" } diff --git a/packages/varlet-cli/CHANGELOG.md b/packages/varlet-cli/CHANGELOG.md index 5178ebb9602..e882b6f941b 100644 --- a/packages/varlet-cli/CHANGELOG.md +++ b/packages/varlet-cli/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.4.0](https://github.com/haoziqaq/varlet/compare/v1.3.5...v1.4.0) (2021-05-19) + +**Note:** Version bump only for package @varlet/cli + + + + + ## [1.3.5](https://github.com/haoziqaq/varlet/compare/v1.3.4...v1.3.5) (2021-05-14) **Note:** Version bump only for package @varlet/cli diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json index 6259f4d4664..e1b4c45fda7 100644 --- a/packages/varlet-cli/package.json +++ b/packages/varlet-cli/package.json @@ -1,6 +1,6 @@ { "name": "@varlet/cli", - "version": "1.3.5", + "version": "1.4.0", "description": "cli of varlet", "bin": { "varlet-cli": "./lib/index.js" @@ -37,7 +37,7 @@ "@babel/preset-env": "^7.12.1", "@babel/preset-typescript": "^7.12.1", "@varlet/markdown-loader": "^1.0.0", - "@varlet/ui": "^1.3.5", + "@varlet/ui": "^1.4.0", "@vue/compiler-sfc": "^3.0.7", "@vue/test-utils": "^2.0.0-rc.6", "autoprefixer": "9", diff --git a/packages/varlet-ui/CHANGELOG.md b/packages/varlet-ui/CHANGELOG.md index d7a8acb56ec..7eb13b48bdb 100644 --- a/packages/varlet-ui/CHANGELOG.md +++ b/packages/varlet-ui/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.4.0](https://github.com/haoziqaq/varlet/compare/v1.3.5...v1.4.0) (2021-05-19) + + +### Bug Fixes + +* **slider:** fix error method ([6e1774f](https://github.com/haoziqaq/varlet/commit/6e1774fa57f805027603b2b2c3ed5be08067ea91)) +* **snackbar:** add install method of snackbar component ([0b403cc](https://github.com/haoziqaq/varlet/commit/0b403cccfb53685488c45ecf86aedd58b96f1553)) +* **type:** fix error type of snackbar ([430e382](https://github.com/haoziqaq/varlet/commit/430e3828a68e595f049599231a36b379dfa81a37)) +* **types:** fix snackbar option type ([a04588e](https://github.com/haoziqaq/varlet/commit/a04588e7f1c181670681024ede8e038471185f1f)) +* **ui/button:** fix button block style to class ([433633c](https://github.com/haoziqaq/varlet/commit/433633cf82e1adccb542b69e04ad7a458884a313)) + + +### Features + +* 添加form组件单元测试 ([93420c1](https://github.com/haoziqaq/varlet/commit/93420c1d344e906d5a7f5ec7a91bc4ece82d40f5)) + + + + + ## [1.3.5](https://github.com/haoziqaq/varlet/compare/v1.3.4...v1.3.5) (2021-05-14) diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json index 11e7e950dae..31dde425569 100644 --- a/packages/varlet-ui/package.json +++ b/packages/varlet-ui/package.json @@ -1,6 +1,6 @@ { "name": "@varlet/ui", - "version": "1.3.5", + "version": "1.4.0", "description": "A material like components library", "module": "es/index.js", "main": "cjs/index.js", diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue index bf0e1b21403..0b3dd2de0fe 100644 --- a/packages/varlet-ui/src/button/Button.vue +++ b/packages/varlet-ui/src/button/Button.vue @@ -4,7 +4,7 @@ class="var-button var--box" :class="[ `var-button--${size}`, - block ? 'var--flex' : 'var--inline-flex', + block ? 'var--flex var-button--block' : 'var--inline-flex', disabled ? 'var-button--disabled' : null, text ? `var-button--text-${type}` : `var-button--${type}`, text ? 'var-button--text' : 'var-elevation--1', @@ -15,7 +15,6 @@ :style="{ color: textColor, background: color, - width: block ? '100%' : null, }" :disabled="disabled" @click="handleClick" diff --git a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap index 8f75ef5e655..0f74ecbdd46 100644 --- a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap @@ -127,7 +127,7 @@ exports[`test button example 1`] = `
大型按钮
-
块级按钮
@@ -155,7 +155,7 @@ exports[`test button example 1`] = ` `; exports[`test button styles 1`] = ` -"" diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less index f841464c2af..a90e50f5616 100644 --- a/packages/varlet-ui/src/button/button.less +++ b/packages/varlet-ui/src/button/button.less @@ -85,6 +85,10 @@ box-shadow: none !important; } + &--block { + width: 100%; + } + &--text { background-color: transparent; diff --git a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000000..8dbc6b1f135 --- /dev/null +++ b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`test form with input 1`] = ` +"
+
+
+
+
+
+
+
+
+
+ +
+
不能为空
+
+
+ +
+
" +`; + +exports[`test form with input 2`] = ` +"
+
+
+
+
+
+
+
+
+
+ + + +
+
" +`; diff --git a/packages/varlet-ui/src/form/__tests__/index.spec.js b/packages/varlet-ui/src/form/__tests__/index.spec.js new file mode 100644 index 00000000000..e9e73f8728d --- /dev/null +++ b/packages/varlet-ui/src/form/__tests__/index.spec.js @@ -0,0 +1,90 @@ +import Form from '..' +import VarForm from '../Form' +import VarInput from '../../input/Input' +import { mount } from '@vue/test-utils' +import { createApp } from 'vue' +import { delay } from '../../utils/jest' + +test('test form plugin', () => { + const app = createApp({}).use(Form) + expect(app.component(Form.name)).toBeTruthy() +}) + +const expectValidate = async (form, wrapper, message) => { + form.validate() + await delay(16) + expect(wrapper.find('.var-form-details__message').text()).toBe(message) + expect(wrapper.html()).toMatchSnapshot() +} + +const expectReset = async (form, wrapper) => { + form.reset() + await delay(16) + expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy() + expect(wrapper.html()).toMatchSnapshot() +} + +test('test form with input', async () => { + const onClear = jest.fn() + const onClick = jest.fn() + const onInput = jest.fn() + const onChange = jest.fn() + + const wrapper = mount({ + components: { + [VarInput.name]: VarInput, + [VarForm.name]: VarForm, + }, + data: () => ({ + disabled: true, + readonly: false, + value: '', + }), + methods: { + onClear, + onClick, + onInput, + onChange, + }, + template: ` + + + + `, + }) + + const triggerEvents = async () => { + await wrapper.find('.var-input__input').trigger('input') + await wrapper.find('.var-input__input').trigger('change') + await wrapper.find('.var-input__clear-icon').trigger('click') + await wrapper.trigger('click') + } + + await triggerEvents() + expect(onInput).toHaveBeenCalledTimes(0) + expect(onClear).toHaveBeenCalledTimes(0) + expect(onClick).toHaveBeenCalledTimes(0) + expect(onChange).toHaveBeenCalledTimes(0) + + await wrapper.setData({ disabled: false, readonly: true }) + + await triggerEvents() + expect(onInput).toHaveBeenCalledTimes(0) + expect(onClear).toHaveBeenCalledTimes(0) + expect(onClick).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledTimes(0) + + const { form } = wrapper.vm.$refs + await expectValidate(form, wrapper, '不能为空') + await expectReset(form, wrapper) + + wrapper.unmount() +}) diff --git a/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js b/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js index 0bcc5469582..e6c6ce81cc2 100644 --- a/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js +++ b/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js @@ -3,7 +3,7 @@ import PullRefresh from '..' import VarPullRefresh from '../PullRefresh' import { mount } from '@vue/test-utils' import { createApp } from 'vue' -import { delay, trigger, triggerDrag } from '../../utils/jest' +import { delay, trigger } from '../../utils/jest' test('test pullRefresh plugin', () => { const app = createApp({}).use(PullRefresh) diff --git a/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 00000000000..e3881e4c2a5 --- /dev/null +++ b/packages/varlet-ui/src/slider/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,272 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`test slider example 1`] = ` +"
+
基本使用
+
+
+
+
+
+
+
+
+
3
+
+ +
+ + + +
+
+
+
指定步长
+
+
+
+
+
+
+
+
+
25
+
+ +
+ + + +
+
+
+
双滑块
+
+
+
+
+
+
+
+
+
24
+
+
+
+
+
50
+
+
+ + + +
+
+
+
禁用
+
+
+
+
+
+
+
+
+
40
+
+ +
+ + + +
+
+
+
只读
+
+
+
+
+
+
+
+
+
40
+
+ +
+ + + +
+
+
+
不同大小
+
+
+
+
+
+
+
+
+
24
+
+
+
+
+
50
+
+
+ + + +
+
+
+
自定义样式
+
+
+
+
+
+
+
+
+
20
+
+ +
+ + + +
+
+
+
显示标签
+
+
+
+
+
+
+
+
+
20
+
+ +
+ + + +
+
+
+
+
+
+
+
+
+
70
+
+ +
+ + + +
+
+
+
+
+
+
+
+
+
50
+
+ +
+ + + +
+
+
+
值的校验
+
+
+
+
+
+
+
+
+
20
+
+ +
+ + + +
+
" +`; + +exports[`test slider rules prop 1`] = ` +"
+
+
+
+
+
+
+
+
0
+
+ +
+ + + +
" +`; + +exports[`test slider rules prop 2`] = ` +"
+
+
+
+
+
+
+
+
NaN
+
+ +
+ + + +
" +`; + +exports[`test slider style 1`] = ` +"
+
+
+
+
+
+
+
+
30
+
+ +
+ + + +
" +`; diff --git a/packages/varlet-ui/src/slider/__tests__/index.spec.js b/packages/varlet-ui/src/slider/__tests__/index.spec.js new file mode 100644 index 00000000000..504d8790ca6 --- /dev/null +++ b/packages/varlet-ui/src/slider/__tests__/index.spec.js @@ -0,0 +1,282 @@ +import example from '../example' +import Slider from '..' +import VarSlider from '../Slider' +import { mount } from '@vue/test-utils' +import { createApp, warn } from 'vue' +import { delay, trigger } from '../../utils/jest' +import VarSwitch from '../../switch/Switch' + + +test('test slider example', () => { + const wrapper = mount(example) + expect(wrapper.html()).toMatchSnapshot() +}) + +test('test slider plugin', () => { + const app = createApp({}).use(Slider) + expect(app.component(Slider.name)).toBeTruthy() +}) + +test('test slider style', async () => { + const template = ` + + ` + + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: 30 + } + }, + template + }) + + await delay(0) + + expect(wrapper.html()).toMatchSnapshot() + +}) + +test('test slider range prop', async () => { + const template = ` + + ` + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: [30, 50] + } + }, + template + }) + + expect(wrapper.findAll('.var-slider__thumb').length).toBe(2) +}) + +test('test slider labelVisible prop', async () => { + const template = ` ` + + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: 0, + visible: 'normal' + } + }, + template + }) + + const el = wrapper.find('.var-slider__thumb-label') + expect(el.classes()).not.toContain('var-slider__thumb-label-active') + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 0, 0) + + expect(el.classes()).toContain('var-slider__thumb-label-active') + + await trigger(el, 'touchend', 0, 0) + + expect(el.classes()).not.toContain('var-slider__thumb-label-active') + + await wrapper.setData({ visible: 'never' }) + + expect(el.classes()).not.toContain('var-slider__thumb-label-active') + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 0, 0) + expect(el.classes()).not.toContain('var-slider__thumb-label-active') + + await wrapper.setData({ visible: 'always' }) + + expect(el.classes()).toContain('var-slider__thumb-label-active') + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 0, 0) + expect(el.classes()).toContain('var-slider__thumb-label-active') + + await trigger(el, 'touchend', 0, 0) + expect(el.classes()).toContain('var-slider__thumb-label-active') +}) + +test('test step prop', async () => { + const template = ` ` + + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: 0, + step: NaN + } + }, + template + }) + + await wrapper.setData({ step: -1 }) + await wrapper.setData({ step: 1.23 }) + await wrapper.setData({ step: 10, value: 0 }) + + const el = wrapper.find('.var-slider__thumb') + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 50, 0) + await trigger(el, 'touchend', 50, 0) + + expect(wrapper.vm.value).not.toBe(0) +}) + +test('test slider not available', async () => { + const changeFn = jest.fn() + const startFn = jest.fn() + const endFn = jest.fn() + + const template = ` + + ` + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: 10, + disabled: true, + readonly: false + } + }, + methods: { + changeFn, + startFn, + endFn + }, + template + }) + + const el = wrapper.find('.var-slider__thumb') + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 0, 50) + await trigger(el, 'touchend', 0, 50) + + await wrapper.setData({ + disabled: false, + readonly: true + }) + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 0, 50) + await trigger(el, 'touchend', 0, 50) + + expect(startFn).toHaveBeenCalledTimes(0) + expect(changeFn).toHaveBeenCalledTimes(0) + expect(endFn).toHaveBeenCalledTimes(0) +}) + +test('test slider events', async () => { + const changeFn = jest.fn() + const startFn = jest.fn() + const endFn = jest.fn() + + const template = ` + + ` + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: 10, + range: false + } + }, + methods: { + changeFn, + startFn, + endFn + }, + template + }) + + const el = wrapper.find('.var-slider__thumb') + const blockEl = wrapper.find('.var-slider-block') + + await trigger(el, 'touchstart', 0, 0) + + expect(startFn).toHaveBeenCalledTimes(1) + + await trigger(el, 'touchmove', 0, 50) + await trigger(el, 'touchend', 0, 50) + + expect(changeFn).toHaveBeenCalled() + expect(endFn).toHaveBeenCalledTimes(1) + expect(wrapper.vm.value).not.toBe(10) + + await wrapper.setData({ + range: true, + value: [20 ,30] + }) + + const el1 = wrapper.findAll('.var-slider__thumb')[1] + + await trigger(el1, 'touchstart', 0, 0) + await trigger(el1, 'touchmove', 0, 50) + await trigger(el1, 'touchend', 0, 50) + + expect(wrapper.vm.value[1]).not.toBe(30) + + await wrapper.setData({ + range: true, + value: [20 ,30] + }) + await blockEl.trigger('click') + + expect(wrapper.vm.value).not.toEqual([20, 30]) + + +}) +test('test slider rules prop', async () => { + const template = `` + const wrapper = mount({ + components: { + [VarSlider.name]: VarSlider + }, + data() { + return { + value: 0, + } + }, + template, + }) + + expect(wrapper.html()).toMatchSnapshot() + + + const el = wrapper.find('.var-slider__thumb') + + await trigger(el, 'touchstart', 0, 0) + await trigger(el, 'touchmove', 0, 50) + await trigger(el, 'touchend', 0, 50) + + expect(wrapper.html()).toMatchSnapshot() +}) diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue index c6879191820..0baf858cd6c 100644 --- a/packages/varlet-ui/src/slider/example/index.vue +++ b/packages/varlet-ui/src/slider/example/index.vue @@ -47,13 +47,13 @@ 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 new file mode 100644 index 00000000000..cbe0af55300 --- /dev/null +++ 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`] = ` +"
+
组件调用
+
+
+
函数调用
+
+
+
Snackbar 类型
+
+
+
+ + + + + + + + + + +
" +`; + +exports[`test snackbar style 1`] = `"
test snackbar
"`; diff --git a/packages/varlet-ui/src/snackbar/__tests__/component.spec.js b/packages/varlet-ui/src/snackbar/__tests__/component.spec.js new file mode 100644 index 00000000000..58bb047a8eb --- /dev/null +++ b/packages/varlet-ui/src/snackbar/__tests__/component.spec.js @@ -0,0 +1,96 @@ +import Snackbar from '..' +import VarSnackbar from '../Snackbar' +import example from '../example' +import { mount } from '@vue/test-utils' +import { createApp } from 'vue' +import { delay, mockStubs } 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 = ` + + ` + 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') +}) + +test('test snackbar event', async () => { + const open = jest.fn() + const opened = jest.fn() + const close = jest.fn() + const closed = jest.fn() + const { mockRestore } = mockStubs() + + const template = ` + + Snackbar + ` + + const wrapper = mount({ + components: { + [VarSnackbar.name]: VarSnackbar + }, + data() { + return { + show: false + } + }, + methods: { + open, + opened, + close, + closed + }, + template, + }) + + await delay(0) + await wrapper.setData({ show: true }) + await delay(200) + await wrapper.setData({ show: false }) + await delay(200) + + expect(open).toHaveBeenCalledTimes(1) + expect(opened).toHaveBeenCalledTimes(1) + expect(close).toHaveBeenCalledTimes(1) + expect(closed).toHaveBeenCalledTimes(1) + + mockRestore() +}) diff --git a/packages/varlet-ui/src/snackbar/__tests__/index.spec.js b/packages/varlet-ui/src/snackbar/__tests__/index.spec.js new file mode 100644 index 00000000000..442d1dbf6bc --- /dev/null +++ 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 index 03ac741f908..a55f3a3d9c5 100644 --- 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, } }, -}) +}