chore: Move a11y violation tests to Playwright (#30293)

apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.spec.tsx

-import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { defaultFeaturesPreview } from '@rocket.chat/ui-client';
-import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-
-import AccountFeaturePreviewPage from './AccountFeaturePreviewPage';
-
-expect.extend(toHaveNoViolations);
-
-it('should have no a11y violations', async () => {
-	const { container } = render(<AccountFeaturePreviewPage />, {
-		wrapper: mockAppRoot()
-			.withSetting('Accounts_AllowFeaturePreview', true)
-			.withUserPreference('featurePreview', defaultFeaturesPreview)
-			.withEndpoint('POST', '/v1/users.setPreferences', () => ({
-				user: {
-					_id: 'userId',
-					settings: {
-						profile: {},
-						preferences: {},
-					},
-				},
-			}))
-			.build(),
-	});
-
-	const results = await axe(container);
-	expect(results).toHaveNoViolations();
-});

apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.spec.tsx

-import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-
-import OmnichannelPreferencesPage from './OmnichannelPreferencesPage';
-
-expect.extend(toHaveNoViolations);
-
-it('should have no a11y violations', async () => {
-	const { container } = render(<OmnichannelPreferencesPage />, {
-		wrapper: mockAppRoot()
-			.withMethod('license:getModules', () => ['livechat-enterprise'])
-			.build(),
-	});
-
-	const results = await axe(container);
-	expect(results).toHaveNoViolations();
-});

apps/meteor/client/views/admin/mailer/MailerPage.spec.tsx

-import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-
-import MailerPage from './MailerPage';
-
-expect.extend(toHaveNoViolations);
-
-it('should have no a11y violations', async () => {
-	const { container } = render(<MailerPage />, {
-		wrapper: mockAppRoot().build(),
-	});
-
-	const results = await axe(container);
-	expect(results).toHaveNoViolations();
-});

apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.spec.tsx

-import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import React from 'react';
-
-import CurrentChatsPage from './CurrentChatsPage';
-
-expect.extend(toHaveNoViolations);
-
-it('should have no a11y violations', async () => {
-	const { container } = render(<CurrentChatsPage onRowClick={() => undefined} />, {
-		wrapper: mockAppRoot().build(),
-	});
-
-	const results = await axe(container);
-	expect(results).toHaveNoViolations();
-});

apps/meteor/package.json

@@ -63,6 +63,7 @@
 		"email": "support@rocket.chat"
 	},
 	"devDependencies": {
+		"@axe-core/playwright": "^4.7.3",
 		"@babel/core": "~7.22.9",
 		"@babel/eslint-parser": "~7.22.9",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "~7.18.6",
@@ -115,7 +116,6 @@
 		"@types/he": "^1.1.2",
 		"@types/i18next-sprintf-postprocessor": "^0.2.0",
 		"@types/imap": "^0.8.37",
-		"@types/jest-axe": "^3.5.5",
 		"@types/jsdom": "^16.2.15",
 		"@types/jsdom-global": "^3.0.4",
 		"@types/jsrsasign": "^10.5.8",
@@ -183,7 +183,6 @@
 		"fast-glob": "^3.2.12",
 		"i18next": "~23.4.5",
 		"jest": "~29.6.1",
-		"jest-axe": "^8.0.0",
 		"jsdom-global": "^3.0.2",
 		"mocha": "^9.2.2",
 		"nyc": "^15.1.0",

apps/meteor/tests/e2e/settings-account-profile.spec.ts → apps/meteor/tests/e2e/account-profile.spec.ts

@@ -15,28 +15,53 @@ test.describe.serial('settings-account-profile', () => {
 	test.beforeEach(async ({ page }) => {
 		poHomeChannel = new HomeChannel(page);
 		poAccountProfile = new AccountProfile(page);
-
-		await page.goto('/account/profile');
 	});
 
 	// FIXME: solve test intermitencies
-	test.skip('expect update profile with new name/username', async () => {
-		const newName = faker.person.fullName();
-		const newUsername = faker.internet.userName(newName);
-
-		await poAccountProfile.inputName.fill(newName);
-		await poAccountProfile.inputUsername.fill(newUsername);
-		await poAccountProfile.btnSubmit.click();
-		await poAccountProfile.btnClose.click();
-		await poHomeChannel.sidenav.openChat('general');
-		await poHomeChannel.content.sendMessage('any_message');
-
-		await expect(poHomeChannel.content.lastUserMessageNotSequential).toContainText(newUsername);
-
-		await poHomeChannel.content.lastUserMessageNotSequential.locator('figure').click();
-		await poHomeChannel.content.linkUserCard.click();
-
-		await expect(poHomeChannel.tabs.userInfoUsername).toHaveText(newUsername);
+	test.describe('Profile', () => {
+		test.beforeEach(async ({ page }) => {
+			await page.goto('/account/profile');
+		})
+
+		test.skip('expect update profile with new name/username', async () => {
+			const newName = faker.person.fullName();
+			const newUsername = faker.internet.userName({ firstName: newName });
+	
+			await poAccountProfile.inputName.fill(newName);
+			await poAccountProfile.inputUsername.fill(newUsername);
+			await poAccountProfile.btnSubmit.click();
+			await poAccountProfile.btnClose.click();
+			await poHomeChannel.sidenav.openChat('general');
+			await poHomeChannel.content.sendMessage('any_message');
+	
+			await expect(poHomeChannel.content.lastUserMessageNotSequential).toContainText(newUsername);
+	
+			await poHomeChannel.content.lastUserMessageNotSequential.locator('figure').click();
+			await poHomeChannel.content.linkUserCard.click();
+	
+			await expect(poHomeChannel.tabs.userInfoUsername).toHaveText(newUsername);
+		})
+		
+		test('change avatar', async ({ page }) => {	
+			await test.step('expect change avatar image by upload', async () => {
+				await poAccountProfile.inputImageFile.setInputFiles('./tests/e2e/fixtures/files/test-image.jpeg');
+	
+				await poAccountProfile.btnSubmit.click();
+				await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
+			});
+	
+			await test.step('expect to close toastbar', async () => {
+				await page.locator('.rcx-toastbar.rcx-toastbar--success').first().click();
+			});
+	
+			await test.step('expect set image from url', async () => {
+				await poAccountProfile.inputAvatarLink.fill('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');
+				await poAccountProfile.btnSetAvatarLink.click();
+	
+				await poAccountProfile.btnSubmit.click();
+				await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
+			});
+		});
 	});
 
 	test('Personal Access Tokens', async ({ page }) => {
@@ -76,26 +101,32 @@ test.describe.serial('settings-account-profile', () => {
 		});
 	});
 
-	test('change avatar', async ({ page }) => {
-		await page.goto('/account/profile');
+	test.describe('Omnichannel', () => {
+		test('should not have any accessibility violations', async ({ page, makeAxeBuilder }) => {
+			await page.goto('/account/omnichannel');
 
-		await test.step('expect change avatar image by upload', async () => {
-			await poAccountProfile.inputImageFile.setInputFiles('./tests/e2e/fixtures/files/test-image.jpeg');
+			const results = await makeAxeBuilder().analyze();
+			expect(results.violations).toEqual([]);
+		})
+	})
 
-			await poAccountProfile.btnSubmit.click();
-			await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
-		});
+	test.describe('Feature Preview', () => {
+		test('should not have any accessibility violations', async ({ page, makeAxeBuilder }) => {
+			await page.goto('/account/feature-preview');
 
-		await test.step('expect to close toastbar', async () => {
-			await page.locator('.rcx-toastbar.rcx-toastbar--success').first().click();
-		});
+			const results = await makeAxeBuilder().analyze();
+			expect(results.violations).toEqual([]);
+		})
+	})
 
-		await test.step('expect set image from url', async () => {
-			await poAccountProfile.inputAvatarLink.fill('https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50');
-			await poAccountProfile.btnSetAvatarLink.click();
+	test.describe('Accessibility & Appearance', () => {
+		test('should not have any accessibility violations', async ({ page, makeAxeBuilder }) => {
+			await page.goto('/account/accessibility-and-appearance');
 
-			await poAccountProfile.btnSubmit.click();
-			await expect(page.locator('.rcx-toastbar.rcx-toastbar--success').first()).toBeVisible();
-		});
-	});
+			const results = await makeAxeBuilder().analyze();
+			expect(results.violations).toEqual([]);
+		})
+	})
 });
+
+

apps/meteor/tests/e2e/administration.spec.ts

@@ -78,6 +78,17 @@ test.describe.parallel('administration', () => {
 		});
 	});
 
+	test.describe('Mailer', () => {
+		test.beforeEach(async ({ page }) => {
+			await page.goto('/admin/mailer');
+		})
+
+		test('should not have any accessibility violations', async ({ makeAxeBuilder }) => {
+			const results = await makeAxeBuilder().analyze();
+			expect(results.violations).toEqual([]);
+		})
+	})
+
 	test.describe('Settings', () => {
 		test.describe('General', () => {
 			test.beforeEach(async ({ page }) => {

apps/meteor/tests/e2e/omnichannel/omnichannel-current-chats.spec.ts

+import { Users } from '../fixtures/userStates';
+import { test, expect } from '../utils/test';
+
+test.use({ storageState: Users.admin.state });
+
+test.describe.parallel('Omnichannel current chats', () => {
+  test.beforeEach(async ({ page }) =>{
+    await page.goto('/omnichannel/current')
+  })
+
+	test.skip('should not have any accessibility violations', async ({ makeAxeBuilder }) => {
+    const results = await makeAxeBuilder().analyze();
+    expect(results.violations).toEqual([]);
+  })
+})

apps/meteor/tests/e2e/utils/test.ts

 import * as fs from 'fs';
 import * as path from 'path';
 
+import AxeBuilder from '@axe-core/playwright';
 import type { Locator, APIResponse, APIRequestContext } from '@playwright/test';
 import { test as baseTest, request as baseRequest } from '@playwright/test';
 import { v4 as uuid } from 'uuid';
@@ -21,6 +22,7 @@ export type BaseTest = {
 		put(uri: string, data: AnyObj, prefix?: string): Promise<APIResponse>;
 		delete(uri: string, params?: AnyObj, prefix?: string): Promise<APIResponse>;
 	};
+	makeAxeBuilder: () => AxeBuilder;
 };
 declare global {
 	// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -112,6 +114,12 @@ export const test = baseTest.extend<BaseTest>({
 			},
 		});
 	},
+	makeAxeBuilder: async ({ page }, use) => {
+		const SELECT_KNOW_ISSUES = ['aria-hidden-focus', 'nested-interactive']
+		
+    const makeAxeBuilder = () => new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).disableRules(['document-title', ...SELECT_KNOW_ISSUES]);
+    await use(makeAxeBuilder);
+  }
 });
 
 export const { expect } = test;

