Skip to content

Commit

Permalink
test: fix baseTabsPanel test
Browse files Browse the repository at this point in the history
  • Loading branch information
@albertjcuac
albertjcuac committed Aug 15, 2024
1 parent e11f735 commit 266b349
Showing 1 changed file with 30 additions and 34 deletions.
64 changes: 30 additions & 34 deletions packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Vue from 'vue';
import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
import { getDataTestSelector } from '../../../__tests__/utils';
import BaseTabsPanel from '../base-tabs-panel.vue';
import { nextTick } from 'vue';

/**
* Function that returns a BaseTabsPanel wrapper. The animation prop is not
Expand All @@ -21,19 +21,16 @@ function renderBaseTabsPanel({
tabClass,
tabsListClass
}: RenderBaseTabsPanelOptions = {}): RenderBaseTabsPanelAPI {
const localVue = createLocalVue();

const wrapper = mount(BaseTabsPanel, {
localVue,
propsData: {
props: {
activeTabClass,
allowTabDeselect,
contentClass,
initialTab,
tabClass,
tabsListClass
},
scopedSlots: {
slots: {
...slots,
...tabs
}
Expand All @@ -42,8 +39,8 @@ function renderBaseTabsPanel({
return {
wrapper,
clickNthTab: (nth: number) => {
wrapper.findAll(getDataTestSelector('base-tabs-panel-button')).at(nth).trigger('click');
return localVue.nextTick();
wrapper.findAll(getDataTestSelector('base-tabs-panel-button')).at(nth)?.trigger('click');
return nextTick();
},
getBaseTabsPanel: () => wrapper.find(getDataTestSelector('base-tabs-panel')),
getTabPanel: () => wrapper.find(getDataTestSelector('base-tabs-panel-content')),
Expand All @@ -55,7 +52,6 @@ function renderBaseTabsPanel({
describe('testing BaseTabsPanel', () => {
it('does not render anything when no tabs are defined in the template', () => {
const { getBaseTabsPanel } = renderBaseTabsPanel();

expect(getBaseTabsPanel().exists()).toBe(false);
});

Expand Down Expand Up @@ -140,7 +136,7 @@ describe('testing BaseTabsPanel', () => {
});

expect(getTabsButtons()).toHaveLength(1);
expect(getTabsButtons().at(0).text()).toBe('summer');
expect(getTabsButtons().at(0)?.text()).toBe('summer');
});

it('renders a custom `tab` slot properly', async () => {
Expand All @@ -158,11 +154,11 @@ describe('testing BaseTabsPanel', () => {
});

expect(getTabsButtons()).toHaveLength(1);
expect(getTabsButtons().at(0).text()).toBe('custom summer tab');
expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab');

// Select first tab
await clickNthTab(0);
expect(getTabsButtons().at(0).text()).toBe('custom summer tab ✅');
expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab ✅');
});

it('renders a custom `tab-content` slot properly', async () => {
Expand All @@ -178,11 +174,11 @@ describe('testing BaseTabsPanel', () => {
});

expect(getTabsButtons()).toHaveLength(1);
expect(getTabsButtons().at(0).text()).toBe('custom summer tab content');
expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab content');

// Select first tab
await clickNthTab(0);
expect(getTabsButtons().at(0).text()).toBe('custom summer tab content ✅');
expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab content ✅');
});

it('changes the selected tab on click', async () => {
Expand All @@ -197,13 +193,13 @@ describe('testing BaseTabsPanel', () => {
});

// First tab is selected initially
expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');

// Select third tab
await clickNthTab(2);
expect(getTabsButtons().at(2).element).toHaveClass('selected-tab');
expect(getTabsButtons().at(2).element).toHaveAttribute('aria-selected', 'true');
expect(getTabsButtons().at(2)?.element).toHaveClass('selected-tab');
expect(getTabsButtons().at(2)?.element).toHaveAttribute('aria-selected', 'true');

// The third panel is the rendered one
expect(getTabPanel().text()).toBe('Top Outlet sales');
Expand All @@ -221,13 +217,13 @@ describe('testing BaseTabsPanel', () => {
});

// First tab is selected initially
expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');

// Select again first tab
await clickNthTab(0);
expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');

// The first panel is the rendered one
expect(getTabPanel().text()).toBe('Top Summer sales');
Expand All @@ -246,13 +242,13 @@ describe('testing BaseTabsPanel', () => {
});

// First tab is selected initially
expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');

// Select again first tab
await clickNthTab(0);
expect(getTabsButtons().at(0).element).not.toHaveClass('selected-tab');
expect(getTabsButtons().at(0).element).not.toHaveAttribute('aria-selected', 'true');
expect(getTabsButtons().at(0)?.element).not.toHaveClass('selected-tab');
expect(getTabsButtons().at(0)?.element).not.toHaveAttribute('aria-selected', 'true');

// The panel is not rendered
expect(getTabPanel().exists()).toBe(false);
Expand All @@ -271,8 +267,8 @@ describe('testing BaseTabsPanel', () => {
tabsListClass: 'tabs-list'
});

expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
expect(getTabsButtons().at(1).element).toHaveClass('tab-button');
expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
expect(getTabsButtons().at(1)?.element).toHaveClass('tab-button');
expect(getTabPanel().element).toHaveClass('tab-panel');
expect(getTabsList().element).toHaveClass('tabs-list');
});
Expand All @@ -299,15 +295,15 @@ interface RenderBaseTabsPanelOptions {

interface RenderBaseTabsPanelAPI {
/** The Vue testing utils wrapper for the {@link BaseTabsPanel}. */
wrapper: Wrapper<Vue>;
wrapper: VueWrapper;
/** Clicks the nth tab button and waits for the view to update. */
clickNthTab: (nth: number) => Promise<void>;
/** Returns the BaseTabsPanel. */
getBaseTabsPanel: () => Wrapper<Vue>;
getBaseTabsPanel: () => DOMWrapper<Element>;
/** Returns the selected tab panel. */
getTabPanel: () => Wrapper<Vue>;
getTabPanel: () => DOMWrapper<Element>;
/** Returns the tabs buttons. */
getTabsButtons: () => WrapperArray<Vue>;
getTabsButtons: () => DOMWrapper<Element>[];
/** Returns the tabs list. */
getTabsList: () => Wrapper<Vue>;
getTabsList: () => DOMWrapper<Element>;
}

0 comments on commit 266b349

Please sign in to comment.