@scottish-government/designsystem-react 0.3.0 → 0.5.0

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');
 });
 

package/src/components/radio-button/radio-button.test.tsx

@@ -29,7 +29,7 @@ test('radio group renders correct children', () => {
     );
 
     const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0].parentNode.parentNode;
+    const groupContainer = radios[0].parentElement?.parentElement;
     expect(radios.length).toEqual(items.length);
     expect(groupContainer).toHaveClass('ds_radios', 'ds_field-group');
 });
@@ -53,7 +53,7 @@ test('inline radio group', () => {
 
 
     const radio = screen.getAllByRole('radio')[0];
-    const groupContainer = radio.parentNode.parentNode;
+    const groupContainer = radio.parentElement?.parentElement;
     expect(groupContainer).toHaveClass('ds_field-group--inline');
 });
 
@@ -78,7 +78,7 @@ test('radio group passes all expected item params', () => {
     );
 
     const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentNode;
+    const radioContainer = radio.parentElement;
     const hintText = screen.getByText('hint text');
 
     expect(radio).toHaveAttribute('checked');
@@ -101,7 +101,7 @@ test('individual radio renders correctly', () => {
     );
 
     const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentNode;
+    const radioContainer = radio.parentElement;
     const label = screen.getByText('Pension Credit');
 
     expect(radioContainer).toHaveClass('ds_radio');
@@ -171,7 +171,7 @@ test('small radio', () => {
     );
 
     const radio = screen.getByRole('radio');
-    const radioContainer = radio.parentNode;
+    const radioContainer = radio.parentElement;
 
     expect(radioContainer).toHaveClass('ds_radio--small');
 });
@@ -185,7 +185,7 @@ test('passing additional props', () => {
     );
 
     const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0]?.parentNode?.parentNode;
+    const groupContainer = radios[0]?.parentElement?.parentElement;
     expect(groupContainer?.dataset.test).toEqual('foo');
 });
 
@@ -198,6 +198,6 @@ test('passing additional CSS classes', () => {
     );
 
     const radios = screen.getAllByRole('radio');
-    const groupContainer = radios[0]?.parentNode?.parentNode;
+    const groupContainer = radios[0]?.parentElement?.parentElement;
     expect(groupContainer).toHaveClass('foo', 'ds_radios');
 });

package/src/components/select/select.test.tsx

@@ -29,23 +29,23 @@ test('select renders correctly', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
-    const label = selectWrapper?.previousSibling;
-    const selectArrow = select.nextSibling;
+    const selectWrapper = select.parentElement;
+    const label = selectWrapper?.previousElementSibling;
+    const selectArrow = select.nextElementSibling;
 
     expect(select).toHaveClass('ds_select');
     expect(select.id).toEqual(id);
     expect(select).toHaveAttribute('name', id);
 
     expect(selectWrapper).toHaveClass('ds_select-wrapper');
-    expect(selectWrapper.tagName).toEqual('DIV');
+    expect(selectWrapper?.tagName).toEqual('DIV');
 
     expect(label).toHaveClass('ds_label');
     expect(label).toHaveAttribute('for', id);
 
     expect(selectArrow).toHaveClass('ds_select-arrow');
     expect(selectArrow).toHaveAttribute('aria-hidden');
-    expect(selectArrow.textContent).toEqual('');
+    expect(selectArrow?.textContent).toEqual('');
 });
 
 test('select with width', () => {
@@ -60,7 +60,7 @@ test('select with width', () => {
         />
     );
 
-    const selectWrapper = screen.getByRole('combobox').parentNode;
+    const selectWrapper = screen.getByRole('combobox').parentElement;
     expect(selectWrapper).toHaveClass(`ds_input--${width}`);
 });
 
@@ -183,7 +183,7 @@ test('select with error message', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
+    const selectWrapper = select.parentElement;
     const errorMessageElement = screen.getByText(errorMessage);
 
     expect(selectWrapper).toHaveClass('ds_input--error')
@@ -204,7 +204,7 @@ test('passing additional props', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
+    const selectWrapper = select.parentElement;
     expect(selectWrapper?.dataset.test).toEqual('foo');
 });
 
@@ -219,6 +219,6 @@ test('passing additional CSS classes', () => {
     );
 
     const select = screen.getByRole('combobox');
-    const selectWrapper = select.parentNode;
+    const selectWrapper = select.parentElement;
     expect(selectWrapper).toHaveClass('foo', 'ds_select-wrapper');
 });

package/src/components/sequential-navigation/sequential-navigation.test.tsx

@@ -15,9 +15,9 @@ test('sequential navigation renders correctly', () => {
 
     const sequentialNavigation = screen.getByRole('navigation');
     const prevLink = screen.getAllByRole('link')[0];
-    const prevLinkWrapper = prevLink.parentNode;
+    const prevLinkWrapper = prevLink.parentElement;
     const nextLink = screen.getAllByRole('link')[1];
-    const nextLinkWrapper = nextLink.parentNode;
+    const nextLinkWrapper = nextLink.parentElement;
 
     expect(sequentialNavigation).toHaveClass('ds_sequential-nav');
     expect(sequentialNavigation).toHaveAttribute('aria-label', 'Article navigation');
@@ -26,14 +26,14 @@ test('sequential navigation renders correctly', () => {
     expect(prevLink).toHaveAttribute('href', prevLinkObj.href);
     expect(prevLink.textContent).toEqual(prevLinkObj.title);
     expect(prevLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--prev');
-    expect(prevLinkWrapper.tagName).toEqual('DIV');
+    expect(prevLinkWrapper?.tagName).toEqual('DIV');
     expect(prevLink.childNodes[0]).toHaveAttribute('data-label', 'Previous')
 
     expect(nextLink).toHaveClass('ds_sequential-nav__button', 'ds_sequential-nav__button--right');
     expect(nextLink).toHaveAttribute('href', nextLinkObj.href);
     expect(nextLink.textContent).toEqual(nextLinkObj.title);
     expect(nextLinkWrapper).toHaveClass('ds_sequential-nav__item', 'ds_sequential-nav__item--next');
-    expect(nextLinkWrapper.tagName).toEqual('DIV');
+    expect(nextLinkWrapper?.tagName).toEqual('DIV');
     expect(nextLink.childNodes[0]).toHaveAttribute('data-label', 'Next')
 });
 

package/src/components/side-navigation/side-navigation.test.tsx

@@ -60,7 +60,7 @@ test('side navigation renders correctly', () => {
 
     expect(label).toHaveClass('ds_link');
     expect(label).toHaveAttribute('for', toggle.id);
-    expect(label.textContent).toEqual('Show all Pages in this section');
+    expect(label?.textContent).toEqual('Show all Pages in this section');
 
     expect(rootList).toHaveAttribute('id', 'side-navigation-root');