44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix touch state not being activated in iOS Safari

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

66
tests/integration/presentation/bootstrapping/Modules/MobileSafariActivePseudoClassEnabler.spec.ts Normal file
View File

@@ -0,0 +1,66 @@
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));
}
}

216
tests/integration/presentation/bootstrapping/Modules/MobileSafariDetectionTestCases.ts Normal file
View File

@@ -0,0 +1,216 @@
import { OperatingSystem } from '@/domain/OperatingSystem';
import { determineTouchSupportOptions } from '@tests/integration/shared/TestCases/TouchSupportOptions';
interface PlatformTestCase {
readonly description: string;
readonly userAgent: string;
readonly supportsTouch: boolean;
readonly expectedResult: boolean;
}
export const MobileSafariDetectionTestCases: ReadonlyArray<PlatformTestCase> = [
...createBrowserTestCases({
browserName: 'Safari',
expectedResult: true,
userAgents: [
{
deviceInfo: 'Safari on iPad (≥ 13)',
operatingSystem: OperatingSystem.iPadOS,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15', // same as macOS (desktop)
supportsTouch: true,
},
{
deviceInfo: 'Safari on iPad (< 13)',
operatingSystem: OperatingSystem.iPadOS,
userAgent: 'Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B14 3 Safari/601.1',
},
{
deviceInfo: 'Safari on iPhone',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1',
},
{
deviceInfo: 'Safari on iPod touch',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozila/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Geckto) Version/3.0 Mobile/3A101a Safari/419.3',
// https://web.archive.org/web/20231112165804/https://www.cnet.com/tech/mobile/safari-for-ipod-touch-has-different-user-agent-string-may-not-go-directly-to-iphone-optimized-sites/null/
},
],
}),
...createBrowserTestCases({
browserName: 'Safari',
expectedResult: false,
userAgents: [
{
deviceInfo: 'Safari on macOS',
operatingSystem: OperatingSystem.macOS,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15',
supportsTouch: false,
},
],
}),
...createBrowserTestCases({
browserName: 'Chrome',
expectedResult: false,
userAgents: [
{
deviceInfo: 'macOS',
operatingSystem: OperatingSystem.macOS,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36',
},
{
deviceInfo: 'iPad (iPadOS 17)',
operatingSystem: OperatingSystem.iPadOS,
userAgent: 'Mozilla/5.0 (iPad; CPU OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/119.0.6045.109 Mobile/15E148 Safari/604.1',
},
{
deviceInfo: 'iPhone (iOS 17)',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/119.0.6045.109 Mobile/15E148 Safari/604.1',
},
{
deviceInfo: 'iPhone (iOS 12)',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/70.0.3538.75 Mobile/15E148 Safari/605.1',
},
{
deviceInfo: 'iPod Touch (iOS 12)',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPod; CPU iPhone OS 12_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/86.0.4240.93 Mobile/15E148 Safari/604.1',
},
],
}),
...createBrowserTestCases({
browserName: 'Firefox',
expectedResult: false,
userAgents: [
{
deviceInfo: 'macOS',
operatingSystem: OperatingSystem.macOS,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 14.1; rv:119.0) Gecko/20100101 Firefox/119.0',
},
{
deviceInfo: 'iPad (iPadOS 13)',
operatingSystem: OperatingSystem.iPadOS,
userAgent: 'Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/19.1b16203 Mobile/15E148 Safari/605.1.15',
},
{
deviceInfo: 'iPhone (iOS 17)',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/117.2 Mobile/15E148 Safari/605.1.15',
},
],
}),
...createBrowserTestCases({
browserName: 'Edge',
expectedResult: false,
userAgents: [
{
deviceInfo: 'macOS',
operatingSystem: OperatingSystem.macOS,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.55',
},
{
deviceInfo: 'iPad (iPadOS 15)',
operatingSystem: OperatingSystem.iPadOS,
userAgent: 'Mozilla/5.0 (iPad; CPU OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/96.0.1054.61 Version/15.0 Mobile/15E148 Safari/604.1',
},
{
deviceInfo: 'iPhone (iOS 17)',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/118.0.2088.81 Version/17.0 Mobile/15E148 Safari/604.1',
},
],
}),
...createBrowserTestCases({
browserName: 'Opera',
expectedResult: false,
userAgents: [
{
deviceInfo: 'Opera Mini on iPhone',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Opera/9.80 (iPhone; Opera Mini/5.0.0176/764; U; en) Presto/2.4.15',
// https://web.archive.org/web/20140221034354/http://my.opera.com/haavard/blog/2010/04/16/iphone-user-agent
},
{
deviceInfo: 'Opera Mini (Opera Turbo) on iPhone',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) OPiOS/8.0.0.78129 Mobile/11D201 Safari/9537.53',
// https://web.archive.org/web/20231112164709/https://dev.opera.com/blog/opera-mini-8-for-ios/
},
{
deviceInfo: 'Opera on macOS',
operatingSystem: OperatingSystem.macOS,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 OPR/94.0.0.0',
// https://web.archive.org/web/20231112164741/https://forums.opera.com/topic/59600/have-the-user-agent-browser-identification-match-with-the-mac-os-version-the-browser-is-running-on
},
{
deviceInfo: 'Opera on macOS (legacy)',
operatingSystem: OperatingSystem.macOS,
userAgent: 'Opera/9.80 (Macintosh; Intel Mac OS X 10.8; U; ru) Presto/2.10 Version/12.00',
// https://web.archive.org/web/20231112164741/https://forums.opera.com/topic/59600/have-the-user-agent-browser-identification-match-with-the-mac-os-version-the-browser-is-running-on
},
{
deviceInfo: 'Opera Touch on iPhone',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) OPT/3.3.3 Mobile/15E148',
},
{
deviceInfo: 'Opera Mini on iPhone',
operatingSystem: OperatingSystem.iOS,
userAgent: 'Opera/9.80 (iPhone; Opera Mini/14.0.0/37.8603; U; en) Presto/2.12.423 Version/12.16',
},
{
deviceInfo: 'Opera Mini on iPad',
operatingSystem: OperatingSystem.iPadOS,
userAgent: 'Opera/9.80 (iPad; Opera Mini/7.0.5/191.320; U; id) Presto/2.12.423 Version/12.16',
},
],
}),
...createBrowserTestCases({
browserName: 'Vivo Browser', // Runs only Vivo (Android) devices
expectedResult: false,
userAgents: [
{
deviceInfo: 'VivoBrowser on Android',
operatingSystem: OperatingSystem.Android,
userAgent: 'Mozilla/5.0 (Linux; Android 10; V1990A; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/87.0.4280.141 Mobile Safari/537.36 VivoBrowser/10.3.10.0',
},
],
}),
];
interface UserAgentTestScenario {
readonly userAgent: string;
readonly operatingSystem: OperatingSystem;
readonly deviceInfo: string;
readonly supportsTouch?: boolean;
}
interface BrowserTestScenario {
readonly browserName: string;
readonly expectedResult: boolean;
readonly userAgents: readonly UserAgentTestScenario[];
}
function createBrowserTestCases(
scenario: BrowserTestScenario,
): PlatformTestCase[] {
return scenario.userAgents.flatMap((agentInfo): readonly PlatformTestCase[] => {
const touchCases = agentInfo.supportsTouch === undefined
? determineTouchSupportOptions(agentInfo.operatingSystem)
: [agentInfo.supportsTouch];
return touchCases.map((hasTouch): PlatformTestCase => ({
description: [
scenario.expectedResult ? '[POSITIVE]' : '[NEGATIVE]',
scenario.browserName,
OperatingSystem[agentInfo.operatingSystem],
agentInfo.deviceInfo,
hasTouch === true ? '[TOUCH]' : '[NO TOUCH]',
].join(' | '),
userAgent: agentInfo.userAgent,
supportsTouch: hasTouch,
expectedResult: scenario.expectedResult,
}));
});
}