m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Updating tags in Typography component (#12682)

Browse Source
This commit is contained in:
George Marshall 2021-11-23 15:32:59 -08:00 committed by GitHub
parent d9d1a831a6
commit dd77700e65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/ui/typography/typography.js
View File

@ -79,9 +79,11 @@ Typography.propTypes = {
'h5', 'h5',
'h6', 'h6',
'span', 'span',
'strong',
'em',
'li',
'div', 'div',
'dt', 'dt',
'dd', 'dd',
'i',
]), ]),
}; };

59
ui/components/ui/typography/typography.test.js Normal file
View File

@ -0,0 +1,59 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import Typography from '.';
describe('Typography', () => {
it('should render the Typography without crashing', () => {
const { getByText } = render(<Typography>Test type</Typography>);
expect(getByText('Test type')).toBeDefined();
});
it('should render the Typography with correct html tags', () => {
const { getByText, container } = render(
<>
<Typography tag="p">p tag</Typography>
<Typography tag="h1">h1 tag</Typography>
<Typography tag="h2">h2 tag</Typography>
<Typography tag="h3">h3 tag</Typography>
<Typography tag="h4">h4 tag</Typography>
<Typography tag="h5">h5 tag</Typography>
<Typography tag="h6">h6 tag</Typography>
<Typography tag="span">span tag</Typography>
<Typography tag="strong">strong tag</Typography>
<Typography tag="em">em tag</Typography>
<Typography tag="li">li tag</Typography>
<Typography tag="div">div tag</Typography>
<Typography tag="dt">dt tag</Typography>
<Typography tag="dd">dd tag</Typography>
<Typography tag="i">i tag</Typography>
</>,
);
expect(container.querySelector('p')).toBeDefined();
expect(getByText('p tag')).toBeDefined();
expect(container.querySelector('h1')).toBeDefined();
expect(getByText('h1 tag')).toBeDefined();
expect(container.querySelector('h2')).toBeDefined();
expect(getByText('h2 tag')).toBeDefined();
expect(container.querySelector('h3')).toBeDefined();
expect(getByText('h3 tag')).toBeDefined();
expect(container.querySelector('h4')).toBeDefined();
expect(getByText('h4 tag')).toBeDefined();
expect(container.querySelector('h5')).toBeDefined();
expect(getByText('h5 tag')).toBeDefined();
expect(container.querySelector('h6')).toBeDefined();
expect(getByText('h6 tag')).toBeDefined();
expect(container.querySelector('span')).toBeDefined();
expect(getByText('span tag')).toBeDefined();
expect(container.querySelector('strong')).toBeDefined();
expect(getByText('strong tag')).toBeDefined();
expect(container.querySelector('em')).toBeDefined();
expect(getByText('em tag')).toBeDefined();
expect(container.querySelector('li')).toBeDefined();
expect(getByText('li tag')).toBeDefined();
expect(container.querySelector('div')).toBeDefined();
expect(getByText('div tag')).toBeDefined();
expect(container.querySelector('dt')).toBeDefined();
expect(getByText('dt tag')).toBeDefined();
expect(container.querySelector('dd')).toBeDefined();
expect(getByText('dd tag')).toBeDefined();
});
});