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);