-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Heading: Complete TypeScript migration of component (#41921)
- Loading branch information
Petter Walbø Johnsgård
committed
Jun 28, 2022
1 parent
8854214
commit 443e8cb
Showing
9 changed files
with
110 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { Heading } from '../'; | ||
|
|
||
| describe( 'props', () => { | ||
| test( 'should render correctly', () => { | ||
| render( <Heading>Code is Poetry</Heading> ); | ||
| expect( screen.getByRole( 'heading' ) ).toMatchSnapshot(); | ||
| } ); | ||
|
|
||
| test( 'should render level as a number', () => { | ||
| render( <Heading>Code is Poetry</Heading> ); | ||
| render( <Heading level={ 4 }>Code is Poetry</Heading> ); | ||
| expect( | ||
| screen.getByRole( 'heading', { level: 4 } ) | ||
| ).toMatchStyleDiffSnapshot( | ||
| screen.getByRole( 'heading', { level: 2 } ) | ||
| ); | ||
| } ); | ||
|
|
||
| test( 'should render level as a string', () => { | ||
| render( <Heading>Code is Poetry</Heading> ); | ||
| render( <Heading level="4">Code is Poetry</Heading> ); | ||
| expect( | ||
| screen.getByRole( 'heading', { level: 4 } ) | ||
| ).toMatchStyleDiffSnapshot( | ||
| screen.getByRole( 'heading', { level: 2 } ) | ||
| ); | ||
| } ); | ||
|
|
||
| test( 'should allow as prop', () => { | ||
| render( | ||
| <Heading level="1" as="span"> | ||
| Code is Poetry | ||
| </Heading> | ||
| ); | ||
| expect( screen.getByRole( 'heading' ).tagName ).toBe( 'SPAN' ); | ||
| } ); | ||
|
|
||
| test( 'should render a11y props when not using a semantic element', () => { | ||
| render( | ||
| <Heading level="3" as="div"> | ||
| Code is Poetry | ||
| </Heading> | ||
| ); | ||
| expect( | ||
| screen.getByRole( 'heading', { level: 3 } ) | ||
| ).toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| test( 'should not render a11y props when using a semantic element', () => { | ||
| render( | ||
| <Heading level="1" as="h4"> | ||
| Code is Poetry | ||
| </Heading> | ||
| ); | ||
| expect( screen.getByRole( 'heading' ) ).not.toHaveAttribute( 'role' ); | ||
| expect( screen.getByRole( 'heading' ) ).not.toHaveAttribute( | ||
| 'aria-level' | ||
| ); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { Props as TextProps } from '../text/types'; | ||
|
|
||
| export type HeadingSize = | ||
| | 1 | ||
| | 2 | ||
| | 3 | ||
| | 4 | ||
| | 5 | ||
| | 6 | ||
| | '1' | ||
| | '2' | ||
| | '3' | ||
| | '4' | ||
| | '5' | ||
| | '6'; | ||
|
|
||
| export type HeadingProps = Omit< TextProps, 'size' > & { | ||
| /** | ||
| * Passing any of the heading levels to `level` will both render the correct | ||
| * typographic text size as well as the semantic element corresponding to | ||
| * the level (`h1` for `1` for example). | ||
| * | ||
| * @default 2 | ||
| */ | ||
| level?: HeadingSize; | ||
| }; |