Skip to content

Commit

Permalink
fix(combobox): update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@andioneto
andioneto committed Oct 7, 2021
1 parent 024c5c5 commit cf94a17
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 47 deletions.
35 changes: 15 additions & 20 deletions packages/paste-core/components/combobox/__tests__/customization.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import {render, screen} from '@testing-library/react';
import type {RenderOptions} from '@testing-library/react';
import {matchers} from 'jest-emotion';
import {CustomizationProvider} from '@twilio-paste/customization';
import type {PasteCustomCSS} from '@twilio-paste/customization';
Expand All @@ -24,6 +25,16 @@ const getStyles = (element = 'COMBOBOX'): {[key: string]: PasteCustomCSS} => ({
[`${element}_SUFFIX`]: {backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle'},
});

const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] => ({children}) => (
<CustomizationProvider
// @ts-expect-error global test variable
theme={TestTheme}
elements={getStyles(elementName)}
>
{children}
</CustomizationProvider>
);

const ComboboxToTest = ({element = 'COMBOBOX'}): React.ReactElement => (
<Combobox
items={[
Expand All @@ -45,7 +56,7 @@ const ComboboxToTest = ({element = 'COMBOBOX'}): React.ReactElement => (

describe('Combobox data-paste-element attributes', () => {
it('should set the correct attributes on all Combobox components', () => {
const {container} = render(<ComboboxToTest />);
const {container} = render(<ComboboxToTest />, {wrapper: initCustomizationWrapper()});
expect(container.querySelector('[data-paste-element="COMBOBOX"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="COMBOBOX_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="COMBOBOX_ELEMENT"]')).toBeInTheDocument();
Expand All @@ -61,7 +72,7 @@ describe('Combobox data-paste-element attributes', () => {
expect(container.querySelector('[data-paste-element="COMBOBOX_SUFFIX"]')).toBeInTheDocument();
});
it('should set the correct attributes on all Combobox components with custom element prop', () => {
const {container} = render(<ComboboxToTest element="FOO" />);
const {container} = render(<ComboboxToTest element="FOO" />, {wrapper: initCustomizationWrapper()});
expect(container.querySelector('[data-paste-element="FOO"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toBeInTheDocument();
Expand All @@ -80,15 +91,7 @@ describe('Combobox data-paste-element attributes', () => {

describe('Combobox customization', () => {
it('should add styles to Combobox', () => {
const {container} = render(
<CustomizationProvider
// @ts-expect-error global test variable
theme={TestTheme}
elements={getStyles()}
>
<ComboboxToTest />
</CustomizationProvider>
);
const {container} = render(<ComboboxToTest />, {wrapper: initCustomizationWrapper('COMBOBOX')});
expect(container.querySelector('[data-paste-element="COMBOBOX"]')).toHaveStyleRule(
'background-color',
'rgb(235,244,255)'
Expand Down Expand Up @@ -130,15 +133,7 @@ describe('Combobox customization', () => {
});

it('should add styles to Combobox with custom element attribute', () => {
const {container} = render(
<CustomizationProvider
// @ts-expect-error global test variable
theme={TestTheme}
elements={getStyles('FOO')}
>
<ComboboxToTest element="FOO" />
</CustomizationProvider>
);
const {container} = render(<ComboboxToTest element="FOO" />, {wrapper: initCustomizationWrapper('FOO')});
expect(container.querySelector('[data-paste-element="FOO"]')).toHaveStyleRule(
'background-color',
'rgb(235,244,255)'
Expand Down
59 changes: 32 additions & 27 deletions packages/paste-core/components/combobox/__tests__/index.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import * as _ from 'lodash';
import {render, screen, fireEvent} from '@testing-library/react';
import type {RenderOptions} from '@testing-library/react';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon';
Expand Down Expand Up @@ -50,23 +51,25 @@ const smallGroupedItems = [
{label: 'Design Tokens'},
];

const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => (
<Theme.Provider theme="default">{children}</Theme.Provider>
);

const ComboboxMock: React.FC = () => {
const [inputItems, setInputItems] = React.useState(items);
return (
<Theme.Provider theme="default">
<Combobox
items={inputItems}
initialIsOpen
helpText="This is the help text"
labelText="Choose a component:"
required
onInputValueChange={({inputValue}) => {
if (inputValue !== undefined) {
setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase())));
}
}}
/>
</Theme.Provider>
<Combobox
items={inputItems}
initialIsOpen
helpText="This is the help text"
labelText="Choose a component:"
required
onInputValueChange={({inputValue}) => {
if (inputValue !== undefined) {
setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase())));
}
}}
/>
);
};

Expand Down Expand Up @@ -164,52 +167,52 @@ describe('Combobox', () => {

describe('Render', () => {
it('should render a combobox with aria attributes', () => {
render(<ComboboxMock />);
render(<ComboboxMock />, {wrapper: ThemeWrapper});
const renderedCombobox = screen.getByRole('combobox');
expect(renderedCombobox.getAttribute('aria-haspopup')).toEqual('listbox');
expect(renderedCombobox.getAttribute('aria-owns')).toEqual(screen.getByRole('listbox').id);
expect(renderedCombobox.getAttribute('aria-expanded')).toEqual('true');
});

it('should render a textbox with aria attributes', () => {
render(<ComboboxMock />);
render(<ComboboxMock />, {wrapper: ThemeWrapper});
const renderedCombobox = screen.getByRole('textbox');
expect(renderedCombobox.getAttribute('aria-controls')).toEqual(screen.getByRole('listbox').id);
expect(renderedCombobox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id);
expect(renderedCombobox.getAttribute('aria-describedby')).not.toEqual('');
});

it('should render a list with aria attributes', () => {
render(<ComboboxMock />);
render(<ComboboxMock />, {wrapper: ThemeWrapper});
const renderedCombobox = screen.getByRole('listbox');
expect(renderedCombobox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id);
});

it('should render a list with unique option ids', () => {
render(<ComboboxMock />);
render(<ComboboxMock />, {wrapper: ThemeWrapper});
const renderedOptions = screen.getAllByRole('option');
const optionIDs = renderedOptions.map((option) => option.id);
const uniqueIDs = _.uniq(optionIDs);
expect(uniqueIDs.length).toEqual(optionIDs.length);
});

it('should render a label for that matches the input id', () => {
render(<ComboboxMock />);
render(<ComboboxMock />, {wrapper: ThemeWrapper});
const renderedLabel = document.querySelector('label');
const renderedTextbox = screen.getByRole('textbox');
expect(renderedLabel!.getAttribute('for')).toEqual(renderedTextbox.getAttribute('id'));
});

it('should render a required combobox', () => {
render(<ComboboxMock />);
render(<ComboboxMock />, {wrapper: ThemeWrapper});
const renderedTextbox = screen.getByRole('textbox');
expect(renderedTextbox.getAttribute('required')).toEqual('');
});
});

describe('Groups', () => {
it('should render a group of options', () => {
render(<GroupedMockCombobox />);
render(<GroupedMockCombobox />, {wrapper: ThemeWrapper});
const renderedGroups = screen.getAllByRole('group');
// check groups, group label and number of options per group
expect(renderedGroups[0].getAttribute('aria-label')).toEqual('Components');
Expand All @@ -221,7 +224,7 @@ describe('Combobox', () => {
});

it('should render any items not identified as part of the group as ungrouped options', () => {
render(<GroupedMockCombobox />);
render(<GroupedMockCombobox />, {wrapper: ThemeWrapper});
const renderedListbox = screen.getByRole('listbox');
const renderedGroups = screen.getAllByRole('group');
// check we have 3 groups
Expand All @@ -233,15 +236,17 @@ describe('Combobox', () => {
});

it('should render a listbox with groups of options that contains no duplicate ids', () => {
render(<GroupedMockCombobox />);
render(<GroupedMockCombobox />, {wrapper: ThemeWrapper});
const renderedOptions = screen.getAllByRole('option');
const optionIDs = renderedOptions.map((option) => option.id);
const uniqueIDs = _.uniq(optionIDs);
expect(uniqueIDs.length).toEqual(optionIDs.length);
});

it('should render a custom group label', () => {
render(<GroupedMockCombobox groupLabelTemplate={(groupName) => <span>hi {groupName}</span>} />);
render(<GroupedMockCombobox groupLabelTemplate={(groupName) => <span>hi {groupName}</span>} />, {
wrapper: ThemeWrapper,
});
const renderedGroups = screen.getAllByRole('group');
expect(renderedGroups[0].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
'hi Components'
Expand All @@ -255,7 +260,7 @@ describe('Combobox', () => {
});

it('should select item using keyboard', () => {
render(<GroupedMockCombobox />);
render(<GroupedMockCombobox />, {wrapper: ThemeWrapper});
// open the combobox
fireEvent.click(screen.getByRole('textbox'));
// select the third item using ArrowDown keyDown
Expand All @@ -276,7 +281,7 @@ describe('Combobox', () => {

describe('Controlled Combobox', () => {
it('should be able to clear a Combobox', () => {
render(<ControlledCombobox />);
render(<ControlledCombobox />, {wrapper: ThemeWrapper});
// open the combobox
fireEvent.click(screen.getByRole('textbox'));
// select the first item
Expand All @@ -298,7 +303,7 @@ describe('Combobox', () => {

describe('Accessibility', () => {
it('Should have no accessibility violations', async () => {
const {container} = render(<ComboboxMock />);
const {container} = render(<ComboboxMock />, {wrapper: ThemeWrapper});
const results = await axe(container, {
rules: {
// Incorrectly thinks our markup is bad for a11y.
Expand Down

0 comments on commit cf94a17

Please sign in to comment.