fix: Fix tests broken by @backstage/core-components update

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

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';

packages/core-components/src/components/Avatar/Avatar.test.tsx

@@ -29,7 +29,9 @@ describe('<Avatar />', () => {
   it('generates a background color', async () => {
     const bgcolor = stringToColor('John Doe');
     const { getByText } = render(<Avatar displayName="John Doe" />);
-    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 () => {

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: {},

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,

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

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';

plugins/git-release-manager/src/features/Features.test.tsx

@@ -55,7 +55,7 @@ describe('Features', () => {
 
     expect(getByTestId(TEST_IDS.info.info)).toMatchInlineSnapshot(`
       <div
-        class="MuiBox-root MuiBox-root-10"
+        class="MuiBox-root MuiBox-root-11"
         data-testid="grm--info"
       >
         <h6
@@ -72,7 +72,7 @@ describe('Features', () => {
           : The source control system where releases reside in a practical sense. Read more about
            
           <a
-            class="MuiTypography-root MuiLink-root MuiLink-underlineHover Link-externalLink-12 MuiTypography-colorPrimary"
+            class="MuiTypography-root MuiLink-root MuiLink-underlineHover Link-externalLink-13 MuiTypography-colorPrimary"
             href="https://docs.github.com/en/github/administering-a-repository/managing-releases-in-a-repository"
             rel="noopener"
             target="_blank"
@@ -80,7 +80,7 @@ describe('Features', () => {
           >
             Git releases
             <span
-              class="Link-visuallyHidden-11"
+              class="MuiTypography-root Link-visuallyHidden-12 MuiTypography-body1"
             >
               , Opens in a new window
             </span>

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

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

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

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

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