Skip to content

Commit

Permalink
Added tests for non-exported components
Browse files Browse the repository at this point in the history
  • Loading branch information
thatblindgeye committed Oct 16, 2023
1 parent ea99f9a commit e96b4bf
Show file tree
Hide file tree
Showing 7 changed files with 223 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
onClick={onClick}
id={id}
aria-labelledby={`${id} ${textId}`}
aria-controls={`${id} ${contentId}`}
aria-controls={contentId}
aria-expanded={isExpanded}
{...props}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const testId = 'clipboard-copy';
test(`Renders with class ${styles.clipboardCopy} by default`, () => {
render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);

expect(screen.getByTestId(testId)).toHaveClass(styles.clipboardCopy);
expect(screen.getByTestId(testId)).toHaveClass(styles.clipboardCopy, { exact: true });
});

test(`Renders with custom class when className is passed`, () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ test('Renders without children', () => {
test(`Renders with class ${styles.clipboardCopyActionsItem} by default`, () => {
render(<ClipboardCopyAction>Action text</ClipboardCopyAction>);

expect(screen.getByText('Action text')).toHaveClass(styles.clipboardCopyActionsItem);
expect(screen.getByText('Action text')).toHaveClass(styles.clipboardCopyActionsItem, { exact: true });
});

test(`Renders with custom class when className is passed`, () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { screen, render } from '@testing-library/react';
import { ClipboardCopyExpanded } from '../ClipboardCopyExpanded';
import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
import userEvent from '@testing-library/user-event';

test(`Renders with classname ${styles.clipboardCopyExpandableContent} by default`, () => {
render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content')).toHaveClass(styles.clipboardCopyExpandableContent, { exact: true });
});

test(`Renders with custom class when className is passed`, () => {
render(<ClipboardCopyExpanded className="test-class">Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content')).toHaveClass('test-class');
});

test('Does not render with <pre> tag by default', () => {
render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content').tagName).not.toBe('PRE');
});

test('Renders with <pre> tag when isCode is true', () => {
render(<ClipboardCopyExpanded isCode>Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content').tagName).toBe('PRE');
});

test('Renders with contenteditable attribute of true by default', () => {
render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content')).toHaveAttribute('contenteditable', 'true');
});

test('Renders with contenteditable attribute of false when isReadOnly is passed', () => {
render(<ClipboardCopyExpanded isReadOnly>Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content')).toHaveAttribute('contenteditable', 'false');
});

test('Calls onChange when expanded content is typed in', async () => {
const user = userEvent.setup();
const onChangeMock = jest.fn();

render(<ClipboardCopyExpanded onChange={onChangeMock}>Expanded content</ClipboardCopyExpanded>);

await user.type(screen.getByText('Expanded content'), 's');

expect(onChangeMock).toHaveBeenCalled();
});

test('Does not call onChange when expanded content is not typed in', async () => {
const user = userEvent.setup();
const onChangeMock = jest.fn();

render(
<>
<ClipboardCopyExpanded onChange={onChangeMock}>Expanded content</ClipboardCopyExpanded>
<input />
</>
);

await user.type(screen.getByRole('textbox'), 'A');

expect(onChangeMock).not.toHaveBeenCalled();
});

test('Spreads additional props to container', () => {
render(<ClipboardCopyExpanded data-prop="test">Expanded content</ClipboardCopyExpanded>);

expect(screen.getByText('Expanded content')).toHaveAttribute('data-prop', 'test');
});

test('Matches snapshot', () => {
const { asFragment } = render(<ClipboardCopyExpanded>Expanded content</ClipboardCopyExpanded>);

expect(asFragment()).toMatchSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import React from 'react';
import { screen, render } from '@testing-library/react';
import { ClipboardCopyToggle } from '../ClipboardCopyToggle';
import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
import userEvent from '@testing-library/user-event';

const onClickMock = jest.fn();
const requiredProps = {
id: 'main-id',
textId: 'text-id',
contentId: 'content-id',
onClick: onClickMock
};

// Must be kept as first test to avoid Button's ouiaId updating in snapshots
test('Matches snapshot', () => {
const { asFragment } = render(<ClipboardCopyToggle {...requiredProps} />);

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

test('Renders without children', () => {
render(
<div data-testid="container">
<ClipboardCopyToggle {...requiredProps} />
</div>
);

expect(screen.getByTestId('container').firstChild).toBeVisible();
});

test('Renders with id prop', () => {
render(<ClipboardCopyToggle {...requiredProps} />);

expect(screen.getByRole('button')).toHaveAttribute('id', requiredProps.id);
});

test('Renders with aria-labelledby concatenated from id and textId props', () => {
render(
<>
<ClipboardCopyToggle aria-label="Toggle content" {...requiredProps} />
<span id={requiredProps.textId}>Test content</span>
</>
);

expect(screen.getByRole('button')).toHaveAccessibleName('Toggle content Test content');
});

test('Renders with aria-controls with passed in contentId prop', () => {
render(<ClipboardCopyToggle {...requiredProps} />);

expect(screen.getByRole('button')).toHaveAttribute('aria-controls', requiredProps.contentId);
});

test('Renders with aria-expanded of false by default', () => {
render(<ClipboardCopyToggle {...requiredProps} />);

expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
});

test('Renders with aria-expanded based on isExpanded prop', () => {
render(<ClipboardCopyToggle isExpanded={true} {...requiredProps} />);

expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
});

test('Calls onClick when clipboard toggle is clicked', async () => {
const user = userEvent.setup();
render(<ClipboardCopyToggle {...requiredProps} />);

await user.click(screen.getByRole('button'));
expect(onClickMock).toHaveBeenCalled();
});

test('Does not call onClick when clipboard toggle is not clicked', async () => {
const user = userEvent.setup();
render(
<>
<ClipboardCopyToggle {...requiredProps} />
<button>Test clicker</button>
</>
);

await user.click(screen.getByRole('button', { name: 'Test clicker' }));
expect(onClickMock).not.toHaveBeenCalled();
});

test('Spreads additional props to container', () => {
render(<ClipboardCopyToggle data-prop="test" {...requiredProps} />);

expect(screen.getByRole('button')).toHaveAttribute('data-prop', 'test');
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Matches snapshot 1`] = `
<DocumentFragment>
<div
class="pf-v5-c-clipboard-copy__expandable-content"
contenteditable="true"
>
Expanded content
</div>
</DocumentFragment>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Matches snapshot 1`] = `
<DocumentFragment>
<button
aria-controls="content-id"
aria-disabled="false"
aria-expanded="false"
aria-labelledby="main-id text-id"
class="pf-v5-c-button pf-m-control"
data-ouia-component-id="OUIA-Generated-Button-control-1"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="main-id"
type="button"
>
<div
class="pf-v5-c-clipboard-copy__toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 256 512"
width="1em"
>
<path
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
/>
</svg>
</div>
</button>
</DocumentFragment>
`;

0 comments on commit e96b4bf

Please sign in to comment.