Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(ChipGroup): update tests #9547

Merged
merged 7 commits into from
Oct 27, 2023
Merged

chore(ChipGroup): update tests #9547

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
79396f9
chore(ChipGroup): test revamp
jenny-s51 Aug 29, 2023
0409b12
add className
jenny-s51 Aug 29, 2023
a14afbc
chip group updates, WIP
jenny-s51 Sep 27, 2023
2ee4ef9
PR feedback from Eric, added tests
jenny-s51 Oct 26, 2023
58967d9
Apply suggestions from code review
jenny-s51 Oct 27, 2023
77b8388
update onOverflowChipClick test to match onClick
jenny-s51 Oct 27, 2023
dd70f94
add check for accessibleName
jenny-s51 Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
348 changes: 287 additions & 61 deletions packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,292 @@ import userEvent from '@testing-library/user-event';

import { ChipGroup } from '../index';
import { Chip } from '../../Chip';
import styles from '@patternfly/react-styles/css/components/Chip/chip-group';

describe('ChipGroup', () => {
test('chip group default', () => {
const { asFragment } = render(
<ChipGroup>
<Chip>1.1</Chip>
</ChipGroup>
);

expect(asFragment()).toMatchSnapshot();
});

test('chip group with category', () => {
const { asFragment } = render(
<ChipGroup categoryName="category">
<Chip>1.1</Chip>
</ChipGroup>
);
expect(asFragment()).toMatchSnapshot();
});

test('chip group with closable category', () => {
const { asFragment } = render(
<ChipGroup categoryName="category" isClosable>
<Chip>1.1</Chip>
</ChipGroup>
);
expect(asFragment()).toMatchSnapshot();
});

test('chip group expanded', async () => {
const user = userEvent.setup();

render(
<ChipGroup>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

const moreText = screen.getByText('1 more');
expect(moreText).toBeInTheDocument();

await user.click(moreText);
expect(screen.getByText('Show Less')).toBeInTheDocument();
});

test('chip group will not render if no children passed', () => {
render(<ChipGroup />);
expect(screen.queryByRole('group')).toBeNull();
});

test('chip group with category and tooltip', () => {
const { asFragment } = render(
<ChipGroup categoryName="A very long category name">
<Chip>1.1</Chip>
</ChipGroup>
);
expect(asFragment()).toMatchSnapshot();
});
test('chip group default', () => {
render(
<ChipGroup>
<Chip>1.1</Chip>
</ChipGroup>
);

expect(screen.getByRole('group')).toHaveClass(styles.chipGroup);
});

test('chip group with custom className', () => {
render(
<ChipGroup className="test">
<Chip>1.1</Chip>
</ChipGroup>
);

expect(screen.getByRole('group')).toHaveClass(`${styles.chipGroup} test`);
});

test('chip group has aria-label by default when categoryName is not passed', () => {
render(
<ChipGroup>
<Chip>1.1</Chip>
</ChipGroup>
);

expect(screen.getByRole('group')).toHaveAccessibleName('Chip group category');
});

test('chip group with custom aria-label', () => {
render(
<ChipGroup aria-label="test chip group">
<Chip>1.1</Chip>
</ChipGroup>
);

expect(screen.getByRole('group')).toHaveAccessibleName('test chip group');
});

test('chip group with category', () => {
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
render(
<ChipGroup categoryName="category">
<Chip>1.1</Chip>
</ChipGroup>
);
expect(screen.getByText('category')).toBeVisible();
});

test('chip group with category renders with class pf-m-category', () => {
render(
<ChipGroup categoryName="category">
<Chip>1.1</Chip>
</ChipGroup>
);
expect(screen.getByRole('group')).toHaveClass(`${styles.chipGroup} pf-m-category`);
jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved
});

test('chip group has aria-labelledby attribute', () => {
render(
<ChipGroup categoryName="category">
<Chip>1.1</Chip>
</ChipGroup>
);
expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
});

test('chip group has aria-labelledby attribute set to ID value', () => {
render(
<ChipGroup categoryName="category" id="chip-group-id">
<Chip>1.1</Chip>
</ChipGroup>
);
expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', 'chip-group-id');
});

test('chip group expands', async () => {
const user = userEvent.setup();
const chips = ['Chip one', 'Really long chip that goes on and on', 'Chip three', 'Chip four', 'Chip five'];

render(
<ChipGroup aria-label="test">
{chips.map((currentChip) => (
<Chip key={currentChip}>{currentChip}</Chip>
))}
</ChipGroup>
);

await user.click(screen.getByText('2 more'));
expect(screen.getByText('Chip five')).toBeVisible();
});

test('chip group with closable category', () => {
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
render(
<ChipGroup categoryName="category" isClosable>
<Chip>1.1</Chip>
</ChipGroup>
);
expect(screen.getByRole('group').lastChild).toHaveClass(styles.chipGroupClose);
});

test('chip group with closeBtnAriaLabel', () => {
render(
<ChipGroup categoryName="category">
<Chip closeBtnAriaLabel="close button aria label">1.1</Chip>
</ChipGroup>
);
expect(screen.getByLabelText('close button aria label')).toBeInTheDocument();
});
jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved

test('chip group onClick', async () => {
const onClose = jest.fn();
const user = userEvent.setup();

render(
<ChipGroup categoryName="category" isClosable onClick={onClose}>
<Chip>1.1</Chip>
</ChipGroup>
);

await user.click(screen.getByLabelText('Close chip group'));
expect(onClose).toHaveBeenCalled();
jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved
});

test('chip group onOverflowChipClick', async () => {
const onOverflowChipClick = jest.fn();
const user = userEvent.setup();

render(
<ChipGroup categoryName="category" onOverflowChipClick={onOverflowChipClick}>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

await user.click(screen.getByText('1 more'));
expect(onOverflowChipClick).toHaveBeenCalled();
});

test('chip group expanded', async () => {
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
const user = userEvent.setup();

render(
<ChipGroup>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

const moreText = screen.getByText('1 more');
expect(moreText).toBeInTheDocument();

await user.click(moreText);
expect(screen.getByText('Show Less')).toBeInTheDocument();
});

test('overflow chip does not render by default when < 4 children are passed', async () => {
const user = userEvent.setup();

render(
<ChipGroup>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
</ChipGroup>
);

expect(screen.queryByText('1 more')).not.toBeInTheDocument();
});

test('overflow chip collapsed by default', async () => {
const user = userEvent.setup();

render(
<ChipGroup>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

const moreText = screen.getByText('1 more');
expect(moreText).toBeInTheDocument();
});

test('overflow chip renders with the default numChips prop value of 3', async () => {
const user = userEvent.setup();

render(
<ChipGroup>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

const moreText = screen.getByText('1 more');
expect(moreText).toBeInTheDocument();

await user.click(moreText);
expect(screen.getByText('Show Less')).toBeInTheDocument();
});

test('overflow chip renders with numChips prop value of 2', async () => {
const user = userEvent.setup();

render(
<ChipGroup numChips={2}>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
</ChipGroup>
);

const moreText = screen.getByText('1 more');
expect(moreText).toBeInTheDocument();

await user.click(moreText);
expect(screen.getByText('Show Less')).toBeInTheDocument();
});

test('clicking the overflow chip causes the text to update with the default props', async () => {
const user = userEvent.setup();

render(
<ChipGroup>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

const moreText = screen.getByText('1 more');

await user.click(moreText);
expect(screen.getByText('Show Less')).toBeInTheDocument();
});

test('passing in the expandedText and collapsedText props work', async () => {
const user = userEvent.setup();

render(
<ChipGroup expandedText="Collapse" collapsedText="Expand">
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

const moreText = screen.getByText('Expand');
expect(moreText).toBeInTheDocument();

await user.click(moreText);
expect(screen.getByText('Collapse')).toBeInTheDocument();
});

test('passing defaultIsOpen of true causes the chip group to be expanded by default', async () => {
render(
<ChipGroup defaultIsOpen>
<Chip>1</Chip>
<Chip>2</Chip>
<Chip>3</Chip>
<Chip>4</Chip>
</ChipGroup>
);

expect(screen.getByText('Show Less')).toBeInTheDocument();
});

test('chip group will not render if no children passed', () => {
render(<ChipGroup />);
expect(screen.queryByRole('group')).toBeNull();
});

test('chip group renders to match snapshot', () => {
const { asFragment } = render(<ChipGroup>chips</ChipGroup>);
expect(screen.getByRole('group')).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
Loading
Loading