Install React Testing Library and export several RTL test helpers #6091
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
| 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,106 @@ | ||
| /* | ||
| * 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 { fireEvent, waitFor } from '@testing-library/react'; | ||
| import { render, screen, requiredProps } from '../../test'; | ||
|
|
||
| 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. 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-test-subj="popover" | ||
| > | ||
| <span data-test-subj="fff">Popover content</span> | ||
| <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.queryByTestSubject('popover')!, { | ||
| key: 'Escape', | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.queryByText('Popover content')).toBeFalsy(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /* | ||
| * 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 { ReactElement } from 'react'; | ||
| import { | ||
| queries, | ||
| render, | ||
| RenderOptions, | ||
| screen, | ||
| Screen, | ||
| within, | ||
| } from '@testing-library/react'; | ||
|
|
||
| import { EuiProvider } from '../components'; | ||
|
|
||
| import * as dataTestSubjQueries from './rtl_data_test_subj_queries'; | ||
|
|
||
| /** | ||
| * Custom render() fn with EuiProvider and query helpers | ||
| * | ||
| * @see https://testing-library.com/docs/react-testing-library/setup#custom-render | ||
| * @see https://testing-library.com/docs/react-testing-library/setup#add-custom-queries | ||
| */ | ||
|
|
||
| const customRender = ( | ||
| ui: ReactElement, | ||
| { queries: renderQueries, ...options }: RenderOptions = {} | ||
| ) => | ||
| render(ui, { | ||
| queries: { | ||
| ...queries, | ||
| ...dataTestSubjQueries, | ||
| ...(renderQueries || {}), | ||
| }, | ||
| wrapper: EuiProvider, | ||
cee-chen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ...options, | ||
| }); | ||
|
|
||
| export { customRender as render }; | ||
|
|
||
| /** | ||
| * Custom screen util with EUI query helpers | ||
| * | ||
| * @see https://testing-library.com/docs/queries/about/#screen | ||
| * @see https://github.com/testing-library/dom-testing-library/issues/516 | ||
| */ | ||
| const customScreen: Screen<typeof queries & typeof dataTestSubjQueries> = { | ||
| ...screen, | ||
| ...within<typeof dataTestSubjQueries>(document.body, dataTestSubjQueries), | ||
| }; | ||
|
|
||
| export { customScreen as screen }; | ||
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,46 @@ | ||
| /* | ||
| * 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 { | ||
| queryHelpers, | ||
| buildQueries, | ||
| AllByAttribute, | ||
| GetErrorFunction, | ||
| Matcher, | ||
| } from '@testing-library/react'; | ||
|
|
||
| type QueryAllByAttribute = Parameters<AllByAttribute>; | ||
| const queryAllByTestSubject = ( | ||
| ...args: [ | ||
| QueryAllByAttribute[1], | ||
| QueryAllByAttribute[2], | ||
| QueryAllByAttribute[3]? | ||
| ] | ||
| ) => queryHelpers.queryAllByAttribute('data-test-subj', ...args); | ||
|
|
||
| const getMultipleError: GetErrorFunction<[Matcher]> = (_, TestSubjectValue) => | ||
| `Found multiple elements with the data-test-subj attribute of: ${TestSubjectValue}`; | ||
| const getMissingError: GetErrorFunction<[Matcher]> = (_, TestSubjectValue) => | ||
| `Unable to find an element with the data-test-subj attribute of: ${TestSubjectValue}`; | ||
|
|
||
| const [ | ||
| queryByTestSubject, | ||
| getAllByTestSubject, | ||
| getByTestSubject, | ||
| findAllByTestSubject, | ||
| findByTestSubject, | ||
| ] = buildQueries(queryAllByTestSubject, getMultipleError, getMissingError); | ||
|
|
||
| export { | ||
| queryByTestSubject, | ||
| queryAllByTestSubject, | ||
| getByTestSubject, | ||
| getAllByTestSubject, | ||
| findAllByTestSubject, | ||
| findByTestSubject, | ||
| }; |
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.tsxbut since I'm not migrating 100% of EuiPopover's tests currently I just didrtl.test.tsx. End goal everything should be just.test.tsxonce we're out of Enzyme.