fixup! BREAKING CHANGE(web-react): Turn off scrolling inside ModalDia…

…log by default #DS-1184
lmc-eu · May 21, 2024 · 9dde077 · 9dde077
1 parent b9c3cfa
commit 9dde077
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/packages/web-react/src/components/Modal/__tests__/Modal.test.tsx b/packages/web-react/src/components/Modal/__tests__/Modal.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
@@ -22,27 +22,27 @@ describe('Modal', () => {
 
   it('should not close modal dialog', () => {
     const mockedOnClose = jest.fn();
-    const dom = render(
+    render(
       <Modal id="test" isOpen onClose={mockedOnClose} closeOnBackdropClick={false}>
         <div>Test</div>
       </Modal>,
     );
 
-    const dialog = dom.container.querySelector('.Modal') as HTMLElement;
+    const dialog = screen.getByRole('dialog');
     fireEvent.click(dialog);
 
     expect(mockedOnClose).not.toHaveBeenCalled();
   });
 
   it('should close modal dialog', () => {
     const mockedOnClose = jest.fn();
-    const dom = render(
+    render(
       <Modal id="test" isOpen onClose={mockedOnClose} closeOnBackdropClick>
         <div>Test</div>
       </Modal>,
     );
 
-    const dialog = dom.container.querySelector('.Modal') as HTMLElement;
+    const dialog = screen.getByRole('dialog');
     fireEvent.click(dialog);
 
     expect(mockedOnClose).toHaveBeenCalled();

diff --git a/packages/web-react/src/components/Modal/__tests__/ModalCloseButton.test.tsx b/packages/web-react/src/components/Modal/__tests__/ModalCloseButton.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
@@ -14,35 +14,39 @@ describe('ModalCloseButton', () => {
   restPropsTest(ModalCloseButton, 'button');
 
   it('should have icon', () => {
-    const dom = render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
+    render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
 
-    expect(dom.container.querySelector('svg')).toBeDefined();
+    const svg = screen.getByRole('button').firstElementChild;
+
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('should have visually hidden label', () => {
-    const dom = render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
+    render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
 
-    expect(dom.container.querySelector('button > span')?.textContent).toBe('close');
-    expect(dom.container.querySelector('button > span')).toHaveClass('accessibility-hidden');
+    const buttonText = screen.getByRole('button').lastElementChild;
+    expect(buttonText?.textContent).toBe('close');
+    expect(buttonText).toHaveClass('accessibility-hidden');
   });
 
   it('should be square', () => {
-    const dom = render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
+    render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
 
-    expect(dom.container.querySelector('button')).toHaveClass('Button--square');
+    expect(screen.getByRole('button')).toHaveClass('Button--square');
   });
 
   it('should have tertiary color', () => {
-    const dom = render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
+    render(<ModalCloseButton label="close" id="test" isOpen onClose={() => {}} />);
 
-    expect(dom.container.querySelector('button')).toHaveClass('Button--tertiary');
+    expect(screen.getByRole('button')).toHaveClass('Button--tertiary');
   });
 
   it('should handle on close click', () => {
     const mockedOnClose = jest.fn();
-    const dom = render(<ModalCloseButton label="close" id="test" isOpen onClose={mockedOnClose} />);
+    render(<ModalCloseButton label="close" id="test" isOpen onClose={mockedOnClose} />);
 
-    const button = dom.getByRole('button');
+    const button = screen.getByRole('button');
     fireEvent.click(button);
 
     expect(mockedOnClose).toHaveBeenCalled();

diff --git a/packages/web-react/src/components/Modal/__tests__/ModalDialog.test.tsx b/packages/web-react/src/components/Modal/__tests__/ModalDialog.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
@@ -14,52 +14,52 @@ describe('ModalDialog', () => {
   restPropsTest(ModalDialog, 'article');
 
   it('should render children', () => {
-    const dom = render(
+    render(
       <ModalDialog>
         <div>Test</div>
       </ModalDialog>,
     );
 
-    expect(dom.container).toHaveTextContent('Test');
+    expect(screen.getByRole('article')).toHaveTextContent('Test');
   });
 
   it('should render with custom element type', () => {
-    const dom = render(
-      <ModalDialog elementType="section">
+    render(
+      <ModalDialog elementType="main">
         <div>Test</div>
       </ModalDialog>,
     );
 
-    expect(dom.container.querySelector('section')).toBeInTheDocument();
+    expect(screen.getByRole('main')).toBeInTheDocument();
   });
 
   it('should render docked on mobile', () => {
-    const dom = render(
+    render(
       <ModalDialog isDockedOnMobile>
         <div>Test</div>
       </ModalDialog>,
     );
 
-    expect(dom.container.querySelector('.ModalDialog')).toHaveClass('ModalDialog--dockOnMobile');
+    expect(screen.getByRole('article')).toHaveClass('ModalDialog--dockOnMobile');
   });
 
   it('should render expanded on mobile', () => {
-    const dom = render(
+    render(
       <ModalDialog isExpandedOnMobile>
         <div>Test</div>
       </ModalDialog>,
     );
 
-    expect(dom.container.querySelector('.ModalDialog')).toHaveClass('ModalDialog--expandOnMobile');
+    expect(screen.getByRole('article')).toHaveClass('ModalDialog--expandOnMobile');
   });
 
   it('should render scrollable', () => {
-    const dom = render(
+    render(
       <ModalDialog isScrollable>
         <div>Test</div>
       </ModalDialog>,
     );
 
-    expect(dom.container.querySelector('.ModalDialog')).toHaveClass('ModalDialog--scrollable');
+    expect(screen.getByRole('article')).toHaveClass('ModalDialog--scrollable');
   });
 });