context('Maps Page', () => { beforeEach(() => { cy.visit('/c/maps'); cy.get('.MuiCard-root').should('have.length', 3); }); it('should match the snapshot', () => { cy.matchImageSnapshot('maps'); }); }); context('iphone-5 resolution', () => { beforeEach(() => { cy.viewport('iphone-5'); cy.visit('/c/maps'); cy.get('.MuiCard-root').should('have.length', 3); }); it('Displays mobile menu button', () => { cy.get('#open-main-drawer').should('be.visible'); }); it('Displays mobile menu on click', () => { cy.get('.MuiDrawer-root').should('not.be.visible'); cy.get('#open-main-drawer').should('be.visible').click(); cy.get('.MuiDrawer-root').should('be.visible'); }); it('Displays a card list', () => { cy.get('.MuiCard-root').should('have.length', 3); }); it('should match the snapshot', () => { cy.matchImageSnapshot('maps-iphone-5'); }); }); context('720p resolution', () => { beforeEach(() => { cy.viewport(1280, 720); cy.visit('/c/maps'); cy.get('.MuiCard-root').should('have.length', 3); }); it('Displays mobile menu button', () => { cy.get('#open-desktop-drawer').should('be.visible'); }); it('Displays a table with maps', () => { cy.get('.MuiTableBody-root').should('be.visible'); }); it('should match the snapshot', () => { cy.matchImageSnapshot('maps-720p-resolution'); }); });