@scottish-government/designsystem-react 0.3.0-beta.0 → 0.4.0

package/src/components/cookie-banner/cookie-banner.test.tsx

@@ -0,0 +1,25 @@
+/**
+ * Most of the functionality for CookieBanner is covered in AbstractNotificationBanner.
+ * Differences are specifically tested here.
+ */
+
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import CookieBanner from './cookie-banner';
+
+const text = 'We need to tell you about something';
+
+/**
+ * CookieBanner has additional classNames
+ */
+test('cookie banner renders correctly', () => {
+    render(
+        <CookieBanner>
+            {text}
+        </CookieBanner>
+    );
+
+    const bannerContainer = document.querySelector('.ds_notification');
+
+    expect(bannerContainer).toHaveClass('ds_notification', 'ds_notification--large', 'ds_notification--cookie', 'js-initial-cookie-content');
+});

package/src/components/cookie-banner/cookie-banner.tsx

@@ -0,0 +1,36 @@
+
+import AbstractNotificationBanner from '../../common/abstract-notification-banner';
+// @ts-ignore
+import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
+
+const CookieBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
+    & { Buttons?: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
+    children,
+    className,
+    title,
+    ...props
+    }) => {
+
+    return (
+        <>
+            <AbstractNotificationBanner
+                className={[
+                    'ds_notification--large',
+                    'ds_notification--cookie',
+                    'js-initial-cookie-content',
+                    className
+                ].join(' ')}
+                data-module="ds-cookie-notification"
+                title={title}
+                {...props}
+            >
+                {children}
+            </AbstractNotificationBanner>
+        </>
+    );
+}
+
+CookieBanner.displayName = 'CookieBanner';
+CookieBanner.Buttons = AbstractNotificationBanner.Buttons;
+
+export default CookieBanner;

package/src/components/details/details.test.tsx

@@ -14,15 +14,15 @@ test('details renders correctly', () => {
     );
 
     const summaryElement = screen.getByText(summaryText);
-    const detailsElement = summaryElement.parentNode;
-    const textElement = summaryElement.nextSibling;
+    const detailsElement = summaryElement.parentElement;
+    const textElement = summaryElement.nextElementSibling;
 
     expect(detailsElement).toHaveClass('ds_details');
-    expect(detailsElement.tagName).toEqual('DETAILS');
+    expect(detailsElement?.tagName).toEqual('DETAILS');
     expect(summaryElement).toHaveClass('ds_details__summary');
-    expect(summaryElement.tagName).toEqual('SUMMARY');
+    expect(summaryElement?.tagName).toEqual('SUMMARY');
     expect(textElement).toHaveClass('ds_details__text');
-    expect(textElement.innerHTML).toEqual(content);
+    expect(textElement?.innerHTML).toEqual(content);
 });
 
 test('passing additional props', () => {
@@ -33,7 +33,7 @@ test('passing additional props', () => {
     )
 
     const summaryElement = screen.getByText(summaryText);
-    const detailsElement = summaryElement.parentNode;
+    const detailsElement = summaryElement.parentElement;
     expect(detailsElement?.dataset.test).toEqual('foo');
 });
 
@@ -45,6 +45,6 @@ test('passing additional CSS classes', () => {
     )
 
     const summaryElement = screen.getByText(summaryText);
-    const detailsElement = summaryElement.parentNode;
+    const detailsElement = summaryElement.parentElement;
     expect(detailsElement).toHaveClass('foo', 'ds_details');
 });

package/src/components/inset-text/inset-text.test.tsx

@@ -28,7 +28,7 @@ test('passing additional props', () => {
         </InsetText>
     )
 
-    const insetTextOuter = document.querySelector('.ds_inset-text');
+    const insetTextOuter = document.querySelector('.ds_inset-text') as HTMLElement;
     expect(insetTextOuter?.dataset.test).toEqual('foo');
 });
 

package/src/components/notification-banner/notification-banner.test.tsx

@@ -1,9 +1,17 @@
+/**
+ * Most of the functionality for NotificationBanner is covered in AbstractNotificationBanner.
+ * Differences are specifically tested here.
+ */
+
 import { test, expect } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import NotificationBanner from './notification-banner';
 
 const text = 'We need to tell you about something';
 
