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,35 +0,0 @@
import { describe, it, expect } from 'vitest';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { BrowserOsDetector } from '@/infrastructure/RuntimeEnvironment/BrowserOs/BrowserOsDetector';
import { itEachAbsentStringValue } from '@tests/unit/shared/TestCases/AbsentTests';
import { BrowserOsTestCases } from './BrowserOsTestCases';
describe('BrowserOsDetector', () => {
describe('returns undefined when user agent is absent', () => {
itEachAbsentStringValue((absentValue) => {
// arrange
const expected = undefined;
const userAgent = absentValue;
const sut = new BrowserOsDetector();
// act
const actual = sut.detect(userAgent);
// assert
expect(actual).to.equal(expected);
}, { excludeNull: true, excludeUndefined: true });
});
it('detects as expected', () => {
BrowserOsTestCases.forEach((testCase) => {
// arrange
const sut = new BrowserOsDetector();
// act
const actual = sut.detect(testCase.userAgent);
// assert
expect(actual).to.equal(testCase.expectedOs, printMessage());
function printMessage(): string {
return `Expected: "${OperatingSystem[testCase.expectedOs]}"\n`
+ `Actual: "${actual === undefined ? 'undefined' : OperatingSystem[actual]}"\n`
+ `UserAgent: "${testCase.userAgent}"`;
}
});
});
});

View File

@@ -1,337 +0,0 @@
import { OperatingSystem } from '@/domain/OperatingSystem';
interface IBrowserOsTestCase {
userAgent: string;
expectedOs: OperatingSystem;
}
export const BrowserOsTestCases: ReadonlyArray<IBrowserOsTestCase> = [
{
userAgent: 'Mozilla/5.0 (Windows NT 6.3; Win64, x64; Trident/7.0; rv:11.0) like Gecko',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; WebView/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36 Edge/14.14316',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows Phone 10.0; Android 5.1.1; NOKIA; Lumia 1520) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/13.10586',
expectedOs: OperatingSystem.WindowsPhone,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (X11; CrOS x86_64 11316.165.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.122 Safari/537.36',
expectedOs: OperatingSystem.ChromeOS,
},
{
userAgent: 'Mozilla/5.0 (X11; CrOS x86_64 8872.76.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.105 Safari/537.36',
expectedOs: OperatingSystem.ChromeOS,
},
{
userAgent: 'Mozilla/5.0 (X11; CrOS armv7l 4537.56.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.38 Safari/537.36',
expectedOs: OperatingSystem.ChromeOS,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36 OPR/58.0.3135.114',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36 OPR/53.0.2907.68',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2393.94 Safari/537.36 OPR/42.0.2393.94',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.82 Safari/537.36 OPR/29.0.1795.41 (Edition beta)',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36 OPR/15.0.1147.100',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Opera/9.80 (Windows NT 6.0) Presto/2.12.388 Version/12.14',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Opera/9.80 (Windows NT 6.0; U; en) Presto/2.2.15 Version/10.10',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Opera/9.27 (Windows NT 5.1; U; en)',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1',
expectedOs: OperatingSystem.iOS,
},
{
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
expectedOs: OperatingSystem.iOS,
},
{
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0 like Mac OS X) AppleWebKit/602.1.38 (KHTML, like Gecko) Version/10.0 Mobile/14A300 Safari/602.1',
expectedOs: OperatingSystem.iOS,
},
{
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1',
expectedOs: OperatingSystem.iOS,
},
{
userAgent: 'Opera/9.80 (Android; Opera Mini/32.0/88.150; U; sr) Presto/2.12 Version/12.16',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Opera/9.80 (Android; Opera Mini/8.0.1807/36.1609; U; en) Presto/2.12.423 Version/12.16',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.4.4; pt-br; SM-G530BT Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; Q40; Android/4.4.2; Release/12.15.2015) AppleWebKit/534.30 (KHTML, like Gecko) Mobile Safari/534.30',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.1.0.1429 Mobile Safari/537.10+',
expectedOs: OperatingSystem.BlackBerry,
},
{
userAgent: 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.0.0; en-US) AppleWebKit/535.8+ (KHTML, like Gecko) Version/7.2.0.0 Safari/535.8+',
expectedOs: OperatingSystem.BlackBerryTabletOS,
},
{
userAgent: 'Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.8+ (KHTML, like Gecko) Version/6.0.0.466 Mobile Safari/534.8+',
expectedOs: OperatingSystem.BlackBerryOS,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 4.4.4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36 Mobile OPR/15.0.1147.100',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 2.3.4; MT11i Build/4.0.2.A.0.62) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.123 Mobile Safari/537.22 OPR/14.0.1025.52315',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Opera/9.80 (Windows NT 6.1; Opera Tablet/15165; U; en) Presto/2.8.149 Version/11.1',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Opera/9.80 (Android 2.2; Opera Mobi/-2118645896; U; pl) Presto/2.7.60 Version/10.5',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 9; SM-G960U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 6.0; CAM-L03) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.99 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; LGMS323 Build/KOT49I.MS32310c) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/46.0.2490.76 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Android 9; Mobile; rv:64.0) Gecko/64.0 Firefox/64.0',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) FxiOS/1.0 Mobile/12F69 Safari/600.1.4',
expectedOs: OperatingSystem.iOS,
},
{
userAgent: 'Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 625) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537',
expectedOs: OperatingSystem.WindowsPhone,
},
{
userAgent: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)',
expectedOs: OperatingSystem.WindowsPhone,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 6.0; en-US; CPH1609 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.10.2.1164 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'UCWEB/2.0 (Linux; U; Adr 5.1; en-US; Lenovo Z90a40 Build/LMY47O) U2/1.0.0 UCBrowser/11.1.5.890 U2/1.0.0 Mobile',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 5.1; en-US; Lenovo Z90a40 Build/LMY47O) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/11.1.5.890 U3/0.8.0 Mobile Safari/534.30',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'UCWEB/2.0 (Linux; U; Adr 2.3; en-US; MI-ONEPlus) U2/1.0.0 UCBrowser/8.6.0.199 U2/1.0.0 Mobile',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 2.3; zh-CN; MI-ONEPlus) AppleWebKit/534.13 (KHTML, like Gecko) UCBrowser/8.6.0.199 U3/0.8.0 Mobile Safari/534.13',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G965F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.0 Chrome/67.0.3396.87 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 8.0.0; SAMSUNG SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/8.2 Chrome/63.0.3239.111 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 7.0; SAMSUNG SM-J330FN Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/7.2 Chrome/59.0.3071.125 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 5.0.2; SAMSUNG SM-G925F Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 5.0.2; SAMSUNG SM-G925F Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; vivo X21A Build/OPM1.171019.011) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/9.1 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; GT-I9500 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.0 QQ-URL-Manager Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Linux; Android 9; ONEPLUS A6003) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Mobile Safari/537.36',
expectedOs: OperatingSystem.Android,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (Windows NT 6.4; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0',
expectedOs: OperatingSystem.Windows,
},
{
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1',
expectedOs: OperatingSystem.iOS,
},
{
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36',
expectedOs: OperatingSystem.macOS,
},
{
userAgent: 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0',
expectedOs: OperatingSystem.Linux,
},
{
userAgent: 'Mozilla/5.0 (X11; CrOS x86_64 11316.165.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.122 Safari/537.36',
expectedOs: OperatingSystem.ChromeOS,
},
{
userAgent: 'Mozilla/5.0 (Mobile; LYF/F90M/LYF_F90M_000-03-12-110119; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5',
expectedOs: OperatingSystem.KaiOS,
},
];

