-
Notifications
You must be signed in to change notification settings - Fork 838
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.
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
Install React Testing Library and export several RTL test helpers #6091
Merged
Merged
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
77767a6
Add RTL dependencies (at the same versions that Kibana uses)
cee-chen eb486b5
Add basic EuiPopover RTL tests
cee-chen bcf6a33
consolidate react types yarn.lock entries
thompsongl 0e1de22
Add custom RTL queries and render/screen
cee-chen ffd53c3
consolidate more yarn.lock entries
chandlerprall e19d477
Fix custom RTL render ignoring testenv mocks
cee-chen 1916c96
Add RTL helpers for waiting for an EuiPopover to open/close
cee-chen e78d702
[Misc] Tweak typing by using correct get (vs query/find) API
cee-chen 2fd93e1
Move RTL helpers to `src/test/rtl` instead of being exported by `src/…
cee-chen a98b125
Add Typescript definitions for helpers
cee-chen 8b6208d
Add unit tests for new generic test helpers
cee-chen d22eeeb
Changelog/consuming documentation
cee-chen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
86 changes: 86 additions & 0 deletions
86
src/components/popover/__snapshots__/popover.rtl.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,86 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`EuiPopover snapshot testing renders 1`] = ` | ||
<body> | ||
<div> | ||
<div | ||
class="euiPopover testClass1 testClass2 emotion-euiPopover" | ||
data-test-subj="test subject string" | ||
> | ||
<div | ||
class="euiPopover__anchor css-16vtueo-render" | ||
> | ||
<button /> | ||
</div> | ||
</div> | ||
</div> | ||
</body> | ||
`; | ||
|
||
exports[`EuiPopover snapshot testing renders with popover contents 1`] = ` | ||
<body> | ||
<div> | ||
<div | ||
class="euiPopover euiPopover-isOpen testClass1 testClass2 emotion-euiPopover" | ||
data-test-subj="test subject string" | ||
> | ||
<div | ||
class="euiPopover__anchor css-16vtueo-render" | ||
> | ||
<button /> | ||
</div> | ||
</div> | ||
</div> | ||
<div | ||
data-euiportal="true" | ||
> | ||
<div | ||
data-focus-guard="true" | ||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" | ||
tabindex="-1" | ||
/> | ||
<div | ||
data-focus-guard="true" | ||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" | ||
tabindex="-1" | ||
/> | ||
<div | ||
data-focus-lock-disabled="disabled" | ||
> | ||
<div | ||
aria-describedby="generated-id" | ||
aria-label="aria-label" | ||
aria-live="off" | ||
aria-modal="true" | ||
class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom" | ||
data-autofocus="true" | ||
data-popover-open="true" | ||
data-popover-panel="true" | ||
role="dialog" | ||
style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;" | ||
tabindex="0" | ||
> | ||
<div | ||
class="emotion-euiPopoverArrow-bottom" | ||
data-popover-arrow="bottom" | ||
style="left: 10px; top: 0px;" | ||
/> | ||
<p | ||
class="emotion-euiScreenReaderOnly" | ||
id="generated-id" | ||
> | ||
You are in a dialog. To close this dialog, hit escape. | ||
</p> | ||
<div> | ||
Hello world | ||
</div> | ||
</div> | ||
</div> | ||
<div | ||
data-focus-guard="true" | ||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;" | ||
tabindex="-1" | ||
/> | ||
</div> | ||
</body> | ||
`; |
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,105 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
import { render, fireEvent, waitFor, screen } from '@testing-library/react'; | ||
|
||
import { requiredProps } from '../../test/required_props'; | ||
|
||
import { EuiPopover } from './'; | ||
|
||
describe('EuiPopover', () => { | ||
describe('snapshot testing', () => { | ||
it('renders', () => { | ||
const { baseElement } = render( | ||
<EuiPopover | ||
button={<button />} | ||
closePopover={() => {}} | ||
{...requiredProps} | ||
/> | ||
); | ||
|
||
// NOTE: Using baseElement instead of container is required for components that use portals | ||
expect(baseElement).toMatchSnapshot(); | ||
Comment on lines
+32
to
+33
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just want everyone to share the pain I had of figuring this out in a 3 year old github thread when google wasn't returning any relevant results 💀 |
||
}); | ||
|
||
it('renders with popover contents', () => { | ||
const { baseElement } = render( | ||
<EuiPopover | ||
button={<button />} | ||
closePopover={() => {}} | ||
isOpen={true} | ||
{...requiredProps} | ||
> | ||
Hello world | ||
</EuiPopover> | ||
); | ||
|
||
expect(baseElement).toMatchSnapshot(); | ||
}); | ||
}); | ||
|
||
const mockPopoverInteraction = jest.fn(); | ||
const MockPopoverComponent = () => { | ||
const [isOpen, setIsOpen] = useState(false); | ||
const togglePopover = () => setIsOpen(!isOpen); | ||
const closePopover = () => setIsOpen(false); | ||
|
||
return ( | ||
<EuiPopover | ||
button={<button onClick={togglePopover}>Open popover</button>} | ||
closePopover={closePopover} | ||
isOpen={isOpen} | ||
data-testid="popover" | ||
> | ||
Popover content | ||
<button onClick={mockPopoverInteraction}>Button inside popover</button> | ||
</EuiPopover> | ||
); | ||
}; | ||
|
||
describe('open/close behavior', () => { | ||
it('opens the popover, contents', () => { | ||
render(<MockPopoverComponent />); | ||
|
||
expect(screen.queryByText('Popover content')).toBeFalsy(); | ||
|
||
fireEvent.click(screen.getByText('Open popover')); | ||
|
||
expect(screen.queryByText('Popover content')).toBeTruthy(); | ||
}); | ||
|
||
it('allows interacting with popover children', async () => { | ||
render(<MockPopoverComponent />); | ||
|
||
fireEvent.click(screen.getByText('Open popover')); | ||
await waitFor(() => { | ||
expect(screen.queryByText('Popover content')).toBeTruthy(); | ||
}); | ||
|
||
fireEvent.click(screen.getByText('Button inside popover')); | ||
expect(mockPopoverInteraction).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('closes the popover on escape key press', async () => { | ||
render(<MockPopoverComponent />); | ||
|
||
fireEvent.click(screen.getByText('Open popover')); | ||
|
||
await waitFor(() => { | ||
expect(screen.queryByText('Popover content')).toBeTruthy(); | ||
}); | ||
|
||
fireEvent.keyDown(screen.queryByTestId('popover')!, { key: 'Escape' }); | ||
cee-chen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
await waitFor(() => { | ||
expect(screen.queryByText('Popover content')).toBeFalsy(); | ||
}); | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RTL tests should just be
.test.tsx
but since I'm not migrating 100% of EuiPopover's tests currently I just didrtl.test.tsx
. End goal everything should be just.test.tsx
once we're out of Enzyme.