some more progress toward ubiquitous eslint-plugin-testing-library

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
2022-11-21 13:05:30 +01:00
parent b0b2a5ddb0
commit 3bd6cc7c55
41 changed files with 390 additions and 393 deletions
@@ -16,7 +16,7 @@
import React from 'react';
import { FeatureFlagged } from './FeatureFlagged';
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import { LocalStorageFeatureFlags } from '../apis';
import { TestApiProvider } from '@backstage/test-utils';
import { featureFlagsApiRef } from '@backstage/core-plugin-api';
@@ -35,7 +35,7 @@ describe('FeatureFlagged', () => {
.spyOn(mockFeatureFlagsApi, 'isActive')
.mockImplementation(() => true);
const { queryByText } = render(
render(
<Wrapper>
<div>
<FeatureFlagged with="hello-flag">
@@ -45,14 +45,14 @@ describe('FeatureFlagged', () => {
</Wrapper>,
);
expect(queryByText('BACKSTAGE!')).toBeInTheDocument();
expect(screen.getByText('BACKSTAGE!')).toBeInTheDocument();
});
it('should not render contents when the feature flag is disabled', async () => {
jest
.spyOn(mockFeatureFlagsApi, 'isActive')
.mockImplementation(() => false);
const { queryByText } = render(
render(
<Wrapper>
<div>
<FeatureFlagged with="hello-flag">
@@ -62,7 +62,7 @@ describe('FeatureFlagged', () => {
</Wrapper>,
);
expect(queryByText('BACKSTAGE!')).not.toBeInTheDocument();
expect(screen.queryByText('BACKSTAGE!')).not.toBeInTheDocument();
});
});
describe('without', () => {
@@ -71,7 +71,7 @@ describe('FeatureFlagged', () => {
.spyOn(mockFeatureFlagsApi, 'isActive')
.mockImplementation(() => true);
const { queryByText } = render(
render(
<Wrapper>
<div>
<FeatureFlagged without="hello-flag">
@@ -81,14 +81,14 @@ describe('FeatureFlagged', () => {
</Wrapper>,
);
expect(queryByText('BACKSTAGE!')).not.toBeInTheDocument();
expect(screen.queryByText('BACKSTAGE!')).not.toBeInTheDocument();
});
it('should render contents when the feature flag is disabled', async () => {
jest
.spyOn(mockFeatureFlagsApi, 'isActive')
.mockImplementation(() => false);
const { queryByText } = render(
render(
<Wrapper>
<div>
<FeatureFlagged without="hello-flag">
@@ -98,7 +98,7 @@ describe('FeatureFlagged', () => {
</Wrapper>,
);
expect(queryByText('BACKSTAGE!')).toBeInTheDocument();
expect(screen.getByText('BACKSTAGE!')).toBeInTheDocument();
});
});
});
@@ -15,6 +15,7 @@
*/
import React from 'react';
import { screen } from '@testing-library/react';
import { AlertDisplay } from './AlertDisplay';
import { alertApiRef } from '@backstage/core-plugin-api';
import { AlertApiForwarder } from '@backstage/core-app-api';
@@ -34,7 +35,7 @@ describe('<AlertDisplay />', () => {
});
it('renders with message', async () => {
const { queryByText } = await renderInTestApp(
await renderInTestApp(
<TestApiProvider
apis={[
[
@@ -52,7 +53,7 @@ describe('<AlertDisplay />', () => {
</TestApiProvider>,
);
expect(queryByText(TEST_MESSAGE)).toBeInTheDocument();
expect(screen.getByText(TEST_MESSAGE)).toBeInTheDocument();
});
describe('with multiple messages', () => {
@@ -73,23 +74,23 @@ describe('<AlertDisplay />', () => {
] as const;
it('renders first message', async () => {
const { queryByText } = await renderInTestApp(
await renderInTestApp(
<TestApiProvider apis={apis}>
<AlertDisplay />
</TestApiProvider>,
);
expect(queryByText('message one')).toBeInTheDocument();
expect(screen.getByText('message one')).toBeInTheDocument();
});
it('renders a count of remaining messages', async () => {
const { queryByText } = await renderInTestApp(
await renderInTestApp(
<TestApiProvider apis={apis}>
<AlertDisplay />
</TestApiProvider>,
);
expect(queryByText('(2 older messages)')).toBeInTheDocument();
expect(screen.getByText('(2 older messages)')).toBeInTheDocument();
});
});
});
@@ -60,11 +60,11 @@ describe('RealLogViewer', () => {
await userEvent.keyboard('{shift>}{enter}{/shift}');
expect(rendered.getByText('3/3')).toBeInTheDocument();
expect(rendered.queryByText('Some Log Line')).toBeInTheDocument();
expect(rendered.getByText('Some Log Line')).toBeInTheDocument();
await userEvent.keyboard('{meta>}{enter}{/meta}');
expect(rendered.queryByText('Some Log Line')).not.toBeInTheDocument();
await userEvent.keyboard('{meta>}{enter}{/meta}');
expect(rendered.queryByText('Some Log Line')).toBeInTheDocument();
expect(rendered.getByText('Some Log Line')).toBeInTheDocument();
// Tab down to line #2 and click
await userEvent.tab();
@@ -14,15 +14,15 @@
* limitations under the License.
*/
import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { configApiRef } from '@backstage/core-plugin-api';
import {
MockConfigApi,
renderInTestApp,
TestApiProvider,
} from '@backstage/test-utils';
import { act, fireEvent, screen } from '@testing-library/react';
import React from 'react';
import { SupportButton } from './SupportButton';
import { configApiRef } from '@backstage/core-plugin-api';
const configApi = new MockConfigApi({
app: {
@@ -45,8 +45,9 @@ const POPOVER_ID = 'support-button-popover';
describe('<SupportButton />', () => {
it('renders without exploding', async () => {
await renderInTestApp(<SupportButton />);
expect(screen.getByTestId(SUPPORT_BUTTON_ID)).toBeInTheDocument();
await expect(
screen.findByTestId(SUPPORT_BUTTON_ID),
).resolves.toBeInTheDocument();
});
it('supports passing a title', async () => {
@@ -96,11 +97,13 @@ describe('<SupportButton />', () => {
it('shows popover on click', async () => {
await renderInTestApp(<SupportButton />);
const supportButton = screen.getByTestId(SUPPORT_BUTTON_ID);
expect(supportButton).toBeInTheDocument();
await expect(
screen.findByTestId(SUPPORT_BUTTON_ID),
).resolves.toBeInTheDocument();
await act(async () => {
fireEvent.click(screen.getByTestId(SUPPORT_BUTTON_ID));
});
fireEvent.click(supportButton);
expect(screen.getByTestId(POPOVER_ID)).toBeInTheDocument();
await expect(screen.findByTestId(POPOVER_ID)).resolves.toBeInTheDocument();
});
});
@@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { renderInTestApp } from '@backstage/test-utils';
import { act, fireEvent } from '@testing-library/react';
import React from 'react';
@@ -65,14 +66,14 @@ describe('RoutedTabs', () => {
expect(rendered.queryByText('tabbed-test-content')).not.toBeInTheDocument();
expect(rendered.getByText('tabbed-test-title-2')).toBeInTheDocument();
expect(rendered.queryByText('tabbed-test-content-2')).toBeInTheDocument();
expect(rendered.getByText('tabbed-test-content-2')).toBeInTheDocument();
const thirdTab = rendered.queryAllByRole('tab')[2];
act(() => {
fireEvent.click(thirdTab);
});
expect(rendered.getByText('tabbed-test-title-3')).toBeInTheDocument();
expect(rendered.queryByText('tabbed-test-content-3')).toBeInTheDocument();
expect(rendered.getByText('tabbed-test-content-3')).toBeInTheDocument();
});
describe('correctly delegates nested links', () => {
@@ -113,9 +114,9 @@ describe('RoutedTabs', () => {
expect(
rendered.queryByText('tabbed-test-content'),
).not.toBeInTheDocument();
expect(rendered.queryByText('tabbed-test-content-2')).toBeInTheDocument();
expect(rendered.getByText('tabbed-test-content-2')).toBeInTheDocument();
expect(
rendered.queryByText('tabbed-test-nested-content-2'),
rendered.getByText('tabbed-test-nested-content-2'),
).toBeInTheDocument();
});
@@ -125,7 +126,7 @@ describe('RoutedTabs', () => {
expect(
rendered.queryByText('tabbed-test-content'),
).not.toBeInTheDocument();
expect(rendered.queryByText('tabbed-test-content-2')).toBeInTheDocument();
expect(rendered.getByText('tabbed-test-content-2')).toBeInTheDocument();
expect(
rendered.queryByText('tabbed-test-nested-content-2'),
).not.toBeInTheDocument();
@@ -142,7 +143,7 @@ describe('RoutedTabs', () => {
expect(rendered.queryByText('tabbed-test-content')).not.toBeInTheDocument();
expect(rendered.getByText('tabbed-test-title-2')).toBeInTheDocument();
expect(rendered.queryByText('tabbed-test-content-2')).toBeInTheDocument();
expect(rendered.getByText('tabbed-test-content-2')).toBeInTheDocument();
});
it('redirects to the top level when no route is matching the url', async () => {
@@ -79,6 +79,6 @@ describe('TabbedLayout', () => {
expect(queryByText('tabbed-test-content')).not.toBeInTheDocument();
expect(getByText('tabbed-test-title-2')).toBeInTheDocument();
expect(queryByText('tabbed-test-content-2')).toBeInTheDocument();
expect(getByText('tabbed-test-content-2')).toBeInTheDocument();
});
});
@@ -43,7 +43,7 @@ describe('<ComponentContextMenu />', () => {
await fireEvent.click(rendered.queryByText('Some label') as Node);
expect(onClickFunction).toHaveBeenCalled();
// We do not expect the dropdown to disappear after click
expect(rendered.queryByText('Some label')).toBeInTheDocument();
expect(rendered.getByText('Some label')).toBeInTheDocument();
});
it('Disabled', async () => {
@@ -80,7 +80,7 @@ describe('<ComponentContextMenu />', () => {
await fireEvent.click(rendered.queryByText('Secondary label') as Node);
expect(onClickFunction).toHaveBeenCalled();
// We do not expect the dropdown to disappear after click
expect(rendered.queryByText('Some label')).toBeInTheDocument();
expect(rendered.getByText('Some label')).toBeInTheDocument();
});
it('should close when hitting escape', async () => {