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.
This commit is contained in:
undergroundwires
2023-12-11 05:24:27 +01:00
parent 916c9d62d9
commit a9851272ae
43 changed files with 1719 additions and 672 deletions

View File

@@ -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;
},
};
}