Update ModalManagerSpec.ts

react-restart · Jul 11, 2024 · 90141d4 · 90141d4
1 parent 1ef7861
commit 90141d4
Showing 1 changed file with 32 additions and 29 deletions.
diff --git a/test/ModalManagerSpec.ts b/test/ModalManagerSpec.ts
@@ -1,11 +1,14 @@
 import css from 'dom-helpers/css';
-import getScrollbarSize from 'dom-helpers/scrollbarSize';
-
-import { expect, describe, it, beforeEach, afterEach } from 'vitest';
+import { expect, describe, it, beforeEach, afterEach, vi } from 'vitest';
+import { waitFor } from '@testing-library/react';
 import ModalManager, { ModalInstance } from '../src/ModalManager';
 
 import { injectCss } from './helpers';
 
+vi.mock('../src/getScrollbarWidth', () => ({
+  default: () => 10,
+}));
+
 const createModal = (): ModalInstance =>
   ({ dialog: null, backdrop: null } as any);
 
@@ -30,11 +33,11 @@ describe('ModalManager', () => {
 
     manager.add(modal);
 
-    expect(manager.modals.length).to.equal(1);
-    expect(manager.modals[0]).to.equal(modal);
+    expect(manager.modals.length).toEqual(1);
+    expect(manager.modals[0]).toEqual(modal);
 
     expect((manager as any).state).to.eql({
-      scrollBarWidth: 0,
+      scrollBarWidth: 10,
       style: {
         overflow: '',
         paddingRight: '',
@@ -47,7 +50,7 @@ describe('ModalManager', () => {
     manager.add(modal);
     manager.add(modal);
 
-    expect(manager.modals.length).to.equal(1);
+    expect(manager.modals.length).toEqual(1);
   });
 
   it('should add multiple modals', () => {
@@ -57,7 +60,7 @@ describe('ModalManager', () => {
     manager.add(modalA);
     manager.add(modalB);
 
-    expect(manager.modals.length).to.equal(2);
+    expect(manager.modals.length).toEqual(2);
   });
 
   it('should remove modal', () => {
@@ -69,7 +72,7 @@ describe('ModalManager', () => {
 
     manager.remove(modalA);
 
-    expect(manager.modals.length).to.equal(1);
+    expect(manager.modals.length).toEqual(1);
   });
 
   describe('container styles', () => {
@@ -92,44 +95,44 @@ describe('ModalManager', () => {
     it('should set container overflow to hidden ', () => {
       const modal = createModal();
 
-      expect(document.body.style.overflow).to.equal('');
+      expect(document.body.style.overflow).toEqual('');
 
       manager.add(modal);
 
-      expect(document.body.style.overflow).to.equal('hidden');
+      expect(document.body.style.overflow).toEqual('hidden');
     });
 
     it('should respect handleContainerOverflow', () => {
       const modal = createModal();
 
-      expect(document.body.style.overflow).to.equal('');
+      expect(document.body.style.overflow).toEqual('');
 
       const modalManager = new ModalManager({ handleContainerOverflow: false });
       modalManager.add(modal);
 
-      expect(document.body.style.overflow).to.equal('');
+      expect(document.body.style.overflow).toEqual('');
 
       modalManager.remove(modal);
 
-      expect(document.body.style.overflow).to.equal('');
+      expect(document.body.style.overflow).toEqual('');
     });
 
-    it('should set add to existing container padding', () => {
+    it('should set add to existing container padding', async () => {
       const modal = createModal();
       manager.add(modal);
 
-      expect(document.body.style.paddingRight).to.equal(
-        `${getScrollbarSize() + 20}px`,
+      await waitFor(() =>
+        expect(document.body.style.paddingRight).toEqual(`${10 + 20}px`),
       );
     });
 
-    it('should set padding to left side if RTL', () => {
+    it('should set padding to left side if RTL', async () => {
       const modal = createModal();
 
       new ModalManager({ isRTL: true }).add(modal);
 
-      expect(document.body.style.paddingLeft).to.equal(
-        `${getScrollbarSize() + 20}px`,
+      await waitFor(() =>
+        expect(document.body.style.paddingLeft).toEqual(`${10 + 20}px`),
       );
     });
 
@@ -138,44 +141,44 @@ describe('ModalManager', () => {
 
       document.body.style.overflow = 'scroll';
 
-      expect(document.body.style.overflow).to.equal('scroll');
+      expect(document.body.style.overflow).toEqual('scroll');
 
       manager.add(modal);
       manager.remove(modal);
 
-      expect(document.body.style.overflow).to.equal('scroll');
+      expect(document.body.style.overflow).toEqual('scroll');
       document.body.style.overflow = '';
     });
 
     it('should reset overflow style to the computed one', () => {
       const modal = createModal();
 
-      expect(css(document.body, 'overflow')).to.equal('scroll');
+      expect(css(document.body, 'overflow')).toEqual('scroll');
 
       manager.add(modal);
       manager.remove(modal);
 
-      expect(document.body.style.overflow).to.equal('');
-      expect(css(document.body, 'overflow')).to.equal('scroll');
+      expect(document.body.style.overflow).toEqual('');
+      expect(css(document.body, 'overflow')).toEqual('scroll');
     });
 
     it('should only remove styles when there are no associated modals', () => {
       const modalA = createModal();
       const modalB = createModal();
 
-      expect(document.body.style.overflow).to.equal('');
+      expect(document.body.style.overflow).toEqual('');
 
       manager.add(modalA);
       manager.add(modalB);
 
       manager.remove(modalB);
 
-      expect(document.body.style.overflow).to.equal('hidden');
+      expect(document.body.style.overflow).toEqual('hidden');
 
       manager.remove(modalA);
 
-      expect(document.body.style.overflow).to.equal('');
-      expect(document.body.style.paddingRight).to.equal('');
+      expect(document.body.style.overflow).toEqual('');
+      expect(document.body.style.paddingRight).toEqual('');
     });
   });
 });