@scottish-government/designsystem-react 0.5.1 → 0.7.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/.svgrrc +2 -1
- package/.svgrrc_documents +15 -0
- package/@types/common/FileIcon.d.ts +7 -0
- package/@types/components/Accordion.d.ts +2 -2
- package/@types/components/ConfirmationMessage.d.ts +1 -1
- package/@types/components/FileDownload.d.ts +11 -0
- package/@types/components/NotificationPanel.d.ts +1 -1
- package/@types/components/SummaryCard.d.ts +1 -1
- package/@types/components/Tabs.d.ts +1 -1
- package/@types/sgds.d.ts +2 -1
- package/CHANGELOG.md +81 -0
- package/README.md +4 -0
- package/dist/common/AbstractNotificationBanner.jsx +63 -0
- package/dist/common/ConditionalWrapper.jsx +8 -0
- package/dist/common/FileIcon.jsx +51 -0
- package/dist/common/HintText.jsx +9 -0
- package/dist/common/Icon.jsx +57 -0
- package/dist/common/ScreenReaderText.jsx +9 -0
- package/dist/common/WrapperTag.jsx +11 -0
- package/dist/common/file-icon.jsx +51 -0
- package/dist/common/icon.jsx +1 -1
- package/dist/components/Accordion/Accordion.jsx +102 -0
- package/dist/components/AspectBox/AspectBox.jsx +79 -0
- package/dist/components/BackToTop/BackToTop.jsx +27 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.jsx +28 -0
- package/dist/components/Button/Button.jsx +30 -0
- package/dist/components/Checkbox/Checkbox.jsx +62 -0
- package/dist/components/ConfirmationMessage/ConfirmationMessage.jsx +24 -0
- package/dist/components/ContentsNav/ContentsNav.jsx +33 -0
- package/dist/components/CookieBanner/CookieBanner.jsx +21 -0
- package/dist/components/DatePicker/DatePicker.jsx +54 -0
- package/dist/components/Details/Details.jsx +17 -0
- package/dist/components/ErrorMessage/ErrorMessage.jsx +12 -0
- package/dist/components/ErrorSummary/ErrorSummary.jsx +27 -0
- package/dist/components/FileDownload/FileDownload.jsx +50 -0
- package/dist/components/HideThisPage/HideThisPage.jsx +71 -0
- package/dist/components/InsetText/InsetText.jsx +14 -0
- package/dist/components/NotificationBanner/NotificationBanner.jsx +26 -0
- package/dist/components/NotificationPanel/NotificationPanel.jsx +21 -0
- package/dist/components/PageHeader/PageHeader.jsx +15 -0
- package/dist/components/PageMetadata/PageMetadata.jsx +26 -0
- package/dist/components/Pagination/Pagination.jsx +97 -0
- package/dist/components/PhaseBanner/PhaseBanner.jsx +23 -0
- package/dist/components/Question/Question.jsx +22 -0
- package/dist/components/RadioButton/RadioButton.jsx +43 -0
- package/dist/components/Select/Select.jsx +52 -0
- package/dist/components/SequentialNavigation/SequentialNavigation.jsx +31 -0
- package/dist/components/SideNavigation/SideNavigation.jsx +52 -0
- package/dist/components/SiteHeader/SiteHeader.jsx +68 -0
- package/dist/components/SiteNavigation/SiteNavigation.jsx +22 -0
- package/dist/components/SiteSearch/SiteSearch.jsx +55 -0
- package/dist/components/SkipLinks/SkipLinks.jsx +21 -0
- package/dist/components/SummaryCard/SummaryCard.jsx +67 -0
- package/dist/components/SummaryList/SummaryList.jsx +75 -0
- package/dist/components/Table/Table.jsx +24 -0
- package/dist/components/Tabs/Tabs.jsx +99 -0
- package/dist/components/Tag/Tag.jsx +13 -0
- package/dist/components/TaskList/TaskList.jsx +95 -0
- package/dist/components/TextInput/TextInput.jsx +58 -0
- package/dist/components/Textarea/Textarea.jsx +54 -0
- package/dist/components/WarningText/WarningText.jsx +16 -0
- package/dist/components/file-download/file-download.jsx +50 -0
- package/dist/images/documents/audio.jsx +47 -0
- package/dist/images/documents/csv.jsx +57 -0
- package/dist/images/documents/excel.jsx +57 -0
- package/dist/images/documents/file.jsx +48 -0
- package/dist/images/documents/generic.jsx +47 -0
- package/dist/images/documents/geodata.jsx +44 -0
- package/dist/images/documents/ical.jsx +48 -0
- package/dist/images/documents/ico.jsx +48 -0
- package/dist/images/documents/image.jsx +43 -0
- package/dist/images/documents/index.js +50 -0
- package/dist/images/documents/odf.jsx +46 -0
- package/dist/images/documents/odg.jsx +46 -0
- package/dist/images/documents/odp.jsx +45 -0
- package/dist/images/documents/ods.jsx +55 -0
- package/dist/images/documents/odt.jsx +46 -0
- package/dist/images/documents/pdf.jsx +48 -0
- package/dist/images/documents/ppt.jsx +47 -0
- package/dist/images/documents/rtf.jsx +48 -0
- package/dist/images/documents/text.jsx +48 -0
- package/dist/images/documents/video.jsx +47 -0
- package/dist/images/documents/word.jsx +48 -0
- package/dist/images/documents/xml.jsx +48 -0
- package/dist/images/documents/zip.jsx +48 -0
- package/dist/images/icons/arrow_upward.jsx +41 -0
- package/dist/images/icons/calendar_today.jsx +41 -0
- package/dist/images/icons/cancel.jsx +40 -0
- package/dist/images/icons/check_circle.jsx +41 -0
- package/dist/images/icons/chevron_left.jsx +41 -0
- package/dist/images/icons/chevron_right.jsx +41 -0
- package/dist/images/icons/close.jsx +41 -0
- package/dist/images/icons/description.jsx +41 -0
- package/dist/images/icons/double_chevron_left.jsx +40 -0
- package/dist/images/icons/double_chevron_right.jsx +40 -0
- package/dist/images/icons/error.jsx +41 -0
- package/dist/images/icons/expand_less.jsx +41 -0
- package/dist/images/icons/expand_more.jsx +41 -0
- package/dist/images/icons/index.js +40 -0
- package/dist/images/icons/list.jsx +44 -0
- package/dist/images/icons/menu.jsx +41 -0
- package/dist/images/icons/priority_high.jsx +42 -0
- package/dist/images/icons/search.jsx +41 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -1
- package/src/common/{abstract-notification-banner.test.tsx → AbstractNotificationBanner.test.tsx} +11 -11
- package/src/common/{abstract-notification-banner.tsx → AbstractNotificationBanner.tsx} +2 -2
- package/src/common/{conditional-wrapper.test.tsx → ConditionalWrapper.test.tsx} +1 -1
- package/src/common/FileIcon.test.tsx +50 -0
- package/src/common/FileIcon.tsx +25 -0
- package/src/common/{hint-text.test.tsx → HintText.test.tsx} +12 -12
- package/src/common/{icon.test.tsx → Icon.test.tsx} +16 -16
- package/src/common/{icon.tsx → Icon.tsx} +1 -1
- package/src/common/{screen-reader-text.test.tsx → ScreenReaderText.test.tsx} +5 -5
- package/src/common/{wrapper-tag.test.tsx → WrapperTag.test.tsx} +5 -5
- package/src/components/{accordion/accordion.test.tsx → Accordion/Accordion.test.tsx} +35 -35
- package/src/components/{accordion/accordion.tsx → Accordion/Accordion.tsx} +5 -5
- package/src/components/{aspect-box/aspect-box.test.tsx → AspectBox/AspectBox.test.tsx} +2 -2
- package/src/components/{back-to-top/back-to-top.test.tsx → BackToTop/BackToTop.test.tsx} +1 -1
- package/src/components/{back-to-top/back-to-top.tsx → BackToTop/BackToTop.tsx} +1 -1
- package/src/components/{breadcrumbs/breadcrumbs.test.tsx → Breadcrumbs/Breadcrumbs.test.tsx} +7 -7
- package/src/components/{button/button.test.tsx → Button/Button.test.tsx} +1 -1
- package/src/components/{button/button.tsx → Button/Button.tsx} +3 -3
- package/src/components/{checkbox/checkbox.test.tsx → Checkbox/Checkbox.test.tsx} +16 -16
- package/src/components/{checkbox/checkbox.tsx → Checkbox/Checkbox.tsx} +1 -1
- package/src/components/{confirmation-message/confirmation-message.test.tsx → ConfirmationMessage/ConfirmationMessage.test.tsx} +12 -14
- package/src/components/{confirmation-message/confirmation-message.tsx → ConfirmationMessage/ConfirmationMessage.tsx} +4 -4
- package/src/components/{contents-nav/contents-nav.test.tsx → ContentsNav/ContentsNav.test.tsx} +21 -28
- package/src/components/{contents-nav/contents-nav.tsx → ContentsNav/ContentsNav.tsx} +1 -1
- package/src/components/{cookie-banner/cookie-banner.test.tsx → CookieBanner/CookieBanner.test.tsx} +3 -3
- package/src/components/{cookie-banner/cookie-banner.tsx → CookieBanner/CookieBanner.tsx} +1 -1
- package/src/components/{date-picker/date-picker.test.tsx → DatePicker/DatePicker.test.tsx} +76 -66
- package/src/components/{date-picker/date-picker.tsx → DatePicker/DatePicker.tsx} +2 -2
- package/src/components/{details/details.test.tsx → Details/Details.test.tsx} +10 -10
- package/src/components/{error-message/error-message.test.tsx → ErrorMessage/ErrorMessage.test.tsx} +10 -10
- package/src/components/{error-summary/error-summary.test.tsx → ErrorSummary/ErrorSummary.test.tsx} +13 -14
- package/src/components/{error-summary/error-summary.tsx → ErrorSummary/ErrorSummary.tsx} +1 -1
- package/src/components/FileDownload/FileDownload.test.tsx +167 -0
- package/src/components/FileDownload/FileDownload.tsx +67 -0
- package/src/components/{hide-this-page/hide-this-page.test.tsx → HideThisPage/HideThisPage.test.tsx} +4 -4
- package/src/components/{hide-this-page/hide-this-page.tsx → HideThisPage/HideThisPage.tsx} +3 -3
- package/src/components/{inset-text/inset-text.test.tsx → InsetText/InsetText.test.tsx} +1 -1
- package/src/components/{notification-banner/notification-banner.test.tsx → NotificationBanner/NotificationBanner.test.tsx} +4 -4
- package/src/components/{notification-banner/notification-banner.tsx → NotificationBanner/NotificationBanner.tsx} +1 -1
- package/src/components/{notification-panel/notification-panel.test.tsx → NotificationPanel/NotificationPanel.test.tsx} +24 -23
- package/src/components/{notification-panel/notification-panel.tsx → NotificationPanel/NotificationPanel.tsx} +3 -3
- package/src/components/{page-header/page-header.test.tsx → PageHeader/PageHeader.test.tsx} +9 -9
- package/src/components/{page-metadata/page-metadata.test.tsx → PageMetadata/PageMetadata.test.tsx} +9 -9
- package/src/components/{pagination/pagination.test.tsx → Pagination/Pagination.test.tsx} +56 -56
- package/src/components/{pagination/pagination.tsx → Pagination/Pagination.tsx} +1 -1
- package/src/components/{phase-banner/phase-banner.test.tsx → PhaseBanner/PhaseBanner.test.tsx} +9 -9
- package/src/components/{phase-banner/phase-banner.tsx → PhaseBanner/PhaseBanner.tsx} +1 -1
- package/src/components/{question/question.test.tsx → Question/Question.test.tsx} +10 -10
- package/src/components/{question/question.tsx → Question/Question.tsx} +3 -3
- package/src/components/{radio-button/radio-button.test.tsx → RadioButton/RadioButton.test.tsx} +23 -23
- package/src/components/{radio-button/radio-button.tsx → RadioButton/RadioButton.tsx} +1 -1
- package/src/components/{select/select.test.tsx → Select/Select.test.tsx} +67 -64
- package/src/components/{select/select.tsx → Select/Select.tsx} +2 -2
- package/src/components/{sequential-navigation/sequential-navigation.test.tsx → SequentialNavigation/SequentialNavigation.test.tsx} +18 -18
- package/src/components/{side-navigation/side-navigation.test.tsx → SideNavigation/SideNavigation.test.tsx} +8 -8
- package/src/components/{site-header/site-header.test.tsx → SiteHeader/SiteHeader.test.tsx} +25 -25
- package/src/components/{site-header/site-header.tsx → SiteHeader/SiteHeader.tsx} +4 -4
- package/src/components/{site-navigation/site-navigation.test.tsx → SiteNavigation/SiteNavigation.test.tsx} +8 -8
- package/src/components/{site-search/site-search.test.tsx → SiteSearch/SiteSearch.test.tsx} +16 -16
- package/src/components/{site-search/site-search.tsx → SiteSearch/SiteSearch.tsx} +1 -1
- package/src/components/{skip-links/skip-links.test.tsx → SkipLinks/SkipLinks.test.tsx} +15 -15
- package/src/components/{summary-card/summary-card.test.tsx → SummaryCard/SummaryCard.test.tsx} +28 -28
- package/src/components/{summary-card/summary-card.tsx → SummaryCard/SummaryCard.tsx} +4 -4
- package/src/components/{summary-list/summary-list.test.tsx → SummaryList/SummaryList.test.tsx} +55 -56
- package/src/components/{summary-list/summary-list.tsx → SummaryList/SummaryList.tsx} +2 -2
- package/src/components/{table/table.test.tsx → Table/Table.test.tsx} +4 -4
- package/src/components/{tabs/tabs.test.tsx → Tabs/Tabs.test.tsx} +22 -42
- package/src/components/{tabs/tabs.tsx → Tabs/Tabs.tsx} +3 -3
- package/src/components/{tag/tag.test.tsx → Tag/Tag.test.tsx} +10 -10
- package/src/components/{task-list/task-list.test.tsx → TaskList/TaskList.test.tsx} +109 -108
- package/src/components/{task-list/task-list.tsx → TaskList/TaskList.tsx} +4 -4
- package/src/components/{text-input/text-input.test.tsx → TextInput/TextInput.test.tsx} +92 -87
- package/src/components/{text-input/text-input.tsx → TextInput/TextInput.tsx} +4 -4
- package/src/components/{textarea/textarea.test.tsx → Textarea/Textarea.test.tsx} +71 -67
- package/src/components/{textarea/textarea.tsx → Textarea/Textarea.tsx} +3 -3
- package/src/components/{warning-text/warning-text.test.tsx → WarningText/WarningText.test.tsx} +1 -1
- package/src/images/documents/audio.tsx +34 -0
- package/src/images/documents/csv.tsx +39 -0
- package/src/images/documents/excel.tsx +39 -0
- package/src/images/documents/file.tsx +30 -0
- package/src/images/documents/generic.tsx +26 -0
- package/src/images/documents/geodata.tsx +29 -0
- package/src/images/documents/ical.tsx +30 -0
- package/src/images/documents/ico.tsx +30 -0
- package/src/images/documents/image.tsx +25 -0
- package/src/images/documents/index.ts +22 -0
- package/src/images/documents/odf.tsx +28 -0
- package/src/images/documents/odg.tsx +28 -0
- package/src/images/documents/odp.tsx +33 -0
- package/src/images/documents/ods.tsx +37 -0
- package/src/images/documents/odt.tsx +28 -0
- package/src/images/documents/pdf.tsx +30 -0
- package/src/images/documents/ppt.tsx +28 -0
- package/src/images/documents/rtf.tsx +30 -0
- package/src/images/documents/text.tsx +30 -0
- package/src/images/documents/video.tsx +34 -0
- package/src/images/documents/word.tsx +30 -0
- package/src/images/documents/xml.tsx +30 -0
- package/src/images/documents/zip.tsx +30 -0
- package/src/images/icons/index.ts +17 -0
- package/vite.config.ts +1 -1
- package/src/icons/index.ts +0 -17
- /package/src/common/{conditional-wrapper.tsx → ConditionalWrapper.tsx} +0 -0
- /package/src/common/{hint-text.tsx → HintText.tsx} +0 -0
- /package/src/common/{screen-reader-text.tsx → ScreenReaderText.tsx} +0 -0
- /package/src/common/{wrapper-tag.tsx → WrapperTag.tsx} +0 -0
- /package/src/components/{aspect-box/aspect-box.tsx → AspectBox/AspectBox.tsx} +0 -0
- /package/src/components/{breadcrumbs/breadcrumbs.tsx → Breadcrumbs/Breadcrumbs.tsx} +0 -0
- /package/src/components/{details/details.tsx → Details/Details.tsx} +0 -0
- /package/src/components/{error-message/error-message.tsx → ErrorMessage/ErrorMessage.tsx} +0 -0
- /package/src/components/{inset-text/inset-text.tsx → InsetText/InsetText.tsx} +0 -0
- /package/src/components/{page-header/page-header.tsx → PageHeader/PageHeader.tsx} +0 -0
- /package/src/components/{page-metadata/page-metadata.tsx → PageMetadata/PageMetadata.tsx} +0 -0
- /package/src/components/{sequential-navigation/sequential-navigation.tsx → SequentialNavigation/SequentialNavigation.tsx} +0 -0
- /package/src/components/{side-navigation/side-navigation.tsx → SideNavigation/SideNavigation.tsx} +0 -0
- /package/src/components/{site-navigation/site-navigation.tsx → SiteNavigation/SiteNavigation.tsx} +0 -0
- /package/src/components/{skip-links/skip-links.tsx → SkipLinks/SkipLinks.tsx} +0 -0
- /package/src/components/{table/table.tsx → Table/Table.tsx} +0 -0
- /package/src/components/{tag/tag.tsx → Tag/Tag.tsx} +0 -0
- /package/src/components/{warning-text/warning-text.tsx → WarningText/WarningText.tsx} +0 -0
- /package/src/{icons/ArrowUpward.tsx → images/icons/arrow_upward.tsx} +0 -0
- /package/src/{icons/CalendarToday.tsx → images/icons/calendar_today.tsx} +0 -0
- /package/src/{icons/Cancel.tsx → images/icons/cancel.tsx} +0 -0
- /package/src/{icons/CheckCircle.tsx → images/icons/check_circle.tsx} +0 -0
- /package/src/{icons/ChevronLeft.tsx → images/icons/chevron_left.tsx} +0 -0
- /package/src/{icons/ChevronRight.tsx → images/icons/chevron_right.tsx} +0 -0
- /package/src/{icons/Close.tsx → images/icons/close.tsx} +0 -0
- /package/src/{icons/Description.tsx → images/icons/description.tsx} +0 -0
- /package/src/{icons/DoubleChevronLeft.tsx → images/icons/double_chevron_left.tsx} +0 -0
- /package/src/{icons/DoubleChevronRight.tsx → images/icons/double_chevron_right.tsx} +0 -0
- /package/src/{icons/Error.tsx → images/icons/error.tsx} +0 -0
- /package/src/{icons/ExpandLess.tsx → images/icons/expand_less.tsx} +0 -0
- /package/src/{icons/ExpandMore.tsx → images/icons/expand_more.tsx} +0 -0
- /package/src/{icons/List.tsx → images/icons/list.tsx} +0 -0
- /package/src/{icons/Menu.tsx → images/icons/menu.tsx} +0 -0
- /package/src/{icons/PriorityHigh.tsx → images/icons/priority_high.tsx} +0 -0
- /package/src/{icons/Search.tsx → images/icons/search.tsx} +0 -0
package/src/components/{contents-nav/contents-nav.test.tsx → ContentsNav/ContentsNav.test.tsx}
RENAMED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { test, expect } from 'vitest';
|
|
2
2
|
import { render, screen, within } from '@testing-library/react';
|
|
3
|
-
import ContentsNav, {Link} from './
|
|
3
|
+
import ContentsNav, {Link} from './ContentsNav';
|
|
4
|
+
|
|
5
|
+
const ITEM_HREF = '#foo';
|
|
6
|
+
const ITEM_TITLE = 'My content';
|
|
4
7
|
|
|
5
8
|
test('contents nav renders correctly', () => {
|
|
6
|
-
const
|
|
9
|
+
const ITEMS = [
|
|
7
10
|
{
|
|
8
11
|
title: 'Apply for Blue Badge',
|
|
9
12
|
current: true
|
|
@@ -26,10 +29,10 @@ test('contents nav renders correctly', () => {
|
|
|
26
29
|
}
|
|
27
30
|
];
|
|
28
31
|
|
|
29
|
-
const
|
|
32
|
+
const LABEL_TEXT = 'Pages in this guide';
|
|
30
33
|
|
|
31
34
|
render(
|
|
32
|
-
<ContentsNav label={
|
|
35
|
+
<ContentsNav label={LABEL_TEXT} items={ITEMS} />
|
|
33
36
|
)
|
|
34
37
|
|
|
35
38
|
const contentsNav = screen.getByRole('navigation');
|
|
@@ -37,33 +40,30 @@ test('contents nav renders correctly', () => {
|
|
|
37
40
|
const contentsNavList = within(contentsNav).getByRole('list');
|
|
38
41
|
|
|
39
42
|
expect(contentsNav).toHaveClass('ds_contents-nav');
|
|
40
|
-
expect(contentsNav.ariaLabel).toEqual(
|
|
43
|
+
expect(contentsNav.ariaLabel).toEqual(LABEL_TEXT);
|
|
41
44
|
expect(contentsNav.tagName).toEqual('NAV');
|
|
42
45
|
expect(contentsNavTitle).toHaveClass('ds_contents-nav__title');
|
|
43
46
|
expect(contentsNavTitle.textContent).toEqual('Contents');
|
|
44
47
|
expect(contentsNavList).toHaveClass('ds_contents-nav__list');
|
|
45
48
|
expect(contentsNavList.tagName).toEqual('UL');
|
|
46
|
-
expect(contentsNavList.children.length).toEqual(
|
|
49
|
+
expect(contentsNavList.children.length).toEqual(ITEMS.length);
|
|
47
50
|
});
|
|
48
51
|
|
|
49
52
|
test('contents nav with custom title', () => {
|
|
50
|
-
const
|
|
53
|
+
const TITLE_TEXT = 'My title';
|
|
51
54
|
|
|
52
55
|
render(
|
|
53
|
-
<ContentsNav title={
|
|
56
|
+
<ContentsNav title={TITLE_TEXT} items={[]} />
|
|
54
57
|
);
|
|
55
58
|
|
|
56
59
|
const contentsNav = screen.getByRole('navigation');
|
|
57
60
|
const contentsNavTitle = within(contentsNav).getByRole('heading');
|
|
58
|
-
expect(contentsNavTitle.textContent).toEqual(
|
|
61
|
+
expect(contentsNavTitle.textContent).toEqual(TITLE_TEXT);
|
|
59
62
|
});
|
|
60
63
|
|
|
61
64
|
test('contents nav item', () => {
|
|
62
|
-
const href = '#foo';
|
|
63
|
-
const content = 'My content';
|
|
64
|
-
|
|
65
65
|
render(
|
|
66
|
-
<Link href={
|
|
66
|
+
<Link href={ITEM_HREF} title={ITEM_TITLE} />
|
|
67
67
|
);
|
|
68
68
|
|
|
69
69
|
const listItem = screen.getByRole('listitem');
|
|
@@ -73,20 +73,17 @@ test('contents nav item', () => {
|
|
|
73
73
|
expect(listItem.tagName).toEqual('LI');
|
|
74
74
|
expect(link).toHaveClass('ds_contents-nav__link');
|
|
75
75
|
expect(link.tagName).toEqual('A');
|
|
76
|
-
expect(link.textContent).toEqual(
|
|
77
|
-
expect(link).toHaveAttribute('href',
|
|
76
|
+
expect(link.textContent).toEqual(ITEM_TITLE);
|
|
77
|
+
expect(link).toHaveAttribute('href', ITEM_HREF);
|
|
78
78
|
});
|
|
79
79
|
|
|
80
80
|
test('contents nav current item with href', () => {
|
|
81
|
-
const href = '#foo';
|
|
82
|
-
const content = 'My content';
|
|
83
|
-
|
|
84
81
|
render(
|
|
85
|
-
<Link current href={
|
|
82
|
+
<Link current href={ITEM_HREF} title={ITEM_TITLE} />
|
|
86
83
|
);
|
|
87
84
|
|
|
88
85
|
const listItem = screen.getByRole('listitem');
|
|
89
|
-
const link = within(listItem).getByText(
|
|
86
|
+
const link = within(listItem).getByText(ITEM_TITLE);
|
|
90
87
|
|
|
91
88
|
expect(listItem.ariaCurrent).toEqual('page');
|
|
92
89
|
expect(link.tagName).toEqual('SPAN');
|
|
@@ -94,14 +91,12 @@ test('contents nav current item with href', () => {
|
|
|
94
91
|
});
|
|
95
92
|
|
|
96
93
|
test('contents nav current item without href', () => {
|
|
97
|
-
const content = 'My content';
|
|
98
|
-
|
|
99
94
|
render(
|
|
100
|
-
<Link current title={
|
|
95
|
+
<Link current title={ITEM_TITLE} />
|
|
101
96
|
);
|
|
102
97
|
|
|
103
98
|
const listItem = screen.getByRole('listitem');
|
|
104
|
-
const link = within(listItem).getByText(
|
|
99
|
+
const link = within(listItem).getByText(ITEM_TITLE);
|
|
105
100
|
|
|
106
101
|
expect(listItem.ariaCurrent).toEqual('page');
|
|
107
102
|
expect(link.tagName).toEqual('SPAN');
|
|
@@ -109,14 +104,12 @@ test('contents nav current item without href', () => {
|
|
|
109
104
|
});
|
|
110
105
|
|
|
111
106
|
test('contents nav item without href', () => {
|
|
112
|
-
const content = 'My content';
|
|
113
|
-
|
|
114
107
|
render(
|
|
115
|
-
<Link title={
|
|
108
|
+
<Link title={ITEM_TITLE} />
|
|
116
109
|
);
|
|
117
110
|
|
|
118
111
|
const listItem = screen.getByRole('listitem');
|
|
119
|
-
const link = within(listItem).getByText(
|
|
112
|
+
const link = within(listItem).getByText(ITEM_TITLE);
|
|
120
113
|
|
|
121
114
|
expect(link.tagName).toEqual('SPAN');
|
|
122
115
|
expect(link).not.toHaveClass('ds_current');
|
package/src/components/{cookie-banner/cookie-banner.test.tsx → CookieBanner/CookieBanner.test.tsx}
RENAMED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
import { test, expect } from 'vitest';
|
|
7
7
|
import { render } from '@testing-library/react';
|
|
8
|
-
import CookieBanner from './
|
|
8
|
+
import CookieBanner from './CookieBanner';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const BANNER_TEXT = 'We need to tell you about something';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* CookieBanner has additional classNames
|
|
@@ -15,7 +15,7 @@ const text = 'We need to tell you about something';
|
|
|
15
15
|
test('cookie banner renders correctly', () => {
|
|
16
16
|
render(
|
|
17
17
|
<CookieBanner>
|
|
18
|
-
{
|
|
18
|
+
{BANNER_TEXT}
|
|
19
19
|
</CookieBanner>
|
|
20
20
|
);
|
|
21
21
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import AbstractNotificationBanner from '../../common/
|
|
2
|
+
import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
|
|
3
3
|
// @ts-ignore
|
|
4
4
|
import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
|
|
5
5
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { test, expect, vi } from 'vitest';
|
|
2
2
|
import { render, screen, within, fireEvent } from '@testing-library/react';
|
|
3
|
-
import DatePicker from './
|
|
3
|
+
import DatePicker from './DatePicker';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
const
|
|
5
|
+
const LABEL_TEXT = 'Date of birth';
|
|
6
|
+
const DATE_PICKER_ID = 'date-picker';
|
|
7
7
|
|
|
8
8
|
test('date picker renders correctly', () => {
|
|
9
9
|
render(
|
|
10
10
|
<DatePicker
|
|
11
|
-
id={
|
|
12
|
-
label={
|
|
11
|
+
id={DATE_PICKER_ID}
|
|
12
|
+
label={LABEL_TEXT}
|
|
13
13
|
/>
|
|
14
14
|
);
|
|
15
15
|
|
|
16
16
|
// a little hacky. maybe testid would be better?
|
|
17
17
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
18
|
-
const label = within(datePicker).getByText(
|
|
18
|
+
const label = within(datePicker).getByText(LABEL_TEXT);
|
|
19
19
|
const textInput = within(datePicker).getByRole('textbox');
|
|
20
20
|
|
|
21
21
|
expect(datePicker).toHaveClass('ds_datepicker');
|
|
@@ -23,36 +23,38 @@ test('date picker renders correctly', () => {
|
|
|
23
23
|
expect(label).toHaveAttribute('for', textInput.id);
|
|
24
24
|
expect(label.tagName).toEqual('LABEL');
|
|
25
25
|
expect(textInput).toHaveClass('ds_input', 'ds_input--fixed-10');
|
|
26
|
-
expect(textInput.id).toEqual(
|
|
26
|
+
expect(textInput.id).toEqual(DATE_PICKER_ID);
|
|
27
27
|
|
|
28
28
|
// todo: check for DS script being fired
|
|
29
29
|
});
|
|
30
30
|
|
|
31
31
|
test('date picker with disabled dates', () => {
|
|
32
|
-
const
|
|
32
|
+
const DISABLED_DATES = '18/05/2023 19/05/2023'
|
|
33
|
+
|
|
33
34
|
render(
|
|
34
35
|
<DatePicker
|
|
35
|
-
id={
|
|
36
|
-
label={
|
|
37
|
-
disabledDates={
|
|
36
|
+
id={DATE_PICKER_ID}
|
|
37
|
+
label={LABEL_TEXT}
|
|
38
|
+
disabledDates={DISABLED_DATES}
|
|
38
39
|
/>
|
|
39
40
|
);
|
|
40
41
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
41
42
|
|
|
42
|
-
expect(datePicker).toHaveAttribute('data-disableddates',
|
|
43
|
+
expect(datePicker).toHaveAttribute('data-disableddates', DISABLED_DATES);
|
|
43
44
|
});
|
|
44
45
|
|
|
45
46
|
test('date picker with hint text', () => {
|
|
46
|
-
const
|
|
47
|
+
const HINT_TEXT = 'My hint text'
|
|
48
|
+
|
|
47
49
|
render(
|
|
48
50
|
<DatePicker
|
|
49
|
-
id={
|
|
50
|
-
label={
|
|
51
|
-
hintText={
|
|
51
|
+
id={DATE_PICKER_ID}
|
|
52
|
+
label={LABEL_TEXT}
|
|
53
|
+
hintText={HINT_TEXT}
|
|
52
54
|
/>
|
|
53
55
|
);
|
|
54
56
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
55
|
-
const hintTextEl = screen.getByText(
|
|
57
|
+
const hintTextEl = screen.getByText(HINT_TEXT);
|
|
56
58
|
const textInput = within(datePicker).getByRole('textbox');
|
|
57
59
|
|
|
58
60
|
expect(hintTextEl).toBeInTheDocument();
|
|
@@ -60,56 +62,60 @@ test('date picker with hint text', () => {
|
|
|
60
62
|
});
|
|
61
63
|
|
|
62
64
|
test('date picker with custom icon path', () => {
|
|
63
|
-
const
|
|
65
|
+
const ICON_PATH = '/my/icon/path'
|
|
66
|
+
|
|
64
67
|
render(
|
|
65
68
|
<DatePicker
|
|
66
|
-
id={
|
|
67
|
-
label={
|
|
68
|
-
iconPath={
|
|
69
|
+
id={DATE_PICKER_ID}
|
|
70
|
+
label={LABEL_TEXT}
|
|
71
|
+
iconPath={ICON_PATH}
|
|
69
72
|
/>
|
|
70
73
|
);
|
|
71
74
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
72
|
-
const label = within(datePicker).getByText(
|
|
75
|
+
const label = within(datePicker).getByText(LABEL_TEXT);
|
|
73
76
|
const textInput = within(datePicker).getByRole('textbox');
|
|
74
77
|
|
|
75
78
|
// todo
|
|
76
79
|
});
|
|
77
80
|
|
|
78
81
|
test('date picker with max date', () => {
|
|
79
|
-
const
|
|
82
|
+
const MAX_DATE = '28/05/2023'
|
|
83
|
+
|
|
80
84
|
render(
|
|
81
85
|
<DatePicker
|
|
82
|
-
id={
|
|
83
|
-
label={
|
|
84
|
-
maxDate={
|
|
86
|
+
id={DATE_PICKER_ID}
|
|
87
|
+
label={LABEL_TEXT}
|
|
88
|
+
maxDate={MAX_DATE}
|
|
85
89
|
/>
|
|
86
90
|
);
|
|
87
91
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
88
92
|
|
|
89
|
-
expect(datePicker).toHaveAttribute('data-maxDate',
|
|
93
|
+
expect(datePicker).toHaveAttribute('data-maxDate', MAX_DATE);
|
|
90
94
|
});
|
|
91
95
|
|
|
92
96
|
test('date picker with min date', () => {
|
|
93
|
-
const
|
|
97
|
+
const MIN_DATE = '28/05/2023'
|
|
98
|
+
|
|
94
99
|
render(
|
|
95
100
|
<DatePicker
|
|
96
|
-
id={
|
|
97
|
-
label={
|
|
98
|
-
minDate={
|
|
101
|
+
id={DATE_PICKER_ID}
|
|
102
|
+
label={LABEL_TEXT}
|
|
103
|
+
minDate={MIN_DATE}
|
|
99
104
|
/>
|
|
100
105
|
);
|
|
101
106
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
102
107
|
|
|
103
|
-
expect(datePicker).toHaveAttribute('data-mindate',
|
|
108
|
+
expect(datePicker).toHaveAttribute('data-mindate', MIN_DATE);
|
|
104
109
|
});
|
|
105
110
|
|
|
106
111
|
test('date picker with blur fn', () => {
|
|
107
|
-
const
|
|
112
|
+
const ONBLUR_FUNCTION = vi.fn();
|
|
113
|
+
|
|
108
114
|
render(
|
|
109
115
|
<DatePicker
|
|
110
|
-
id={
|
|
111
|
-
label={
|
|
112
|
-
onBlur={
|
|
116
|
+
id={DATE_PICKER_ID}
|
|
117
|
+
label={LABEL_TEXT}
|
|
118
|
+
onBlur={ONBLUR_FUNCTION}
|
|
113
119
|
/>
|
|
114
120
|
);
|
|
115
121
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
@@ -117,16 +123,17 @@ test('date picker with blur fn', () => {
|
|
|
117
123
|
|
|
118
124
|
fireEvent.blur(textInput);
|
|
119
125
|
|
|
120
|
-
expect(
|
|
126
|
+
expect(ONBLUR_FUNCTION).toHaveBeenCalled();
|
|
121
127
|
});
|
|
122
128
|
|
|
123
129
|
test('date picker with change fn', () => {
|
|
124
|
-
const
|
|
130
|
+
const ONCHANGE_FUNCTION = vi.fn();
|
|
131
|
+
|
|
125
132
|
render(
|
|
126
133
|
<DatePicker
|
|
127
|
-
id={
|
|
128
|
-
label={
|
|
129
|
-
onChange={
|
|
134
|
+
id={DATE_PICKER_ID}
|
|
135
|
+
label={LABEL_TEXT}
|
|
136
|
+
onChange={ONCHANGE_FUNCTION}
|
|
130
137
|
/>
|
|
131
138
|
);
|
|
132
139
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
@@ -134,32 +141,34 @@ test('date picker with change fn', () => {
|
|
|
134
141
|
|
|
135
142
|
fireEvent.change(textInput, {target: {value: 'foo'}});
|
|
136
143
|
|
|
137
|
-
expect(
|
|
144
|
+
expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
|
|
138
145
|
});
|
|
139
146
|
|
|
140
147
|
test('date picker with initial value', () => {
|
|
141
|
-
const
|
|
148
|
+
const INITIAL_VALUE = '28/05/2023';
|
|
149
|
+
|
|
142
150
|
render(
|
|
143
151
|
<DatePicker
|
|
144
|
-
id={
|
|
145
|
-
label={
|
|
146
|
-
value={
|
|
152
|
+
id={DATE_PICKER_ID}
|
|
153
|
+
label={LABEL_TEXT}
|
|
154
|
+
value={INITIAL_VALUE}
|
|
147
155
|
/>
|
|
148
156
|
);
|
|
149
157
|
const datePicker = screen.getAllByRole('generic')[1];
|
|
150
158
|
const textInput = within(datePicker).getByRole('textbox');
|
|
151
159
|
|
|
152
|
-
expect(textInput).toHaveValue(
|
|
160
|
+
expect(textInput).toHaveValue(INITIAL_VALUE);
|
|
153
161
|
});
|
|
154
162
|
|
|
155
163
|
test('date picker with multiple inputs', () => {
|
|
156
|
-
const
|
|
164
|
+
const INITIAL_VALUE = '28/05/2023';
|
|
165
|
+
|
|
157
166
|
render(
|
|
158
167
|
<DatePicker
|
|
159
|
-
id={
|
|
160
|
-
label={
|
|
168
|
+
id={DATE_PICKER_ID}
|
|
169
|
+
label={LABEL_TEXT}
|
|
161
170
|
multiple
|
|
162
|
-
value={
|
|
171
|
+
value={INITIAL_VALUE}
|
|
163
172
|
/>
|
|
164
173
|
);
|
|
165
174
|
|
|
@@ -174,13 +183,13 @@ test('date picker with multiple inputs', () => {
|
|
|
174
183
|
|
|
175
184
|
expect(textInputs.length).toEqual(3);
|
|
176
185
|
|
|
177
|
-
expect(dateInput).toHaveValue(
|
|
178
|
-
expect(monthInput).toHaveValue(
|
|
179
|
-
expect(yearInput).toHaveValue(
|
|
186
|
+
expect(dateInput).toHaveValue(INITIAL_VALUE.split('/')[0]);
|
|
187
|
+
expect(monthInput).toHaveValue(INITIAL_VALUE.split('/')[1]);
|
|
188
|
+
expect(yearInput).toHaveValue(INITIAL_VALUE.split('/')[2]);
|
|
180
189
|
|
|
181
|
-
expect(dateInput).toHaveAttribute('id', `${
|
|
182
|
-
expect(monthInput).toHaveAttribute('id', `${
|
|
183
|
-
expect(yearInput).toHaveAttribute('id', `${
|
|
190
|
+
expect(dateInput).toHaveAttribute('id', `${DATE_PICKER_ID}-day`);
|
|
191
|
+
expect(monthInput).toHaveAttribute('id', `${DATE_PICKER_ID}-month`);
|
|
192
|
+
expect(yearInput).toHaveAttribute('id', `${DATE_PICKER_ID}-year`);
|
|
184
193
|
|
|
185
194
|
expect(dateInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-date');
|
|
186
195
|
expect(monthInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-month');
|
|
@@ -196,18 +205,19 @@ test('date picker with multiple inputs', () => {
|
|
|
196
205
|
});
|
|
197
206
|
|
|
198
207
|
test('date picker with error message', () => {
|
|
199
|
-
const
|
|
208
|
+
const ERROR_MESSAGE_TEXT = 'This is a required field';
|
|
209
|
+
|
|
200
210
|
render(
|
|
201
211
|
<DatePicker
|
|
202
|
-
id={
|
|
203
|
-
label={
|
|
212
|
+
id={DATE_PICKER_ID}
|
|
213
|
+
label={LABEL_TEXT}
|
|
204
214
|
error
|
|
205
|
-
errorMessage={
|
|
215
|
+
errorMessage={ERROR_MESSAGE_TEXT}
|
|
206
216
|
/>
|
|
207
217
|
);
|
|
208
218
|
|
|
209
219
|
const textInput = screen.getByRole('textbox');
|
|
210
|
-
const errorMessageElement = screen.getByText(
|
|
220
|
+
const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
|
|
211
221
|
|
|
212
222
|
expect(textInput).toHaveClass('ds_input--error')
|
|
213
223
|
expect(textInput).toHaveAttribute('aria-describedby', errorMessageElement.id);
|
|
@@ -219,8 +229,8 @@ test('date picker with error message', () => {
|
|
|
219
229
|
test('passing additional props', () => {
|
|
220
230
|
render(
|
|
221
231
|
<DatePicker
|
|
222
|
-
id={
|
|
223
|
-
label={
|
|
232
|
+
id={DATE_PICKER_ID}
|
|
233
|
+
label={LABEL_TEXT}
|
|
224
234
|
data-test="foo"
|
|
225
235
|
/>
|
|
226
236
|
)
|
|
@@ -232,8 +242,8 @@ test('passing additional props', () => {
|
|
|
232
242
|
test('passing additional CSS classes', () => {
|
|
233
243
|
render(
|
|
234
244
|
<DatePicker
|
|
235
|
-
id={
|
|
236
|
-
label={
|
|
245
|
+
id={DATE_PICKER_ID}
|
|
246
|
+
label={LABEL_TEXT}
|
|
237
247
|
className="foo"
|
|
238
248
|
/>
|
|
239
249
|
)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
|
2
2
|
// @ts-ignore
|
|
3
3
|
import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
|
|
4
|
-
import ErrorMessage from '../
|
|
5
|
-
import TextInput from '../
|
|
4
|
+
import ErrorMessage from '../ErrorMessage/ErrorMessage';
|
|
5
|
+
import TextInput from '../TextInput/TextInput';
|
|
6
6
|
|
|
7
7
|
const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
|
|
8
8
|
className,
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { test, expect } from 'vitest';
|
|
2
2
|
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import Details from './
|
|
3
|
+
import Details from './Details';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
const
|
|
5
|
+
const SUMARY_TEXT = 'I can\'t sign in';
|
|
6
|
+
const CONTENT = '<p>hello</p>';
|
|
7
7
|
|
|
8
8
|
test('details renders correctly', () => {
|
|
9
9
|
|
|
10
10
|
render(
|
|
11
|
-
<Details summary={
|
|
11
|
+
<Details summary={SUMARY_TEXT}>
|
|
12
12
|
<p>hello</p>
|
|
13
13
|
</Details>
|
|
14
14
|
);
|
|
15
15
|
|
|
16
|
-
const summaryElement = screen.getByText(
|
|
16
|
+
const summaryElement = screen.getByText(SUMARY_TEXT);
|
|
17
17
|
const detailsElement = summaryElement.parentElement;
|
|
18
18
|
const textElement = summaryElement.nextElementSibling;
|
|
19
19
|
|
|
@@ -22,29 +22,29 @@ test('details renders correctly', () => {
|
|
|
22
22
|
expect(summaryElement).toHaveClass('ds_details__summary');
|
|
23
23
|
expect(summaryElement?.tagName).toEqual('SUMMARY');
|
|
24
24
|
expect(textElement).toHaveClass('ds_details__text');
|
|
25
|
-
expect(textElement?.innerHTML).toEqual(
|
|
25
|
+
expect(textElement?.innerHTML).toEqual(CONTENT);
|
|
26
26
|
});
|
|
27
27
|
|
|
28
28
|
test('passing additional props', () => {
|
|
29
29
|
render(
|
|
30
|
-
<Details data-test="foo" summary={
|
|
30
|
+
<Details data-test="foo" summary={SUMARY_TEXT}>
|
|
31
31
|
<p>hello</p>
|
|
32
32
|
</Details>
|
|
33
33
|
)
|
|
34
34
|
|
|
35
|
-
const summaryElement = screen.getByText(
|
|
35
|
+
const summaryElement = screen.getByText(SUMARY_TEXT);
|
|
36
36
|
const detailsElement = summaryElement.parentElement;
|
|
37
37
|
expect(detailsElement?.dataset.test).toEqual('foo');
|
|
38
38
|
});
|
|
39
39
|
|
|
40
40
|
test('passing additional CSS classes', () => {
|
|
41
41
|
render(
|
|
42
|
-
<Details className="foo" summary={
|
|
42
|
+
<Details className="foo" summary={SUMARY_TEXT}>
|
|
43
43
|
<p>hello</p>
|
|
44
44
|
</Details>
|
|
45
45
|
)
|
|
46
46
|
|
|
47
|
-
const summaryElement = screen.getByText(
|
|
47
|
+
const summaryElement = screen.getByText(SUMARY_TEXT);
|
|
48
48
|
const detailsElement = summaryElement.parentElement;
|
|
49
49
|
expect(detailsElement).toHaveClass('foo', 'ds_details');
|
|
50
50
|
});
|
package/src/components/{error-message/error-message.test.tsx → ErrorMessage/ErrorMessage.test.tsx}
RENAMED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { test, expect } from 'vitest';
|
|
2
2
|
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import ErrorMessage from './
|
|
3
|
+
import ErrorMessage from './ErrorMessage';
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
const
|
|
5
|
+
const ERROR_TEXT = 'Error message';
|
|
6
|
+
const ERROR_ID = 'errormessage';
|
|
7
7
|
|
|
8
8
|
test('error message renders correctly', () => {
|
|
9
9
|
|
|
10
10
|
render(
|
|
11
|
-
<ErrorMessage text={
|
|
11
|
+
<ErrorMessage text={ERROR_TEXT} id={ERROR_ID}/>
|
|
12
12
|
);
|
|
13
13
|
|
|
14
14
|
const errorMessageElement = screen.getByRole('paragraph');
|
|
15
15
|
|
|
16
|
-
expect(errorMessageElement).toHaveAttribute('id',
|
|
16
|
+
expect(errorMessageElement).toHaveAttribute('id', ERROR_ID);
|
|
17
17
|
expect(errorMessageElement).toHaveClass('ds_question__error-message');
|
|
18
|
-
expect(errorMessageElement.textContent).toEqual(
|
|
18
|
+
expect(errorMessageElement.textContent).toEqual(ERROR_TEXT);
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
test('error message with HTML content', () => {
|
|
22
|
-
const
|
|
22
|
+
const ERROR_ID = 'errormessage';
|
|
23
23
|
|
|
24
24
|
render(
|
|
25
|
-
<ErrorMessage id={
|
|
25
|
+
<ErrorMessage id={ERROR_ID}>hello <a href="#foo">world</a></ErrorMessage>
|
|
26
26
|
);
|
|
27
27
|
|
|
28
28
|
const errorMessageElement = screen.getByRole('paragraph');
|
|
@@ -32,7 +32,7 @@ test('error message with HTML content', () => {
|
|
|
32
32
|
|
|
33
33
|
test('passing additional props', () => {
|
|
34
34
|
render(
|
|
35
|
-
<ErrorMessage data-test="foo" text={
|
|
35
|
+
<ErrorMessage data-test="foo" text={ERROR_TEXT} id={ERROR_ID}/>
|
|
36
36
|
)
|
|
37
37
|
|
|
38
38
|
const errorMessageElement = screen.getByRole('paragraph');
|
|
@@ -41,7 +41,7 @@ test('passing additional props', () => {
|
|
|
41
41
|
|
|
42
42
|
test('passing additional CSS classes', () => {
|
|
43
43
|
render(
|
|
44
|
-
<ErrorMessage className="foo" text={
|
|
44
|
+
<ErrorMessage className="foo" text={ERROR_TEXT} id={ERROR_ID}/>
|
|
45
45
|
)
|
|
46
46
|
|
|
47
47
|
const errorMessageElement = screen.getByRole('paragraph');
|
package/src/components/{error-summary/error-summary.test.tsx → ErrorSummary/ErrorSummary.test.tsx}
RENAMED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import { test, expect } from 'vitest';
|
|
2
2
|
import { render, screen, within } from '@testing-library/react';
|
|
3
|
-
import ErrorSummary from './
|
|
4
|
-
import { title } from 'process';
|
|
3
|
+
import ErrorSummary from './ErrorSummary';
|
|
5
4
|
|
|
6
|
-
const
|
|
5
|
+
const ERRORS = [
|
|
7
6
|
{ fragmentId: 'did-resolve', title: 'Did this resolve your issue?' },
|
|
8
7
|
{ fragmentId: 'what-topics', title: 'What topics are you interested in?' },
|
|
9
8
|
{ fragmentId: 'more-detail', title: 'Please provide more detail' }
|
|
10
9
|
];
|
|
11
10
|
|
|
12
11
|
test('error summary renders correctly', () => {
|
|
13
|
-
const
|
|
12
|
+
const TITLE_ID = 'error-summary-title';
|
|
14
13
|
|
|
15
14
|
render(
|
|
16
|
-
<ErrorSummary data-testid="errorsummary" errors={
|
|
15
|
+
<ErrorSummary data-testid="errorsummary" errors={ERRORS} />
|
|
17
16
|
);
|
|
18
17
|
|
|
19
18
|
const errorSummaryElement = screen.getByTestId('errorsummary');
|
|
@@ -28,30 +27,30 @@ test('error summary renders correctly', () => {
|
|
|
28
27
|
expect(errorSummaryElement.tagName).toEqual('DIV');
|
|
29
28
|
|
|
30
29
|
expect(errorSummaryTitle).toHaveClass('ds_error-summary__title');
|
|
31
|
-
expect(errorSummaryTitle).toHaveAttribute('id',
|
|
30
|
+
expect(errorSummaryTitle).toHaveAttribute('id', TITLE_ID);
|
|
32
31
|
expect(errorSummaryTitle.tagName).toEqual('H2');
|
|
33
32
|
expect(errorSummaryTitle.textContent).toEqual('There is a problem');
|
|
34
33
|
|
|
35
34
|
expect(errorSummaryList).toHaveClass('ds_error-summary__list');
|
|
36
35
|
expect(errorSummaryList.tagName).toEqual('UL');
|
|
37
36
|
|
|
38
|
-
expect(errorSummaryItems.length).toEqual(
|
|
37
|
+
expect(errorSummaryItems.length).toEqual(ERRORS.length);
|
|
39
38
|
|
|
40
|
-
expect(errorSummaryLink1).toHaveAttribute('href', `#${
|
|
41
|
-
expect(errorSummaryLink1.textContent).toEqual(
|
|
39
|
+
expect(errorSummaryLink1).toHaveAttribute('href', `#${ERRORS[0].fragmentId}`);
|
|
40
|
+
expect(errorSummaryLink1.textContent).toEqual(ERRORS[0].title);
|
|
42
41
|
});
|
|
43
42
|
|
|
44
43
|
test('error summary with custom title', () => {
|
|
45
|
-
const
|
|
44
|
+
const TITLE_TEXT = 'Foo';
|
|
46
45
|
|
|
47
46
|
render(
|
|
48
|
-
<ErrorSummary data-testid="errorsummary" errors={
|
|
47
|
+
<ErrorSummary data-testid="errorsummary" errors={ERRORS} title={TITLE_TEXT} />
|
|
49
48
|
);
|
|
50
49
|
|
|
51
50
|
const errorSummaryElement = screen.getByTestId('errorsummary');
|
|
52
51
|
const errorSummaryTitle = within(errorSummaryElement).getByRole('heading');
|
|
53
52
|
|
|
54
|
-
expect(errorSummaryTitle.textContent).toEqual(
|
|
53
|
+
expect(errorSummaryTitle.textContent).toEqual(TITLE_TEXT);
|
|
55
54
|
});
|
|
56
55
|
|
|
57
56
|
test('error summary with no errors (empty array) should not display', () => {
|
|
@@ -89,7 +88,7 @@ test('error sumary item with no link', () => {
|
|
|
89
88
|
|
|
90
89
|
test('passing additional props', () => {
|
|
91
90
|
render(
|
|
92
|
-
<ErrorSummary data-testid="errorsummary" errors={
|
|
91
|
+
<ErrorSummary data-testid="errorsummary" errors={ERRORS} data-test="foo" />
|
|
93
92
|
)
|
|
94
93
|
|
|
95
94
|
const errorSummaryElement = screen.getByTestId('errorsummary');
|
|
@@ -98,7 +97,7 @@ test('passing additional props', () => {
|
|
|
98
97
|
|
|
99
98
|
test('passing additional CSS classes', () => {
|
|
100
99
|
render(
|
|
101
|
-
<ErrorSummary data-testid="errorsummary" errors={
|
|
100
|
+
<ErrorSummary data-testid="errorsummary" errors={ERRORS} className="foo" />
|
|
102
101
|
)
|
|
103
102
|
|
|
104
103
|
const errorSummaryElement = screen.getByTestId('errorsummary');
|