Skip to content

Commit

Permalink
test(tabs): Update this tabs component unit test. (#594)
Browse files Browse the repository at this point in the history
  • Loading branch information
songjianet authored Jun 1, 2022
1 parent e97e869 commit fec4584
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 179 deletions.

This file was deleted.

253 changes: 151 additions & 102 deletions packages/varlet-ui/src/tabs/__tests__/index.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,156 +23,205 @@ afterEach(() => {

mockOffset()

test('test tabs & tab & tabsItems & tabItem plugin', () => {
const app = createApp({}).use(Tabs).use(Tab).use(TabsItems).use(TabItem)
expect(app.component(Tabs.name)).toBeTruthy()
expect(app.component(Tab.name)).toBeTruthy()
expect(app.component(TabsItems.name)).toBeTruthy()
expect(app.component(TabItem.name)).toBeTruthy()
})

const Wrapper = {
components: {
[VarTabs.name]: VarTabs,
[VarTab.name]: VarTab,
[VarTabsItems.name]: VarTabsItems,
[VarTabItem.name]: VarTabItem,
},
props: ['onClick', 'onChange'],
props: [
'onClick',
'onChange',
'layoutDirection',
'itemDirection',
'fixedBottom',
'color',
'activeColor',
'inactiveColor',
'disabledColor',
'indicatorColor',
'indicatorSize',
'elevation',
'safeArea',
],
data: () => ({
active: 2,
}),
template: `
<var-tabs v-model:active="active" v-bind="$props">
<var-tab style="width: 100px">选项1</var-tab>
<var-tab style="width: 100px">选项2</var-tab>
<var-tab style="width: 100px">选项3</var-tab>
<var-tab style="width: 100px">tab 1</var-tab>
<var-tab disabled style="width: 100px">tab 2</var-tab>
<var-tab style="width: 100px">tab 3</var-tab>
</var-tabs>
<var-tabs-items :active="active">
<var-tab-item>视图1</var-tab-item>
<var-tab-item>视图2</var-tab-item>
<var-tab-item>视图3</var-tab-item>
<var-tabs-items>
<var-tab-item>tab item 1</var-tab-item>
<var-tab-item>tab item 2</var-tab-item>
<var-tab-item>tab item 3</var-tab-item>
</var-tabs-items>
`,
}

test('test tabs active', async () => {
const wrapper = mount(Wrapper)
await delay(200)
expect(wrapper.html()).toMatchSnapshot()
wrapper.unmount()
test('test tabs & tab & tabsItems & tabItem plugin', () => {
const app = createApp({}).use(Tabs).use(Tab).use(TabsItems).use(TabItem)
expect(app.component(Tabs.name)).toBeTruthy()
expect(app.component(Tab.name)).toBeTruthy()
expect(app.component(TabsItems.name)).toBeTruthy()
expect(app.component(TabItem.name)).toBeTruthy()
})

test('test tabs match index', async () => {
test('test tabs event', async () => {
const onClick = jest.fn()
const onChange = jest.fn()

const wrapper = mount(Wrapper, {
props: {
onClick,
onChange,
},
})
await delay(100)

const tab = wrapper.find('.var-tab')
await tab.trigger('click')
await delay(100)
await wrapper.find('.var-tab').trigger('click')
expect(onClick).toHaveBeenLastCalledWith(0)
expect(onChange).toHaveBeenLastCalledWith(0)
wrapper.unmount()
})

test('test tabs match name', async () => {
const onClick = jest.fn()
const onChange = jest.fn()
describe('test tabs component props', () => {
test('test tabs layout-direction', async () => {
const wrapper = mount(Wrapper, {
props: {
layoutDirection: 'horizontal',
},
})

expect(wrapper.find('.var-tabs--layout-horizontal').exists()).toBe(true)
await wrapper.setProps({ layoutDirection: 'vertical' })
expect(wrapper.find('.var-tabs--layout-vertical').exists()).toBe(true)
wrapper.unmount()
})

const Wrapper = {
components: {
[VarTabs.name]: VarTabs,
[VarTab.name]: VarTab,
},
props: ['onClick', 'onChange'],
data: () => ({
active: '选项3',
}),
template: `
<var-tabs v-model:active="active" v-bind="$props">
<var-tab name="选项1" style="width: 100px">选项1</var-tab>
<var-tab name="选项2" style="width: 100px">选项2</var-tab>
<var-tab name="选项3" style="width: 100px">选项3</var-tab>
</var-tabs>
`,
}
test('test tabs item-direction', async () => {
const wrapper = mount(Wrapper, {
props: {
itemDirection: 'horizontal',
},
})

expect(wrapper.find('.var-tabs--item-horizontal').exists()).toBe(true)
await wrapper.setProps({ itemDirection: 'vertical' })
expect(wrapper.find('.var-tabs--item-vertical').exists()).toBe(true)
wrapper.unmount()
})

const wrapper = mount(Wrapper, {
props: {
onClick,
onChange,
},
test('test tabs fixed-bottom', async () => {
const wrapper = mount(Wrapper, {
props: {
fixedBottom: true,
},
})

expect(wrapper.find('.var-tabs--fixed-bottom').exists()).toBe(true)
await wrapper.setProps({ fixedBottom: false })
expect(wrapper.find('.var-tabs--fixed-bottom').exists()).toBe(false)
wrapper.unmount()
})

await delay(100)
const tab = wrapper.find('.var-tab')
await tab.trigger('click')
expect(onClick).toHaveBeenLastCalledWith('选项1')
expect(onChange).toHaveBeenLastCalledWith('选项1')
wrapper.unmount()
})
test('test tabs color', () => {
const wrapper = mount(Wrapper, {
props: {
color: 'red',
},
})

test('test tabs match boundary', async () => {
const onChange = jest.fn()
expect(wrapper.find('.var-tabs').attributes('style')).toContain('background: red;')
wrapper.unmount()
})

const wrapper = mount(Wrapper, {
props: { onChange },
test('test tabs active-color', async () => {
const wrapper = mount(Wrapper, {
props: {
activeColor: 'red',
},
})

await delay(100)
expect(wrapper.find('.var-tab--active').attributes('style')).toContain('color: red;')
wrapper.unmount()
})

await delay(100)
await wrapper.setData({ active: -1 })
expect(onChange).toHaveBeenCalledTimes(0)
expect(wrapper.vm.active).toBe(0)
wrapper.unmount()
})
test('test tabs inactive-color', async () => {
const wrapper = mount(Wrapper, {
props: {
inactiveColor: 'red',
},
})

test('test tabs disabled', async () => {
const onClick = jest.fn()
const onChange = jest.fn()
await delay(100)
expect(wrapper.find('.var-tab--inactive').attributes('style')).toContain('color: red;')
wrapper.unmount()
})

const wrapper = mount({
components: {
[VarTabs.name]: VarTabs,
[VarTab.name]: VarTab,
},
data: () => ({
active: 1,
}),
template: `
<var-tabs v-model="active">
<var-tab disabled>选项1</var-tab>
<var-tab>选项2</var-tab>
<var-tab>选项3</var-tab>
</var-tabs>
`,
test('test tabs disabled-color', () => {
const wrapper = mount(Wrapper, {
props: {
disabledColor: 'red',
},
})

expect(wrapper.find('.var-tab--disabled').attributes('style')).toContain('color: red;')
wrapper.unmount()
})

await delay(100)
expect(wrapper.html()).toMatchSnapshot()
test('test tabs indicator-color', async () => {
const wrapper = mount(Wrapper, {
props: {
indicatorColor: 'red',
},
})

const tab = wrapper.find('.var-tab')
await tab.trigger('click')
expect(onClick).toHaveBeenCalledTimes(0)
expect(onChange).toHaveBeenCalledTimes(0)
wrapper.unmount()
})
await delay(100)
expect(wrapper.find('.var-tabs--layout-horizontal-indicator').attributes('style')).toContain('background: red;')
wrapper.unmount()
})

test('test tabs relation tabsItems', async () => {
const wrapper = mount(Wrapper)
test('test tabs indicator-size', async () => {
const wrapper = mount(Wrapper, {
props: {
indicatorSize: '10px',
},
})

expect(wrapper.find('.var-tabs--layout-horizontal-indicator').attributes('style')).toContain('height: 10px;')
await wrapper.setProps({ indicatorSize: 4 })
expect(wrapper.find('.var-tabs--layout-horizontal-indicator').attributes('style')).toContain('height: 4px;')
wrapper.unmount()
})

await delay(100)
expect(wrapper.html()).toMatchSnapshot()
test('test tabs elevation', async () => {
const wrapper = mount(Wrapper, {
props: {
elevation: true,
},
})

expect(wrapper.find('.var-elevation--4').exists()).toBe(true)
await wrapper.setProps({ elevation: false })
expect(wrapper.find('.var-elevation--4').exists()).toBe(false)
wrapper.unmount()
})

await wrapper.setData({ active: 1 })
await delay(50)
expect(wrapper.html()).toMatchSnapshot()
wrapper.unmount()
test('test tabs safe-area', async () => {
const wrapper = mount(Wrapper, {
props: {
safeArea: true,
},
})

expect(wrapper.find('.var-tabs--safe-area').exists()).toBe(true)
await wrapper.setProps({ safeArea: false })
expect(wrapper.find('.var-tabs--safe-area').exists()).toBe(false)
wrapper.unmount()
})
})

0 comments on commit fec4584

Please sign in to comment.