diff --git a/packages/web/src/js/__tests__/Toast.test.ts b/packages/web/src/js/__tests__/Toast.test.ts index 619895013e..f508c1b41c 100644 --- a/packages/web/src/js/__tests__/Toast.test.ts +++ b/packages/web/src/js/__tests__/Toast.test.ts @@ -1,6 +1,13 @@ import { clearFixture, getFixture } from '../../../tests/helpers/fixture'; import Toast from '../Toast'; -import { CLASS_NAME_HIDDEN, CLASS_NAME_OPEN } from '../constants'; +import { + ATTRIBUTE_ARIA_EXPANDED, + ATTRIBUTE_DATA_TARGET, + CLASS_NAME_HIDDEN, + CLASS_NAME_OPEN, + CLASS_NAME_TRANSITIONING, +} from '../constants'; +import EventHandler from '../dom/EventHandler'; const testId = 'toast-test'; @@ -61,15 +68,21 @@ describe('Toast', () => { const element = fixtureEl.querySelector('.ToastBar') as HTMLElement; const toast = new Toast(element); - const trigger = fixtureEl.querySelector(`[data-spirit-target="#${testId}"]`) as HTMLButtonElement; + const trigger = fixtureEl.querySelector(`[${ATTRIBUTE_DATA_TARGET}="#${testId}"]`) as HTMLButtonElement; const showSpy = jest.spyOn(Toast.prototype, 'show'); await toast.show(); expect(showSpy).toHaveBeenCalled(); - expect(trigger).toHaveAttribute('aria-expanded', 'true'); + expect(trigger).toHaveAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true'); expect(element).toHaveClass(CLASS_NAME_OPEN); + expect(element).toHaveClass(CLASS_NAME_TRANSITIONING); + + EventHandler.trigger(element, 'transitionend'); + + expect(element).toHaveClass(CLASS_NAME_OPEN); + expect(element).not.toHaveClass(CLASS_NAME_TRANSITIONING); }); }); @@ -79,15 +92,20 @@ describe('Toast', () => { const element = fixtureEl.querySelector('.ToastBar') as HTMLElement; const toast = new Toast(element); - const trigger = fixtureEl.querySelector(`[data-spirit-target="#${testId}"]`) as HTMLButtonElement; + const trigger = fixtureEl.querySelector(`[${ATTRIBUTE_DATA_TARGET}="#${testId}"]`) as HTMLButtonElement; const hideSpy = jest.spyOn(Toast.prototype, 'hide'); await toast.hide(); expect(hideSpy).toHaveBeenCalled(); - expect(trigger).toHaveAttribute('aria-expanded', 'false'); + expect(trigger).toHaveAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false'); expect(element).toHaveClass(CLASS_NAME_HIDDEN); + expect(element).toHaveClass(CLASS_NAME_TRANSITIONING); + + EventHandler.trigger(element, 'transitionend'); + + expect(fixtureEl.querySelector('.ToastBar')).toBeNull(); }); }); });