mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-07-21 16:51:10 +02:00
86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
// cypress/e2e/fullscreen.spec.js
|
|
|
|
describe('Fullscreen Toggle', () => {
|
|
const ROOT = '/';
|
|
|
|
beforeEach(() => {
|
|
cy.visit(ROOT);
|
|
});
|
|
|
|
it('defaults to normal mode when no fullscreen param is present', () => {
|
|
// Body should not have fullscreen class
|
|
cy.get('body').should('not.have.class', 'fullscreen');
|
|
|
|
// URL should not include `fullscreen`
|
|
cy.url().should('not.include', 'fullscreen=');
|
|
|
|
// Header and footer should be visible (max-height > 0)
|
|
cy.get('header').should('have.css', 'max-height').and(value => {
|
|
expect(parseFloat(value)).to.be.greaterThan(0);
|
|
});
|
|
cy.get('footer').should('have.css', 'max-height').and(value => {
|
|
expect(parseFloat(value)).to.be.greaterThan(0);
|
|
});
|
|
});
|
|
|
|
it('initFullscreenFromUrl() picks up ?fullscreen=1 on load', () => {
|
|
cy.visit(`${ROOT}?fullscreen=1`);
|
|
|
|
cy.get('body').should('have.class', 'fullscreen');
|
|
cy.url().should('include', 'fullscreen=1');
|
|
|
|
// Header and footer should be collapsed (max-height == 0)
|
|
cy.get('header').should('have.css', 'max-height', '0px');
|
|
cy.get('footer').should('have.css', 'max-height', '0px');
|
|
});
|
|
|
|
it('enterFullscreen() adds fullscreen class, sets full width, and updates URL', () => {
|
|
cy.window().then(win => {
|
|
win.exitFullscreen(); // ensure starting state
|
|
win.enterFullscreen();
|
|
});
|
|
|
|
cy.get('body').should('have.class', 'fullscreen');
|
|
cy.url().should('include', 'fullscreen=1');
|
|
cy.get('.container, .container-fluid')
|
|
.should('have.class', 'container-fluid');
|
|
|
|
cy.get('header').should('have.css', 'max-height', '0px');
|
|
cy.get('footer').should('have.css', 'max-height', '0px');
|
|
});
|
|
|
|
it('exitFullscreen() removes fullscreen class, resets width, and URL param', () => {
|
|
// start in fullscreen
|
|
cy.window().invoke('enterFullscreen');
|
|
|
|
// then exit
|
|
cy.window().invoke('exitFullscreen');
|
|
|
|
cy.get('body').should('not.have.class', 'fullscreen');
|
|
cy.url().should('not.include', 'fullscreen=');
|
|
cy.get('.container, .container-fluid')
|
|
.should('have.class', 'container')
|
|
.and('not.have.class', 'container-fluid');
|
|
|
|
// Header and footer should be expanded again
|
|
cy.get('header').should('have.css', 'max-height').and(value => {
|
|
expect(parseFloat(value)).to.be.greaterThan(0);
|
|
});
|
|
cy.get('footer').should('have.css', 'max-height').and(value => {
|
|
expect(parseFloat(value)).to.be.greaterThan(0);
|
|
});
|
|
});
|
|
|
|
it('toggleFullscreen() toggles into and out of fullscreen', () => {
|
|
// Toggle into fullscreen
|
|
cy.window().invoke('toggleFullscreen');
|
|
cy.get('body').should('have.class', 'fullscreen');
|
|
cy.url().should('include', 'fullscreen=1');
|
|
|
|
// Toggle back
|
|
cy.window().invoke('toggleFullscreen');
|
|
cy.get('body').should('not.have.class', 'fullscreen');
|
|
cy.url().should('not.include', 'fullscreen=');
|
|
});
|
|
});
|