@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
105 lines (104 loc) • 7.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createRef } from 'react';
import { Tabs } from './Tabs';
import '@testing-library/jest-dom';
describe('Tabs', () => {
it('renders', () => {
const { container } = render(_jsx(Tabs, {}));
const component = container.querySelector(':only-child');
expect(component).toBeInTheDocument();
expect(component).toBeVisible();
});
it('renders a design system BEM class name', () => {
const { container } = render(_jsx(Tabs, {}));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-tabs');
});
it('renders an extra class name', () => {
const { container } = render(_jsx(Tabs, { className: "extra" }));
const component = container.querySelector(':only-child');
expect(component).toHaveClass('ams-tabs extra');
});
it('supports ForwardRef in React', () => {
const ref = createRef();
const { container } = render(_jsx(Tabs, { ref: ref }));
const component = container.querySelector(':only-child');
expect(ref.current).toBe(component);
});
it('supports children', () => {
render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" })] }));
expect(screen.getByRole('tablist')).toBeInTheDocument();
expect(screen.getByRole('tab', { selected: true })).toBeInTheDocument();
expect(screen.getByRole('tabpanel')).toBeInTheDocument();
});
it('should select a tab when clicked', async () => {
const user = userEvent.setup();
render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" })] }));
const tabOne = screen.getByRole('tab', { name: 'Tab 1' });
const tabTwo = screen.getByRole('tab', { name: 'Tab 2' });
expect(tabOne).toHaveAttribute('aria-selected', 'true');
expect(tabOne).toHaveAttribute('tabindex', '0');
expect(tabTwo).toHaveAttribute('aria-selected', 'false');
expect(tabTwo).toHaveAttribute('tabindex', '-1');
expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 1');
if (tabTwo) {
await user.click(tabTwo);
}
expect(tabOne).toHaveAttribute('aria-selected', 'false');
expect(tabOne).toHaveAttribute('tabindex', '-1');
expect(tabTwo).toHaveAttribute('aria-selected', 'true');
expect(tabTwo).toHaveAttribute('tabindex', '0');
expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 2');
});
it('calls onTabChange with the newly activated tab', async () => {
const user = userEvent.setup();
const onTabChange = jest.fn();
render(_jsx(Tabs, { onTabChange: onTabChange, children: _jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }) }) }));
const button = screen.getByRole('tab', { name: 'Tab 1' });
await user.click(button);
expect(onTabChange).toHaveBeenCalledWith('one');
});
it('should be able to set the initially active tab', () => {
render(_jsxs(Tabs, { activeTab: "three", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" }), _jsx(Tabs.Button, { "aria-controls": "three", children: "Tab 3" }), _jsx(Tabs.Button, { "aria-controls": "four", children: "Tab 4" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" }), _jsx(Tabs.Panel, { id: "three", children: "Content 3" }), _jsx(Tabs.Panel, { id: "four", children: "Content 4" })] }));
const tabOne = screen.getByRole('tab', { name: 'Tab 1' });
const tabThree = screen.getByRole('tab', { name: 'Tab 3' });
expect(tabOne).toHaveAttribute('aria-selected', 'false');
expect(tabOne).toHaveAttribute('tabindex', '-1');
expect(tabThree).toHaveAttribute('aria-selected', 'true');
expect(tabThree).toHaveAttribute('tabindex', '0');
expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 3');
});
it('should set the first tab as the initially active tab when the supplied active tab does not exist', async () => {
// Disable console.warn for this test, to prevent it from cluttering the test output
jest.spyOn(console, 'warn').mockImplementation(() => { });
render(_jsxs(Tabs, { activeTab: "unknown", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" }), _jsx(Tabs.Button, { "aria-controls": "three", children: "Tab 3" }), _jsx(Tabs.Button, { "aria-controls": "four", children: "Tab 4" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" }), _jsx(Tabs.Panel, { id: "three", children: "Content 3" }), _jsx(Tabs.Panel, { id: "four", children: "Content 4" })] }));
const firstTab = screen.getByRole('tab', { name: 'Tab 1' });
const lastTab = screen.getByRole('tab', { name: 'Tab 4' });
expect(firstTab).toHaveAttribute('aria-selected', 'true');
expect(firstTab).toHaveAttribute('tabindex', '0');
expect(lastTab).toHaveAttribute('aria-selected', 'false');
expect(lastTab).toHaveAttribute('tabindex', '-1');
expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 1');
});
it('sets focus on Tabs buttons when using arrow keys', async () => {
const user = userEvent.setup();
render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" }), _jsx(Tabs.Button, { "aria-controls": "three", children: "Tab 3" })] }), _jsx(Tabs.Panel, { id: "one" }), _jsx(Tabs.Panel, { id: "two" }), _jsx(Tabs.Panel, { id: "three" })] }));
const firstButton = screen.getByRole('tab', { name: 'Tab 1' });
const thirdButton = screen.getByRole('tab', { name: 'Tab 3' });
await user.click(firstButton);
expect(firstButton).toHaveFocus();
// Click the right arrow key twice
await user.keyboard('{ArrowRight}');
await user.keyboard('{ArrowRight}');
expect(thirdButton).toHaveFocus();
expect(firstButton).not.toHaveFocus();
await user.keyboard('{ArrowRight}');
expect(firstButton).toHaveFocus();
});
});