diff --git a/cypress/e2e/a11y.cy.ts b/cypress/e2e/a11y.cy.ts new file mode 100644 index 000000000..892aba55c --- /dev/null +++ b/cypress/e2e/a11y.cy.ts @@ -0,0 +1,79 @@ +describe('A11y tests', function() { + before(function() { + // Init user + cy.createRandomUser().then(user => { + // Upload test files + cy.uploadFile(user, 'image1.jpg', 'image/jpeg') + cy.uploadFile(user, 'image2.jpg', 'image/jpeg') + cy.uploadFile(user, 'video1.mp4', 'video/mp4') + + // Visit nextcloud + cy.login(user) + cy.visit('/apps/files') + }) + }) + + after(function() { + cy.logout() + }) + + it('See files in the list', function() { + cy.getFile('image1.jpg', { timeout: 10000 }) + .should('contain', 'image1 .jpg') + cy.getFile('image2.jpg', { timeout: 10000 }) + .should('contain', 'image2 .jpg') + cy.getFile('video1.mp4', { timeout: 10000 }) + .should('contain', 'video1 .mp4') + }) + + it('Open the viewer on file click', function() { + cy.openFile('image2.jpg') + cy.get('body > .viewer').should('be.visible') + }) + + it('Does not see a loading animation', function() { + cy.get('body > .viewer', { timeout: 10000 }) + .should('be.visible') + .and('have.class', 'modal-mask') + .and('not.have.class', 'icon-loading') + }) + + it('See the title on the viewer header', function() { + cy.get('body > .viewer .modal-name').should('contain', 'image2.jpg') + }) + + it('Should have rendered the previous video and the next image', function() { + // There are buttons to navigate to the previous and next image + cy.get('body > .viewer button.prev').should('be.visible') + cy.get('body > .viewer button.next').should('be.visible') + // The previous and the next image + cy.get('body > .viewer .modal-container img').should('have.length', 2) + // The next video + cy.get('body > .viewer .modal-container video').should('have.length', 1) + }) + + it('Should make the previous and the next slides hidden for assistive technologies', function() { + // Cypress doesn't respect aria-hidden in should.be.visible + cy.get('body > .viewer .modal-container .viewer__file:not(.viewer__file--active) video') + .parents('[aria-hidden="true"]') + .should('exist') + cy.get('body > .viewer .modal-container .viewer__file:not(.viewer__file--active) video') + .parents('[inert]') + .should('exist') + cy.get('body > .viewer .modal-container img.viewer__file:not(.viewer__file--active)') + .parents('[aria-hidden="true"]') + .should('exist') + cy.get('body > .viewer .modal-container img.viewer__file:not(.viewer__file--active)') + .parents('[inert]') + .should('exist') + }) + + it('Should make vido controls on the next slide not focusable', function() { + cy.get('body > .viewer .modal-container .viewer__file:not(.viewer__file--active):has(video) button') + .first() + .focus() + cy.get('body > .viewer .modal-container .viewer__file:not(.viewer__file--active):has(video) button') + .first() + .should('not.have.focus') + }) +})