diff --git a/packages/varlet-ui/src/tabs/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/tabs/__tests__/__snapshots__/index.spec.js.snap deleted file mode 100644 index 47a6c60bbbf..00000000000 --- a/packages/varlet-ui/src/tabs/__tests__/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`test tabs active 1`] = ` -" -
-
-
选项1
-
选项2
-
选项3
-
-
-
- -
-
-
-
-
视图3
-
- -
" -`; - -exports[`test tabs disabled 1`] = ` -" -
-
-
选项1
-
选项2
-
选项3
-
-
-
-" -`; - -exports[`test tabs relation tabsItems 1`] = ` -" -
-
-
选项1
-
选项2
-
选项3
-
-
-
- -
-
-
-
-
视图3
-
- -
" -`; - -exports[`test tabs relation tabsItems 2`] = ` -" -
-
-
选项1
-
选项2
-
选项3
-
-
-
- -
-
-
-
视图2
-
视图3
-
- -
" -`; diff --git a/packages/varlet-ui/src/tabs/__tests__/index.spec.js b/packages/varlet-ui/src/tabs/__tests__/index.spec.js index a15b491b620..297a106ab7a 100644 --- a/packages/varlet-ui/src/tabs/__tests__/index.spec.js +++ b/packages/varlet-ui/src/tabs/__tests__/index.spec.js @@ -23,14 +23,6 @@ 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, @@ -38,141 +30,198 @@ const Wrapper = { [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: ` - 选项1 - 选项2 - 选项3 + tab 1 + tab 2 + tab 3 - - 视图1 - 视图2 - 视图3 + + tab item 1 + tab item 2 + tab item 3 `, } -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: ` - - 选项1 - 选项2 - 选项3 - - `, - } + 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: ` - - 选项1 - 选项2 - 选项3 - - `, + 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() + }) })