diff --git a/.changeset/flat-bugs-do.md b/.changeset/flat-bugs-do.md new file mode 100644 index 0000000000..672daf657d --- /dev/null +++ b/.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 diff --git a/packages/core/src/components/Progress/Progress.test.tsx b/packages/core/src/components/Progress/Progress.test.tsx new file mode 100644 index 0000000000..46a162e8b3 --- /dev/null +++ b/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('', () => { + it('renders without exploding', async () => { + jest.useFakeTimers(); + const { getByTestId, queryByTestId } = await renderInTestApp(); + expect(queryByTestId('progress')).not.toBeInTheDocument(); + act(() => { + jest.advanceTimersByTime(250); + }); + expect(getByTestId('progress')).toBeInTheDocument(); + jest.useRealTimers(); + }); +}); diff --git a/packages/core/src/components/Progress/Progress.tsx b/packages/core/src/components/Progress/Progress.tsx index e66220e4e7..80f4f38cc9 100644 --- a/packages/core/src/components/Progress/Progress.tsx +++ b/packages/core/src/components/Progress/Progress.tsx @@ -28,6 +28,6 @@ export const Progress: FC = props => { return isVisible ? ( ) : ( -
+
); }; diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx index fb401494eb..7bf48eb7f6 100644 --- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.test.tsx +++ b/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', () => { , , ); - + act(() => { + jest.advanceTimersByTime(250); + }); rendered.getByText('GraphiQL'); rendered.getByTestId('progress'); + jest.useRealTimers(); }); it('should show error', async () => { diff --git a/plugins/tech-radar/src/components/RadarComponent.test.tsx b/plugins/tech-radar/src/components/RadarComponent.test.tsx index 5591d74b82..59cababbc9 100644 --- a/plugins/tech-radar/src/components/RadarComponent.test.tsx +++ b/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( @@ -48,9 +50,13 @@ describe('RadarComponent', () => { , ); + 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 () => { diff --git a/plugins/tech-radar/src/components/RadarPage.test.tsx b/plugins/tech-radar/src/components/RadarPage.test.tsx index 97fae16380..ee5cf8e131 100644 --- a/plugins/tech-radar/src/components/RadarPage.test.tsx +++ b/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 () => { diff --git a/plugins/techdocs/src/reader/components/TechDocsProgressBar.test.tsx b/plugins/techdocs/src/reader/components/TechDocsProgressBar.test.tsx index be464bd485..f97fcda3f1 100644 --- a/plugins/techdocs/src/reader/components/TechDocsProgressBar.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsProgressBar.test.tsx @@ -25,12 +25,14 @@ jest.useFakeTimers(); describe('', () => { it('should render a message if techdocs page takes more time to load', () => { const rendered = render(wrapInTestApp()); - - 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(); }); });