yarn.lock

@@ -955,6 +955,17 @@ __metadata:
   languageName: node
   linkType: hard
+"@axe-core/playwright@npm:^4.7.3":
+  version: 4.7.3
+  resolution: "@axe-core/playwright@npm:4.7.3"
+  dependencies:
+    axe-core: ^4.7.0
+  peerDependencies:
+    playwright-core: ">= 1.0.0"
+  checksum: c913cf6a816af283fc733411013460656213cf6c0efffcc36db1fd2984ffac3d780efd0a9aabd3b41ce78e2a536fee9ba5436d19311f660067e4c3560677b115
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:7.12.11":
   version: 7.12.11
   resolution: "@babel/code-frame@npm:7.12.11"
@@ -8540,6 +8551,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@rocket.chat/meteor@workspace:apps/meteor"
   dependencies:
+    "@axe-core/playwright": ^4.7.3
     "@babel/core": ~7.22.9
     "@babel/eslint-parser": ~7.22.9
     "@babel/plugin-proposal-nullish-coalescing-operator": ~7.18.6
@@ -8658,7 +8670,6 @@ __metadata:
     "@types/he": ^1.1.2
     "@types/i18next-sprintf-postprocessor": ^0.2.0
     "@types/imap": ^0.8.37
-    "@types/jest-axe": ^3.5.5
     "@types/jsdom": ^16.2.15
     "@types/jsdom-global": ^3.0.4
     "@types/jsrsasign": ^10.5.8
