From ffc39bd186cbc7139d9c7b67f5b36e405ebfdcd7 Mon Sep 17 00:00:00 2001 From: Carlos Frias Date: Wed, 8 Nov 2023 11:49:56 -0300 Subject: [PATCH] test(tabs): include unit test for Tabs components --- .../src/components/Tabs/index.stories.tsx | 4 +- .../react/src/components/Tabs/index.test.tsx | 236 ++++++------------ 2 files changed, 76 insertions(+), 164 deletions(-) diff --git a/packages/react/src/components/Tabs/index.stories.tsx b/packages/react/src/components/Tabs/index.stories.tsx index 0f2732de6..5f54bd924 100644 --- a/packages/react/src/components/Tabs/index.stories.tsx +++ b/packages/react/src/components/Tabs/index.stories.tsx @@ -22,9 +22,9 @@ export default { export const Uncontrolled = () => (
- + - Cats + Cats Dogs Horses Cows diff --git a/packages/react/src/components/Tabs/index.test.tsx b/packages/react/src/components/Tabs/index.test.tsx index a16053fc7..3fd9b2829 100644 --- a/packages/react/src/components/Tabs/index.test.tsx +++ b/packages/react/src/components/Tabs/index.test.tsx @@ -1,162 +1,74 @@ -// import test from 'ava'; -// import React from 'react'; -// import { -// cleanup, render, fireEvent, screen, -// } from '@testing-library/react'; -// import { -// Tabs, Tab, TabList, TabPanels, TabPanel, -// } from '.'; -// import { shortContent } from './modal.fixtures'; - -// test.afterEach(cleanup); - -// test('the default modal contains focus when open', (t) => { -// render({shortContent}); -// t.true(screen.getByRole('dialog').contains(document.activeElement)); -// }); - -// test('a modal without the default close button contains focus when open', (t) => { -// render({shortContent}); -// t.true(screen.getByRole('dialog').contains(document.activeElement)); -// }); - -// test('a modal with no focusable elements still contains focus when open', (t) => { -// render(( -// -// {shortContent} -// -// )); -// t.true(screen.getByRole('dialog').contains(document.activeElement)); -// }); - -// test('the initially focused element can be chosen before render', (t) => { -// const testId = 'focused'; -// const InitiallyFocused = () => { -// const [el, setEl] = React.useState(null); -// return ( -// -// {shortContent} -// -// -// ); -// }; - -// render(); -// t.is(document.activeElement, screen.getByTestId(testId)); -// }); - -// // fixture for inner focus tests -// const InnerFocus = () => ( -// -// -// -// -// )} -// > -// -// {shortContent} -// -// ); - -// test('`Shift + Tab` wraps focus when on the first focusable element', (t) => { -// render(); -// fireEvent.keyDown(document.activeElement, { key: 'Tab', shiftKey: true }); -// t.is(document.activeElement, screen.getByTestId('last')); -// }); - -// test('`Tab` wraps focus when on the last focusable element', (t) => { -// render(); -// const lastEl = screen.getByTestId('last'); -// lastEl.focus(); -// fireEvent.keyDown(document.activeElement, { key: 'Tab', shiftKey: false }); -// t.is(document.activeElement, screen.getByTestId('first')); -// }); - -// // fixture for controlled open tests -// // eslint-disable-next-line react/require-default-props -// const Controlled = ({ isOpen: openProp = false }: { isOpen?: boolean }) => { -// const [isOpen, setOpen] = React.useState(openProp); -// const toggle = () => setOpen(!isOpen); -// return ( -// <> -// -// -// {shortContent} -// -// -// ); -// }; - -// test('the modal can be closed by clicking the internal close button', (t) => { -// render(); -// fireEvent.click(document.activeElement); -// t.falsy(screen.queryByRole('dialog')); -// }); - -// test('the modal can be closed by clicking the backdrop', (t) => { -// render(); -// fireEvent.click(screen.getByRole('dialog').parentElement); -// t.falsy(screen.queryByRole('dialog')); -// }); - -// test('the modal can be closed with the `Escape` key', (t) => { -// render(); -// fireEvent.keyDown(document.activeElement, { key: 'Escape' }); -// t.falsy(screen.queryByRole('dialog')); -// }); - -// test('the modal cannot be closed by releasing the click from inside the dialog -// to outside', (t) => { -// render(); -// fireEvent.pointerDown(screen.getByRole('dialog')); -// fireEvent.pointerUp(screen.getByRole('dialog').parentElement); -// t.truthy(screen.queryByRole('dialog')); -// }); - -// test('on close, focus returns to the element that opened the modal', (t) => { -// render(); -// const trigger = screen.getByTestId('trigger'); -// // force focus on the trigger since fireEvent.click doesn't simulate it -// trigger.focus(); -// // open the modal -// fireEvent.click(trigger); -// // close the modal -// fireEvent.keyDown(document.activeElement, { key: 'Escape' }); - -// t.is(document.activeElement, trigger); -// }); - -// test('existing body styles are preserved when the modal closes', (t) => { -// document.body.style.overflow = 'visible'; -// const bodyCSSText = document.body.style.cssText; - -// render(); - -// // body styles should be overwritten on open -// t.not(document.body.style.cssText, bodyCSSText); - -// fireEvent.click(document.activeElement); - -// // and restored on close -// t.is(document.body.style.cssText, bodyCSSText); -// }); +import test from 'ava'; +import React from 'react'; +import { + cleanup, render, fireEvent, screen, +} from '@testing-library/react'; +import { + Tabs, Tab, TabList, TabPanels, TabPanel, +} from '.'; + +test.beforeEach(() => { + global.ResizeObserver = function ResizeObserver() { + return { + observe: () => {}, + disconnect: () => {}, + }; + } as any; +}); + +test.afterEach(cleanup); + +test('clicking on tabs, switches panels', (t) => { + render( + + + Cats + Dogs + + + Cats content + Dogs content + + , + ); + + // Cats is selected by default + const catsTab = screen.getByRole('tab', { name: 'Cats' }); + t.true(catsTab.getAttribute('aria-selected') === 'true'); + const catsPanel = screen.queryByRole('tabpanel', { name: 'Cats' }); + t.true(catsPanel !== null); + + // TabPanel changes when click on Dogs Tab + const dogsTab = screen.getByRole('tab', { name: 'Dogs' }); + fireEvent.click(dogsTab); + + const dogsPanel = screen.queryByRole('tabpanel', { name: 'Dogs' }); + t.true(dogsPanel !== null); +}); + +test('clicking on disabled tab, will not switch panel', (t) => { + render( + + + Cats + Dogs + + + Cats content + Dogs content + + , + ); + + // TabPanel changes when click on Dogs Tab + const dogsTab = screen.getByRole('tab', { name: 'Dogs' }); + t.true((dogsTab as HTMLButtonElement).disabled === true); + fireEvent.click(dogsTab); + + const catsPanel = screen.queryByRole('tabpanel', { name: 'Cats' }); + t.true(catsPanel !== null); +}); + +test.skip('when first tab disabled, default panel must be valid', () => { + // TBD +});