diff --git a/.changeset/clever-radios-yawn.md b/.changeset/clever-radios-yawn.md new file mode 100644 index 0000000000..e5600183f5 --- /dev/null +++ b/.changeset/clever-radios-yawn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-api-docs': patch +--- + +Make sure that the toggle button state is properly reflected in API cards diff --git a/packages/core-app-api/src/app/AppManager.test.tsx b/packages/core-app-api/src/app/AppManager.test.tsx index 59b53bf6c5..1345ccb13e 100644 --- a/packages/core-app-api/src/app/AppManager.test.tsx +++ b/packages/core-app-api/src/app/AppManager.test.tsx @@ -20,7 +20,7 @@ import { renderWithEffects, withLogCollector, } from '@backstage/test-utils'; -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React, { PropsWithChildren, ReactNode } from 'react'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; @@ -874,7 +874,9 @@ describe('Integration Test', () => { ); await renderWithEffects(); - await userEvent.click(screen.getByText('Sign Out')); + await act(async () => { + await userEvent.click(screen.getByText('Sign Out')); + }); await waitFor(() => expect(fetchApiMock.fetch).toHaveBeenCalledWith( diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx index 707d528867..329fb62129 100644 --- a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx +++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx @@ -104,7 +104,7 @@ describe('', () => { const rendered = render( wrapInTestApp( - + Test Content 1 diff --git a/packages/core-components/src/setupTests.ts b/packages/core-components/src/setupTests.ts index 963c0f188b..dae4360fd3 100644 --- a/packages/core-components/src/setupTests.ts +++ b/packages/core-components/src/setupTests.ts @@ -15,3 +15,18 @@ */ import '@testing-library/jest-dom'; + +// eslint-disable-next-line no-console +const originalConsoleWarn = console.warn; +// eslint-disable-next-line no-console +console.warn = (...args: any[]) => { + const message = args[0]; + if ( + typeof message === 'string' && + (message.includes('CSSOM.parse is not a function') || + message.includes('[JSS]')) + ) { + return; + } + originalConsoleWarn(...args); +}; diff --git a/packages/frontend-app-api/src/setupTests.ts b/packages/frontend-app-api/src/setupTests.ts index c30f1d15cb..9abf7083b5 100644 --- a/packages/frontend-app-api/src/setupTests.ts +++ b/packages/frontend-app-api/src/setupTests.ts @@ -15,3 +15,18 @@ */ import '@testing-library/jest-dom'; + +// eslint-disable-next-line no-console +const originalConsoleWarn = console.warn; +// eslint-disable-next-line no-console +console.warn = (...args: any[]) => { + const message = args[0]; + if ( + typeof message === 'string' && + (message.includes('CSSOM.parse is not a function') || + message.includes('[JSS]')) + ) { + return; + } + originalConsoleWarn(...args); +}; diff --git a/packages/frontend-plugin-api/src/setupTests.ts b/packages/frontend-plugin-api/src/setupTests.ts index c30f1d15cb..9abf7083b5 100644 --- a/packages/frontend-plugin-api/src/setupTests.ts +++ b/packages/frontend-plugin-api/src/setupTests.ts @@ -15,3 +15,18 @@ */ import '@testing-library/jest-dom'; + +// eslint-disable-next-line no-console +const originalConsoleWarn = console.warn; +// eslint-disable-next-line no-console +console.warn = (...args: any[]) => { + const message = args[0]; + if ( + typeof message === 'string' && + (message.includes('CSSOM.parse is not a function') || + message.includes('[JSS]')) + ) { + return; + } + originalConsoleWarn(...args); +}; diff --git a/packages/frontend-test-utils/src/setupTests.ts b/packages/frontend-test-utils/src/setupTests.ts index c30f1d15cb..9abf7083b5 100644 --- a/packages/frontend-test-utils/src/setupTests.ts +++ b/packages/frontend-test-utils/src/setupTests.ts @@ -15,3 +15,18 @@ */ import '@testing-library/jest-dom'; + +// eslint-disable-next-line no-console +const originalConsoleWarn = console.warn; +// eslint-disable-next-line no-console +console.warn = (...args: any[]) => { + const message = args[0]; + if ( + typeof message === 'string' && + (message.includes('CSSOM.parse is not a function') || + message.includes('[JSS]')) + ) { + return; + } + originalConsoleWarn(...args); +}; diff --git a/plugins/api-docs/src/components/ApisCards/presets.tsx b/plugins/api-docs/src/components/ApisCards/presets.tsx index b3543b79f5..7c4211248a 100644 --- a/plugins/api-docs/src/components/ApisCards/presets.tsx +++ b/plugins/api-docs/src/components/ApisCards/presets.tsx @@ -38,6 +38,7 @@ const ApiDefinitionButton = ({ apiEntity }: { apiEntity: ApiEntity }) => { setDialogOpen(!dialogOpen)} + value={dialogOpen} > diff --git a/plugins/catalog-react/src/hooks/useEntity.test.tsx b/plugins/catalog-react/src/hooks/useEntity.test.tsx index 3b1190de2b..2923ed828d 100644 --- a/plugins/catalog-react/src/hooks/useEntity.test.tsx +++ b/plugins/catalog-react/src/hooks/useEntity.test.tsx @@ -24,20 +24,26 @@ import { } from './useEntity'; import { Entity } from '@backstage/catalog-model'; import { analyticsApiRef, useAnalytics } from '@backstage/core-plugin-api'; -import { MockAnalyticsApi, TestApiRegistry } from '@backstage/test-utils'; +import { + MockAnalyticsApi, + TestApiRegistry, + withLogCollector, +} from '@backstage/test-utils'; import { ApiProvider } from '@backstage/core-app-api'; const entity = { metadata: { name: 'my-entity' }, kind: 'MyKind' } as Entity; describe('useEntity', () => { it('should throw if no entity is provided', async () => { - expect(() => - renderHook(() => useEntity(), { - wrapper: ({ children }: React.PropsWithChildren<{}>) => ( - - ), - }), - ).toThrow(/entity has not been loaded/); + withLogCollector(() => { + expect(() => + renderHook(() => useEntity(), { + wrapper: ({ children }: React.PropsWithChildren<{}>) => ( + + ), + }), + ).toThrow(/entity has not been loaded/); + }); }); it('should provide an entity', async () => { diff --git a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx index 081c718c2f..21478f0636 100644 --- a/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx +++ b/plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.test.tsx @@ -15,11 +15,8 @@ */ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-utils'; - import React from 'react'; - -import { fireEvent, waitFor } from '@testing-library/react'; - +import { fireEvent, waitFor, act } from '@testing-library/react'; import { TextSize } from '../plugin'; describe('TextSize', () => { @@ -47,7 +44,9 @@ describe('TextSize', () => { const slider = getByRole('slider'); - slider.focus(); + act(() => { + slider.focus(); + }); fireEvent.keyDown(slider, { key: 'ArrowRight', diff --git a/plugins/techdocs-module-addons-contrib/src/setupTests.ts b/plugins/techdocs-module-addons-contrib/src/setupTests.ts index 228079bc19..680ab8237b 100644 --- a/plugins/techdocs-module-addons-contrib/src/setupTests.ts +++ b/plugins/techdocs-module-addons-contrib/src/setupTests.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import '@testing-library/jest-dom'; Element.prototype.scrollIntoView = jest.fn(); @@ -41,3 +42,5 @@ global.BroadcastChannel = jest close: jest.fn(), }; }); + +window.scroll = jest.fn(); diff --git a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx index fd008e301c..35770d43b5 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearch.test.tsx @@ -18,7 +18,13 @@ import { ApiProvider } from '@backstage/core-app-api'; import { searchApiRef } from '@backstage/plugin-search-react'; import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils'; import Button from '@material-ui/core/Button'; -import { fireEvent, screen, waitFor, within } from '@testing-library/react'; +import { + fireEvent, + screen, + waitFor, + within, + act, +} from '@testing-library/react'; import React, { useState } from 'react'; import { TechDocsSearch } from './TechDocsSearch'; @@ -91,9 +97,11 @@ it('should trigger query when autocomplete input changed', async () => { const autocomplete = screen.getByTestId('techdocs-search-bar'); const input = within(autocomplete).getByRole('textbox'); - autocomplete.click(); - autocomplete.focus(); - fireEvent.change(input, { target: { value: 'asdf' } }); + act(() => { + autocomplete.click(); + autocomplete.focus(); + fireEvent.change(input, { target: { value: 'asdf' } }); + }); await singleResult; await waitFor(() => @@ -148,7 +156,9 @@ it('should update filter values when a new entityName is provided', async () => }); const button = screen.getByText('Update Entity'); - button.click(); + act(() => { + button.click(); + }); await singleResult; await waitFor(() => diff --git a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx index f6be87f14f..d4b941c850 100644 --- a/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx +++ b/plugins/user-settings/src/components/SettingsPage/SettingsPage.test.tsx @@ -22,6 +22,7 @@ import { useOutlet } from 'react-router-dom'; import { SettingsLayout } from '../SettingsLayout'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { entityRouteRef } from '@backstage/plugin-catalog-react'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -34,7 +35,9 @@ describe('', () => { }); it('should render the default settings page with 3 tabs', async () => { - const { container } = await renderInTestApp(); + const { container } = await renderInTestApp(, { + mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef }, + }); const tabs = container.querySelectorAll('[class*=MuiTabs-root] a'); expect(tabs).toHaveLength(3); @@ -47,7 +50,9 @@ describe('', () => { ); (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute); - const { container } = await renderInTestApp(); + const { container } = await renderInTestApp(, { + mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef }, + }); const tabs = container.querySelectorAll('[class*=MuiTabs-root] a'); expect(tabs).toHaveLength(4); @@ -61,7 +66,9 @@ describe('', () => { ); (useOutlet as jest.Mock).mockReturnValue(advancedTabRoute); - const { container } = await renderInTestApp(); + const { container } = await renderInTestApp(, { + mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef }, + }); const tabs = container.querySelectorAll('[class*=MuiTabs-root] a'); expect(tabs).toHaveLength(4); @@ -84,7 +91,9 @@ describe('', () => { ); (useOutlet as jest.Mock).mockReturnValue(customLayout); - const { container } = await renderInTestApp(); + const { container } = await renderInTestApp(, { + mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef }, + }); const tabs = container.querySelectorAll('[class*=MuiTabs-root] a'); expect(tabs).toHaveLength(2);