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

.changeset/flat-bugs-do.md

@@ -0,0 +1,8 @@
+---
+'@backstage/core': patch
+'@backstage/plugin-graphiql': patch
+'@backstage/plugin-tech-radar': patch
+'@backstage/plugin-techdocs': patch
+---
+
+add test case for Progress component

packages/core/src/components/Progress/Progress.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { act } from 'react-dom/test-utils';
+
+import { Progress } from './Progress';
+
+describe('<Progress />', () => {
+  it('renders without exploding', async () => {
+    jest.useFakeTimers();
+    const { getByTestId, queryByTestId } = await renderInTestApp(<Progress />);
+    expect(queryByTestId('progress')).not.toBeInTheDocument();
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
+    expect(getByTestId('progress')).toBeInTheDocument();
+    jest.useRealTimers();
+  });
+});

packages/core/src/components/Progress/Progress.tsx

@@ -28,6 +28,6 @@ export const Progress: FC<LinearProgressProps> = props => {
   return isVisible ? (
     <LinearProgress {...props} data-testid="progress" />
   ) : (
-    <div style={{ display: 'none' }} data-testid="progress" />
+    <div style={{ display: 'none' }} />
   );
 };

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();
   });
 });