Skip to content

Commit

Permalink
fix: removed changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@guidari
guidari committed Sep 4, 2024
1 parent d17c779 commit d224879
Show file tree
Hide file tree
Showing 5 changed files with 276 additions and 19 deletions.
5 changes: 0 additions & 5 deletions packages/react/src/components/ListBox/ListBoxField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,6 @@ function ListBoxField({
}: ListBoxFieldProps) {
const prefix = usePrefix();

const sumTest = (x, y) => {
const result = x + y;
return result;
};

return (
<div
className={`${prefix}--list-box__field`}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/MultiSelect/MultiSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,7 @@ const MultiSelect = React.forwardRef(
};

/**
* programmatically control this `open` propA
* programmatically control this `open` prop
*/
if (prevOpenProp !== open) {
setIsOpenWrapper(open);
Expand Down
274 changes: 274 additions & 0 deletions packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,280 @@ describe('MultiSelect', () => {
await expect(container).toHaveNoACViolations('MultiSelect');
});
});
it('does not render items with undefined values', async () => {
const items = [{ text: 'joey' }, { text: 'johnny' }, { text: undefined }];
const label = 'test-label';
render(
<MultiSelect
id="custom-id"
label={label}
items={items}
itemToString={(item) => (item ? item.text : '')}
/>
);
await waitForPosition();

const labelNode = screen.getByRole('combobox');
await userEvent.click(labelNode);

expect(screen.getByRole('option', { name: 'joey' })).toBeInTheDocument();
expect(screen.getByRole('option', { name: 'johnny' })).toBeInTheDocument();
expect(
screen.queryByRole('option', { name: 'undefined' })
).not.toBeInTheDocument();
});

it('should initially render with a given label', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);
expect(isElementVisible(labelNode)).toBe(true);

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeNull();
});

it('should open the menu when a user clicks on the label', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);
await userEvent.click(labelNode);

expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-expanded',
'true'
);
expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-haspopup',
'listbox'
);
});

it('should open the menu when a user hits space while the field is focused', async () => {
const items = generateItems(4, generateGenericItem);
render(<MultiSelect id="test" label="test-label" items={items} />);
await waitForPosition();

await userEvent.tab();
await userEvent.keyboard('[Space]');

expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-expanded',
'true'
);
expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-haspopup',
'listbox'
);
});

it('should open the menu when a user hits enter while the field is focused', async () => {
const items = generateItems(4, generateGenericItem);
render(<MultiSelect id="test" label="test-label" items={items} />);
await waitForPosition();

await userEvent.tab();
await userEvent.keyboard('[Enter]');

expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-expanded',
'true'
);
expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-haspopup',
'listbox'
);
});

it('should let the user toggle item selection with a mouse', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);
await userEvent.click(labelNode);

const [item] = items;
// eslint-disable-next-line testing-library/prefer-screen-queries
const itemNode = getByText(container, item.label);

expect(
// eslint-disable-next-line testing-library/no-node-access
document.querySelector('[aria-selected="true"][role="option"]')
).toBeNull();

await userEvent.click(itemNode);

expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'true');

await userEvent.click(itemNode);

expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'false');
});

it('should close the menu when the user hits the Escape key', async () => {
const items = generateItems(4, generateGenericItem);
const { container } = render(
<MultiSelect id="test" label="test-label" items={items} />
);

await userEvent.tab();
await userEvent.keyboard('[Space]');

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeInstanceOf(HTMLElement);

await userEvent.keyboard('[Escape]');

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeNull();
});

it('close menu with click outside of field', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeFalsy();

await userEvent.click(labelNode);

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeTruthy();

await userEvent.click(document.body);

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeFalsy();
});

it('should toggle selection with enter', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" label={label} items={items} />
);
await waitForPosition();

await userEvent.tab();
await userEvent.keyboard('[Space]');

const [item] = items;
// eslint-disable-next-line testing-library/prefer-screen-queries
const itemNode = getByText(container, item.label);

expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'false');

await userEvent.keyboard('[Enter]');
await userEvent.keyboard('[ArrowDown]');
await userEvent.keyboard('[Enter]');

expect(itemNode).toHaveAttribute('data-contained-checkbox-state', 'true');
});

it('should clear selected items when the user clicks the clear selection button', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);
await userEvent.click(labelNode);

const [item] = items;
// eslint-disable-next-line testing-library/prefer-screen-queries
const itemNode = getByText(container, item.label);
await userEvent.click(itemNode);

expect(
// eslint-disable-next-line testing-library/no-node-access
document.querySelector('[aria-label="Clear all selected items"]')
).toBeTruthy();

await userEvent.click(
// eslint-disable-next-line testing-library/no-node-access
document.querySelector('[aria-label="Clear all selected items"]')
);

expect(
// eslint-disable-next-line testing-library/no-node-access
document.querySelector('[aria-label="Clear all selected items"]')
).toBeFalsy();
});

it('should not be interactive if disabled', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" disabled label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);
await userEvent.click(labelNode);

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeFalsy();
});

it('should not be interactive if readonly', async () => {
const items = generateItems(4, generateGenericItem);
const label = 'test-label';
const { container } = render(
<MultiSelect id="test" readOnly={true} label={label} items={items} />
);
await waitForPosition();

// eslint-disable-next-line testing-library/prefer-screen-queries
const labelNode = getByText(container, label);
await userEvent.click(labelNode);

expect(
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
).toBeFalsy();
});

describe('Component API', () => {
it('should set the default selected items with the `initialSelectedItems` prop', async () => {
Expand Down
12 changes: 0 additions & 12 deletions packages/react/src/components/Tag/Tag-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ import React from 'react';
import Tag from './';
import DismissibleTag from './DismissibleTag';
import { AILabel } from '../AILabel';
import TagSkeleton from './Tag.Skeleton';

const prefix = 'cds';

describe('Tag', () => {
describe('automated accessibility testing', () => {
Expand Down Expand Up @@ -66,13 +63,4 @@ describe('Tag', () => {
screen.getByRole('button', { name: 'AI - Show information' })
).toBeInTheDocument();
});

it('should render a skeleton state', () => {
const { container } = render(<TagSkeleton />);

// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const selectWrapper = container.querySelector(`.${prefix}--tag`);

expect(selectWrapper).toHaveClass(`${prefix}--skeleton`);
});
});
2 changes: 1 addition & 1 deletion packages/react/src/components/Tag/Tag.Skeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function TagSkeleton({ className, size, ...rest }: TagSkeletonProps) {
`${prefix}--skeleton`,
className,
{
[`${prefix}--tag--${size}`]: size, // TODO: V12 - Remove this class a
[`${prefix}--tag--${size}`]: size, // TODO: V12 - Remove this class
[`${prefix}--layout--size-${size}`]: size,
}
);
Expand Down

0 comments on commit d224879

Please sign in to comment.