diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx index 479efe4fd4..0db7c24c96 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.test.tsx @@ -16,6 +16,7 @@ import React from 'react'; import { renderInTestApp } from '@backstage/test-utils'; +import { within } from '@testing-library/react'; import { InfoCard } from './InfoCard'; const minProps = { @@ -36,4 +37,38 @@ describe('', () => { const rendered = await renderInTestApp(); expect(rendered.getByText('A deepLink title')).toBeInTheDocument(); }); + + describe('Subheader', () => { + it('shows the subheader passed in via the subheader prop', async () => { + const { getByTestId } = await renderInTestApp( + , + ); + + const subheaderContainer = getByTestId('info-card-subheader'); + + expect( + within(subheaderContainer).getByText('example subheader'), + ).toBeInTheDocument(); + }); + + it('shows the icon passed in via the icon prop', async () => { + const { getByTestId } = await renderInTestApp( + } />, + ); + + const subheaderContainer = getByTestId('info-card-subheader'); + + expect( + within(subheaderContainer).getByTestId('mock-icon'), + ).toBeInTheDocument(); + }); + + it('is not rendered where there is not an icon or subheading', async () => { + const { queryByTestId } = await renderInTestApp( + , + ); + + expect(queryByTestId('info-card-subheader')).not.toBeInTheDocument(); + }); + }); }); diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx index cafd65de28..95d474aae4 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx @@ -205,7 +205,10 @@ export function InfoCard(props: Props): JSX.Element { } return ( -
+
{subheader &&
{subheader}
} {icon}