Modify use of windowMatchMedia and ResizeObserver

Author: Kubit

src/components/actionBottomSheet/__tests__/actionBottomSheet.test.tsx

@@ -4,12 +4,9 @@ import * as React from 'react';
 import { axe } from 'jest-axe';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { ActionBottomSheetUnControlled as ActionBottomSheet } from '../actionBottomSheetUnControlled';
 
-window.matchMedia = windowMatchMedia();
-
 describe('ActionBottomSheet component', () => {
   it('Should render ActionBottomSheet component', async () => {
     const { container } = renderProvider(
@@ -38,6 +35,30 @@ describe('ActionBottomSheet component', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('When no title is used, an aria-dialog-name should be provided', async () => {
+    const { container } = renderProvider(
+      <ActionBottomSheet
+        closeIcon={{ icon: 'UNICORN', ['aria-label']: 'ariaLabelButton' }}
+        open={true}
+        popover={{ ['aria-label']: 'ariaLabel' }}
+        variant={'DEFAULT'}
+      >
+        Hello
+      </ActionBottomSheet>
+    );
+
+    const popover = screen.getByText('Hello');
+    expect(popover).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate({
+      rules: {
+        'no-inline-style': 'off',
+      },
+    });
+    expect(results).toHaveNoViolations();
+  });
+
   it('Should simulate icon onClick', async () => {
     const { container } = renderProvider(
       <ActionBottomSheet
@@ -68,12 +89,15 @@ describe('ActionBottomSheet component', () => {
         title={{ content: 'title' }}
         variant={'DEFAULT'}
       >
-        Hello
+        Internal content
       </ActionBottomSheet>
     );
     const triggerIcon = screen.getByLabelText('ariaLabelButton');
+
+    const internalContent = screen.getByText('Internal content');
     await act(async () => {
-      fireEvent.keyDown(window, {
+      // Internal popover element fire the escape keydown
+      fireEvent.keyDown(internalContent, {
         key: 'Escape',
         code: 'Escape',
       });

src/components/badge/__tests__/badge.test.tsx

@@ -4,13 +4,10 @@ import * as React from 'react';
 import { axe } from 'jest-axe';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { BadgeUnControlled as Badge } from '../badgeUnControlled';
 import { IBadgeUnControlled } from '../types';
 
-window.matchMedia = windowMatchMedia();
-
 // Mocks
 const mockProps: IBadgeUnControlled = {
   dataTestId: 'badge-component',
@@ -129,7 +126,8 @@ describe('Badge component', () => {
     expect(contentExpand).toBeInTheDocument();
 
     await act(async () => {
-      fireEvent.keyDown(window, {
+      // Internal popover element fire the escape keydown
+      fireEvent.keyDown(contentExpand, {
         key: 'Escape',
         code: 'Escape',
       });

src/components/calendar/__tests__/calendar.test.tsx

@@ -4,12 +4,9 @@ import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { Calendar } from '../calendar';
 
-window.matchMedia = windowMatchMedia();
-
 const mockProps = {
   variant: 'DEFAULT',
   minDate: new Date('2000-01-01'),

src/components/calendar/list/__tests__/list.test.tsx

@@ -6,13 +6,10 @@ import * as React from 'react';
 import { axe } from 'jest-axe';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { List } from '../list';
 import { IList } from '../types/list';
 
-window.matchMedia = windowMatchMedia();
-
 const mockProps: IList = {
   selectedDate: [new Date(), new Date()],
   currentDate: new Date(2023, 0, 5),

src/components/calendar/selector/__tests__/selector.test.tsx

@@ -4,12 +4,9 @@ import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { Selector } from '../selector';
 
-window.matchMedia = windowMatchMedia();
-
 const mockProps = {
   maxDate: new Date(),
   minDate: new Date(2015, 0, 15),

src/components/calendar/selector/monthSelector/__tests__/monthSelector.test.tsx

@@ -4,12 +4,9 @@ import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { MonthSelector } from '../monthSelector';
 
-window.matchMedia = windowMatchMedia();
-
 const mockProps = {
   currentDate: new Date(2022, 11, 17),
   minDate: new Date(2023, 0, 1),

src/components/calendar/selector/yearSelector/__tests__/yearSelector.test.tsx

@@ -4,12 +4,9 @@ import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
-import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { YearSelector } from '../yearSelector';
 
-window.matchMedia = windowMatchMedia();
-
 const mockProps = {
   currentDate: new Date(2022, 0, 17),
   setCurrentDate: jest.fn(),

src/components/dataTable/__tests__/dataTable.test.tsx

@@ -14,25 +14,6 @@ const mockProps = {
 };
 
 describe('DataTable', () => {
-  beforeAll(() => {
-    global.ResizeObserver = class ResizeObserver {
-      callback;
-      constructor(callback) {
-        this.callback = callback;
-      }
-      observe() {
-        // Call the callback
-        this.callback();
-      }
-      unobserve() {
-        // do nothing
-      }
-      disconnect() {
-        // do nothing
-      }
-    };
-  });
-
   it('Should render a unique table component when no rowGroups are used', async () => {
     const columns = [
       { field: 'field1', headerContent: 'Header 1' },

src/components/dataTable/__tests__/hooks/useDataTableHasScroll.test.ts

@@ -7,25 +7,6 @@ describe('useDataTableHasScroll', () => {
   let scrollableContainer: HTMLDivElement;
   let ref: React.RefObject<HTMLDivElement>;
 
-  beforeAll(() => {
-    global.ResizeObserver = class ResizeObserver {
-      callback;
-      constructor(callback) {
-        this.callback = callback;
-      }
-      observe() {
-        // Call the callback
-        this.callback();
-      }
-      unobserve() {
-        // do nothing
-      }
-      disconnect() {
-        // do nothing
-      }
-    };
-  });
-
   beforeEach(() => {
     wrapper = document.createElement('div');
     scrollableContainer = document.createElement('div');

src/components/dataTable/__tests__/hooks/useDataTableStickyDividers.test.ts

@@ -13,25 +13,6 @@ describe('useDataTableStickyDividers', () => {
   let leftBoxShadowContainer: HTMLDivElement;
   let ref: React.RefObject<HTMLDivElement>;
 
-  beforeAll(() => {
-    global.ResizeObserver = class ResizeObserver {
-      callback;
-      constructor(callback) {
-        this.callback = callback;
-      }
-      observe() {
-        // Call the callback
-        this.callback();
-      }
-      unobserve() {
-        // do nothing
-      }
-      disconnect() {
-        // do nothing
-      }
-    };
-  });
-
   beforeEach(() => {
     wrapper = document.createElement('div');
     scrollableContainer = document.createElement('div');