@@ -8796,7 +8807,6 @@ __metadata:
     ip-range-check: ^0.2.0
     is-svg: ^4.3.2
     jest: ~29.6.1
-    jest-axe: ^8.0.0
     jquery: ^3.6.0
     jschardet: ^3.0.0
     jsdom: ^16.7.0
@@ -12338,16 +12348,6 @@ __metadata:
   languageName: node
   linkType: hard
-"@types/jest-axe@npm:^3.5.5":
-  version: 3.5.5
-  resolution: "@types/jest-axe@npm:3.5.5"
-  dependencies:
-    "@types/jest": "*"
-    axe-core: ^3.5.5
-  checksum: 535038968034fe80fb466dcd5939ea5d9e9adb3ef00852ded3e41c62536c05137eb30bcbfd608142d2bc571d65c20b8e3563181674fb48594c2662d340bb4da5
-  languageName: node
-  linkType: hard
-
 "@types/jest@npm:*, @types/jest@npm:~29.5.3":
   version: 29.5.3
   resolution: "@types/jest@npm:29.5.3"
@@ -15075,20 +15075,13 @@ __metadata:
   languageName: node
   linkType: hard
-"axe-core@npm:4.7.2, axe-core@npm:^4.2.0":
+"axe-core@npm:^4.2.0, axe-core@npm:^4.7.0":
   version: 4.7.2
   resolution: "axe-core@npm:4.7.2"
   checksum: 5d86fa0f45213b0e54cbb5d713ce885c4a8fe3a72b92dd915a47aa396d6fd149c4a87fec53aa978511f6d941402256cfeb26f2db35129e370f25a453c688655a
   languageName: node
   linkType: hard
-"axe-core@npm:^3.5.5":
-  version: 3.5.6
-  resolution: "axe-core@npm:3.5.6"
-  checksum: 000777d2b6bf1f390beb1fb4b8714ed9127797c021c345b032db0c144e07320dbbe8cb0bcb7688b90b79cfbd3cdc1f27a4dc857804e3c61d7e0defb34deeb830
-  languageName: node
-  linkType: hard
-
 "axios@npm:^0.21.0, axios@npm:^0.21.1":
   version: 0.21.4
   resolution: "axios@npm:0.21.4"
