Add test case for Progress component (#2953)

* remove data-testid from div

* add test case for Progress component

* add changeset

* update the GraphiQLPage test cases to handle Progress timeout

* update the RadarComponent and RadarPage test case to handle Progress timeout

* update the TechDocsProgressBar test case to handle Progress timeout

* add changeset

plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx

@@ -19,6 +19,7 @@ import { GraphiQLPage } from './GraphiQLPage';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
+import { act } from 'react-dom/test-utils';
 import { renderWithEffects } from '@backstage/test-utils';
 import { GraphQLBrowseApi, graphQlBrowseApiRef } from '../../lib/api';
 
@@ -28,6 +29,7 @@ jest.mock('../GraphiQLBrowser', () => ({
 
 describe('GraphiQLPage', () => {
   it('should show progress', async () => {
+    jest.useFakeTimers();
     const loadingApi: GraphQLBrowseApi = {
       async getEndpoints() {
         await new Promise(() => {});
@@ -43,9 +45,12 @@ describe('GraphiQLPage', () => {
         ,
       </ApiProvider>,
     );
-
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
     rendered.getByText('GraphiQL');
     rendered.getByTestId('progress');
+    jest.useRealTimers();
   });
 
   it('should show error', async () => {

plugins/tech-radar/src/components/RadarComponent.test.tsx

@@ -19,6 +19,7 @@ import { render, waitForElement } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
 import { ApiRegistry, ApiProvider, errorApiRef } from '@backstage/core';
+import { act } from 'react-dom/test-utils';
 import { withLogCollector } from '@backstage/test-utils';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
@@ -34,8 +35,9 @@ describe('RadarComponent', () => {
   });
 
   it('should render a progress bar', async () => {
-    const errorApi = { post: () => {} };
+    jest.useFakeTimers();
 
+    const errorApi = { post: () => {} };
     const { getByTestId, queryByTestId } = render(
       <ThemeProvider theme={lightTheme}>
         <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
@@ -48,9 +50,13 @@ describe('RadarComponent', () => {
       </ThemeProvider>,
     );
 
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
     expect(getByTestId('progress')).toBeInTheDocument();
 
     await waitForElement(() => queryByTestId('tech-radar-svg'));
+    jest.useRealTimers();
   });
 
   it('should call the errorApi if load fails', async () => {

plugins/tech-radar/src/components/RadarPage.test.tsx

@@ -22,6 +22,7 @@ import { ApiRegistry, ApiProvider, errorApiRef } from '@backstage/core';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
 import { RadarPage } from './RadarPage';
+import { act } from 'react-dom/test-utils';
 import { MockErrorApi, wrapInTestApp } from '@backstage/test-utils';
 
 describe('RadarPage', () => {
@@ -34,6 +35,8 @@ describe('RadarPage', () => {
   });
 
   it('should render a progress bar', async () => {
+    jest.useFakeTimers();
+
     const techRadarProps = {
       width: 1200,
       height: 800,
@@ -48,9 +51,13 @@ describe('RadarPage', () => {
       ),
     );
 
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
     expect(getByTestId('progress')).toBeInTheDocument();
 
     await waitForElement(() => queryByTestId('tech-radar-svg'));
+    jest.useRealTimers();
   });
 
   it('should render a header with a svg', async () => {

plugins/techdocs/src/reader/components/TechDocsProgressBar.test.tsx

@@ -25,12 +25,14 @@ jest.useFakeTimers();
 describe('<TechDocsProgressBar />', () => {
   it('should render a message if techdocs page takes more time to load', () => {
     const rendered = render(wrapInTestApp(<TechDocsProgressBar />));
-
-    expect(rendered.getByTestId('progress')).toBeDefined();
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
+    expect(rendered.getByTestId('progress')).toBeInTheDocument();
     expect(rendered.queryByTestId('delay-reason')).toBeNull();
     act(() => {
       jest.advanceTimersByTime(5000);
     });
-    expect(rendered.getByTestId('delay-reason')).toBeDefined();
+    expect(rendered.getByTestId('delay-reason')).toBeInTheDocument();
   });
 });