View File

@@ -0,0 +1,260 @@
import { describe, it, expect } from 'vitest';
import { BrowserCondition, TouchSupportExpectation } from '@/infrastructure/RuntimeEnvironment/BrowserOs/BrowserCondition';
import { ConditionBasedOsDetector } from '@/infrastructure/RuntimeEnvironment/BrowserOs/ConditionBasedOsDetector';
import { getAbsentStringTestCases, itEachAbsentCollectionValue } from '@tests/unit/shared/TestCases/AbsentTests';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { BrowserEnvironmentStub } from '@tests/unit/shared/Stubs/BrowserEnvironmentStub';
import { BrowserConditionStub } from '@tests/unit/shared/Stubs/BrowserConditionStub';
import { EnumRangeTestRunner } from '@tests/unit/application/Common/EnumRangeTestRunner';
describe('ConditionBasedOsDetector', () => {
describe('constructor', () => {
describe('throws when given no conditions', () => {
itEachAbsentCollectionValue<BrowserCondition>((absentCollection) => {
// arrange
const expectedError = 'empty conditions';
const conditions = absentCollection;
// act
const act = () => new ConditionBasedOsDetectorBuilder()
.withConditions(conditions)
.build();
// assert
expect(act).to.throw(expectedError);
}, { excludeUndefined: true, excludeNull: true });
});
it('throws if user agent part is missing', () => {
// arrange
const expectedError = 'Each condition must include at least one identifiable part of the user agent string.';
const invalidCondition = new BrowserConditionStub().withExistingPartsInSameUserAgent([]);
// act
const act = () => new ConditionBasedOsDetectorBuilder()
.withConditions([invalidCondition])
.build();
// assert
expect(act).to.throw(expectedError);
});
describe('validates touch support expectation range', () => {
// arrange
const validValue = TouchSupportExpectation.MustExist;
// act
const act = (touchSupport: TouchSupportExpectation) => new ConditionBasedOsDetectorBuilder()
.withConditions([new BrowserConditionStub().withTouchSupport(touchSupport)])
.build();
// assert
new EnumRangeTestRunner(act)
.testOutOfRangeThrows()
.testValidValueDoesNotThrow(validValue);
});
it('throws if duplicate parts exist in user agent', () => {
// arrange
const expectedError = 'Found duplicate entries in user agent parts: Windows. Each part should be unique.';
const invalidCondition = {
operatingSystem: OperatingSystem.Windows,
existingPartsInSameUserAgent: ['Windows', 'Windows'],
};
// act
const act = () => new ConditionBasedOsDetectorBuilder()
.withConditions([invalidCondition])
.build();
// assert
expect(act).toThrowError(expectedError);
});
it('throws if duplicate non-existing parts exist in user agent', () => {
// arrange
const expectedError = 'Found duplicate entries in user agent parts: Linux. Each part should be unique.';
const invalidCondition = {
operatingSystem: OperatingSystem.Linux,
existingPartsInSameUserAgent: ['Linux'],
notExistingPartsInUserAgent: ['Linux'],
};
// act
const act = () => new ConditionBasedOsDetectorBuilder()
.withConditions([invalidCondition])
.build();
// assert
expect(act).toThrowError(expectedError);
});
it('throws if duplicates found in any user agent parts', () => {
// arrange
const expectedError = 'Found duplicate entries in user agent parts: Android. Each part should be unique.';
const invalidCondition = {
operatingSystem: OperatingSystem.Android,
existingPartsInSameUserAgent: ['Android'],
notExistingPartsInUserAgent: ['iOS', 'Android'],
};
// act
const act = () => new ConditionBasedOsDetectorBuilder()
.withConditions([invalidCondition])
.build();
// assert
expect(act).toThrowError(expectedError);
});
});
describe('detect', () => {
it('detects the correct OS when multiple conditions match', () => {
// arrange
const expectedOperatingSystem = OperatingSystem.Linux;
const testUserAgent = 'test-user-agent';
const expectedCondition = new BrowserConditionStub()
.withOperatingSystem(expectedOperatingSystem)
.withExistingPartsInSameUserAgent([testUserAgent]);
const conditions = [
expectedCondition,
new BrowserConditionStub()
.withExistingPartsInSameUserAgent(['unrelated user agent'])
.withOperatingSystem(OperatingSystem.Android),
new BrowserConditionStub()
.withNotExistingPartsInUserAgent([testUserAgent])
.withOperatingSystem(OperatingSystem.macOS),
];
const environment = new BrowserEnvironmentStub()
.withUserAgent(testUserAgent);
const detector = new ConditionBasedOsDetectorBuilder()
.withConditions(conditions)
.build();
// act
const actualOperatingSystem = detector.detect(environment);
// assert
expect(actualOperatingSystem).to.equal(expectedOperatingSystem);
});
describe('user agent checks', () => {
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly buildEnvironment: (environment: BrowserEnvironmentStub) => BrowserEnvironmentStub;
readonly buildCondition: (condition: BrowserConditionStub) => BrowserConditionStub;
readonly detects: boolean;
}> = [
...getAbsentStringTestCases({ excludeUndefined: true, excludeNull: true })
.map((testCase) => ({
description: `does not detect when user agent is empty (${testCase.valueName})`,
buildEnvironment: (environment) => environment.withUserAgent(testCase.absentValue),
buildCondition: (condition) => condition,
detects: false,
})),
{
description: 'detects when user agent matches completely',
buildEnvironment: (environment) => environment.withUserAgent('test-user-agent'),
buildCondition: (condition) => condition.withExistingPartsInSameUserAgent(['test-user-agent']),
detects: true,
},
{
description: 'detects when substring of user agent exists',
buildEnvironment: (environment) => environment.withUserAgent('test-user-agent'),
buildCondition: (condition) => condition.withExistingPartsInSameUserAgent(['test']),
detects: true,
},
{
description: 'does not detect when no part of user agent exists',
buildEnvironment: (environment) => environment.withUserAgent('unrelated-user-agent'),
buildCondition: (condition) => condition.withExistingPartsInSameUserAgent(['lorem-ipsum']),
detects: false,
},
{
description: 'detects when non-existing parts do not match',
buildEnvironment: (environment) => environment.withUserAgent('1-3'),
buildCondition: (condition) => condition.withExistingPartsInSameUserAgent(['1']).withNotExistingPartsInUserAgent(['2']),
detects: true,
},
{
description: 'does not detect when non-existing and existing parts match',
buildEnvironment: (environment) => environment.withUserAgent('1-2'),
buildCondition: (condition) => condition.withExistingPartsInSameUserAgent(['1']).withNotExistingPartsInUserAgent(['2']),
detects: false,
},
];
testScenarios.forEach(({
description, buildEnvironment, buildCondition, detects,
}) => {
it(description, () => {
// arrange
const environment = buildEnvironment(new BrowserEnvironmentStub());
const condition = buildCondition(
new BrowserConditionStub().withOperatingSystem(OperatingSystem.Linux),
);
const detector = new ConditionBasedOsDetectorBuilder()
.withConditions([condition])
.build();
// act
const actualOperatingSystem = detector.detect(environment);
// assert
expect(actualOperatingSystem !== undefined).to.equal(detects);
});
});
});
describe('touch support checks', () => {
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly expectation: TouchSupportExpectation;
readonly isTouchSupportInEnvironment: boolean;
readonly detects: boolean;
}> = [
{
description: 'detects when touch support exists and is expected',
expectation: TouchSupportExpectation.MustExist,
isTouchSupportInEnvironment: true,
detects: true,
},
{
description: 'does not detect when touch support does not exists but is expected',
expectation: TouchSupportExpectation.MustExist,
isTouchSupportInEnvironment: false,
detects: false,
},
{
description: 'detects when touch support does not exist and is not expected',
expectation: TouchSupportExpectation.MustNotExist,
isTouchSupportInEnvironment: false,
detects: true,
},
{
description: 'does not detect when touch support exists but is not expected',
expectation: TouchSupportExpectation.MustNotExist,
isTouchSupportInEnvironment: true,
detects: false,
},
];
testScenarios.forEach(({
description, expectation, isTouchSupportInEnvironment, detects,
}) => {
it(description, () => {
// arrange
const userAgent = 'iPhone';
const environment = new BrowserEnvironmentStub()
.withUserAgent(userAgent)
.withIsTouchSupported(isTouchSupportInEnvironment);
const conditionWithTouchSupport = new BrowserConditionStub()
.withExistingPartsInSameUserAgent([userAgent])
.withTouchSupport(expectation);
const detector = new ConditionBasedOsDetectorBuilder()
.withConditions([conditionWithTouchSupport])
.build();
// act
const actualOperatingSystem = detector.detect(environment);
// assert
expect(actualOperatingSystem !== undefined)
.to.equal(detects);
});
});
});
});
});
class ConditionBasedOsDetectorBuilder {
private conditions: readonly BrowserCondition[] = [{
operatingSystem: OperatingSystem.iOS,
existingPartsInSameUserAgent: ['iPhone'],
}];
public withConditions(conditions: readonly BrowserCondition[]): this {
this.conditions = conditions;
return this;
}
public build(): ConditionBasedOsDetector {
return new ConditionBasedOsDetector(
this.conditions,
);
}
}