@@ -16707,16 +16700,6 @@ __metadata:
   languageName: node
   linkType: hard
-"chalk@npm:4.1.2, chalk@npm:^4, chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "chalk@npm:4.1.2"
-  dependencies:
-    ansi-styles: ^4.1.0
-    supports-color: ^7.1.0
-  checksum: fe75c9d5c76a7a98d45495b91b2172fa3b7a09e0cc9370e5c8feb1c567b85c4288e2b3fded7cfdd7359ac28d6b3844feb8b82b8686842e93d23c827c417e83fc
-  languageName: node
-  linkType: hard
-
 "chalk@npm:^1.0.0":
   version: 1.1.3
   resolution: "chalk@npm:1.1.3"
@@ -16730,6 +16713,16 @@ __metadata:
   languageName: node
   linkType: hard
+"chalk@npm:^4, chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "chalk@npm:4.1.2"
+  dependencies:
+    ansi-styles: ^4.1.0
+    supports-color: ^7.1.0
+  checksum: fe75c9d5c76a7a98d45495b91b2172fa3b7a09e0cc9370e5c8feb1c567b85c4288e2b3fded7cfdd7359ac28d6b3844feb8b82b8686842e93d23c827c417e83fc
+  languageName: node
+  linkType: hard
+
 "change-case@npm:^4.1.2":
   version: 4.1.2
   resolution: "change-case@npm:4.1.2"
@@ -25496,18 +25489,6 @@ __metadata:
   languageName: node
   linkType: hard
-"jest-axe@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "jest-axe@npm:8.0.0"
-  dependencies:
-    axe-core: 4.7.2
-    chalk: 4.1.2
-    jest-matcher-utils: 29.2.2
-    lodash.merge: 4.6.2
-  checksum: 895501afa6ac6c49e5e45ee1cd4a8e923589f220f6f950a8f5366cc3f3636aaee9c9d501a469f9658185e7a5928b59a337d4b4f1c7bb3f4b3b5ba8b3811c9f15
-  languageName: node
-  linkType: hard
-
 "jest-changed-files@npm:^29.5.0":
   version: 29.5.0
   resolution: "jest-changed-files@npm:29.5.0"
@@ -25623,7 +25604,7 @@ __metadata:
   languageName: node
   linkType: hard
-"jest-diff@npm:^29.2.1, jest-diff@npm:^29.6.1":
+"jest-diff@npm:^29.6.1":
   version: 29.6.2
   resolution: "jest-diff@npm:29.6.2"
   dependencies:
@@ -25709,7 +25690,7 @@ __metadata:
   languageName: node
   linkType: hard
-"jest-get-type@npm:^29.2.0, jest-get-type@npm:^29.4.3":
+"jest-get-type@npm:^29.4.3":
   version: 29.4.3
   resolution: "jest-get-type@npm:29.4.3"
   checksum: 6ac7f2dde1c65e292e4355b6c63b3a4897d7e92cb4c8afcf6d397f2682f8080e094c8b0b68205a74d269882ec06bf696a9de6cd3e1b7333531e5ed7b112605ce
@@ -25774,18 +25755,6 @@ __metadata:
   languageName: node
   linkType: hard
-"jest-matcher-utils@npm:29.2.2":
-  version: 29.2.2
-  resolution: "jest-matcher-utils@npm:29.2.2"
-  dependencies:
-    chalk: ^4.0.0
-    jest-diff: ^29.2.1
-    jest-get-type: ^29.2.0
-    pretty-format: ^29.2.1
-  checksum: 97ef2638ab826c25f84bfedea231cef091820ae0876ba316922da81145e950d2b9d2057d3645813b5ee880bb975ed4f22e228dda5d0d26a20715e575b675357d
-  languageName: node
-  linkType: hard
-
 "jest-matcher-utils@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-matcher-utils@npm:29.6.1"
@@ -27144,7 +27113,7 @@ __metadata:
   languageName: node
   linkType: hard
-"lodash.merge@npm:4.6.2, lodash.merge@npm:^4.6.2":
+"lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
   checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005
@@ -32083,7 +32052,7 @@ __metadata:
   languageName: node
   linkType: hard
-"pretty-format@npm:^29.0.0, pretty-format@npm:^29.2.1, pretty-format@npm:^29.6.1, pretty-format@npm:^29.6.2":
+"pretty-format@npm:^29.0.0, pretty-format@npm:^29.6.1, pretty-format@npm:^29.6.2":
   version: 29.6.2
   resolution: "pretty-format@npm:29.6.2"
   dependencies: