diff --git a/src/components/Headings/heading.test.tsx b/src/components/Headings/heading.test.tsx index 603c31520f..30e0cb8d5a 100644 --- a/src/components/Headings/heading.test.tsx +++ b/src/components/Headings/heading.test.tsx @@ -89,10 +89,10 @@ describe('', () => { expect(wrapper).toBeInTheDocument(); expect(wrapper.tagName.toLowerCase()).toBe('header'); - expect(wrapper.classList.contains('m-slug-header')); + expect(wrapper.classList.contains('m-slug-header')).toBeTruthy(); const content = screen.getByText(text); expect(content.tagName.toLowerCase()).toBe('h2'); - expect(content.classList.contains('a-heading')); + expect(content.classList.contains('m-slug-header__heading')).toBeTruthy(); }); }); diff --git a/src/components/Headings/heading.tsx b/src/components/Headings/heading.tsx index 259f6fef55..3ce4274907 100644 --- a/src/components/Headings/heading.tsx +++ b/src/components/Headings/heading.tsx @@ -1,3 +1,4 @@ +import '@cfpb/cfpb-design-system/src/components/cfpb-typography/slug-header.scss'; import classnames from 'classnames'; import { JSX } from 'react'; import type { HTMLProps } from 'react'; diff --git a/src/components/Headings/headings.stories.tsx b/src/components/Headings/headings.stories.tsx index 1a54e83e33..912a51abe6 100644 --- a/src/components/Headings/headings.stories.tsx +++ b/src/components/Headings/headings.stories.tsx @@ -97,4 +97,18 @@ export const Slug: Story = { type: 'slug', children: 'Slug', }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const slugHeading = canvas.getByRole('heading', { + level: 2, + name: /slug/i, + }); + + await expect(slugHeading.classList.contains('m-slug-header__heading')).toBe( + true, + ); + await expect( + slugHeading.closest('header')?.classList.contains('m-slug-header'), + ).toBe(true); + }, };