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

23
tests/e2e/card-list-layout-stability-on-load.cy.ts
View File

@@ -1,4 +1,5 @@
// eslint-disable-next-line max-classes-per-file
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
import { getHeaderBrandTitle } from './support/interactions/header';
import { ViewportTestScenarios } from './support/scenarios/viewport-test-scenarios';
@@ -49,11 +50,12 @@ describe('card list layout stability', () => {
// assert
const widthToleranceInPx = 0;
const widthsInPx = dimensions.getUniqueWidths();
expect(isWithinTolerance(widthsInPx, widthToleranceInPx)).to.equal(true, [
`Unique width values over time: ${[...widthsInPx].join(', ')}`,
`Height changes are more than ${widthToleranceInPx}px tolerance`,
`Captured metrics: ${dimensions.toString()}`,
].join('\n\n'));
expect(isWithinTolerance(widthsInPx, widthToleranceInPx))
.to.equal(true, formatAssertionMessage([
`Unique width values over time: ${[...widthsInPx].join(', ')}`,
`Height changes are more than ${widthToleranceInPx}px tolerance`,
`Captured metrics: ${dimensions.toString()}`,
]));
const heightToleranceInPx = 100; // Set in relation to card sizes.
// Tolerance allows for minor layout shifts without (e.g. for icon or font loading)
@@ -61,11 +63,12 @@ describe('card list layout stability', () => {
// cards per row changes, avoiding failures for shifts less than the smallest card
// size (~175px).
const heightsInPx = dimensions.getUniqueHeights();
expect(isWithinTolerance(heightsInPx, heightToleranceInPx)).to.equal(true, [
`Unique height values over time: ${[...heightsInPx].join(', ')}`,
`Height changes are more than ${heightToleranceInPx}px tolerance`,
`Captured metrics: ${dimensions.toString()}`,
].join('\n\n'));
expect(isWithinTolerance(heightsInPx, heightToleranceInPx))
.to.equal(true, formatAssertionMessage([
`Unique height values over time: ${[...heightsInPx].join(', ')}`,
`Height changes are more than ${heightToleranceInPx}px tolerance`,
`Captured metrics: ${dimensions.toString()}`,
]));
});
});
});

5
tests/e2e/modal-layout-shifts.cy.ts
View File

@@ -1,3 +1,4 @@
import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
import { ViewportTestScenarios } from './support/scenarios/viewport-test-scenarios';
describe('Modal interaction and layout stability', () => {
@@ -24,10 +25,10 @@ describe('Modal interaction and layout stability', () => {
captureViewportMetrics((metrics) => {
const metricsAfterModal = metrics;
expect(metricsBeforeModal).to.deep.equal(metricsAfterModal, [
expect(metricsBeforeModal).to.deep.equal(metricsAfterModal, formatAssertionMessage([
`Expected (initial metrics before modal): ${JSON.stringify(metricsBeforeModal)}`,
`Actual (metrics after modal is opened): ${JSON.stringify(metricsAfterModal)}`,
].join('\n'));
]));
});
});
});

6
tests/e2e/no-unintended-overflow.cy.ts
View File

@@ -1,3 +1,5 @@
import { formatAssertionMessage } from '../shared/FormatAssertionMessage';
describe('has no unintended overflow', () => {
it('fits the content without horizontal scroll', () => {
// arrange
@@ -6,7 +8,7 @@ describe('has no unintended overflow', () => {
cy.visit('/');
// assert
cy.window().then((win) => {
expect(win.document.documentElement.scrollWidth, [
expect(win.document.documentElement.scrollWidth, formatAssertionMessage([
`Window inner dimensions: ${win.innerWidth}x${win.innerHeight}`,
`Window outer dimensions: ${win.outerWidth}x${win.outerHeight}`,
`Body scrollWidth: ${win.document.body.scrollWidth}`,
@@ -17,7 +19,7 @@ describe('has no unintended overflow', () => {
`Meta viewport content: ${win.document.querySelector('meta[name="viewport"]')?.getAttribute('content')}`,
`Device Pixel Ratio: ${win.devicePixelRatio}`,
`Cypress Viewport: ${Cypress.config('viewportWidth')}x${Cypress.config('viewportHeight')}`,
].join('\n')).to.be.lte(win.innerWidth);
])).to.be.lte(win.innerWidth);
});
});
});