+/**
+ * NotificationBanner has the ds_reversed class
+ */
 test('notification banner renders correctly', () => {
     render(
         <NotificationBanner>
@@ -11,47 +19,14 @@ test('notification banner renders correctly', () => {
         </NotificationBanner>
     );
 
-    const bannerTitle = screen.getByRole('heading');
-    const bannerText = bannerTitle.nextSibling;
-    const bannerContent = bannerTitle.parentNode;
-    const bannerWrapper = bannerContent?.parentNode;
-    const bannerContainer = bannerWrapper?.parentNode;
-
-    expect(bannerTitle.textContent).toEqual('Information');
-    expect(bannerTitle.tagName).toEqual('H2');
-    expect(bannerTitle).toHaveClass('visually-hidden');
-
-    expect(bannerText).toHaveClass('ds_notification__text');
-    expect(bannerText.textContent).toEqual(text);
+    const bannerContainer = document.querySelector('.ds_notification');
 
-    expect(bannerContent).toHaveClass('ds_notification__content');
-    expect(bannerWrapper).toHaveClass('ds_wrapper');
     expect(bannerContainer).toHaveClass('ds_notification', 'ds_reversed');
 });
 
-test('notification banner with close button', () => {
-    render(
-        <NotificationBanner close>
-            {text}
-        </NotificationBanner>
-    );
-
-    const bannerTitle = screen.getByRole('heading');
-    const bannerContent = bannerTitle.parentNode;
-    const closeButton = screen.getByRole('button');
-    const closeButtonLabel = within(closeButton).getByText('Close this notification');
-    const closeButtonIcon = within(closeButton).getByRole('img', { hidden: true });
-
-    expect(bannerContent).toHaveClass('ds_notification__content--has-close');
-    expect(closeButton).toHaveClass('ds_notification__close', 'js-close-notification');
-    expect(closeButton).toHaveAttribute('type', 'button');
-
-    expect(closeButtonLabel).toBeInTheDocument();
-    expect(closeButtonLabel).toHaveClass('visually-hidden');
-
-    expect(closeButtonIcon).toHaveClass('ds_icon', 'ds_icon--fill');
-});
-
+/**
+ * NotificationBanner uses a boolean to toggle icon display, as only a single icon (PriorityHigh) is expected.
+ */
 test('notification banner with icon', () => {
     render(
         <NotificationBanner icon>
@@ -60,45 +35,10 @@ test('notification banner with icon', () => {
     );
 
     const bannerTitle = screen.getByRole('heading');
-    const bannerIconContainer = bannerTitle.nextSibling;
+    const bannerIconContainer = bannerTitle.nextElementSibling as HTMLElement;
     const bannerIcon = within(bannerIconContainer).getByRole('img', { hidden: true });
 
     expect(bannerIconContainer).toHaveClass('ds_notification__icon');
     expect(bannerIcon).toHaveClass('ds_icon');
     expect(bannerIcon).toHaveAttribute('aria-hidden');
 });
-
-test('notification banner with icon modifier classes', () => {
-    render(
-        <NotificationBanner icon iconColour iconInverse>
-            {text}
-        </NotificationBanner>
-    );
-
-    const bannerTitle = screen.getByRole('heading');
-    const bannerIconContainer = bannerTitle.nextSibling;
-
-    expect(bannerIconContainer).toHaveClass('ds_notification__icon', 'ds_notification__icon--inverse', 'ds_notification__icon--colour');
-});
-
-test('passing additional props', () => {
-    render(
-        <NotificationBanner data-test="foo">
-            {text}
-        </NotificationBanner>
-    )
-
-    const bannerContainer = document.querySelector('.ds_notification');
-    expect(bannerContainer?.dataset.test).toEqual('foo');
-});
-
-test('passing additional CSS classes', () => {
-    render(
-        <NotificationBanner className="foo">
-            {text}
-        </NotificationBanner>
-    )
-
-    const bannerContainer = document.querySelector('.ds_notification');
-    expect(bannerContainer).toHaveClass('foo', 'ds_notification');
-});

package/src/components/notification-banner/notification-banner.tsx

@@ -1,18 +1,17 @@
 import { useEffect, useRef } from 'react';
-
+import AbstractNotificationBanner from '../../common/abstract-notification-banner';
 // @ts-ignore
 import DSNotificationBanner from '@scottish-government/design-system/src/components/notification-banner/notification-banner';
-import Icon from '../../common/icon';
-import ScreenReaderText from '../../common/screen-reader-text';
 
-const NotificationBanner: React.FC<SGDS.Component.NotificationBanner> = ({
+const NotificationBanner: React.FC<SGDS.Common.AbstractNotificationBanner>
+    & { Buttons?: React.FC<SGDS.Common.AbstractNotificationBanner.Buttons> } = ({
     children,
     className,
     close,
     icon,
     iconColour,
     iconInverse,
-    title = 'Information',
+    title,
     ...props
 }) => {
     const ref = useRef(null);
@@ -24,52 +23,25 @@ const NotificationBanner: React.FC<SGDS.Component.NotificationBanner> = ({
     }, [ref]);
 
     return (
-        <div
+        <AbstractNotificationBanner
             className={[
-                'ds_notification',
                 'ds_reversed',
                 className
             ].join(' ')}
-            data-module="ds-notification"
+            close={close}
+            icon={icon ? "PriorityHigh" : undefined}
+            iconColour={iconColour}
+            iconInverse={iconInverse}
             ref={ref}
+            title="Information"
             {...props}
         >
-            <div className="ds_wrapper">
-                <div className={
-                    [
-                        'ds_notification__content',
-                        close && 'ds_notification__content--has-close'
-                    ].join(' ')}
-                >
-                    <h2 className="visually-hidden">{title}</h2>
-
-                    {icon &&
-                        <span
-                        className={[
-                                'ds_notification__icon',
-                                iconInverse && 'ds_notification__icon--inverse',
-                                iconColour && 'ds_notification__icon--colour'
-                            ].join(' ')} aria-hidden="true">
-                            <Icon icon="PriorityHigh" />
-                        </span>
-                    }
-
-                    <div className="ds_notification__text">
-                        {children}
-                    </div>
-
-                    {close &&
-                        <button type="button" className="ds_notification__close js-close-notification">
-                            <ScreenReaderText>Close this notification</ScreenReaderText>
-                            <Icon fill icon="Close" aria-hidden="true" />
-                        </button>
-                    }
-                </div>
-            </div>
-        </div>
+            {children}
+        </AbstractNotificationBanner>
     );
 };
 
 NotificationBanner.displayName = 'NotificationBanner';
+NotificationBanner.Buttons = AbstractNotificationBanner.Buttons;
 
 export default NotificationBanner;

package/src/components/notification-panel/notification-panel.test.tsx

@@ -13,15 +13,15 @@ test('notification banner renders correctly', () => {
     );
 
     const notificationPanelHeading = screen.getByRole('heading');
-    const notificationPanelContent = notificationPanelHeading.nextSibling;
-    const notificationPanel = notificationPanelHeading.parentNode;
+    const notificationPanelContent = notificationPanelHeading.nextElementSibling;
+    const notificationPanel = notificationPanelHeading.parentElement;
 
     expect(notificationPanel).toHaveClass('ds_notification-panel');
     expect(notificationPanelHeading).toHaveClass('ds_notification-panel__title');
     expect(notificationPanelHeading.textContent).toEqual(headingText);
     expect(notificationPanelHeading.tagName).toEqual('H1');
     expect(notificationPanelContent).toHaveClass('ds_notification-panel__content');
-    expect(notificationPanelContent.textContent).toEqual(text);
+    expect(notificationPanelContent?.textContent).toEqual(text);
 });
 
 test('notification banner with custom heading level', () => {
@@ -47,7 +47,7 @@ test('notification banner with aria-live', () => {
     );
 
     const notificationPanelHeading = screen.getByRole('heading');
-    const notificationPanel = notificationPanelHeading.parentNode;
+    const notificationPanel = notificationPanelHeading.parentElement;
 
     expect(notificationPanel).toHaveAttribute('aria-live', ariaLive);
 });
@@ -72,7 +72,7 @@ test('passing additional props', () => {
     )
 
     const notificationPanelHeading = screen.getByRole('heading');
-    const notificationPanel = notificationPanelHeading.parentNode;
+    const notificationPanel = notificationPanelHeading.parentElement;
     expect(notificationPanel?.dataset.test).toEqual('foo');
 });
 
@@ -84,6 +84,6 @@ test('passing additional CSS classes', () => {
     )
 
     const notificationPanelHeading = screen.getByRole('heading');
-    const notificationPanel = notificationPanelHeading.parentNode;
+    const notificationPanel = notificationPanelHeading.parentElement;
     expect(notificationPanel).toHaveClass('foo', 'ds_notification-panel');
 });

package/src/components/page-header/page-header.test.tsx

@@ -12,7 +12,7 @@ test('notification banner renders correctly', () => {
 
     const header = screen.getByRole('banner');
     const title = within(header).getByRole('heading');
-    const label = title.previousSibling;;
+    const label = title.previousElementSibling;
 
     expect(header).toHaveClass('ds_page-header');
     expect(header.tagName).toEqual('HEADER');
@@ -33,7 +33,7 @@ test('header with no label', () => {
 
     const header = screen.getByRole('banner');
     const title = within(header).getByRole('heading');
-    const label = title.previousSibling;
+    const label = title.previousElementSibling;
 
     expect(label).not.toBeInTheDocument();
 });

package/src/components/page-metadata/page-metadata.test.tsx

@@ -1,6 +1,6 @@
 import { test, expect } from 'vitest';
-import { render, screen, within } from '@testing-library/react';
-import Metadata, {MetadataItem} from './page-metadata';
+import { render, screen } from '@testing-library/react';
+import Metadata from './page-metadata';
 
 const name = 'Directorate';
 const value = 'Equality, Inclusion and Human Rights Directorate';
@@ -8,9 +8,9 @@ const value = 'Equality, Inclusion and Human Rights Directorate';
 test('metadata renders correctly', () => {
     render(
         <Metadata>
-            <MetadataItem name={name}>
+            <Metadata.Item name={name}>
                 {value}
-            </MetadataItem>
+            </Metadata.Item>
         </Metadata>
     );
 
@@ -30,9 +30,9 @@ test('metadata renders correctly', () => {
 test('inline metadata', () => {
     render(
         <Metadata inline>
-            <MetadataItem name={name}>
+            <Metadata.Item name={name}>
                 {value}
-            </MetadataItem>
+            </Metadata.Item>
         </Metadata>
     );
 
@@ -43,14 +43,14 @@ test('inline metadata', () => {
 test('passing additional props', () => {
     render(
         <Metadata data-test="foo">
-            <MetadataItem data-test="bar" name="Last updated">
+            <Metadata.Item data-test="bar" name="Last updated">
                 21/04/2020
-            </MetadataItem>
+            </Metadata.Item>
         </Metadata>
     )
 
-    const metadata = document.querySelector('.ds_metadata');
-    const metadataItem = document.querySelector('.ds_metadata__item');
+    const metadata = document.querySelector('.ds_metadata') as HTMLElement;
+    const metadataItem = document.querySelector('.ds_metadata__item') as HTMLElement;
     expect(metadata?.dataset.test).toEqual('foo');
     expect(metadataItem?.dataset.test).toEqual('bar');
 });
@@ -58,9 +58,9 @@ test('passing additional props', () => {
 test('passing additional CSS classes', () => {
     render(
         <Metadata className="foo">
-            <MetadataItem className="bar" name="Last updated">
+            <Metadata.Item className="bar" name="Last updated">
                 21/04/2020
-            </MetadataItem>
+            </Metadata.Item>
         </Metadata>
     )
 

package/src/components/page-metadata/page-metadata.tsx

@@ -1,4 +1,4 @@
-export const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
+const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
     children,
     className,
     name,
@@ -19,7 +19,8 @@ export const MetadataItem: React.FC<SGDS.Component.Metadata.Item> = ({
     );
 };
 
-const Metadata: React.FC<SGDS.Component.Metadata> = ({
+const Metadata: React.FC<SGDS.Component.Metadata>
+    & { Item: React.FC<SGDS.Component.Metadata.Item> }    = ({
     children,
     className,
     inline,
@@ -41,5 +42,6 @@ const Metadata: React.FC<SGDS.Component.Metadata> = ({
 
 Metadata.displayName = 'Metadata';
 MetadataItem.displayName = 'MetadataItem';
+Metadata.Item = MetadataItem;
 
 export default Metadata;

package/src/components/pagination/pagination.test.tsx

@@ -89,28 +89,28 @@ test('pagination renders correctly', () => {
     const paginationNav = screen.getByRole('navigation');
     const paginationList = within(paginationNav).getByRole('list');
     const prevLabel = within(paginationList).getByText('Previous');
-    const prevLink = prevLabel.parentNode;
-    const prevIcon = prevLabel.previousSibling;
-    const prevItem = prevLink?.parentNode;
+    const prevLink = prevLabel.parentElement;
+    const prevIcon = prevLabel.previousElementSibling;
+    const prevItem = prevLink?.parentElement;
     const nextLabel = within(paginationList).getByText('Next');
-    const nextLink = nextLabel.parentNode;
-    const nextIcon = nextLabel.nextSibling;
-    const nextItem = nextLink?.parentNode;
+    const nextLink = nextLabel.parentElement;
+    const nextIcon = nextLabel.nextElementSibling;
+    const nextItem = nextLink?.parentElement;
 
     const firstPageLabel = within(paginationList).getByText('1');
-    const firstPageLink = firstPageLabel.parentNode;
-    const firstPageItem = firstPageLink?.parentNode;
+    const firstPageLink = firstPageLabel.parentElement;
+    const firstPageItem = firstPageLink?.parentElement;
     const lastPageLabel = within(paginationList).getByText(totalPages);
-    const lastPageLink = lastPageLabel.parentNode;
-    const lastPageItem = lastPageLink?.parentNode;
+    const lastPageLink = lastPageLabel.parentElement;
+    const lastPageItem = lastPageLink?.parentElement;
 
-    const firstPageEllipsisItem = firstPageItem?.nextSibling;
+    const firstPageEllipsisItem = firstPageItem?.nextElementSibling;
     const firstPageEllipsis = firstPageEllipsisItem?.children[0];
-    const lastPageEllipsisItem = lastPageItem?.previousSibling;
+    const lastPageEllipsisItem = lastPageItem?.previousElementSibling;
     const lastPageEllipsis = lastPageEllipsisItem?.children[0];
 
     const currentPageLink = document.querySelector('.ds_current');
-    const currentPageItem = currentPageLink?.parentNode;
+    const currentPageItem = currentPageLink?.parentElement;
 
     const paginationItems = within(paginationList).getAllByRole('listitem', { hidden: true });
 
@@ -122,7 +122,7 @@ test('pagination renders correctly', () => {
 
     expect(prevItem).toHaveClass('ds_pagination__item');
     expect(prevItem?.tagName).toEqual('LI');
-    expect(prevItem?.parentNode).toEqual(paginationList);
+    expect(prevItem?.parentElement).toEqual(paginationList);
     expect(prevLink).toHaveClass('ds_pagination__link', 'ds_pagination__link--text', 'ds_pagination__link--icon')
     expect(prevLink).toHaveAttribute('aria-label', 'Previous page');
     expect(prevLink).toHaveAttribute('href', `/search?page=${currentPage - 1}`);
@@ -135,7 +135,7 @@ test('pagination renders correctly', () => {
 
     expect(nextItem).toHaveClass('ds_pagination__item');
     expect(nextItem?.tagName).toEqual('LI');
-    expect(nextItem?.parentNode).toEqual(paginationList);
+    expect(nextItem?.parentElement).toEqual(paginationList);
     expect(nextLink).toHaveClass('ds_pagination__link', 'ds_pagination__link--text', 'ds_pagination__link--icon')
     expect(nextLink).toHaveAttribute('aria-label', 'Next page');
     expect(nextLink).toHaveAttribute('href', `/search?page=${currentPage + 1}`);
@@ -148,7 +148,7 @@ test('pagination renders correctly', () => {
 
     expect(firstPageItem).toHaveClass('ds_pagination__item');
     expect(firstPageItem?.tagName).toEqual('LI');
-    expect(firstPageItem?.parentNode).toEqual(paginationList);
+    expect(firstPageItem?.parentElement).toEqual(paginationList);
     expect(firstPageLink).toHaveClass('ds_pagination__link')
     expect(firstPageLink).toHaveAttribute('aria-label', 'Page 1');
     expect(firstPageLink).toHaveAttribute('href', `/search?page=1`);
@@ -158,7 +158,7 @@ test('pagination renders correctly', () => {
 
     expect(lastPageItem).toHaveClass('ds_pagination__item');
     expect(lastPageItem?.tagName).toEqual('LI');
-    expect(lastPageItem?.parentNode).toEqual(paginationList);
+    expect(lastPageItem?.parentElement).toEqual(paginationList);
     expect(lastPageLink).toHaveClass('ds_pagination__link')
     expect(lastPageLink).toHaveAttribute('aria-label', `Page ${totalPages}`);
     expect(lastPageLink).toHaveAttribute('href', `/search?page=${totalPages}`);
@@ -170,28 +170,28 @@ test('pagination renders correctly', () => {
 
     expect(firstPageEllipsisItem).toHaveClass('ds_pagination__item');
     expect(firstPageEllipsisItem).toHaveAttribute('aria-hidden', 'true');
-    expect(firstPageEllipsisItem.tagName).toEqual('LI');
+    expect(firstPageEllipsisItem?.tagName).toEqual('LI');
     expect(firstPageEllipsis).toHaveClass('ds_pagination__link', 'ds_pagination__link--ellipsis');
-    expect(firstPageEllipsis.tagName).toEqual('SPAN');
-    expect(firstPageEllipsis.textContent).toEqual('…');
+    expect(firstPageEllipsis?.tagName).toEqual('SPAN');
+    expect(firstPageEllipsis?.textContent).toEqual('…');
 
     expect(lastPageEllipsisItem).toHaveClass('ds_pagination__item');
     expect(lastPageEllipsisItem).toHaveAttribute('aria-hidden', 'true');
-    expect(lastPageEllipsisItem.tagName).toEqual('LI');
+    expect(lastPageEllipsisItem?.tagName).toEqual('LI');
     expect(lastPageEllipsis).toHaveClass('ds_pagination__link', 'ds_pagination__link--ellipsis');
-    expect(lastPageEllipsis.tagName).toEqual('SPAN');
-    expect(lastPageEllipsis.textContent).toEqual('…');
+    expect(lastPageEllipsis?.tagName).toEqual('SPAN');
+    expect(lastPageEllipsis?.textContent).toEqual('…');
 
     expect(currentPageItem).toHaveClass('ds_pagination__item');
     expect(currentPageLink).toHaveClass('ds_pagination__link', 'ds_current');
-    expect(currentPageLink.textContent).toEqual(currentPage.toString());
+    expect(currentPageLink?.textContent).toEqual(currentPage.toString());
 
     // expect one link either side of the current (default padding)
-    expect(currentPageItem.previousSibling.querySelector('a')).toHaveAttribute('aria-label', 'Page 9');
-    expect(currentPageItem.previousSibling.previousSibling.querySelector('a')).toBeNull();
+    expect(currentPageItem?.previousElementSibling?.querySelector('a')).toHaveAttribute('aria-label', 'Page 9');
+    expect(currentPageItem?.previousElementSibling?.previousElementSibling?.querySelector('a')).toBeNull();
 
-    expect(currentPageItem.nextSibling.querySelector('a')).toHaveAttribute('aria-label', 'Page 11');
-    expect(currentPageItem.nextSibling.nextSibling.querySelector('a')).toBeNull();
+    expect(currentPageItem?.nextElementSibling?.querySelector('a')).toHaveAttribute('aria-label', 'Page 11');
+    expect(currentPageItem?.nextElementSibling?.nextElementSibling?.querySelector('a')).toBeNull();
 
     // 9 is: previous, first, ellipsis, current page and 1 padding either side, ellipsis, last, next
     expect(paginationItems.length).toEqual(9);
@@ -243,8 +243,6 @@ test('pagination passes onclick event to child links', () => {
         />
     );
 
-    const paginationNav = screen.getByRole('navigation');
-
     // pick an arbitrary link
     const link = [].slice.call(document.querySelectorAll('.ds_pagination__link'))[4];
     link.setAttribute('href', '#foo');

package/src/components/phase-banner/phase-banner.test.tsx

@@ -14,16 +14,16 @@ test('phase banner renders correctly', () => {
 
     const phaseBanner = document.querySelector('.ds_phase-banner');
     const phaseBannerContent = phaseBanner?.querySelector('.ds_phase-banner__content');
-    const phaseBannerWrapper = phaseBannerContent?.parentNode;
+    const phaseBannerWrapper = phaseBannerContent?.parentElement;
     const phaseBannerText = phaseBannerContent?.querySelector('.ds_phase-banner__text');
 
     expect(phaseBanner).toBeInTheDocument();
     expect(phaseBanner?.tagName).toEqual('DIV');
     expect(phaseBannerWrapper).toHaveClass('ds_wrapper');
-    expect(phaseBannerWrapper.tagName).toEqual('DIV');
-    expect(phaseBannerContent.tagName).toEqual('P');
-    expect(phaseBannerText.tagName).toEqual('SPAN');
-    expect(phaseBannerText.textContent).toEqual(text);
+    expect(phaseBannerWrapper?.tagName).toEqual('DIV');
+    expect(phaseBannerContent?.tagName).toEqual('P');
+    expect(phaseBannerText?.tagName).toEqual('SPAN');
+    expect(phaseBannerText?.textContent).toEqual(text);
 });
 
 test('phase banner with default text', () => {
@@ -50,9 +50,9 @@ test('phase banner with phase tag', () => {
     const phaseBannerTag = phaseBanner?.querySelector('.ds_phase-banner__tag');
 
     expect(phaseBannerTag).toBeInTheDocument();
-    expect(phaseBannerTag.tagName).toEqual('SPAN');
+    expect(phaseBannerTag?.tagName).toEqual('SPAN');
     expect(phaseBannerTag).toHaveClass('ds_tag', 'ds_phase-banner__tag');
-    expect(phaseBannerTag.textContent).toEqual(phase);
+    expect(phaseBannerTag?.textContent).toEqual(phase);
 });
 
 test('passing additional props', () => {
@@ -62,7 +62,7 @@ test('passing additional props', () => {
         </PhaseBanner>
     )
 
-    const phaseBanner = document.querySelector('.ds_phase-banner');
+    const phaseBanner = document.querySelector('.ds_phase-banner') as HTMLElement;
     expect(phaseBanner?.dataset.test).toEqual('foo');
 });
 

package/src/components/question/question.test.tsx

@@ -51,11 +51,11 @@ test('question with error', () => {
     );
 
     const questionElement = document.querySelector('.ds_question');
-    const errorMessageElement = questionElement.querySelector('.ds_question__error-message');
+    const errorMessageElement = questionElement?.querySelector('.ds_question__error-message');
 
     expect(questionElement).toHaveClass('ds_question--error');
     expect(errorMessageElement).toBeInTheDocument();
-    expect(errorMessageElement.textContent).toEqual(errorMessage);
+    expect(errorMessageElement?.textContent).toEqual(errorMessage);
 });
 
 test('passing additional props', () => {
@@ -64,7 +64,7 @@ test('passing additional props', () => {
         </Question>
     )
 
-    const questionElement = document.querySelector('.ds_question');
+    const questionElement = document.querySelector('.ds_question') as HTMLElement;
     expect(questionElement?.dataset.test).toEqual('foo');
 });