Fix touch state not being activated in iOS Safari

This commit resolves the issue with the `:active` pseudo-class not
activating in mobile Safari on iOS devices. It introduces a workaround
specifically for mobile Safari on iOS/iPadOS to enable the `:active`
pseudo-class. This ensures a consistent and responsive user interface
in response to touch states on mobile Safari.

Other supporting changes:

- Introduce new test utility functions such as `createWindowEventSpies`
  and `formatAssertionMessage` to improve code reusability and
  maintainability.
- Improve browser detection:
  - Add detection for iPadOS and Windows 10 Mobile.
  - Add touch support detection to correctly determine iPadOS vs macOS.
  - Fix misidentification of some Windows 10 Mobile platforms as Windows
    Phone.
  - Improve test coverage and refactor tests.

tests/unit/presentation/components/Shared/Icon/AppIcon.spec.ts

@@ -6,6 +6,7 @@ import { nextTick } from 'vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { IconName } from '@/presentation/components/Shared/Icon/IconName';
 import { UseSvgLoaderStub } from '@tests/unit/shared/Stubs/UseSvgLoaderStub';
+import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 
 describe('AppIcon.vue', () => {
   it('renders the correct SVG content based on the icon prop', async () => {
@@ -23,12 +24,8 @@ describe('AppIcon.vue', () => {
     await nextTick();
 
     // assert
-    const actualSvg = extractAndNormalizeSvg(wrapper.html());
-    const expectedSvg = extractAndNormalizeSvg(expectedIconContent);
-    expect(actualSvg).to.equal(
-      expectedSvg,
-      `Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
-    );
+    const actualSvg = wrapper.html();
+    expectSvg(actualSvg, expectedIconContent);
   });
   it('updates the SVG content when the icon prop changes', async () => {
     // arrange
@@ -48,12 +45,8 @@ describe('AppIcon.vue', () => {
     await nextTick();
 
     // assert
-    const actualSvg = extractAndNormalizeSvg(wrapper.html());
-    const expectedSvg = extractAndNormalizeSvg(updatedIconContent);
-    expect(actualSvg).to.equal(
-      expectedSvg,
-      `Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
-    );
+    const actualSvg = wrapper.html();
+    expectSvg(actualSvg, updatedIconContent);
   });
   it('emits `click` event when clicked', async () => {
     // arrange
@@ -86,6 +79,15 @@ function mountComponent(options?: {
   });
 }
 
+function expectSvg(actualSvg: string, expectedSvg: string): ReturnType<typeof expect> {
+  const normalizedExpectedSvg = extractAndNormalizeSvg(expectedSvg);
+  const normalizedActualSvg = extractAndNormalizeSvg(actualSvg);
+  return expect(normalizedActualSvg).to.equal(normalizedExpectedSvg, formatAssertionMessage([
+    'Expected:\n', normalizedExpectedSvg,
+    'Actual:\n', normalizedActualSvg,
+  ]));
+}
+
 function extractAndNormalizeSvg(svgString: string): string {
   const svg = extractSvg(svgString);
   return normalizeSvg(svg);

tests/unit/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.spec.ts

@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest';
+import {
+  describe, it, expect, afterEach,
+} from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick, defineComponent } from 'vue';
 import { useEscapeKeyListener } from '@/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener';
+import { EventName, createWindowEventSpies } from '@tests/shared/Spies/WindowEventSpies';
 
 describe('useEscapeKeyListener', () => {
   it('executes the callback when the Escape key is pressed', async () => {
@@ -40,19 +43,20 @@ describe('useEscapeKeyListener', () => {
 
   it('adds an event listener on component mount', () => {
     // arrange
-    const { restore, isAddEventCalled } = createWindowEventSpies();
+    const expectedEventType: EventName = 'keyup';
+    const { isAddEventCalled } = createWindowEventSpies(afterEach);
 
     // act
     createComponent();
 
     // assert
-    expect(isAddEventCalled()).to.equal(true);
-    restore();
+    expect(isAddEventCalled(expectedEventType)).to.equal(true);
   });
 
   it('removes the event listener on component unmount', async () => {
     // arrange
-    const { restore, isRemoveEventCalled } = createWindowEventSpies();
+    const expectedEventType: EventName = 'keyup';
+    const { isRemoveEventCalled } = createWindowEventSpies(afterEach);
 
     // act
     const wrapper = createComponent();
@@ -60,8 +64,7 @@ describe('useEscapeKeyListener', () => {
     await nextTick();
 
     // assert
-    expect(isRemoveEventCalled()).to.equal(true);
-    restore();
+    expect(isRemoveEventCalled(expectedEventType)).to.equal(true);
   });
 });
 
@@ -73,46 +76,3 @@ function createComponent(callback = () => {}) {
     template: '<div></div>',
   }));
 }
-
-function createWindowEventSpies() {
-  let addEventCalled = false;
-  let removeEventCalled = false;
-
-  const originalAddEventListener = window.addEventListener;
-  const originalRemoveEventListener = window.removeEventListener;
-
-  window.addEventListener = (
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions,
-  ): void => {
-    if (type === 'keyup' && typeof listener === 'function') {
-      addEventCalled = true;
-    }
-    originalAddEventListener(type, listener, options);
-  };
-
-  window.removeEventListener = (
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | EventListenerOptions,
-  ): void => {
-    if (type === 'keyup' && typeof listener === 'function') {
-      removeEventCalled = true;
-    }
-    originalRemoveEventListener(type, listener, options);
-  };
-
-  return {
-    restore: () => {
-      window.addEventListener = originalAddEventListener;
-      window.removeEventListener = originalRemoveEventListener;
-    },
-    isAddEventCalled() {
-      return addEventCalled;
-    },
-    isRemoveEventCalled() {
-      return removeEventCalled;
-    },
-  };
-}

tests/unit/presentation/components/Shared/Modal/ModalContainer.spec.ts

@@ -1,7 +1,10 @@
-import { describe, it, expect } from 'vitest';
+import {
+  describe, it, expect, afterEach,
+} from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
+import { createWindowEventSpies } from '@tests/shared/Spies/WindowEventSpies';
 
 const DOM_MODAL_CONTAINER_SELECTOR = '.modal-container';
 const COMPONENT_MODAL_OVERLAY_NAME = 'ModalOverlay';
@@ -70,17 +73,16 @@ describe('ModalContainer.vue', () => {
 
     it('closes on pressing ESC key', async () => {
       // arrange
-      const { triggerKeyUp, restore } = createWindowEventSpies();
+      createWindowEventSpies(afterEach);
       const wrapper = mountComponent({ modelValue: true });
 
       // act
       const escapeEvent = new KeyboardEvent('keyup', { key: 'Escape' });
-      triggerKeyUp(escapeEvent);
+      window.dispatchEvent(escapeEvent);
       await wrapper.vm.$nextTick();
 
       // assert
       expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
-      restore();
     });
 
     it('emit false value after overlay and content transitions out and model prop is true', async () => {
@@ -173,44 +175,3 @@ function mountComponent(options: {
     },
   });
 }
-
-function createWindowEventSpies() {
-  const originalAddEventListener = window.addEventListener;
-  const originalRemoveEventListener = window.removeEventListener;
-
-  let savedListener: EventListenerOrEventListenerObject | null = null;
-
-  window.addEventListener = (
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions,
-  ): void => {
-    if (type === 'keyup' && typeof listener === 'function') {
-      savedListener = listener;
-    }
-    originalAddEventListener.call(window, type, listener, options);
-  };
-
-  window.removeEventListener = (
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | EventListenerOptions,
-  ): void => {
-    if (type === 'keyup' && typeof listener === 'function') {
-      savedListener = null;
-    }
-    originalRemoveEventListener.call(window, type, listener, options);
-  };
-
-  return {
-    triggerKeyUp: (event: KeyboardEvent) => {
-      if (savedListener) {
-        (savedListener as EventListener)(event);
-      }
-    },
-    restore: () => {
-      window.addEventListener = originalAddEventListener;
-      window.removeEventListener = originalRemoveEventListener;
-    },
-  };
-}