diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx index 4e6160c52f1..ea2ca674758 100644 --- a/packages/react-core/src/components/Title/__tests__/Title.test.tsx +++ b/packages/react-core/src/components/Title/__tests__/Title.test.tsx @@ -1,25 +1,159 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; -import { Title, TitleSizes } from '..'; - -describe('Title', () => { - Object.values(TitleSizes).forEach(size => { - test(`${size} Title`, () => { - const { asFragment } = render( - - {size} Title - - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); - - test('Heading level can be set using a string value', () => { - render( - - H3 Heading - - ); - expect(screen.getByRole('heading').parentElement.querySelector('h3')).toBeInTheDocument(); - }); +import { Title } from '../Title'; + +test('Renders without children', () => { + render( +
+ + </div> + ); + expect(screen.getByTestId('title').firstChild).toBeVisible(); +}); + +test('Renders children', () => { + render(<Title headingLevel="h1">Test); + expect(screen.getByText('Test')).toBeVisible(); +}); + +test('Renders with the pf-c-title', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-c-title'); +}); + +test('Renders with only the class pf-c-title and the heading level modifier class pf-m-2xl by default', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-c-title pf-m-2xl', { exact: true }); +}); + +test('Renders with custom class name when className prop is passed', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('test-class'); +}); + +test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl'); +}); + +test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-m-xl'); +}); + +test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-m-lg'); +}); + +test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); +}); + +test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); +}); + +test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); +}); + +test('Renders with class name pf-m-md when "md" is passed as title size', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); +}); + +test('Renders with class name pf-m-lg when "lg" is passed as title size', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('pf-m-lg'); +}); + +test('Renders with class name pf-m-xl when "xl" is passed as title size', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('pf-m-xl'); +}); + +test('Renders with class name pf-m-2xl when "2xl" is passed as title size', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl'); +}); + +test('Renders with class name pf-m-3xl when "3xl" is passed as title size', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('pf-m-3xl'); +}); + +test('Renders with class name pf-m-4xl when "4xl" is passed as title size', () => { + render( + + Test + + ); + expect(screen.getByRole('heading')).toHaveClass('pf-m-4xl'); +}); + +test('Renders with tag name "h1" when "h1" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading', { level: 1 })).toBeVisible(); +}); + +test('Renders with tag name "h2" when "h2" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading', { level: 2 })).toBeVisible(); +}); + +test('Renders with tag name "h3" when "h3" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading', { level: 3 })).toBeVisible(); +}); + +test('Renders with tag name "h4" when "h4" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading', { level: 4 })).toBeVisible(); +}); + +test('Renders with tag name "h5" when "h5" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading', { level: 5 })).toBeVisible(); +}); + +test('Renders with tag name "h6" when "h6" is passed as heading level', () => { + render(Test); + expect(screen.getByRole('heading', { level: 6 })).toBeVisible(); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render( + + Test + + ); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap index 22d6b37c393..8f68dec74c5 100644 --- a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap +++ b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap @@ -1,79 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Title 2xl Title 1`] = ` +exports[`Matches the snapshot 1`] = `

- 2xl Title + Test

-`; - -exports[`Title 3xl Title 1`] = ` - -

- 3xl Title -

- -`; - -exports[`Title 4xl Title 1`] = ` - -

- 4xl Title -

- -`; - -exports[`Title lg Title 1`] = ` - -

- lg Title -

- -`; - -exports[`Title md Title 1`] = ` - -

- md Title -

- -`; - -exports[`Title xl Title 1`] = ` - -

- xl Title -

- -`; +`; \ No newline at end of file