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

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/cost-insights/src/components/BarChart/BarChart.test.tsx

@@ -104,7 +104,7 @@ describe('<BarChart />', () => {
 
     it('should display stepper if displaying more than 6 resources', async () => {
       const rendered = await renderWithProps({} as BarChartProps);
-      expect(rendered.queryByTestId('bar-chart-stepper')).toBeInTheDocument();
+      expect(rendered.getByTestId('bar-chart-stepper')).toBeInTheDocument();
     });
 
     it('should display the next step button if resources are remaining', async () => {
@@ -114,7 +114,7 @@ describe('<BarChart />', () => {
         rendered.queryByTestId('bar-chart-stepper-button-back'),
       ).not.toBeInTheDocument();
       expect(
-        rendered.queryByTestId('bar-chart-stepper-button-next'),
+        rendered.getByTestId('bar-chart-stepper-button-next'),
       ).toBeInTheDocument();
     });
 

plugins/cost-insights/src/components/BarChart/BarChartLegend.test.tsx

@@ -27,6 +27,6 @@ describe('<BarChartLegend />', () => {
       </MockConfigProvider>,
     );
     expect(rendered.getByText(/\$1,000/)).toBeInTheDocument();
-    expect(rendered.queryByText(/\$5,000/)).toBeInTheDocument();
+    expect(rendered.getByText(/\$5,000/)).toBeInTheDocument();
   });
 });

plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.test.tsx

@@ -17,7 +17,6 @@
 import { CostInsightsHeader } from './CostInsightsHeader';
 import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
 import React from 'react';
-
 import { ApiProvider } from '@backstage/core-app-api';
 import { IdentityApi, identityApiRef } from '@backstage/core-plugin-api';
 
