-
Notifications
You must be signed in to change notification settings - Fork 356
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added tests for non-exported components
- Loading branch information
1 parent
ea99f9a
commit e96b4bf
Showing
7 changed files
with
223 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyExpanded.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); |
92 changes: 92 additions & 0 deletions
92
packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopyToggle.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
}); |
12 changes: 12 additions & 0 deletions
12
.../src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
`; |
36 changes: 36 additions & 0 deletions
36
...re/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
`; |