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}