-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aa3e2e0
commit 9f79d0f
Showing
32 changed files
with
1,084 additions
and
35 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
52 changes: 52 additions & 0 deletions
52
packages/design-system/src/components/Badge/Badge.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 |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { describe, it, expect } from '@jest/globals'; | ||
| import { axe } from 'jest-axe'; | ||
| import { render } from '@testing-library/react'; | ||
| import { Badge, BadgeDropdown } from './'; | ||
|
|
||
| jest.mock('@talend/utils', () => { | ||
| let i = 0; | ||
| return { | ||
| // we need stable but different uuid (is fixed to 42 by current mock) | ||
| randomUUID: () => `mocked-uuid-${i++}`, | ||
| }; | ||
| }); | ||
|
|
||
| describe('Badge', () => { | ||
| it('should render a11y html', async () => { | ||
| const selectedValue = '3'; | ||
| const setSelectedValue = jest.fn(); | ||
| const { container } = render( | ||
| <main> | ||
| <div data-testid="Badge"> | ||
| <Badge | ||
| label="Awesome" | ||
| selectedId={selectedValue} | ||
| value={[ | ||
| { id: '1', label: 'Feature' }, | ||
| { id: '2', label: 'Item' }, | ||
| { id: '3', label: 'Component' }, | ||
| ]} | ||
| onChange={setSelectedValue} | ||
| variant="dropdown" | ||
| /> | ||
| </div> | ||
| <div data-testid="BadgeDropdown"> | ||
| <BadgeDropdown | ||
| label="Awesome" | ||
| selectedId={selectedValue} | ||
| value={[ | ||
| { id: '1', label: 'Feature' }, | ||
| { id: '2', label: 'Item' }, | ||
| { id: '3', label: 'Component' }, | ||
| ]} | ||
| onChange={setSelectedValue} | ||
| /> | ||
| </div> | ||
| TODO: add popover and tag | ||
| </main>, | ||
| ); | ||
| expect(container.firstChild).toMatchSnapshot(); | ||
| const results = await axe(document.body); | ||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
| }); |
273 changes: 273 additions & 0 deletions
273
packages/design-system/src/components/Badge/__snapshots__/Badge.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 |
|---|---|---|
| @@ -0,0 +1,273 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Badge should render a11y html 1`] = ` | ||
| <main> | ||
| <div | ||
| data-testid="Badge" | ||
| > | ||
| <span | ||
| class="theme-badge" | ||
| > | ||
| <div | ||
| class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS theme-padding-top-0 theme-padding-right-XXS theme-padding-bottom-0 theme-padding-left-XXS" | ||
| > | ||
| <span | ||
| class="theme-badge__label" | ||
| data-test="badge-label" | ||
| data-testid="badge-label" | ||
| > | ||
| Awesome | ||
| </span> | ||
| <span | ||
| class="theme-badge__divider" | ||
| data-testid="badge-divider" | ||
| > | ||
| <hr | ||
| aria-orientation="vertical" | ||
| class="theme-divider" | ||
| orientation="vertical" | ||
| /> | ||
| </span> | ||
| <button | ||
| aria-expanded="false" | ||
| aria-pressed="false" | ||
| class="theme-clickable theme-badge__button" | ||
| data-test="dropdown.button.badge-button" | ||
| data-testid="dropdown.button.badge-button" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS" | ||
| > | ||
| Component | ||
| <span | ||
| class="theme-badge-dropdown__button__caret" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| pointer-events="none" | ||
| shape-rendering="geometricPrecision" | ||
| style="width: 1.2rem; height: 1.2rem;" | ||
| > | ||
| <use | ||
| xlink:href="#chevron-down:S" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </span> | ||
| </button> | ||
| <div | ||
| aria-label="Select item" | ||
| aria-orientation="vertical" | ||
| class="theme-dropdownShell" | ||
| data-test="dropdown.menu" | ||
| data-testid="dropdown.menu" | ||
| role="menu" | ||
| style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" | ||
| tabindex="-1" | ||
| > | ||
| <div | ||
| class="theme-animatedZone" | ||
| > | ||
| <div | ||
| class="theme-stack theme-justify-stretch theme-align-stretch theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0" | ||
| > | ||
| <button | ||
| class="theme-clickable" | ||
| data-test="dropdown.menuitem.Feature-0" | ||
| data-testid="dropdown.menuitem.Feature-0" | ||
| id="mocked-uuid-6" | ||
| role="menuitem" | ||
| tabindex="0" | ||
| type="button" | ||
| > | ||
| <div | ||
| class="theme-dropdownEntry" | ||
| > | ||
| <span | ||
| class="theme-buttonContent" | ||
| > | ||
| Feature | ||
| </span> | ||
| </div> | ||
| </button> | ||
| <button | ||
| class="theme-clickable" | ||
| data-test="dropdown.menuitem.Item-1" | ||
| data-testid="dropdown.menuitem.Item-1" | ||
| id="mocked-uuid-7" | ||
| role="menuitem" | ||
| tabindex="0" | ||
| type="button" | ||
| > | ||
| <div | ||
| class="theme-dropdownEntry" | ||
| > | ||
| <span | ||
| class="theme-buttonContent" | ||
| > | ||
| Item | ||
| </span> | ||
| </div> | ||
| </button> | ||
| <button | ||
| class="theme-clickable" | ||
| data-test="dropdown.menuitem.Component-2" | ||
| data-testid="dropdown.menuitem.Component-2" | ||
| id="mocked-uuid-8" | ||
| role="menuitem" | ||
| tabindex="0" | ||
| type="button" | ||
| > | ||
| <div | ||
| class="theme-dropdownEntry" | ||
| > | ||
| <span | ||
| class="theme-buttonContent" | ||
| > | ||
| Component | ||
| </span> | ||
| </div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </span> | ||
| </div> | ||
| <div | ||
| data-testid="BadgeDropdown" | ||
| > | ||
| <span | ||
| class="theme-badge" | ||
| > | ||
| <div | ||
| class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS theme-padding-top-0 theme-padding-right-XXS theme-padding-bottom-0 theme-padding-left-XXS" | ||
| > | ||
| <span | ||
| class="theme-badge__label" | ||
| data-test="badge-label" | ||
| data-testid="badge-label" | ||
| > | ||
| Awesome | ||
| </span> | ||
| <span | ||
| class="theme-badge__divider" | ||
| data-testid="badge-divider" | ||
| > | ||
| <hr | ||
| aria-orientation="vertical" | ||
| class="theme-divider" | ||
| orientation="vertical" | ||
| /> | ||
| </span> | ||
| <button | ||
| aria-expanded="false" | ||
| aria-pressed="false" | ||
| class="theme-clickable theme-badge__button" | ||
| data-test="dropdown.button.badge-button" | ||
| data-testid="dropdown.button.badge-button" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS" | ||
| > | ||
| Component | ||
| <span | ||
| class="theme-badge-dropdown__button__caret" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| pointer-events="none" | ||
| shape-rendering="geometricPrecision" | ||
| style="width: 1.2rem; height: 1.2rem;" | ||
| > | ||
| <use | ||
| xlink:href="#chevron-down:S" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </span> | ||
| </button> | ||
| <div | ||
| aria-label="Select item" | ||
| aria-orientation="vertical" | ||
| class="theme-dropdownShell" | ||
| data-test="dropdown.menu" | ||
| data-testid="dropdown.menu" | ||
| role="menu" | ||
| style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" | ||
| tabindex="-1" | ||
| > | ||
| <div | ||
| class="theme-animatedZone" | ||
| > | ||
| <div | ||
| class="theme-stack theme-justify-stretch theme-align-stretch theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0" | ||
| > | ||
| <button | ||
| class="theme-clickable" | ||
| data-test="dropdown.menuitem.Feature-0" | ||
| data-testid="dropdown.menuitem.Feature-0" | ||
| id="mocked-uuid-9" | ||
| role="menuitem" | ||
| tabindex="0" | ||
| type="button" | ||
| > | ||
| <div | ||
| class="theme-dropdownEntry" | ||
| > | ||
| <span | ||
| class="theme-buttonContent" | ||
| > | ||
| Feature | ||
| </span> | ||
| </div> | ||
| </button> | ||
| <button | ||
| class="theme-clickable" | ||
| data-test="dropdown.menuitem.Item-1" | ||
| data-testid="dropdown.menuitem.Item-1" | ||
| id="mocked-uuid-10" | ||
| role="menuitem" | ||
| tabindex="0" | ||
| type="button" | ||
| > | ||
| <div | ||
| class="theme-dropdownEntry" | ||
| > | ||
| <span | ||
| class="theme-buttonContent" | ||
| > | ||
| Item | ||
| </span> | ||
| </div> | ||
| </button> | ||
| <button | ||
| class="theme-clickable" | ||
| data-test="dropdown.menuitem.Component-2" | ||
| data-testid="dropdown.menuitem.Component-2" | ||
| id="mocked-uuid-11" | ||
| role="menuitem" | ||
| tabindex="0" | ||
| type="button" | ||
| > | ||
| <div | ||
| class="theme-dropdownEntry" | ||
| > | ||
| <span | ||
| class="theme-buttonContent" | ||
| > | ||
| Component | ||
| </span> | ||
| </div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </span> | ||
| </div> | ||
| TODO: add popover and tag | ||
| </main> | ||
| `; |
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
54 changes: 54 additions & 0 deletions
54
packages/design-system/src/components/Breadcrumbs/Breadcrumbs.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 |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { describe, it, expect } from '@jest/globals'; | ||
| import { axe } from 'jest-axe'; | ||
| import { render } from '@testing-library/react'; | ||
| import { Breadcrumbs } from './'; | ||
|
|
||
| jest.mock('@talend/utils', () => { | ||
| let i = 0; | ||
| return { | ||
| // we need stable but different uuid (is fixed to 42 by current mock) | ||
| randomUUID: () => `mocked-uuid-${i++}`, | ||
| }; | ||
| }); | ||
|
|
||
| describe('Breadcrumbs', () => { | ||
| it('should render a11y html', async () => { | ||
| const { container } = render( | ||
| <main> | ||
| <Breadcrumbs | ||
| items={[ | ||
| { | ||
| label: 'Link example', | ||
| href: '/', | ||
| }, | ||
| { | ||
| label: 'Link example', | ||
| href: '/here', | ||
| }, | ||
| { | ||
| label: 'Link example', | ||
| href: '/there', | ||
| target: '_blank', | ||
| }, | ||
| { | ||
| label: 'Link example', | ||
| href: '/away', | ||
| }, | ||
| { | ||
| label: | ||
| 'Link example that is much too long and should create an ellipsis if all is well', | ||
| href: '/more', | ||
| }, | ||
| { | ||
| label: 'Label', | ||
| href: '/here', | ||
| }, | ||
| ]} | ||
| /> | ||
| </main>, | ||
| ); | ||
| expect(container.firstChild).toMatchSnapshot(); | ||
| const results = await axe(document.body); | ||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
| }); |
Oops, something went wrong.