View File

@@ -1,11 +1,13 @@
// eslint-disable-next-line max-classes-per-file
import { describe, it, expect } from 'vitest';
import { IBrowserOsDetector } from '@/infrastructure/RuntimeEnvironment/BrowserOs/IBrowserOsDetector';
import { BrowserOsDetector } from '@/infrastructure/RuntimeEnvironment/BrowserOs/BrowserOsDetector';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { RuntimeEnvironment } from '@/infrastructure/RuntimeEnvironment/RuntimeEnvironment';
import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
import { BrowserOsDetectorStub } from '@tests/unit/shared/Stubs/BrowserOsDetectorStub';
import { IEnvironmentVariables } from '@/infrastructure/EnvironmentVariables/IEnvironmentVariables';
import { EnvironmentVariablesStub } from '@tests/unit/shared/Stubs/EnvironmentVariablesStub';
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
describe('RuntimeEnvironment', () => {
describe('ctor', () => {
@@ -22,6 +24,22 @@ describe('RuntimeEnvironment', () => {
expect(act).to.throw(expectedError);
});
});
it('uses browser OS detector with current touch support', () => {
// arrange
const expectedTouchSupport = true;
const osDetector = new BrowserOsDetectorStub();
// act
createEnvironment({
window: { os: undefined, navigator: { userAgent: 'Forcing touch detection' } } as Partial<Window>,
isTouchSupported: expectedTouchSupport,
browserOsDetector: osDetector,
});
// assert
const actualCall = osDetector.callHistory.find((c) => c.methodName === 'detect');
expectExists(actualCall);
const [{ isTouchSupported: actualTouchSupport }] = actualCall.args;
expect(actualTouchSupport).to.equal(expectedTouchSupport);
});
});
describe('isDesktop', () => {
it('returns true when window property isDesktop is true', () => {
@@ -54,7 +72,7 @@ describe('RuntimeEnvironment', () => {
it('returns undefined if user agent is missing', () => {
// arrange
const expected = undefined;
const browserDetectorMock: IBrowserOsDetector = {
const browserDetectorMock: BrowserOsDetector = {
detect: () => {
throw new Error('should not reach here');
},
@@ -76,9 +94,9 @@ describe('RuntimeEnvironment', () => {
userAgent: givenUserAgent,
},
};
const browserDetectorMock: IBrowserOsDetector = {
detect: (agent) => {
if (agent !== givenUserAgent) {
const browserDetectorMock: BrowserOsDetector = {
detect: (environment) => {
if (environment.userAgent !== givenUserAgent) {
throw new Error('Unexpected user agent');
}
return expected;
@@ -155,23 +173,31 @@ describe('RuntimeEnvironment', () => {
});
interface EnvironmentOptions {
window: Partial<Window>;
browserOsDetector?: IBrowserOsDetector;
environmentVariables?: IEnvironmentVariables;
readonly window?: Partial<Window>;
readonly browserOsDetector?: BrowserOsDetector;
readonly environmentVariables?: IEnvironmentVariables;
readonly isTouchSupported?: boolean;
}
function createEnvironment(options: Partial<EnvironmentOptions> = {}): TestableRuntimeEnvironment {
const defaultOptions: EnvironmentOptions = {
const defaultOptions: Required<EnvironmentOptions> = {
window: {},
browserOsDetector: new BrowserOsDetectorStub(),
environmentVariables: new EnvironmentVariablesStub(),
isTouchSupported: false,
};
return new TestableRuntimeEnvironment({ ...defaultOptions, ...options });
}
class TestableRuntimeEnvironment extends RuntimeEnvironment {
public constructor(options: EnvironmentOptions) {
super(options.window, options.environmentVariables, options.browserOsDetector);
/* Using a separate object instead of `ConstructorParameter<..>` */
public constructor(options: Required<EnvironmentOptions>) {
super(
options.window,
options.environmentVariables,
options.browserOsDetector,
() => options.isTouchSupported,
);
}
}

View File

@@ -0,0 +1,65 @@
import { describe, it, expect } from 'vitest';
import { BrowserTouchSupportAccessor, isTouchEnabledDevice } from '@/infrastructure/RuntimeEnvironment/TouchSupportDetection';
describe('TouchSupportDetection', () => {
describe('isTouchEnabledDevice', () => {
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly accessor: BrowserTouchSupportAccessor;
readonly expectedTouch: boolean;
}> = [
{
description: 'detects no touch capabilities',
accessor: createMockAccessor(),
expectedTouch: false,
},
{
description: 'detects touch capability with defined document.ontouchend',
accessor: createMockAccessor({ documentOntouchend: () => 'not-undefined' }),
expectedTouch: true,
},
{
description: 'detects touch capability with navigator.maxTouchPoints > 0',
accessor: createMockAccessor({ navigatorMaxTouchPoints: () => 1 }),
expectedTouch: true,
},
{
description: 'detects touch capability when matchMedia for pointer coarse is true',
accessor: createMockAccessor({
windowMatchMediaMatches: (query: string) => {
return query === '(any-pointer: coarse)';
},
}),
expectedTouch: true,
},
{
description: 'detects touch capability with defined window.TouchEvent',
expectedTouch: true,
accessor: createMockAccessor({ windowTouchEvent: () => class {} }),
},
];
testScenarios.forEach(({ description, accessor, expectedTouch }) => {
it(`${description} - returns ${expectedTouch}`, () => {
// act
const isTouchDetected = isTouchEnabledDevice(accessor);
// assert
expect(isTouchDetected).to.equal(expectedTouch);
});
});
});
});
function createMockAccessor(
touchSupportFeatures: Partial<BrowserTouchSupportAccessor> = {},
): BrowserTouchSupportAccessor {
const defaultTouchSupport: BrowserTouchSupportAccessor = {
navigatorMaxTouchPoints: () => undefined,
windowMatchMediaMatches: () => false,
documentOntouchend: () => undefined,
windowTouchEvent: () => undefined,
};
return {
...defaultTouchSupport,
...touchSupportFeatures,
};
}