diff --git a/test/ModalManagerSpec.ts b/test/ModalManagerSpec.ts index fcf3723..1220c3f 100644 --- 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(''); }); }); });