- fix TabView.spec.js

pull/6170/head
uros 2024-08-01 23:30:00 +02:00
parent b94a4b23a0
commit a2bb913294
1 changed files with 29 additions and 28 deletions

View File

@ -33,42 +33,43 @@ describe('TabPanel.vue', () => {
it('should exist', () => {
expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true);
expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true);
expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(3);
expect(wrapper.findAll('a.p-tabview-tab-header').length).toBe(3);
expect(wrapper.findAll('.p-tabview-panel').length).toBe(3);
expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight');
expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-tabview-tablist-item-active');
expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;');
});
it('should change the active item', async () => {
await wrapper.vm.onTabClick({}, 1);
expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-tabview-header');
// expect(wrapper.findAll('li[role="presentation"]')[1].classes()).toContain('p-tabview-header');
expect(wrapper.findAll('.p-tabview-panel')[0].attributes().style).toBe('display: none;');
});
});
describe('dynamic tabs', () => {
it('should exist', () => {
const wrapper = mount(TabView, {
global: {
components: {
TabPanel
}
},
slots: {
default: `
<TabPanel v-for="tab in Array.from({ length: 5 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))" :key="tab.title" :header="tab.title">
<p>{{tab.content}}</p>
</TabPanel>
`
}
});
expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true);
expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true);
expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(5);
expect(wrapper.findAll('.p-tabview-panel').length).toBe(5);
expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight');
expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;');
});
});
// todo deprecate?
// describe('dynamic tabs', () => {
// it('should exist', () => {
// const wrapper = mount(TabView, {
// global: {
// components: {
// TabPanel
// }
// },
// slots: {
// default: `
// <TabPanel v-for="tab in Array.from({ length: 5 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))" :key="tab.title" :header="tab.title">
// <p>{{tab.content}}</p>
// </TabPanel>
// `
// }
// });
//
// expect(wrapper.find('.p-tabview.p-component').exists()).toBe(true);
// expect(wrapper.find('.p-tabview-ink-bar').exists()).toBe(true);
// expect(wrapper.findAll('a.p-tabview-nav-link').length).toBe(5);
// expect(wrapper.findAll('.p-tabview-panel').length).toBe(5);
// expect(wrapper.findAll('li[role="presentation"]')[0].classes()).toContain('p-highlight');
// expect(wrapper.findAll('.p-tabview-panel')[1].attributes().style).toBe('display: none;');
// });
// });