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.
26 lines
1.2 KiB
TypeScript
26 lines
1.2 KiB
TypeScript
import { formatAssertionMessage } from '../shared/FormatAssertionMessage';
|
|
|
|
describe('has no unintended overflow', () => {
|
|
it('fits the content without horizontal scroll', () => {
|
|
// arrange
|
|
cy.viewport(375, 667); // iPhone SE
|
|
// act
|
|
cy.visit('/');
|
|
// assert
|
|
cy.window().then((win) => {
|
|
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}`,
|
|
`Body clientWidth: ${win.document.body.clientWidth}`,
|
|
`Body offsetWidth: ${win.document.body.offsetWidth}`,
|
|
`DocumentElement clientWidth: ${win.document.documentElement.clientWidth}`,
|
|
`DocumentElement offsetWidth: ${win.document.documentElement.offsetWidth}`,
|
|
`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')}`,
|
|
])).to.be.lte(win.innerWidth);
|
|
});
|
|
});
|
|
});
|