diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 248b9e227c..9ed964db44 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -52,10 +52,10 @@ import { Theme } from '@material-ui/core/styles'; import { TooltipProps } from '@material-ui/core/Tooltip'; import { WithStyles } from '@material-ui/core/styles'; -// @public (undocumented) +// @public export function AlertDisplay(props: AlertDisplayProps): JSX.Element | null; -// @public +// @public (undocumented) export type AlertDisplayProps = { anchorOrigin?: { vertical: 'top' | 'bottom'; diff --git a/packages/core-components/src/components/Avatar/Avatar.test.tsx b/packages/core-components/src/components/Avatar/Avatar.test.tsx index d7bbf712fe..4c726eb785 100644 --- a/packages/core-components/src/components/Avatar/Avatar.test.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.test.tsx @@ -29,7 +29,9 @@ describe('', () => { it('generates a background color', async () => { const bgcolor = stringToColor('John Doe'); const { getByText } = render(); - expect(getByText('JD')).toHaveStyle(`background-color: ${bgcolor}`); + expect(getByText('JD').parentElement).toHaveStyle( + `background-color: ${bgcolor}`, + ); }); it('does not generate a background color when a picture is given', async () => { diff --git a/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx b/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx index 207354fe4b..6fb759b340 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx @@ -63,7 +63,6 @@ export type MetadataTableListItemClassKey = 'root' | 'random'; const listItemStyles = (theme: Theme) => createStyles({ root: { - gutters: 0, padding: theme.spacing(0, 0, 1, 0), }, random: {}, diff --git a/packages/test-utils/api-report.md b/packages/test-utils/api-report.md index 1b0aa44fc6..e11072f5a6 100644 --- a/packages/test-utils/api-report.md +++ b/packages/test-utils/api-report.md @@ -23,6 +23,7 @@ import { FetchApi } from '@backstage/core-plugin-api'; import { IdentityApi } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/types'; import { JsonValue } from '@backstage/types'; +import { MatcherFunction } from '@testing-library/react'; import { Observable } from '@backstage/types'; import { PermissionApi } from '@backstage/plugin-permission-react'; import { PropsWithChildren } from 'react'; @@ -241,6 +242,9 @@ export type TestAppOptions = { }; }; +// @public +export const textContentMatcher: (text: string) => MatcherFunction; + // @public export function withLogCollector( callback: AsyncLogCollector, diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx index 3d2b5a0212..a19fe53301 100644 --- a/packages/test-utils/src/testUtils/appWrappers.tsx +++ b/packages/test-utils/src/testUtils/appWrappers.tsx @@ -29,7 +29,7 @@ import { attachComponentData, createRouteRef, } from '@backstage/core-plugin-api'; -import { RenderResult } from '@testing-library/react'; +import { MatcherFunction, RenderResult } from '@testing-library/react'; import { renderWithEffects } from './testingLibrary'; import { defaultApis } from './defaultApis'; import { mockApis } from './mockApis'; @@ -242,3 +242,24 @@ export async function renderInTestApp( wrapper: createTestAppWrapper(options), }); } + +/** + * Returns a `@testing-library/react` valid MatcherFunction for supplied text + * + * @param string - text Text to match by element's textContent + * + * @public + */ +export const textContentMatcher = + (text: string): MatcherFunction => + (_, node) => { + if (!node) { + return false; + } + + const hasText = (textNode: Element) => textNode?.textContent === text; + const childrenDontHaveText = (containerNode: Element) => + Array.from(containerNode?.children).every(child => !hasText(child)); + + return hasText(node) && childrenDontHaveText(node); + }; diff --git a/packages/test-utils/src/testUtils/index.tsx b/packages/test-utils/src/testUtils/index.tsx index 1df236d92c..8fc1395eb8 100644 --- a/packages/test-utils/src/testUtils/index.tsx +++ b/packages/test-utils/src/testUtils/index.tsx @@ -19,6 +19,7 @@ export { default as mockBreakpoint } from './mockBreakpoint'; export { wrapInTestApp, renderInTestApp, + textContentMatcher, createTestAppWrapper, } from './appWrappers'; export type { TestAppOptions } from './appWrappers'; diff --git a/plugins/git-release-manager/src/features/Features.test.tsx b/plugins/git-release-manager/src/features/Features.test.tsx index a77dcfe9fc..f3a70c2bda 100644 --- a/plugins/git-release-manager/src/features/Features.test.tsx +++ b/plugins/git-release-manager/src/features/Features.test.tsx @@ -55,7 +55,7 @@ describe('Features', () => { expect(getByTestId(TEST_IDS.info.info)).toMatchInlineSnapshot(`
{ : The source control system where releases reside in a practical sense. Read more about { > Git releases , Opens in a new window diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx index da53db687b..f221a36cee 100644 --- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx +++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import * as deployments from '../../__fixtures__/2-deployments.json'; -import { renderInTestApp } from '@backstage/test-utils'; +import { renderInTestApp, textContentMatcher } from '@backstage/test-utils'; import { DeploymentDrawer } from './DeploymentDrawer'; describe('DeploymentDrawer', () => { @@ -33,9 +33,13 @@ describe('DeploymentDrawer', () => { expect(getByText('YAML')).toBeInTheDocument(); expect(getByText('Strategy')).toBeInTheDocument(); expect(getByText('Rolling Update:')).toBeInTheDocument(); - expect(getByText('Max Surge: 25%')).toBeInTheDocument(); - expect(getByText('Max Unavailable: 25%')).toBeInTheDocument(); - expect(getByText('Type: RollingUpdate')).toBeInTheDocument(); + expect(getByText(textContentMatcher('Max Surge: 25%'))).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Max Unavailable: 25%')), + ).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Type: RollingUpdate')), + ).toBeInTheDocument(); expect(getByText('Min Ready Seconds')).toBeInTheDocument(); expect(getByText('???')).toBeInTheDocument(); expect(getByText('Progress Deadline Seconds')).toBeInTheDocument(); diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx index f0146cc22e..f478278b02 100644 --- a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx +++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import * as ingresses from './__fixtures__/2-ingresses.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { textContentMatcher, wrapInTestApp } from '@backstage/test-utils'; import { IngressDrawer } from './IngressDrawer'; describe('IngressDrawer', () => { @@ -28,11 +28,17 @@ describe('IngressDrawer', () => { ), ); - expect(getAllByText('awesome-service')).toHaveLength(2); + expect(getAllByText('awesome-service')).toHaveLength(4); expect(getByText('YAML')).toBeInTheDocument(); expect(getByText('Rules')).toBeInTheDocument(); - expect(getByText('Host: api.awesome-host.io')).toBeInTheDocument(); - expect(getAllByText('Service Port: 80')).toHaveLength(2); - expect(getAllByText('Service Name: awesome-service')).toHaveLength(2); + expect( + getByText(textContentMatcher('Host: api.awesome-host.io')), + ).toBeInTheDocument(); + expect(getAllByText(textContentMatcher('Service Port: 80'))).toHaveLength( + 2, + ); + expect( + getAllByText(textContentMatcher('Service Name: awesome-service')), + ).toHaveLength(2); }); }); diff --git a/plugins/kubernetes/src/components/Pods/PodDrawer.test.tsx b/plugins/kubernetes/src/components/Pods/PodDrawer.test.tsx index c3b39e9f70..b11093250d 100644 --- a/plugins/kubernetes/src/components/Pods/PodDrawer.test.tsx +++ b/plugins/kubernetes/src/components/Pods/PodDrawer.test.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import * as pod from './__fixtures__/pod.json'; import * as crashingPod from './__fixtures__/crashing-pod.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { textContentMatcher, wrapInTestApp } from '@backstage/test-utils'; import { PodDrawer } from './PodDrawer'; describe('PodDrawer', () => { @@ -46,8 +46,10 @@ describe('PodDrawer', () => { expect(getAllByText('True')).toHaveLength(4); expect(getByText('Exposed Ports')).toBeInTheDocument(); expect(getByText('Nginx:')).toBeInTheDocument(); - expect(getByText('Container Port: 80')).toBeInTheDocument(); - expect(getByText('Protocol: TCP')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Container Port: 80')), + ).toBeInTheDocument(); + expect(getByText(textContentMatcher('Protocol: TCP'))).toBeInTheDocument(); }); it('should render crashing pod', async () => { const { getByText, getAllByText } = render( @@ -80,12 +82,18 @@ describe('PodDrawer', () => { getAllByText('containers with unready status: [side-car other-side-car]'), ).toHaveLength(2); expect(getByText('Exposed Ports')).toBeInTheDocument(); - expect(getAllByText('Protocol: TCP')).toHaveLength(3); + expect(getAllByText(textContentMatcher('Protocol: TCP'))).toHaveLength(3); expect(getByText('Nginx:')).toBeInTheDocument(); - expect(getByText('Container Port: 80')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Container Port: 80')), + ).toBeInTheDocument(); expect(getByText('Side Car:')).toBeInTheDocument(); - expect(getByText('Container Port: 81')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Container Port: 81')), + ).toBeInTheDocument(); expect(getByText('Other Side Car:')).toBeInTheDocument(); - expect(getByText('Container Port: 82')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Container Port: 82')), + ).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx index 79df15d215..7eb51f073b 100644 --- a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx +++ b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import * as services from './__fixtures__/2-services.json'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { textContentMatcher, wrapInTestApp } from '@backstage/test-utils'; import { ServiceDrawer } from './ServiceDrawer'; describe('ServiceDrawer', () => { @@ -33,7 +33,11 @@ describe('ServiceDrawer', () => { expect(getByText('YAML')).toBeInTheDocument(); expect(getByText('Cluster IP')).toBeInTheDocument(); expect(getByText('Ports')).toBeInTheDocument(); - expect(getByText('Target Port: 1997')).toBeInTheDocument(); - expect(getByText('App: awesome-service')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Target Port: 1997')), + ).toBeInTheDocument(); + expect( + getByText(textContentMatcher('App: awesome-service')), + ).toBeInTheDocument(); }); }); diff --git a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx index a88c26785d..c187c7d05d 100644 --- a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx +++ b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import * as statefulsets from '../../__fixtures__/2-statefulsets.json'; -import { renderInTestApp } from '@backstage/test-utils'; +import { renderInTestApp, textContentMatcher } from '@backstage/test-utils'; import { StatefulSetDrawer } from './StatefulSetDrawer'; describe('StatefulSetDrawer', () => { @@ -28,19 +28,25 @@ describe('StatefulSetDrawer', () => { />, ); - expect(getAllByText('dice-roller')).toHaveLength(3); + expect(getAllByText('dice-roller')).toHaveLength(4); expect(getByText('StatefulSet')).toBeInTheDocument(); expect(getByText('YAML')).toBeInTheDocument(); - expect(getByText('Type: RollingUpdate')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Type: RollingUpdate')), + ).toBeInTheDocument(); expect(getByText('Rolling Update:')).toBeInTheDocument(); - expect(getByText('Max Surge: 25%')).toBeInTheDocument(); - expect(getByText('Max Unavailable: 25%')).toBeInTheDocument(); + expect(getByText(textContentMatcher('Max Surge: 25%'))).toBeInTheDocument(); + expect( + getByText(textContentMatcher('Max Unavailable: 25%')), + ).toBeInTheDocument(); expect(getByText('Pod Management Policy')).toBeInTheDocument(); expect(getByText('Parallel')).toBeInTheDocument(); expect(getByText('Service Name')).toBeInTheDocument(); expect(getByText('Selector')).toBeInTheDocument(); expect(getByText('Match Labels:')).toBeInTheDocument(); - expect(getByText('App: dice-roller')).toBeInTheDocument(); + expect( + getByText(textContentMatcher('App: dice-roller')), + ).toBeInTheDocument(); expect(getByText('Revision History Limit')).toBeInTheDocument(); expect(getByText('10')).toBeInTheDocument(); expect(getByText('namespace: default')).toBeInTheDocument();