@amsterdam/design-system-react 2.0.2 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/Accordion.d.ts +3 -3
- package/dist/Accordion/AccordionSection.d.ts +5 -5
- package/dist/Avatar/Avatar.d.ts +2 -2
- package/dist/Badge/Badge.d.ts +4 -4
- package/dist/Blockquote/Blockquote.d.ts +5 -5
- package/dist/Breakout/BreakoutCell.d.ts +2 -2
- package/dist/Button/Button.d.ts +7 -5
- package/dist/Button/Button.js +1 -0
- package/dist/Card/Card.d.ts +8 -8
- package/dist/Card/CardHeading.d.ts +3 -3
- package/dist/Card/CardHeadingGroup.d.ts +5 -5
- package/dist/Card/CardImage.d.ts +2 -2
- package/dist/Checkbox/Checkbox.d.ts +5 -5
- package/dist/Column/Column.d.ts +5 -5
- package/dist/DateInput/DateInput.d.ts +4 -4
- package/dist/DescriptionList/DescriptionList.d.ts +5 -5
- package/dist/Dialog/Dialog.d.ts +6 -7
- package/dist/Field/Field.d.ts +5 -5
- package/dist/FieldSet/FieldSet.d.ts +31 -10
- package/dist/FieldSet/FieldSet.js +4 -3
- package/dist/Figure/Figure.d.ts +3 -3
- package/dist/Figure/FigureCaption.d.ts +5 -5
- package/dist/FileList/FileList.d.ts +2 -2
- package/dist/FileList/FileListItem.d.ts +4 -4
- package/dist/Grid/Grid.d.ts +2 -2
- package/dist/Grid/GridCell.d.ts +2 -2
- package/dist/Heading/Heading.d.ts +10 -11
- package/dist/Heading/Heading.js +1 -0
- package/dist/Hint/Hint.d.ts +1 -0
- package/dist/Hint/Hint.js +2 -2
- package/dist/Icon/Icon.d.ts +0 -4
- package/dist/IconButton/IconButton.d.ts +4 -2
- package/dist/IconButton/IconButton.js +1 -0
- package/dist/Image/Image.d.ts +5 -5
- package/dist/Image/Image.js +1 -1
- package/dist/ImageSlider/ImageSlider.d.ts +4 -4
- package/dist/ImageSlider/ImageSliderItem.d.ts +5 -5
- package/dist/ImageSlider/ImageSliderThumbnails.d.ts +5 -5
- package/dist/InvalidFormAlert/InvalidFormAlertWithErrors.d.ts +2 -2
- package/dist/Label/Label.d.ts +25 -6
- package/dist/Label/Label.js +3 -2
- package/dist/Link/Link.d.ts +4 -4
- package/dist/LinkList/LinkList.d.ts +1 -1
- package/dist/LinkList/LinkListLink.d.ts +9 -4
- package/dist/LinkList/LinkListLink.js +2 -0
- package/dist/Logo/Logo.d.ts +2 -2
- package/dist/Menu/Menu.d.ts +31 -10
- package/dist/Menu/Menu.js +6 -1
- package/dist/Menu/MenuLink.d.ts +10 -4
- package/dist/OrderedList/OrderedList.d.ts +5 -5
- package/dist/Page/Page.d.ts +6 -2
- package/dist/Page/Page.js +1 -1
- package/dist/PageHeader/PageHeader.d.ts +8 -7
- package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.d.ts +1 -1
- package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js +0 -4
- package/dist/PageHeader/PageHeaderMenuIcon.js +1 -1
- package/dist/PageHeader/PageHeaderMenuLink.d.ts +13 -6
- package/dist/PageHeader/PageHeaderMenuLink.js +3 -6
- package/dist/PageHeading/PageHeading.d.ts +5 -5
- package/dist/Pagination/LinkItem.d.ts +3 -3
- package/dist/Pagination/Pagination.d.ts +4 -4
- package/dist/Paragraph/Paragraph.d.ts +5 -9
- package/dist/PasswordInput/PasswordInput.d.ts +4 -4
- package/dist/Radio/Radio.d.ts +5 -5
- package/dist/Row/Row.d.ts +5 -5
- package/dist/SearchField/SearchField.d.ts +2 -2
- package/dist/SearchField/SearchFieldButton.js +1 -1
- package/dist/SearchField/SearchFieldInput.d.ts +2 -2
- package/dist/Select/Select.d.ts +5 -5
- package/dist/Spotlight/Spotlight.d.ts +6 -6
- package/dist/Spotlight/Spotlight.js +0 -4
- package/dist/StandaloneLink/StandaloneLink.d.ts +4 -4
- package/dist/Table/TableCaption.d.ts +0 -4
- package/dist/TableOfContents/TableOfContents.d.ts +7 -7
- package/dist/TableOfContents/TableOfContentsLink.d.ts +4 -4
- package/dist/Tabs/Tabs.d.ts +11 -11
- package/dist/Tabs/TabsButton.d.ts +5 -5
- package/dist/Tabs/TabsPanel.d.ts +5 -5
- package/dist/TextArea/TextArea.d.ts +12 -6
- package/dist/TextInput/TextInput.d.ts +4 -4
- package/dist/TimeInput/TimeInput.d.ts +4 -4
- package/dist/UnorderedList/UnorderedList.d.ts +5 -5
- package/dist/common/useIsAfterBreakpoint.d.ts +4 -0
- package/dist/common/useIsAfterBreakpoint.js +4 -4
- package/dist/index.cjs.js +62 -44
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +293 -218
- package/dist/index.esm.js +62 -44
- package/dist/index.esm.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -0
- package/package.json +21 -20
- package/dist/Accordion/Accordion.test.d.ts +0 -5
- package/dist/Accordion/Accordion.test.js +0 -44
- package/dist/Accordion/AccordionSection.test.d.ts +0 -5
- package/dist/Accordion/AccordionSection.test.js +0 -100
- package/dist/ActionGroup/ActionGroup.test.d.ts +0 -5
- package/dist/ActionGroup/ActionGroup.test.js +0 -33
- package/dist/Alert/Alert.test.d.ts +0 -5
- package/dist/Alert/Alert.test.js +0 -74
- package/dist/Avatar/Avatar.test.d.ts +0 -5
- package/dist/Avatar/Avatar.test.js +0 -63
- package/dist/Badge/Badge.test.d.ts +0 -5
- package/dist/Badge/Badge.test.js +0 -43
- package/dist/Blockquote/Blockquote.test.d.ts +0 -5
- package/dist/Blockquote/Blockquote.test.js +0 -46
- package/dist/Breadcrumb/Breadcrumb.test.d.ts +0 -5
- package/dist/Breadcrumb/Breadcrumb.test.js +0 -45
- package/dist/Breadcrumb/BreadcrumbLink.test.d.ts +0 -5
- package/dist/Breadcrumb/BreadcrumbLink.test.js +0 -40
- package/dist/Breakout/Breakout.test.d.ts +0 -5
- package/dist/Breakout/Breakout.test.js +0 -62
- package/dist/Breakout/BreakoutCell.test.d.ts +0 -5
- package/dist/Breakout/BreakoutCell.test.js +0 -128
- package/dist/Button/Button.test.d.ts +0 -5
- package/dist/Button/Button.test.js +0 -114
- package/dist/CallToActionLink/CallToActionLink.test.d.ts +0 -5
- package/dist/CallToActionLink/CallToActionLink.test.js +0 -33
- package/dist/Card/Card.test.d.ts +0 -5
- package/dist/Card/Card.test.js +0 -33
- package/dist/Card/CardHeading.test.d.ts +0 -5
- package/dist/Card/CardHeading.test.js +0 -38
- package/dist/Card/CardHeadingGroup.test.d.ts +0 -5
- package/dist/Card/CardHeadingGroup.test.js +0 -38
- package/dist/Card/CardImage.test.d.ts +0 -5
- package/dist/Card/CardImage.test.js +0 -33
- package/dist/Card/CardLink.test.d.ts +0 -5
- package/dist/Card/CardLink.test.js +0 -33
- package/dist/CharacterCount/CharacterCount.test.d.ts +0 -5
- package/dist/CharacterCount/CharacterCount.test.js +0 -38
- package/dist/Checkbox/Checkbox.test.d.ts +0 -5
- package/dist/Checkbox/Checkbox.test.js +0 -142
- package/dist/Column/Column.test.d.ts +0 -5
- package/dist/Column/Column.test.js +0 -59
- package/dist/DateInput/DateInput.test.d.ts +0 -5
- package/dist/DateInput/DateInput.test.js +0 -58
- package/dist/DescriptionList/DescriptionList.test.d.ts +0 -5
- package/dist/DescriptionList/DescriptionList.test.js +0 -43
- package/dist/DescriptionList/DescriptionListDescription.test.d.ts +0 -5
- package/dist/DescriptionList/DescriptionListDescription.test.js +0 -33
- package/dist/DescriptionList/DescriptionListSection.test.d.ts +0 -5
- package/dist/DescriptionList/DescriptionListSection.test.js +0 -33
- package/dist/DescriptionList/DescriptionListTerm.test.d.ts +0 -5
- package/dist/DescriptionList/DescriptionListTerm.test.js +0 -33
- package/dist/Dialog/Dialog.test.d.ts +0 -5
- package/dist/Dialog/Dialog.test.js +0 -82
- package/dist/ErrorMessage/ErrorMessage.test.d.ts +0 -5
- package/dist/ErrorMessage/ErrorMessage.test.js +0 -53
- package/dist/Field/Field.test.d.ts +0 -5
- package/dist/Field/Field.test.js +0 -38
- package/dist/FieldSet/FieldSet.test.d.ts +0 -5
- package/dist/FieldSet/FieldSet.test.js +0 -63
- package/dist/Figure/Figure.test.d.ts +0 -5
- package/dist/Figure/Figure.test.js +0 -33
- package/dist/Figure/FigureCaption.test.d.ts +0 -5
- package/dist/Figure/FigureCaption.test.js +0 -38
- package/dist/FileInput/FileInput.test.d.ts +0 -5
- package/dist/FileInput/FileInput.test.js +0 -33
- package/dist/FileList/FileList.test.d.ts +0 -5
- package/dist/FileList/FileList.test.js +0 -33
- package/dist/FileList/FileListItem.test.d.ts +0 -5
- package/dist/FileList/FileListItem.test.js +0 -44
- package/dist/Grid/Grid.test.d.ts +0 -5
- package/dist/Grid/Grid.test.js +0 -69
- package/dist/Grid/GridCell.test.d.ts +0 -5
- package/dist/Grid/GridCell.test.js +0 -84
- package/dist/Heading/Heading.test.d.ts +0 -5
- package/dist/Heading/Heading.test.js +0 -70
- package/dist/Hint/Hint.test.d.ts +0 -5
- package/dist/Hint/Hint.test.js +0 -53
- package/dist/Icon/Icon.test.d.ts +0 -5
- package/dist/Icon/Icon.test.js +0 -60
- package/dist/IconButton/IconButton.test.d.ts +0 -5
- package/dist/IconButton/IconButton.test.js +0 -48
- package/dist/Image/Image.test.d.ts +0 -5
- package/dist/Image/Image.test.js +0 -43
- package/dist/ImageSlider/ImageSlider.test.d.ts +0 -5
- package/dist/ImageSlider/ImageSlider.test.js +0 -70
- package/dist/ImageSlider/ImageSliderControls.test.d.ts +0 -5
- package/dist/ImageSlider/ImageSliderControls.test.js +0 -25
- package/dist/ImageSlider/ImageSliderItem.test.d.ts +0 -5
- package/dist/ImageSlider/ImageSliderItem.test.js +0 -37
- package/dist/ImageSlider/ImageSliderScroller.test.d.ts +0 -5
- package/dist/ImageSlider/ImageSliderScroller.test.js +0 -37
- package/dist/ImageSlider/ImageSliderThumbnails.test.d.ts +0 -5
- package/dist/ImageSlider/ImageSliderThumbnails.test.js +0 -52
- package/dist/InvalidFormAlert/InvalidFormAlert.test.d.ts +0 -5
- package/dist/InvalidFormAlert/InvalidFormAlert.test.js +0 -108
- package/dist/Label/Label.test.d.ts +0 -5
- package/dist/Label/Label.test.js +0 -77
- package/dist/Link/Link.test.d.ts +0 -5
- package/dist/Link/Link.test.js +0 -43
- package/dist/LinkList/LinkList.test.d.ts +0 -5
- package/dist/LinkList/LinkList.test.js +0 -33
- package/dist/LinkList/LinkListLink.test.d.ts +0 -5
- package/dist/LinkList/LinkListLink.test.js +0 -54
- package/dist/Logo/Logo.test.d.ts +0 -5
- package/dist/Logo/Logo.test.js +0 -33
- package/dist/Mark/Mark.test.d.ts +0 -5
- package/dist/Mark/Mark.test.js +0 -33
- package/dist/Menu/Menu.test.d.ts +0 -5
- package/dist/Menu/Menu.test.js +0 -38
- package/dist/Menu/MenuLink.test.d.ts +0 -5
- package/dist/Menu/MenuLink.test.js +0 -56
- package/dist/OrderedList/OrderedList.test.d.ts +0 -5
- package/dist/OrderedList/OrderedList.test.js +0 -55
- package/dist/OrderedList/OrderedListItem.test.d.ts +0 -5
- package/dist/OrderedList/OrderedListItem.test.js +0 -32
- package/dist/Overlap/Overlap.test.d.ts +0 -5
- package/dist/Overlap/Overlap.test.js +0 -38
- package/dist/Page/Page.test.d.ts +0 -5
- package/dist/Page/Page.test.js +0 -33
- package/dist/PageFooter/PageFooter.test.d.ts +0 -5
- package/dist/PageFooter/PageFooter.test.js +0 -33
- package/dist/PageFooter/PageFooterMenu.test.d.ts +0 -5
- package/dist/PageFooter/PageFooterMenu.test.js +0 -35
- package/dist/PageFooter/PageFooterMenuLink.test.d.ts +0 -5
- package/dist/PageFooter/PageFooterMenuLink.test.js +0 -33
- package/dist/PageFooter/PageFooterSpotlight.test.d.ts +0 -5
- package/dist/PageFooter/PageFooterSpotlight.test.js +0 -33
- package/dist/PageHeader/PageHeader.test.d.ts +0 -6
- package/dist/PageHeader/PageHeader.test.js +0 -135
- package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.d.ts +0 -5
- package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.js +0 -38
- package/dist/PageHeader/PageHeaderMenuLink.test.d.ts +0 -5
- package/dist/PageHeader/PageHeaderMenuLink.test.js +0 -45
- package/dist/PageHeading/PageHeading.test.d.ts +0 -5
- package/dist/PageHeading/PageHeading.test.js +0 -40
- package/dist/Pagination/Pagination.test.d.ts +0 -5
- package/dist/Pagination/Pagination.test.js +0 -137
- package/dist/Paragraph/Paragraph.test.d.ts +0 -5
- package/dist/Paragraph/Paragraph.test.js +0 -62
- package/dist/PasswordInput/PasswordInput.test.d.ts +0 -5
- package/dist/PasswordInput/PasswordInput.test.js +0 -89
- package/dist/Radio/Radio.test.d.ts +0 -5
- package/dist/Radio/Radio.test.js +0 -134
- package/dist/Row/Row.test.d.ts +0 -5
- package/dist/Row/Row.test.js +0 -64
- package/dist/SearchField/SearchField.test.d.ts +0 -5
- package/dist/SearchField/SearchField.test.js +0 -50
- package/dist/SearchField/SearchFieldInput.test.d.ts +0 -5
- package/dist/SearchField/SearchFieldInput.test.js +0 -65
- package/dist/Select/Select.test.d.ts +0 -5
- package/dist/Select/Select.test.js +0 -74
- package/dist/Select/SelectOption.test.d.ts +0 -5
- package/dist/Select/SelectOption.test.js +0 -45
- package/dist/Select/SelectOptionGroup.test.d.ts +0 -5
- package/dist/Select/SelectOptionGroup.test.js +0 -45
- package/dist/SkipLink/SkipLink.test.d.ts +0 -5
- package/dist/SkipLink/SkipLink.test.js +0 -33
- package/dist/Spotlight/Spotlight.test.d.ts +0 -5
- package/dist/Spotlight/Spotlight.test.js +0 -46
- package/dist/StandaloneLink/StandaloneLink.test.d.ts +0 -5
- package/dist/StandaloneLink/StandaloneLink.test.js +0 -46
- package/dist/Switch/Switch.test.d.ts +0 -5
- package/dist/Switch/Switch.test.js +0 -69
- package/dist/Table/Table.test.d.ts +0 -5
- package/dist/Table/Table.test.js +0 -33
- package/dist/Table/TableBody.test.d.ts +0 -5
- package/dist/Table/TableBody.test.js +0 -34
- package/dist/Table/TableCaption.test.d.ts +0 -5
- package/dist/Table/TableCaption.test.js +0 -45
- package/dist/Table/TableCell.test.d.ts +0 -5
- package/dist/Table/TableCell.test.js +0 -36
- package/dist/Table/TableFooter.test.d.ts +0 -5
- package/dist/Table/TableFooter.test.js +0 -34
- package/dist/Table/TableHeader.test.d.ts +0 -5
- package/dist/Table/TableHeader.test.js +0 -34
- package/dist/Table/TableHeaderCell.test.d.ts +0 -5
- package/dist/Table/TableHeaderCell.test.js +0 -42
- package/dist/Table/TableRow.test.d.ts +0 -5
- package/dist/Table/TableRow.test.js +0 -35
- package/dist/TableOfContents/TableOfContents.test.d.ts +0 -5
- package/dist/TableOfContents/TableOfContents.test.js +0 -44
- package/dist/TableOfContents/TableOfContentsLink.test.d.ts +0 -5
- package/dist/TableOfContents/TableOfContentsLink.test.js +0 -34
- package/dist/TableOfContents/TableOfContentsList.test.d.ts +0 -5
- package/dist/TableOfContents/TableOfContentsList.test.js +0 -40
- package/dist/Tabs/Tabs.test.d.ts +0 -5
- package/dist/Tabs/Tabs.test.js +0 -104
- package/dist/Tabs/TabsButton.test.d.ts +0 -5
- package/dist/Tabs/TabsButton.test.js +0 -57
- package/dist/Tabs/TabsList.test.d.ts +0 -5
- package/dist/Tabs/TabsList.test.js +0 -32
- package/dist/Tabs/TabsPanel.test.d.ts +0 -5
- package/dist/Tabs/TabsPanel.test.js +0 -42
- package/dist/TextArea/TextArea.test.d.ts +0 -5
- package/dist/TextArea/TextArea.test.js +0 -105
- package/dist/TextInput/TextInput.test.d.ts +0 -5
- package/dist/TextInput/TextInput.test.js +0 -92
- package/dist/TimeInput/TimeInput.test.d.ts +0 -5
- package/dist/TimeInput/TimeInput.test.js +0 -51
- package/dist/UnorderedList/UnorderedList.test.d.ts +0 -5
- package/dist/UnorderedList/UnorderedList.test.js +0 -55
- package/dist/UnorderedList/UnorderedListItem.test.d.ts +0 -5
- package/dist/UnorderedList/UnorderedListItem.test.js +0 -32
- package/dist/common/formatFileSize.test.d.ts +0 -5
- package/dist/common/formatFileSize.test.js +0 -22
- package/dist/common/formatFileType.test.d.ts +0 -5
- package/dist/common/formatFileType.test.js +0 -27
- package/dist/common/useKeyboardFocus.test.d.ts +0 -5
- package/dist/common/useKeyboardFocus.test.js +0 -79
- package/dist/tsconfig.tsbuildinfo +0 -1
package/dist/Radio/Radio.test.js
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { StarIcon } from '@amsterdam/design-system-react-icons';
|
|
7
|
-
import { render, screen } from '@testing-library/react';
|
|
8
|
-
import { createRef } from 'react';
|
|
9
|
-
import { Radio } from './Radio';
|
|
10
|
-
import '@testing-library/jest-dom';
|
|
11
|
-
describe('Radio', () => {
|
|
12
|
-
it('renders', () => {
|
|
13
|
-
const { container } = render(_jsx(Radio, {}));
|
|
14
|
-
const wrapper = container.querySelector(':only-child');
|
|
15
|
-
const input = screen.getByRole('radio');
|
|
16
|
-
const label = container.querySelector('label');
|
|
17
|
-
expect(wrapper).toBeInTheDocument();
|
|
18
|
-
expect(wrapper).toBeVisible();
|
|
19
|
-
expect(input).toBeInTheDocument();
|
|
20
|
-
expect(input).toBeVisible();
|
|
21
|
-
expect(label).toBeInTheDocument();
|
|
22
|
-
expect(label).toBeVisible();
|
|
23
|
-
});
|
|
24
|
-
it('renders design system BEM class names', () => {
|
|
25
|
-
const { container } = render(_jsx(Radio, {}));
|
|
26
|
-
const wrapper = container.querySelector(':only-child');
|
|
27
|
-
const input = screen.getByRole('radio');
|
|
28
|
-
const label = container.querySelector('label');
|
|
29
|
-
const circle = container.querySelector('.ams-radio__circle');
|
|
30
|
-
const indicator = container.querySelector('.ams-radio__checked-indicator');
|
|
31
|
-
expect(wrapper).toHaveClass('ams-radio');
|
|
32
|
-
expect(input).toHaveClass('ams-radio__input');
|
|
33
|
-
expect(label).toHaveClass('ams-radio__label');
|
|
34
|
-
expect(circle).toBeInTheDocument();
|
|
35
|
-
expect(indicator).toBeInTheDocument();
|
|
36
|
-
});
|
|
37
|
-
it('renders an extra class name', () => {
|
|
38
|
-
const { container } = render(_jsx(Radio, { className: "extra" }));
|
|
39
|
-
const wrapper = container.querySelector(':only-child');
|
|
40
|
-
expect(wrapper).toHaveClass('ams-radio extra');
|
|
41
|
-
});
|
|
42
|
-
describe('Checked state', () => {
|
|
43
|
-
it('is not checked by default', () => {
|
|
44
|
-
render(_jsx(Radio, {}));
|
|
45
|
-
const input = screen.getByRole('radio');
|
|
46
|
-
expect(input).not.toBeChecked();
|
|
47
|
-
});
|
|
48
|
-
it('can have a checked state', () => {
|
|
49
|
-
const handleChange = () => { };
|
|
50
|
-
render(_jsx(Radio, { checked: true, onChange: handleChange }));
|
|
51
|
-
const input = screen.getByRole('radio');
|
|
52
|
-
expect(input).toBeChecked();
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
describe('Invalid state', () => {
|
|
56
|
-
it('is not invalid by default', () => {
|
|
57
|
-
render(_jsx(Radio, {}));
|
|
58
|
-
const input = screen.getByRole('radio');
|
|
59
|
-
expect(input).not.toBeInvalid();
|
|
60
|
-
});
|
|
61
|
-
it('can have an invalid state', () => {
|
|
62
|
-
render(_jsx(Radio, { invalid: true }));
|
|
63
|
-
const input = screen.getByRole('radio');
|
|
64
|
-
expect(input).toHaveAttribute('aria-invalid');
|
|
65
|
-
expect(input).toBeInvalid();
|
|
66
|
-
});
|
|
67
|
-
it('omits non-essential invalid attributes when not invalid', () => {
|
|
68
|
-
render(_jsx(Radio, { invalid: false }));
|
|
69
|
-
const input = screen.getByRole('radio');
|
|
70
|
-
expect(input).not.toHaveAttribute('aria-invalid');
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
describe('Disabled state', () => {
|
|
74
|
-
it('is not disabled by default', () => {
|
|
75
|
-
render(_jsx(Radio, {}));
|
|
76
|
-
const input = screen.getByRole('radio');
|
|
77
|
-
expect(input).not.toBeDisabled();
|
|
78
|
-
});
|
|
79
|
-
it('can have a disabled state', () => {
|
|
80
|
-
render(_jsx(Radio, { disabled: true }));
|
|
81
|
-
const input = screen.getByRole('radio');
|
|
82
|
-
expect(input).toBeDisabled();
|
|
83
|
-
});
|
|
84
|
-
});
|
|
85
|
-
describe('Disabled invalid state', () => {
|
|
86
|
-
it('can have a disabled invalid state', () => {
|
|
87
|
-
render(_jsx(Radio, { disabled: true, invalid: true }));
|
|
88
|
-
const input = screen.getByRole('radio');
|
|
89
|
-
expect(input).toBeDisabled();
|
|
90
|
-
expect(input).toBeInvalid();
|
|
91
|
-
});
|
|
92
|
-
});
|
|
93
|
-
it('can trigger a change event', () => {
|
|
94
|
-
const handleChange = jest.fn();
|
|
95
|
-
render(_jsx(Radio, { onChange: handleChange }));
|
|
96
|
-
const input = screen.getByRole('radio');
|
|
97
|
-
input?.click();
|
|
98
|
-
expect(handleChange).toHaveBeenCalled();
|
|
99
|
-
});
|
|
100
|
-
it('does not trigger a change event when disabled', () => {
|
|
101
|
-
const handleChange = jest.fn();
|
|
102
|
-
render(_jsx(Radio, { disabled: true, onChange: handleChange }));
|
|
103
|
-
const input = screen.getByRole('radio');
|
|
104
|
-
input?.click();
|
|
105
|
-
expect(handleChange).not.toHaveBeenCalled();
|
|
106
|
-
});
|
|
107
|
-
it('can trigger a change event by clicking on label', () => {
|
|
108
|
-
const handleChange = jest.fn();
|
|
109
|
-
const { container } = render(_jsx(Radio, { onChange: handleChange }));
|
|
110
|
-
const label = container.querySelector('label');
|
|
111
|
-
label?.click();
|
|
112
|
-
expect(handleChange).toHaveBeenCalled();
|
|
113
|
-
});
|
|
114
|
-
it('can use a custom id', () => {
|
|
115
|
-
const handleChange = jest.fn();
|
|
116
|
-
const { container } = render(_jsx(Radio, { id: "test-id", onChange: handleChange }));
|
|
117
|
-
const input = screen.getByRole('radio');
|
|
118
|
-
expect(input).toHaveAttribute('id', 'test-id');
|
|
119
|
-
const label = container.querySelector('label');
|
|
120
|
-
label?.click();
|
|
121
|
-
expect(handleChange).toHaveBeenCalled();
|
|
122
|
-
});
|
|
123
|
-
it('shows a custom icon', () => {
|
|
124
|
-
const { container } = render(_jsx(Radio, { icon: _jsx(StarIcon, { className: "test-class" }) }));
|
|
125
|
-
const icon = container.querySelector('svg');
|
|
126
|
-
expect(icon).toHaveClass('test-class');
|
|
127
|
-
});
|
|
128
|
-
it('supports ForwardRef in React', () => {
|
|
129
|
-
const ref = createRef();
|
|
130
|
-
render(_jsx(Radio, { ref: ref }));
|
|
131
|
-
const input = screen.getByRole('radio');
|
|
132
|
-
expect(ref.current).toBe(input);
|
|
133
|
-
});
|
|
134
|
-
});
|
package/dist/Row/Row.test.d.ts
DELETED
package/dist/Row/Row.test.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { ariaRoleForTag } from '../common/accessibility';
|
|
9
|
-
import { crossAlignOptions, mainAlignOptions } from '../common/types';
|
|
10
|
-
import { Row, rowGapSizes, rowTags } from './Row';
|
|
11
|
-
import '@testing-library/jest-dom';
|
|
12
|
-
describe('Row', () => {
|
|
13
|
-
it('renders', () => {
|
|
14
|
-
const { container } = render(_jsx(Row, {}));
|
|
15
|
-
const component = container.querySelector(':only-child');
|
|
16
|
-
expect(component).toBeInTheDocument();
|
|
17
|
-
expect(component).toBeVisible();
|
|
18
|
-
});
|
|
19
|
-
it('renders a design system BEM class name', () => {
|
|
20
|
-
const { container } = render(_jsx(Row, {}));
|
|
21
|
-
const component = container.querySelector(':only-child');
|
|
22
|
-
expect(component).toHaveClass('ams-row');
|
|
23
|
-
});
|
|
24
|
-
rowGapSizes.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
|
|
25
|
-
const { container } = render(_jsx(Row, { gap: gap }));
|
|
26
|
-
const component = container.querySelector(':only-child');
|
|
27
|
-
expect(component).toHaveClass(`ams-row--gap-${gap}`);
|
|
28
|
-
}));
|
|
29
|
-
it('renders an extra class name', () => {
|
|
30
|
-
const { container } = render(_jsx(Row, { className: "extra" }));
|
|
31
|
-
const component = container.querySelector(':only-child');
|
|
32
|
-
expect(component).toHaveClass('ams-row extra');
|
|
33
|
-
});
|
|
34
|
-
it('renders a class name to allow wrapping', () => {
|
|
35
|
-
const { container } = render(_jsx(Row, { wrap: true }));
|
|
36
|
-
const component = container.querySelector(':only-child');
|
|
37
|
-
expect(component).toHaveClass('ams-row--wrap');
|
|
38
|
-
});
|
|
39
|
-
rowTags.forEach((tag) => {
|
|
40
|
-
it(`renders with a custom ${tag} tag`, () => {
|
|
41
|
-
const { container } = render(_jsx(Row, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
|
|
42
|
-
const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
|
|
43
|
-
expect(component).toBeInTheDocument();
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
it('supports ForwardRef in React', () => {
|
|
47
|
-
const ref = createRef();
|
|
48
|
-
const { container } = render(_jsx(Row, { ref: ref }));
|
|
49
|
-
const component = container.querySelector(':only-child');
|
|
50
|
-
expect(ref.current).toBe(component);
|
|
51
|
-
});
|
|
52
|
-
describe('Alignment', () => {
|
|
53
|
-
mainAlignOptions.map((align) => it(`sets the ‘${align}’ alignment`, () => {
|
|
54
|
-
const { container } = render(_jsx(Row, { align: align }));
|
|
55
|
-
const component = container.querySelector(':only-child');
|
|
56
|
-
expect(component).toHaveClass(`ams-row--align-${align}`);
|
|
57
|
-
}));
|
|
58
|
-
crossAlignOptions.map((align) => it(`sets the ‘${align}’ vertical alignment`, () => {
|
|
59
|
-
const { container } = render(_jsx(Row, { alignVertical: align }));
|
|
60
|
-
const component = container.querySelector(':only-child');
|
|
61
|
-
expect(component).toHaveClass(`ams-row--align-vertical-${align}`);
|
|
62
|
-
}));
|
|
63
|
-
});
|
|
64
|
-
});
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { SearchField } from './SearchField';
|
|
9
|
-
import '@testing-library/jest-dom';
|
|
10
|
-
describe('Search field', () => {
|
|
11
|
-
it('renders the outer container', () => {
|
|
12
|
-
render(_jsx(SearchField, {}));
|
|
13
|
-
const component = screen.getByRole('search');
|
|
14
|
-
expect(component).toBeInTheDocument();
|
|
15
|
-
expect(component).toBeVisible();
|
|
16
|
-
});
|
|
17
|
-
it('renders the input', () => {
|
|
18
|
-
render(_jsx(SearchField.Input, {}));
|
|
19
|
-
const component = screen.getByRole('searchbox');
|
|
20
|
-
expect(component).toBeInTheDocument();
|
|
21
|
-
expect(component).toBeVisible();
|
|
22
|
-
});
|
|
23
|
-
it('renders the button', () => {
|
|
24
|
-
render(_jsx(SearchField.Button, {}));
|
|
25
|
-
const component = screen.getByRole('button');
|
|
26
|
-
expect(component).toBeInTheDocument();
|
|
27
|
-
expect(component).toBeVisible();
|
|
28
|
-
});
|
|
29
|
-
it('renders the button with a label', () => {
|
|
30
|
-
render(_jsx(SearchField.Button, { children: "Search" }));
|
|
31
|
-
const component = screen.getByRole('button', { name: 'Search' });
|
|
32
|
-
expect(component).toBeInTheDocument();
|
|
33
|
-
});
|
|
34
|
-
it('renders the outer container design system BEM class name', () => {
|
|
35
|
-
render(_jsx(SearchField, {}));
|
|
36
|
-
const component = screen.getByRole('search');
|
|
37
|
-
expect(component).toHaveClass('ams-search-field');
|
|
38
|
-
});
|
|
39
|
-
it('renders an extra class name', () => {
|
|
40
|
-
render(_jsx(SearchField, { className: "extra" }));
|
|
41
|
-
const component = screen.getByRole('search');
|
|
42
|
-
expect(component).toHaveClass('ams-search-field extra');
|
|
43
|
-
});
|
|
44
|
-
it('supports ForwardRef in React', () => {
|
|
45
|
-
const ref = createRef();
|
|
46
|
-
render(_jsx(SearchField, { ref: ref }));
|
|
47
|
-
const component = screen.getByRole('search');
|
|
48
|
-
expect(ref.current).toBe(component);
|
|
49
|
-
});
|
|
50
|
-
});
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import userEvent from '@testing-library/user-event';
|
|
8
|
-
import { createRef, useState } from 'react';
|
|
9
|
-
import { SearchFieldInput } from './SearchFieldInput';
|
|
10
|
-
import '@testing-library/jest-dom';
|
|
11
|
-
describe('Search field input', () => {
|
|
12
|
-
it('renders', () => {
|
|
13
|
-
render(_jsx(SearchFieldInput, {}));
|
|
14
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
15
|
-
expect(component).toBeInTheDocument();
|
|
16
|
-
expect(component).toBeVisible();
|
|
17
|
-
});
|
|
18
|
-
it('renders a design system BEM class name', () => {
|
|
19
|
-
render(_jsx(SearchFieldInput, {}));
|
|
20
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
21
|
-
expect(component).toHaveClass('ams-search-field__input');
|
|
22
|
-
});
|
|
23
|
-
it('renders an extra class name', () => {
|
|
24
|
-
render(_jsx(SearchFieldInput, { className: "extra" }));
|
|
25
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
26
|
-
expect(component).toHaveClass('ams-search-field__input extra');
|
|
27
|
-
});
|
|
28
|
-
it('supports a custom label', () => {
|
|
29
|
-
render(_jsx(SearchFieldInput, { label: "Test label" }));
|
|
30
|
-
const component = screen.getByRole('searchbox', { name: 'Test label' });
|
|
31
|
-
expect(component).toBeInTheDocument();
|
|
32
|
-
expect(component).toBeVisible();
|
|
33
|
-
});
|
|
34
|
-
it('should be working in a controlled state', async () => {
|
|
35
|
-
function ControlledComponent() {
|
|
36
|
-
const [value, setValue] = useState('Hello');
|
|
37
|
-
return _jsx(SearchFieldInput, { onChange: (e) => setValue(e.target.value), value: value });
|
|
38
|
-
}
|
|
39
|
-
render(_jsx(ControlledComponent, {}));
|
|
40
|
-
const componentText = screen.getByDisplayValue('Hello');
|
|
41
|
-
expect(componentText).toBeInTheDocument();
|
|
42
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
43
|
-
if (component) {
|
|
44
|
-
await userEvent.type(component, ', World!');
|
|
45
|
-
}
|
|
46
|
-
const newComponentText = screen.getByDisplayValue('Hello, World!');
|
|
47
|
-
expect(newComponentText).toBeInTheDocument();
|
|
48
|
-
});
|
|
49
|
-
it('supports ForwardRef in React', () => {
|
|
50
|
-
const ref = createRef();
|
|
51
|
-
render(_jsx(SearchFieldInput, { ref: ref }));
|
|
52
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
53
|
-
expect(ref.current).toBe(component);
|
|
54
|
-
});
|
|
55
|
-
it('renders bidirectional by default using `dir="auto"`', () => {
|
|
56
|
-
render(_jsx(SearchFieldInput, {}));
|
|
57
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
58
|
-
expect(component).toHaveAttribute('dir', 'auto');
|
|
59
|
-
});
|
|
60
|
-
it('renders left-to-right by using `dir="ltr"`', () => {
|
|
61
|
-
render(_jsx(SearchFieldInput, { dir: "ltr" }));
|
|
62
|
-
const component = screen.getByRole('searchbox', { name: 'Zoeken' });
|
|
63
|
-
expect(component).toHaveAttribute('dir', 'ltr');
|
|
64
|
-
});
|
|
65
|
-
});
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { Select } from './Select';
|
|
9
|
-
import '@testing-library/jest-dom';
|
|
10
|
-
describe('Select', () => {
|
|
11
|
-
it('renders', () => {
|
|
12
|
-
render(_jsx(Select, {}));
|
|
13
|
-
const component = screen.getByRole('combobox');
|
|
14
|
-
expect(component).toBeInTheDocument();
|
|
15
|
-
expect(component).toBeVisible();
|
|
16
|
-
});
|
|
17
|
-
it('renders a design system BEM class name', () => {
|
|
18
|
-
render(_jsx(Select, {}));
|
|
19
|
-
const component = screen.getByRole('combobox');
|
|
20
|
-
expect(component).toHaveClass('ams-select');
|
|
21
|
-
});
|
|
22
|
-
it('renders an extra class name', () => {
|
|
23
|
-
render(_jsx(Select, { className: "extra" }));
|
|
24
|
-
const component = screen.getByRole('combobox');
|
|
25
|
-
expect(component).toHaveClass('ams-select extra');
|
|
26
|
-
});
|
|
27
|
-
it('supports ForwardRef in React', () => {
|
|
28
|
-
const ref = createRef();
|
|
29
|
-
render(_jsx(Select, { ref: ref }));
|
|
30
|
-
const component = screen.getByRole('combobox');
|
|
31
|
-
expect(ref.current).toBe(component);
|
|
32
|
-
});
|
|
33
|
-
it('renders options', () => {
|
|
34
|
-
render(_jsxs(Select, { children: [_jsx(Select.Option, { value: "a", children: "Option A" }), _jsx(Select.Option, { value: "b", children: "Option B" })] }));
|
|
35
|
-
const select = screen.getByRole('combobox');
|
|
36
|
-
const option = screen.getByRole('option', {
|
|
37
|
-
name: 'Option B',
|
|
38
|
-
});
|
|
39
|
-
expect(select).toContain(option);
|
|
40
|
-
});
|
|
41
|
-
it('can be disabled', () => {
|
|
42
|
-
render(_jsx(Select, { disabled: true }));
|
|
43
|
-
const component = screen.getByRole('combobox');
|
|
44
|
-
expect(component).toBeDisabled();
|
|
45
|
-
});
|
|
46
|
-
describe('Invalid state', () => {
|
|
47
|
-
it('is not invalid by default', () => {
|
|
48
|
-
render(_jsx(Select, {}));
|
|
49
|
-
const component = screen.getByRole('combobox');
|
|
50
|
-
expect(component).not.toBeInvalid();
|
|
51
|
-
});
|
|
52
|
-
it('can have an invalid state', () => {
|
|
53
|
-
render(_jsx(Select, { invalid: true }));
|
|
54
|
-
const component = screen.getByRole('combobox');
|
|
55
|
-
expect(component).toHaveAttribute('aria-invalid');
|
|
56
|
-
expect(component).toBeInvalid();
|
|
57
|
-
});
|
|
58
|
-
it('omits non-essential invalid attributes when not invalid', () => {
|
|
59
|
-
render(_jsx(Select, { invalid: false }));
|
|
60
|
-
const component = screen.getByRole('combobox');
|
|
61
|
-
expect(component).not.toHaveAttribute('aria-invalid');
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
it('is not required by default', () => {
|
|
65
|
-
render(_jsx(Select, {}));
|
|
66
|
-
const component = screen.getByRole('combobox');
|
|
67
|
-
expect(component).not.toBeRequired();
|
|
68
|
-
});
|
|
69
|
-
it('omits the required attribute when not required', () => {
|
|
70
|
-
render(_jsx(Select, { required: false }));
|
|
71
|
-
const component = screen.getByRole('combobox');
|
|
72
|
-
expect(component).not.toHaveAttribute('required');
|
|
73
|
-
});
|
|
74
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { Select } from './Select';
|
|
9
|
-
import '@testing-library/jest-dom';
|
|
10
|
-
describe('Select option', () => {
|
|
11
|
-
it('renders', () => {
|
|
12
|
-
render(_jsx(Select.Option, {}));
|
|
13
|
-
const component = screen.getByRole('option');
|
|
14
|
-
expect(component).toBeInTheDocument();
|
|
15
|
-
expect(component).toBeVisible();
|
|
16
|
-
});
|
|
17
|
-
it('renders an option role element with a text label', () => {
|
|
18
|
-
render(_jsx(Select.Option, { children: "Option" }));
|
|
19
|
-
const option = screen.getByRole('option', {
|
|
20
|
-
name: 'Option',
|
|
21
|
-
});
|
|
22
|
-
expect(option).toBeInTheDocument();
|
|
23
|
-
});
|
|
24
|
-
it('renders a design system BEM class name', () => {
|
|
25
|
-
render(_jsx(Select.Option, {}));
|
|
26
|
-
const component = screen.getByRole('option');
|
|
27
|
-
expect(component).toHaveClass('ams-select__option');
|
|
28
|
-
});
|
|
29
|
-
it('renders an extra class name', () => {
|
|
30
|
-
render(_jsx(Select.Option, { className: "extra" }));
|
|
31
|
-
const component = screen.getByRole('option');
|
|
32
|
-
expect(component).toHaveClass('ams-select__option extra');
|
|
33
|
-
});
|
|
34
|
-
it('supports ForwardRef in React', () => {
|
|
35
|
-
const ref = createRef();
|
|
36
|
-
render(_jsx(Select.Option, { ref: ref }));
|
|
37
|
-
const component = screen.getByRole('option');
|
|
38
|
-
expect(ref.current).toBe(component);
|
|
39
|
-
});
|
|
40
|
-
it('can be disabled', () => {
|
|
41
|
-
render(_jsx(Select.Option, { disabled: true }));
|
|
42
|
-
const component = screen.getByRole('option');
|
|
43
|
-
expect(component).toBeDisabled();
|
|
44
|
-
});
|
|
45
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { Select } from './Select';
|
|
9
|
-
import '@testing-library/jest-dom';
|
|
10
|
-
describe('Select option group', () => {
|
|
11
|
-
it('renders', () => {
|
|
12
|
-
render(_jsx(Select.Group, {}));
|
|
13
|
-
const component = screen.getByRole('group');
|
|
14
|
-
expect(component).toBeInTheDocument();
|
|
15
|
-
expect(component).toBeVisible();
|
|
16
|
-
});
|
|
17
|
-
it('renders an group role element with a text label', () => {
|
|
18
|
-
render(_jsx(Select.Group, { label: "Options" }));
|
|
19
|
-
const option = screen.getByRole('group', {
|
|
20
|
-
name: 'Options',
|
|
21
|
-
});
|
|
22
|
-
expect(option).toBeInTheDocument();
|
|
23
|
-
});
|
|
24
|
-
it('renders a design system BEM class name', () => {
|
|
25
|
-
render(_jsx(Select.Group, {}));
|
|
26
|
-
const component = screen.getByRole('group');
|
|
27
|
-
expect(component).toHaveClass('ams-select__group');
|
|
28
|
-
});
|
|
29
|
-
it('renders an extra class name', () => {
|
|
30
|
-
render(_jsx(Select.Group, { className: "extra" }));
|
|
31
|
-
const component = screen.getByRole('group');
|
|
32
|
-
expect(component).toHaveClass('ams-select__group extra');
|
|
33
|
-
});
|
|
34
|
-
it('supports ForwardRef in React', () => {
|
|
35
|
-
const ref = createRef();
|
|
36
|
-
render(_jsx(Select.Group, { ref: ref }));
|
|
37
|
-
const component = screen.getByRole('group');
|
|
38
|
-
expect(ref.current).toBe(component);
|
|
39
|
-
});
|
|
40
|
-
it('can be disabled', () => {
|
|
41
|
-
render(_jsx(Select.Group, { disabled: true }));
|
|
42
|
-
const component = screen.getByRole('group');
|
|
43
|
-
expect(component).toBeDisabled();
|
|
44
|
-
});
|
|
45
|
-
});
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { SkipLink } from './SkipLink';
|
|
9
|
-
import '@testing-library/jest-dom';
|
|
10
|
-
describe('Skip link', () => {
|
|
11
|
-
it('renders', () => {
|
|
12
|
-
render(_jsx(SkipLink, { href: "/" }));
|
|
13
|
-
const component = screen.getByRole('link');
|
|
14
|
-
expect(component).toBeInTheDocument();
|
|
15
|
-
expect(component).toBeVisible();
|
|
16
|
-
});
|
|
17
|
-
it('renders a design system BEM class name', () => {
|
|
18
|
-
render(_jsx(SkipLink, { href: "/" }));
|
|
19
|
-
const component = screen.getByRole('link');
|
|
20
|
-
expect(component).toHaveClass('ams-skip-link');
|
|
21
|
-
});
|
|
22
|
-
it('renders an extra class name', () => {
|
|
23
|
-
render(_jsx(SkipLink, { className: "extra", href: "/" }));
|
|
24
|
-
const component = screen.getByRole('link');
|
|
25
|
-
expect(component).toHaveClass('ams-skip-link extra');
|
|
26
|
-
});
|
|
27
|
-
it('supports ForwardRef in React', () => {
|
|
28
|
-
const ref = createRef();
|
|
29
|
-
render(_jsx(SkipLink, { href: "/", ref: ref }));
|
|
30
|
-
const component = screen.getByRole('link');
|
|
31
|
-
expect(ref.current).toBe(component);
|
|
32
|
-
});
|
|
33
|
-
});
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @license EUPL-1.2+
|
|
4
|
-
* Copyright Gemeente Amsterdam
|
|
5
|
-
*/
|
|
6
|
-
import { render, screen } from '@testing-library/react';
|
|
7
|
-
import { createRef } from 'react';
|
|
8
|
-
import { ariaRoleForTag } from '../common/accessibility';
|
|
9
|
-
import { Spotlight, spotlightColors, spotlightTags } from './Spotlight';
|
|
10
|
-
import '@testing-library/jest-dom';
|
|
11
|
-
describe('Spotlight', () => {
|
|
12
|
-
it('renders', () => {
|
|
13
|
-
const { container } = render(_jsx(Spotlight, {}));
|
|
14
|
-
const component = container.querySelector(':only-child');
|
|
15
|
-
expect(component).toBeInTheDocument();
|
|
16
|
-
expect(component).toBeVisible();
|
|
17
|
-
});
|
|
18
|
-
it('renders a design system BEM class name', () => {
|
|
19
|
-
const { container } = render(_jsx(Spotlight, {}));
|
|
20
|
-
const component = container.querySelector(':only-child');
|
|
21
|
-
expect(component).toHaveClass('ams-spotlight');
|
|
22
|
-
});
|
|
23
|
-
it('renders an extra class name', () => {
|
|
24
|
-
const { container } = render(_jsx(Spotlight, { className: "extra" }));
|
|
25
|
-
const component = container.querySelector(':only-child');
|
|
26
|
-
expect(component).toHaveClass('ams-spotlight extra');
|
|
27
|
-
});
|
|
28
|
-
spotlightTags.forEach((tag) => {
|
|
29
|
-
it(`renders with a custom ${tag} tag`, () => {
|
|
30
|
-
const { container } = render(_jsx(Spotlight, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
|
|
31
|
-
const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
|
|
32
|
-
expect(component).toBeInTheDocument();
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
it('supports ForwardRef in React', () => {
|
|
36
|
-
const ref = createRef();
|
|
37
|
-
const { container } = render(_jsx(Spotlight, { ref: ref }));
|
|
38
|
-
const component = container.querySelector(':only-child');
|
|
39
|
-
expect(ref.current).toBe(component);
|
|
40
|
-
});
|
|
41
|
-
spotlightColors.map((color) => it(`renders with ${color} color`, () => {
|
|
42
|
-
const { container } = render(_jsx(Spotlight, { color: color }));
|
|
43
|
-
const component = container.querySelector(':only-child');
|
|
44
|
-
expect(component).toHaveClass(`ams-spotlight--${color}`);
|
|
45
|
-
}));
|
|
46
|
-
});
|