imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Spike AXE A11Y testing in Cypress (#9111)

Browse source 
* Spike AXE A11Y testing in Cypress

* Fix NewRoomIntro breaking html/aria list rules

* Fix HeaderButtons breaking aria role semantics rules

* missing type

* Switch left panel from aside to nav and include space panel

* Give the page a main heading of the room name when viewing a room

* Use header landmark on RoomHeader

* Improve aria attributes on composer when autocomplete is closed

* Fix aria-owns on RoomHeader

* Give Spinner an aria role

* Give server picker help button an aria label

* Improve auth aria attributes and semantics

* Improve heading semantics in use case selection screen

* Fix autocomplete attribute to be valid

* Fix heading semantics on login page

* Improve Cypress axe testing

* Add axe tests

* Stop synapse after the timeline tests

* Await spinners to fade before percy snapshotting timeline tests

* Improve naming of plugin

* Update snapshots

* Fix accidental heading change

* Fix double synapse stoppage

* Fix Cypress timeline avatar assertions to be DPI agnostic

* Fix aria attributes on date separators

* delint

* Update snapshots

* Revert style change

* Skip redundant call
This commit is contained in:
Michael Telatynski 2022-08-01 08:31:14 +01:00 • committed by GitHub
parent 05cc5f62dd
commit d5db131eef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 244 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

9
cypress/e2e/1-register/register.spec.ts
View file

@ -33,9 +33,12 @@ describe("Registration", () => {
});
it("registers an account and lands on the home screen", () => {
cy.injectAxe();
cy.get(".mx_ServerPicker_change", { timeout: 15000 }).click();
cy.get(".mx_ServerPickerDialog_continue").should("be.visible");
cy.percySnapshot("Server Picker");
cy.checkA11y();
cy.get(".mx_ServerPickerDialog_otherHomeserver").type(synapse.baseUrl);
cy.get(".mx_ServerPickerDialog_continue").click();
@ -46,6 +49,7 @@ describe("Registration", () => {
// Hide the server text as it contains the randomly allocated Synapse port
const percyCSS = ".mx_ServerPicker_server { visibility: hidden !important; }";
cy.percySnapshot("Registration", { percyCSS });
cy.checkA11y();
cy.get("#mx_RegistrationForm_username").type("alice");
cy.get("#mx_RegistrationForm_password").type("totally a great password");
@ -55,16 +59,21 @@ describe("Registration", () => {
cy.get(".mx_RegistrationEmailPromptDialog").should("be.visible");
cy.percySnapshot("Registration email prompt", { percyCSS });
cy.checkA11y();
cy.get(".mx_RegistrationEmailPromptDialog button.mx_Dialog_primary").click();
cy.stopMeasuring("create-account");
cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy").should("be.visible");
cy.percySnapshot("Registration terms prompt", { percyCSS });
cy.checkA11y();
cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy input").click();
cy.startMeasuring("from-submit-to-home");
cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
cy.get(".mx_UseCaseSelection_skip").should("exist");
cy.percySnapshot("Use-case selection screen");
cy.checkA11y();
cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
cy.url().should('contain', '/#/home');

30
cypress/e2e/14-timeline/timeline.spec.ts
View file

@ -20,7 +20,6 @@ import { MessageEvent } from "matrix-events-sdk";
import type { ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
import type { EventType } from "matrix-js-sdk/src/@types/event";
import type { MatrixClient } from "matrix-js-sdk/src/client";
import { SynapseInstance } from "../../plugins/synapsedocker";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { Layout } from "../../../src/settings/enums/Layout";
@ -46,10 +45,14 @@ const expectDisplayName = (e: JQuery<HTMLElement>, displayName: string): void =>
};
const expectAvatar = (e: JQuery<HTMLElement>, avatarUrl: string): void => {
cy.getClient().then((cli: MatrixClient) => {
cy.all([
cy.window({ log: false }),
cy.getClient(),
]).then(([win, cli]) => {
const size = AVATAR_SIZE * win.devicePixelRatio;
expect(e.find(".mx_BaseAvatar_image").attr("src")).to.equal(
// eslint-disable-next-line no-restricted-properties
cli.mxcUrlToHttp(avatarUrl, AVATAR_SIZE, AVATAR_SIZE, AVATAR_RESIZE_METHOD),
cli.mxcUrlToHttp(avatarUrl, size, size, AVATAR_RESIZE_METHOD),
);
});
};
@ -75,15 +78,17 @@ describe("Timeline", () => {
cy.startSynapse("default").then(data => {
synapse = data;
cy.initTestUser(synapse, OLD_NAME).then(() =>
cy.window({ log: false }).then(() => {
cy.createRoom({ name: ROOM_NAME }).then(_room1Id => {
roomId = _room1Id;
});
cy.createRoom({ name: ROOM_NAME }).then(_room1Id => {
roomId = _room1Id;
}),
);
});
});
afterEach(() => {
cy.stopSynapse(synapse);
});
describe("useOnlyCurrentProfiles", () => {
beforeEach(() => {
cy.uploadContent(OLD_AVATAR).then((url) => {
@ -95,10 +100,6 @@ describe("Timeline", () => {
});
});
afterEach(() => {
cy.stopSynapse(synapse);
});
it("should show historical profiles if disabled", () => {
cy.setSettingValue("useOnlyCurrentProfiles", null, SettingLevel.ACCOUNT, false);
sendEvent(roomId);
@ -146,11 +147,16 @@ describe("Timeline", () => {
});
describe("message displaying", () => {
beforeEach(() => {
cy.injectAxe();
});
it("should create and configure a room on IRC layout", () => {
cy.visit("/#/room/" + roomId);
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] " +
".mx_GenericEventListSummary_summary", "created and configured the room.");
cy.get(".mx_Spinner").should("not.exist");
cy.percySnapshot("Configured room on IRC layout");
});
@ -174,10 +180,12 @@ describe("Timeline", () => {
.should('have.css', "margin-inline-start", "104px")
.should('have.css', "inset-inline-start", "0px");
cy.get(".mx_Spinner").should("not.exist");
// Exclude timestamp from snapshot
const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp "
+ "{ visibility: hidden !important; }";
cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS });
cy.checkA11y();
});
it("should set inline start padding to a hidden event line", () => {

3
cypress/e2e/2-login/login.spec.ts
View file

@ -41,8 +41,11 @@ describe("Login", () => {
});
it("logs in with an existing account and lands on the home screen", () => {
cy.injectAxe();
cy.get("#mx_LoginForm_username", { timeout: 15000 }).should("be.visible");
cy.percySnapshot("Login");
cy.checkA11y();
cy.get(".mx_ServerPicker_change").click();
cy.get(".mx_ServerPickerDialog_otherHomeserver").type(synapse.baseUrl);