@@ -43,7 +42,7 @@ describe('<CostInsightsHeader/>', () => {
       </ApiProvider>,
     );
 
-    expect(rendered.queryByText(/doing great/)).toBeInTheDocument();
+    expect(rendered.getByText(/doing great/)).toBeInTheDocument();
   });
 
   it('Shows work to do when alerts > 1', async () => {
@@ -57,7 +56,7 @@ describe('<CostInsightsHeader/>', () => {
         />
       </ApiProvider>,
     );
-    expect(rendered.queryByText(/few things/)).toBeInTheDocument();
+    expect(rendered.getByText(/few things/)).toBeInTheDocument();
   });
 
   it('Handles grammar with a single alert', async () => {
@@ -73,7 +72,7 @@ describe('<CostInsightsHeader/>', () => {
     );
 
     expect(rendered.queryByText(/things/)).not.toBeInTheDocument();
-    expect(rendered.queryByText(/one thing/)).toBeInTheDocument();
+    expect(rendered.getByText(/one thing/)).toBeInTheDocument();
   });
 
   it('Shows no costs when hasCostData is false', async () => {
@@ -87,7 +86,7 @@ describe('<CostInsightsHeader/>', () => {
         />
       </ApiProvider>,
     );
-    expect(rendered.queryByText(/this is awkward/)).toBeInTheDocument();
+    expect(rendered.getByText(/this is awkward/)).toBeInTheDocument();
   });
 
   describe.each`
@@ -109,9 +108,7 @@ describe('<CostInsightsHeader/>', () => {
           />
         </ApiProvider>,
       );
-      expect(
-        rendered.queryByText(/Test group display name/),
-      ).toBeInTheDocument();
+      expect(rendered.getByText(/Test group display name/)).toBeInTheDocument();
     });
 
     it('Fallbacks to group id when display name not available', async () => {
@@ -125,7 +122,7 @@ describe('<CostInsightsHeader/>', () => {
           />
         </ApiProvider>,
       );
-      expect(rendered.queryByText(/test-user-group-1/)).toBeInTheDocument();
+      expect(rendered.getByText(/test-user-group-1/)).toBeInTheDocument();
     });
   });
 });

plugins/cost-insights/src/components/PeriodSelect/PeriodSelect.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { getByRole, waitFor } from '@testing-library/react';
+import { getByRole, screen, waitFor } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
 import { PeriodSelect, getDefaultOptions } from './PeriodSelect';
@@ -29,7 +29,7 @@ const options = getDefaultOptions(lastCompleteBillingDate);
 
 describe('<PeriodSelect />', () => {
   it('Renders without exploding', async () => {
-    const rendered = await renderInTestApp(
+    await renderInTestApp(
       <MockBillingDateProvider
         lastCompleteBillingDate={lastCompleteBillingDate}
       >
@@ -39,11 +39,11 @@ describe('<PeriodSelect />', () => {
         />
       </MockBillingDateProvider>,
     );
-    expect(rendered.getByTestId('period-select')).toBeInTheDocument();
+    expect(screen.getByTestId('period-select')).toBeInTheDocument();
   });
 
   it('Should display all costGrowth period options', async () => {
-    const rendered = await renderInTestApp(
+    await renderInTestApp(
       <MockBillingDateProvider
         lastCompleteBillingDate={lastCompleteBillingDate}
       >
@@ -53,13 +53,13 @@ describe('<PeriodSelect />', () => {
         />
       </MockBillingDateProvider>,
     );
-    const periodSelectContainer = rendered.getByTestId('period-select');
+    const periodSelectContainer = screen.getByTestId('period-select');
     const button = getByRole(periodSelectContainer, 'button');
     await userEvent.click(button);
-    await waitFor(() => rendered.getByText('Past 60 Days'));
+    await waitFor(() => screen.getByText('Past 60 Days'));
     options.forEach(option =>
       expect(
-        rendered.getByTestId(`period-select-option-${option.value}`),
+        screen.getByTestId(`period-select-option-${option.value}`),
       ).toBeInTheDocument(),
     );
   });
@@ -78,19 +78,19 @@ describe('<PeriodSelect />', () => {
           ? Duration.P30D
           : DefaultPageFilters.duration;
 
-      const rendered = await renderInTestApp(
+      await renderInTestApp(
         <MockBillingDateProvider
           lastCompleteBillingDate={lastCompleteBillingDate}
         >
           <PeriodSelect duration={mockAggregation} onSelect={mockOnSelect} />,
         </MockBillingDateProvider>,
       );
-      const periodSelect = rendered.getByTestId('period-select');
+      const periodSelect = screen.getByTestId('period-select');
       const button = getByRole(periodSelect, 'button');
 
       await userEvent.click(button);
       await userEvent.click(
-        rendered.getByTestId(`period-select-option-${duration}`),
+        screen.getByTestId(`period-select-option-${duration}`),
       );
       expect(mockOnSelect).toHaveBeenLastCalledWith(duration);
     });

plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { getByRole, waitFor } from '@testing-library/react';
+import { getByRole, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ProjectSelect } from './ProjectSelect';
 import { MockFilterProvider } from '../../testUtils';
@@ -42,23 +42,19 @@ describe('<ProjectSelect />', () => {
   });
 
   it('Renders without exploding', async () => {
-    const rendered = await renderInTestApp(Component);
-    expect(rendered.getByText('All Projects')).toBeInTheDocument();
+    await renderInTestApp(Component);
+    expect(screen.getByText('All Projects')).toBeInTheDocument();
   });
 
   it('shows all projects in the filter select', async () => {
-    const rendered = await renderInTestApp(Component);
-    const projectSelectContainer = rendered.getByTestId(
-      'project-filter-select',
-    );
+    await renderInTestApp(Component);
+    const projectSelectContainer = screen.getByTestId('project-filter-select');
     const button = getByRole(projectSelectContainer, 'button');
     await userEvent.click(button);
-    await waitFor(() => rendered.getByTestId('option-all'));
+    await waitFor(() => screen.getByTestId('option-all'));
 
     mockProjects.forEach(project =>
-      expect(
-        rendered.getByText(project.name ?? project.id),
-      ).toBeInTheDocument(),
+      expect(screen.getByText(project.name ?? project.id)).toBeInTheDocument(),
     );
   });
 });