-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Divider): update tests to new standards (#9714)
* chore(Divider): update tests to new standards * changes from PR review
- Loading branch information
1 parent
9f21cee
commit 7eff077
Showing
2 changed files
with
97 additions
and
62 deletions.
There are no files selected for viewing
117 changes: 96 additions & 21 deletions
117
packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
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 |
---|---|---|
@@ -1,34 +1,109 @@ | ||
import { Divider } from '../Divider'; | ||
import { Flex, FlexItem } from '../../../layouts/Flex'; | ||
import * as React from 'react'; | ||
import { render } from '@testing-library/react'; | ||
import { render, screen } from '@testing-library/react'; | ||
import { Divider } from '../Divider'; | ||
import styles from '@patternfly/react-styles/css/components/Divider/divider'; | ||
|
||
test('divider using hr', () => { | ||
const { asFragment } = render(<Divider />); | ||
expect(asFragment()).toMatchSnapshot(); | ||
test(`Renders with only the class name ${styles.divider} by default`, () => { | ||
render(<Divider />); | ||
expect(screen.getByRole('separator')).toHaveClass(styles.divider, { exact: true }); | ||
}); | ||
|
||
test('divider using li', () => { | ||
const { asFragment } = render(<Divider component="li" />); | ||
expect(asFragment()).toMatchSnapshot(); | ||
test('Renders with horizontal rule by default', () => { | ||
render(<Divider />); | ||
expect(screen.getByRole('separator')).toContainHTML('<hr class="pf-v5-c-divider" />'); | ||
}); | ||
|
||
test('divider using div', () => { | ||
const { asFragment } = render(<Divider component="div" />); | ||
expect(asFragment()).toMatchSnapshot(); | ||
test('Renders with element passed to component prop', () => { | ||
render(<Divider component="li" />); | ||
expect(screen.getByRole('separator')?.tagName).toBe('LI'); | ||
}); | ||
|
||
test('Test default orientation (vertical divider)', () => { | ||
render(<Divider orientation={{ default: 'vertical' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical'); | ||
}); | ||
|
||
test('Test sm orientation', () => { | ||
render(<Divider orientation={{ sm: 'horizontal' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-sm'); | ||
}); | ||
|
||
test('Test md orientation', () => { | ||
render(<Divider orientation={{ md: 'vertical' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-md'); | ||
}); | ||
|
||
test('Test lg orientation', () => { | ||
render(<Divider orientation={{ lg: 'horizontal' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-lg'); | ||
}); | ||
|
||
test('vertical divider', () => { | ||
const { asFragment } = render( | ||
<Flex> | ||
<FlexItem>first item</FlexItem> | ||
test('Test xl orientation', () => { | ||
render(<Divider orientation={{ xl: 'vertical' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-xl'); | ||
}); | ||
|
||
test('Test 2xl orientation', () => { | ||
render(<Divider orientation={{ '2xl': 'horizontal' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-2xl'); | ||
}); | ||
|
||
test('Test default inset', () => { | ||
render(<Divider inset={{ default: 'insetNone' }} />); | ||
expect(screen.getByRole('separator')).toHaveClass('pf-m-inset-none'); | ||
}); | ||
|
||
test(`Test all insets`, () => { | ||
const insetValues = Object.values([ | ||
'insetNone', | ||
'insetXs', | ||
'insetSm', | ||
'insetMd', | ||
'insetLg', | ||
'insetXl', | ||
'inset2xl', | ||
'inset3xl' | ||
] as ['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl']); | ||
|
||
insetValues.forEach((insetValue) => { | ||
|
||
const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']; | ||
|
||
const classValue = modifiers.forEach((modifier, index) => { | ||
const smClass = `pf-m-inset-${modifier}-on-sm`; | ||
const mdClass = `pf-m-inset-${modifier}-on-md`; | ||
const lgClass = `pf-m-inset-${modifier}-on-lg`; | ||
const xlClass = `pf-m-inset-${modifier}-on-xl`; | ||
const xl2Class = `pf-m-inset-${modifier}-on-2xl`; | ||
}); | ||
|
||
render( | ||
<Divider | ||
orientation={{ | ||
default: 'vertical' | ||
inset={{ | ||
default: insetValue, | ||
sm: insetValue, | ||
md: insetValue, | ||
lg: insetValue, | ||
xl: insetValue, | ||
'2xl': insetValue | ||
}} | ||
/> | ||
<FlexItem>second item</FlexItem> | ||
</Flex> | ||
); | ||
); | ||
}); | ||
const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']; | ||
|
||
const classValue = modifiers.forEach((modifier, index) => { | ||
const smClass = `pf-m-inset-${modifier}-on-sm`; | ||
const mdClass = `pf-m-inset-${modifier}-on-md`; | ||
const lgClass = `pf-m-inset-${modifier}-on-lg`; | ||
const xlClass = `pf-m-inset-${modifier}-on-xl`; | ||
const xl2Class = `pf-m-inset-${modifier}-on-2xl`; | ||
|
||
expect(screen.getAllByRole('separator')[index]).toHaveClass(smClass, mdClass, lgClass, xlClass, xl2Class); | ||
}); | ||
}); | ||
|
||
test('Matches the snapshot', () => { | ||
const { asFragment } = render(<Divider />); | ||
expect(asFragment()).toMatchSnapshot(); | ||
}); |
42 changes: 1 addition & 41 deletions
42
packages/react-core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap
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 |
---|---|---|
@@ -1,49 +1,9 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`divider using div 1`] = ` | ||
<DocumentFragment> | ||
<div | ||
class="pf-v5-c-divider" | ||
role="separator" | ||
/> | ||
</DocumentFragment> | ||
`; | ||
|
||
exports[`divider using hr 1`] = ` | ||
exports[`Matches the snapshot 1`] = ` | ||
<DocumentFragment> | ||
<hr | ||
class="pf-v5-c-divider" | ||
/> | ||
</DocumentFragment> | ||
`; | ||
|
||
exports[`divider using li 1`] = ` | ||
<DocumentFragment> | ||
<li | ||
class="pf-v5-c-divider" | ||
role="separator" | ||
/> | ||
</DocumentFragment> | ||
`; | ||
|
||
exports[`vertical divider 1`] = ` | ||
<DocumentFragment> | ||
<div | ||
class="pf-v5-l-flex" | ||
> | ||
<div | ||
class="" | ||
> | ||
first item | ||
</div> | ||
<hr | ||
class="pf-v5-c-divider pf-m-vertical" | ||
/> | ||
<div | ||
class="" | ||
> | ||
second item | ||
</div> | ||
</div> | ||
</DocumentFragment> | ||
`; |