test(NoticeBar): update test cases

This commit is contained in:
chenjiahan 2021-01-02 20:19:02 +08:00
parent b6efeaf4f9
commit 4fb58297d6
3 changed files with 65 additions and 46 deletions

View File

@ -1,25 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`icon slot 1`] = `
<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">
Content
</div>
</div>Custom Right Icon</div>
`;
exports[`should not scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">foo</div>
</div>
</div>
`;
exports[`should scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
</div>
</div>
`;

View File

@ -0,0 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should not start scrolling when content width > wrap width 1`] = `
<div role="alert"
class="van-notice-bar"
>
<div role="marquee"
class="van-notice-bar__wrap"
>
<div style="transition-duration: 0s;"
class="van-notice-bar__content"
>
foo
</div>
</div>
</div>
`;
exports[`should render icon slot correct 1`] = `
<div role="alert"
class="van-notice-bar"
>
Custom Left Icon
<div role="marquee"
class="van-notice-bar__wrap"
>
<div style="transition-duration: 0s;"
class="van-notice-bar__content"
>
Content
</div>
</div>
Custom Right Icon
</div>
`;
exports[`should start scrolling when content width > wrap width 1`] = `
<div role="alert"
class="van-notice-bar"
>
<div role="marquee"
class="van-notice-bar__wrap"
>
<div style="transition-duration: 2s; transform: translateX(-100px);"
class="van-notice-bar__content"
>
foo
</div>
</div>
</div>
`;

View File

@ -1,14 +1,7 @@
import NoticeBar from '..'; import NoticeBar from '..';
import { mount, later } from '../../../test'; import { mount, later } from '../../../test';
test('click event', () => { test('should emit close event when close icon is clicked', () => {
const wrapper = mount(NoticeBar);
wrapper.trigger('click');
expect(wrapper.emitted('click')[0][0]).toBeTruthy();
});
test('close event', () => {
const wrapper = mount(NoticeBar, { const wrapper = mount(NoticeBar, {
props: { props: {
mode: 'closeable', mode: 'closeable',
@ -20,24 +13,24 @@ test('close event', () => {
expect(wrapper.emitted('close')[0][0]).toBeTruthy(); expect(wrapper.emitted('close')[0][0]).toBeTruthy();
}); });
test('icon slot', () => { test('should render icon slot correct', () => {
const wrapper = mount({ const wrapper = mount({
template: ` render: () => (
<notice-bar> <NoticeBar
v-slots={{
'left-icon': () => 'Custom Left Icon',
'right-icon': () => 'Custom Right Icon',
}}
>
Content Content
<template v-slot:left-icon>Custom Left Icon</template> </NoticeBar>
<template v-slot:right-icon>Custom Right Icon</template> ),
</notice-bar>
`,
components: {
NoticeBar,
},
}); });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('replay event', async () => { test('should emit replay event after replay', async () => {
const wrapper = mount(NoticeBar, { const wrapper = mount(NoticeBar, {
props: { props: {
text: 'foo', text: 'foo',
@ -49,7 +42,7 @@ test('replay event', async () => {
expect(wrapper.emitted('replay')).toBeTruthy(); expect(wrapper.emitted('replay')).toBeTruthy();
}); });
test('should scroll when content width > wrap width ', async () => { test('should start scrolling when content width > wrap width ', async () => {
const wrapper = mount(NoticeBar, { const wrapper = mount(NoticeBar, {
props: { props: {
text: 'foo', text: 'foo',
@ -72,7 +65,7 @@ test('should scroll when content width > wrap width ', async () => {
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
test('should not scroll when content width > wrap width ', async () => { test('should not start scrolling when content width > wrap width ', async () => {
const wrapper = mount(NoticeBar, { const wrapper = mount(NoticeBar, {
props: { props: {
text: 'foo', text: 'foo',