a9851272ae
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.
67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
import { describe, it, afterEach } from 'vitest';
|
|
import { OperatingSystem } from '@/domain/OperatingSystem';
|
|
import { MobileSafariActivePseudoClassEnabler } from '@/presentation/bootstrapping/Modules/MobileSafariActivePseudoClassEnabler';
|
|
import { EventName, createWindowEventSpies } from '@tests/shared/Spies/WindowEventSpies';
|
|
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
|
|
import { RuntimeEnvironment } from '@/infrastructure/RuntimeEnvironment/RuntimeEnvironment';
|
|
import { isTouchEnabledDevice } from '@/infrastructure/RuntimeEnvironment/TouchSupportDetection';
|
|
import { MobileSafariDetectionTestCases } from './MobileSafariDetectionTestCases';
|
|
|
|
describe('MobileSafariActivePseudoClassEnabler', () => {
|
|
describe('bootstrap', () => {
|
|
MobileSafariDetectionTestCases.forEach(({
|
|
description, userAgent, supportsTouch, expectedResult,
|
|
}) => {
|
|
it(description, () => {
|
|
// arrange
|
|
const expectedEvent: EventName = 'touchstart';
|
|
patchUserAgent(userAgent, afterEach);
|
|
const { isAddEventCalled, currentListeners } = createWindowEventSpies(afterEach);
|
|
const patchedEnvironment = new ConstructibleRuntimeEnvironment(supportsTouch);
|
|
const sut = new MobileSafariActivePseudoClassEnabler(patchedEnvironment);
|
|
// act
|
|
sut.bootstrap();
|
|
// assert
|
|
const isSet = isAddEventCalled(expectedEvent);
|
|
expect(isSet).to.equal(expectedResult, formatAssertionMessage([
|
|
`Expected result\t\t: ${expectedResult ? 'true (mobile Safari)' : 'false (not mobile Safari)'}`,
|
|
`Actual result\t\t: ${isSet ? 'true (mobile Safari)' : 'false (not mobile Safari)'}`,
|
|
`User agent\t\t: ${navigator.userAgent}`,
|
|
`Touch supported\t\t: ${supportsTouch}`,
|
|
`Current OS\t\t: ${patchedEnvironment.os === undefined ? 'unknown' : OperatingSystem[patchedEnvironment.os]}`,
|
|
`Is desktop?\t\t: ${patchedEnvironment.isDesktop ? 'Yes (Desktop app)' : 'No (Browser)'}`,
|
|
`Listeners (${currentListeners.length})\t\t: ${JSON.stringify(currentListeners)}`,
|
|
]));
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
function patchUserAgent(
|
|
userAgent: string,
|
|
restoreCallback: (restoreFunc: () => void) => void,
|
|
) {
|
|
const originalNavigator = window.navigator;
|
|
const userAgentGetter = { get: () => userAgent };
|
|
window.navigator = Object.create(navigator, {
|
|
userAgent: userAgentGetter,
|
|
});
|
|
restoreCallback(() => {
|
|
Object.assign(window, {
|
|
navigator: originalNavigator,
|
|
});
|
|
});
|
|
}
|
|
|
|
function getTouchDetectorMock(
|
|
isTouchEnabled: boolean,
|
|
): typeof isTouchEnabledDevice {
|
|
return () => isTouchEnabled;
|
|
}
|
|
|
|
class ConstructibleRuntimeEnvironment extends RuntimeEnvironment {
|
|
public constructor(isTouchEnabled: boolean) {
|
|
super(window, undefined, undefined, getTouchDetectorMock(isTouchEnabled));
|
|
}
|
|
}
|