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/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 () => {