-
Notifications
You must be signed in to change notification settings - Fork 275
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #821 from Tencent/test/notice-bar/unit
test: add unit test for notice-bar
- Loading branch information
Showing
6 changed files
with
359 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`notice-bar props : marquee 1`] = ` | ||
<main> | ||
<t-notice-bar | ||
class="base" | ||
> | ||
<wx-view | ||
class="t-notice-bar t-notice-bar--info t-class" | ||
> | ||
<wx-view | ||
class="t-notice-bar__prefix-icon t-class-prefix-icon" | ||
bind:tap="clickPrefixIcon" | ||
> | ||
<t-icon> | ||
<wx-label | ||
class="t-class t-icon t-icon-error-circle-filled t-icon-base" | ||
style=";;" | ||
bind:tap="onTap" | ||
/> | ||
</t-icon> | ||
</wx-view> | ||
<wx-view | ||
class="t-notice-bar__content-wrap" | ||
bind:tap="clickContent" | ||
> | ||
<wx-view | ||
animation="" | ||
class="t-notice-bar__content t-class-content " | ||
> | ||
<wx-view> | ||
提示文字描述提示文字描述提示文字描述提示文字描述文 | ||
</wx-view> | ||
</wx-view> | ||
</wx-view> | ||
<wx-view | ||
class="t-notice-bar__extra t-class-extra" | ||
bind:tap="clickExtra" | ||
/> | ||
<wx-view | ||
class="t-notice-bar__suffix-icon t-class-suffix-icon" | ||
bind:tap="clickSuffixIcon" | ||
/> | ||
</wx-view> | ||
</t-notice-bar> | ||
</main> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,297 @@ | ||
import simulate from 'miniprogram-simulate'; | ||
import path from 'path'; | ||
import similateApi from 'miniprogram-simulate/src/api'; | ||
import * as Util from '../../common/utils'; | ||
|
||
// simulate提供一些基本的api,如getSystemInfoSync, createAnimation, 如果涉及到复杂的链式调用需要自行 mock | ||
global.wx = { | ||
...similateApi, | ||
}; | ||
|
||
const mockGetAnimationFrame = jest.spyOn(Util, 'getAnimationFrame'); | ||
const mockGetRect = jest.spyOn(Util, 'getRect'); | ||
|
||
// 设置每次调用函数的值 | ||
mockGetAnimationFrame.mockImplementation((cb) => { | ||
return cb(); | ||
}); | ||
|
||
// 调用函数第1次的返回值 nodeRect | ||
mockGetRect.mockImplementationOnce(() => { | ||
return { | ||
width: 350, | ||
}; | ||
}); | ||
// 调用函数第2次的返回值 warpID | ||
mockGetRect.mockImplementationOnce(() => { | ||
return { | ||
width: 313, | ||
}; | ||
}); | ||
|
||
describe('notice-bar', () => { | ||
const noticeBar = simulate.load(path.resolve(__dirname, `../notice-bar`), 't-notice-bar', { | ||
less: true, | ||
rootPath: path.resolve(__dirname, '../..'), | ||
}); | ||
jest.resetModules(); | ||
const icon = simulate.load(path.resolve(__dirname, `../../icon/icon`), 't-icon', { | ||
less: true, | ||
rootPath: path.resolve(__dirname, '../..'), | ||
}); | ||
|
||
describe('props', () => { | ||
it(': visible', () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}"></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
expect(comp.querySelector('.base >>> .t-notice-bar')).toBeDefined(); | ||
|
||
comp.setData({ | ||
visible: false, | ||
}); | ||
expect(comp.querySelector('.base >>> .t-notice-bar')).not.toBeDefined(); | ||
|
||
comp.detach(); | ||
}); | ||
|
||
it(': theme', () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}" | ||
theme="{{theme}}" | ||
></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
theme: 'info', | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
const $component = comp.querySelector('.base >>> .t-notice-bar'); | ||
expect($component.dom.getAttribute('class').includes('t-notice-bar--info')).toBeTruthy(); | ||
|
||
comp.setData({ | ||
theme: 'success', | ||
}); | ||
expect($component.dom.getAttribute('class').includes('t-notice-bar--success')).toBeTruthy(); | ||
}); | ||
|
||
it(': content', () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}" | ||
content="{{content}}"></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
content: 'notice-bar content', | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
const $noticeBar = comp.querySelector('.base'); | ||
const $content = comp.querySelector('.base >>> .t-notice-bar__content'); | ||
|
||
expect($content.dom.textContent.trim()).toBe($noticeBar.instance.data.content); | ||
}); | ||
|
||
it(': extra', () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}" | ||
extra="{{extra}}"></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
extra: 'notice-bar extra', | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
const $noticeBar = comp.querySelector('.base'); | ||
const $extra = comp.querySelector('.base >>> .t-notice-bar__extra'); | ||
|
||
expect($extra.dom.textContent.trim()).toBe($noticeBar.instance.data.extra); | ||
}); | ||
|
||
it(': prefix-icon', () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}" | ||
prefixIcon="{{prefixIcon}}"></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
prefixIcon: 'null', | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
|
||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
const $prefixIcon = comp.querySelector('.base >>> .t-notice-bar__prefix-icon'); | ||
expect($prefixIcon.dom.innerHTML).toBe(''); | ||
|
||
comp.setData({ | ||
prefixIcon: 'add', | ||
}); | ||
|
||
const iconId = simulate.load({ | ||
template: `<t-icon name="{{name}}"></t-icon>`, | ||
data: { | ||
name: 'add', | ||
}, | ||
usingComponents: { | ||
't-icon': icon, | ||
}, | ||
}); | ||
const iconComp = simulate.render(iconId); | ||
expect($prefixIcon.dom.innerHTML).toContain(iconComp.dom.innerHTML); | ||
}); | ||
|
||
const delay = 7100; | ||
it( | ||
': marquee', | ||
async () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}" | ||
marquee="{{marquee}}" | ||
content="{{content}}" | ||
></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
content: '提示文字描述提示文字描述提示文字描述提示文字描述文', | ||
// marquee: true, | ||
marquee: { | ||
speed: 80, | ||
loop: -1, | ||
delay: 0, | ||
}, | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
|
||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
await simulate.sleep(delay); // 等待 delay 后再继续后续代码的执行 | ||
|
||
expect(comp.toJSON()).toMatchSnapshot(); | ||
const $instance = comp.querySelector('.base'); | ||
const $content = comp.querySelector('.base >>> .t-notice-bar__content'); | ||
expect($content.dom.textContent.trim()).toBe($instance.data.content); | ||
|
||
// TODO: marquee 需要支持 Object && Boolean, 单测环境中,marquee值会固定为默认值 false | ||
// marquee = false, content内容开启超出换行 | ||
expect($content.dom.getAttribute('class')).not.toContain('t-notice-bar__content-wrapable'); | ||
// const componentInstance = simulate.render(noticeBar).instance; | ||
// expect(componentInstance.data.marquee).toEqual(comp.instance.data.marquee); | ||
}, | ||
delay, | ||
); | ||
}); | ||
|
||
describe('slots', () => { | ||
it(': content', () => { | ||
const text = 'content 内容'; | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base" | ||
visible="{{visible}}" | ||
> | ||
<text slot="content">{{text}}</text> | ||
</t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
text, | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
const $content = comp.querySelector('.base >>> .t-notice-bar__content'); | ||
expect($content.dom.textContent).toBe(text); | ||
}); | ||
}); | ||
|
||
describe('event', () => { | ||
let triggerName = null; | ||
const click = jest.fn((e) => { | ||
const { trigger } = e.detail; | ||
triggerName = trigger; | ||
}); | ||
|
||
it(': click', async () => { | ||
const id = simulate.load({ | ||
template: `<t-notice-bar | ||
class="base | ||
visible="{{visible}}" | ||
suffixIcon="chevron-right" | ||
extra="详情" | ||
content="提示文字描述提示文字描述提示文字描述" | ||
bind:click="click" | ||
></t-notice-bar>`, | ||
data: { | ||
visible: true, | ||
}, | ||
methods: { | ||
click, | ||
}, | ||
usingComponents: { | ||
't-notice-bar': noticeBar, | ||
}, | ||
}); | ||
const comp = simulate.render(id); | ||
comp.attach(document.createElement('parent-wrapper')); | ||
const $prefixIcon = comp.querySelector('.base >>> .t-notice-bar__prefix-icon'); | ||
const $content = comp.querySelector('.base >>> .t-notice-bar__content'); | ||
const $extra = comp.querySelector('.base >>> .t-notice-bar__extra'); | ||
const $suffixIcon = comp.querySelector('.base >>> .t-notice-bar__suffix-icon'); | ||
$prefixIcon.dispatchEvent('tap'); | ||
await simulate.sleep(0); | ||
expect(triggerName).toBe('prefix-icon'); | ||
expect(click).toHaveBeenCalledTimes(1); | ||
$content.dispatchEvent('tap'); | ||
await simulate.sleep(0); | ||
expect(triggerName).toBe('content'); | ||
expect(click).toHaveBeenCalledTimes(2); | ||
$extra.dispatchEvent('tap'); | ||
await simulate.sleep(0); | ||
expect(triggerName).toBe('extra'); | ||
expect(click).toHaveBeenCalledTimes(3); | ||
|
||
$suffixIcon.dispatchEvent('tap'); | ||
await simulate.sleep(0); | ||
expect(triggerName).toBe('suffix-icon'); | ||
expect(click).toHaveBeenCalledTimes(4); | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.