Merge pull request #1908 from IBMa/test-auto

chore(extension): Create a Cucumber / Puppeteer test environment for the extension
IBMa · May 17, 2024 · dadf6d2 · dadf6d2
2 parents f048e79 + b0da238
commit dadf6d2
Show file tree

Hide file tree

Showing 46 changed files with 5,944 additions and 309 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -472,6 +472,8 @@ jobs:
       working-directory: report-react
     - run: npm install
       working-directory: accessibility-checker-extension
+    - run: npm install
+      working-directory: accessibility-checker-extension/test
     - run: npm install
       working-directory: rule-server
     - run: npm run build
@@ -484,6 +486,9 @@ jobs:
       working-directory: accessibility-checker-extension
     - run: npm run package:browser
       working-directory: accessibility-checker-extension
+    - name: UI Tests
+      run: npm test
+      working-directory: accessibility-checker-extension/test
     - name: Upload packed extension
       uses: actions/upload-artifact@v1
       with:
@@ -498,9 +503,6 @@ jobs:
       with:
         name: accessibility-checker-extension for Firefox
         path: accessibility-checker-extension/package/accessibility-checker-extension.zip
-    - name: Jest tests
-      run: npm test
-      working-directory: accessibility-checker-extension
 
   rule-deploy:
     runs-on: ubuntu-22.04

diff --git a/accessibility-checker-extension/package.json b/accessibility-checker-extension/package.json
@@ -12,8 +12,7 @@
 		"build:watch:local": "node preprocess && npm run build:report && cross-env NODE_ENV=watch_local SASS_PATH=node_modules:src:node_modules/carbon-components/scss/globals/scss/vendor webpack --mode production",
 		"clean": "shx rm -rf ./dist && shx rm -rf ./package",
 		"clean:all": "shx rm -rf ./dist && shx rm -rf ./coverage && shx rm -rf ./package && shx rm -rf ./node_modules",
-		"test": "jest",
-		"test:coverage": "jest --collect-coverage",
+		"test": "cd test && npm test",
 		"package:browser": "npm run build:prod && shx mkdir -p package && cd dist && zip -Zd -r ../package/accessibility-checker-extension.zip ."
 	},
 	"license": "Apache-2.0",
@@ -33,10 +32,8 @@
 		"webext-redux": "^2.1.9"
 	},
 	"devDependencies": {
-		"@jest/globals": "^29.7.0",
 		"@svgr/webpack": "^6.1.2",
 		"@types/chrome": "^0.0.171",
-		"@types/jest": "^29.5.1",
 		"@types/markdown-to-jsx": "^7.0.0",
 		"@types/node": "^18.15.3",
 		"@types/react": "17.0.37",
@@ -51,8 +48,6 @@
 		"css-loader": "^6.5.1",
 		"html-webpack-plugin": "^5.5.0",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "^29.7.0",
-		"jest-environment-jsdom": "^29.7.0",
 		"mini-css-extract-plugin": "^2.4.5",
 		"react-test-renderer": "^17.0.2",
 		"resize-observer-polyfill": "^1.5.1",
@@ -61,7 +56,6 @@
 		"shx": "^0.3.3",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.7",
-		"ts-jest": "^29.1.0",
 		"ts-loader": "^9.2.6",
 		"tslint": "^5.20.1",
 		"typescript": "^4.5.4",

diff --git a/accessibility-checker-extension/src/html/devtoolsElements.html b/accessibility-checker-extension/src/html/devtoolsElements.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
 	<head> 
 		<meta charset="UTF-8">
 		<title>IBM Accessibility Checker Extension: Assessment</title>

diff --git a/accessibility-checker-extension/src/html/devtoolsMain.html b/accessibility-checker-extension/src/html/devtoolsMain.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="height:100% !important;">
+<html style="height:100% !important;" lang="en-US">
 	<head> 
 		<meta charset="UTF-8">
 		<title>IBM Accessibility Checker Extension: Checker</title>

diff --git a/accessibility-checker-extension/src/ts/background/backgroundController.ts b/accessibility-checker-extension/src/ts/background/backgroundController.ts
@@ -116,7 +116,7 @@ class BackgroundController extends Controller {
         this.addEventListener(listener, `BG_onTabUpdate`);
     }
 
-    public async getTabInfo(tabId?: number) : Promise<chrome.tabs.Tab & { canScan: boolean }> {
+    public async getTabInfo(tabId: number) : Promise<chrome.tabs.Tab & { canScan: boolean }> {
         return this.hook("getTabInfo", tabId, async () => {
             let tab = await new Promise<chrome.tabs.Tab>(async (resolve2) => {
                 let manifest = chrome.runtime.getManifest();
@@ -317,12 +317,12 @@ class BackgroundController extends Controller {
     /**
      * Get the rulesets for the currently loaded engine
      */
-    public async getRulesets(senderTabId: number) : Promise<IRuleset[]> {
-        return this.hook("getRulesets", senderTabId, async () => {
-            await this.initTab(senderTabId!);
+    public async getRulesets(contentTabId: number) : Promise<IRuleset[]> {
+        return this.hook("getRulesets", contentTabId, async () => {
+            await this.initTab(contentTabId!);
             // let isLoaded = await this.isEngineLoaded(senderTabId);
             // isLoaded && console.log("Engine loaded", senderTabId) || console.log("Engine not loaded", senderTabId);
-            return await myExecuteScript2(senderTabId, () => {
+            return await myExecuteScript2(contentTabId, () => {
                 let checker = new (<any>window).aceIBMa.Checker();
                 return checker.rulesets;
             });
@@ -336,15 +336,16 @@ class BackgroundController extends Controller {
     }
     ///// Scan related functions /////////////////////////////////////////
 
-    public async requestScan(senderTabId: number) {
-        return this.hook("requestScan", senderTabId, async () => {
-            getDevtoolsController(false, "remote", senderTabId).setScanningState("initializing");
-            await this.initTab(senderTabId!);
+    public async requestScan(tabIds: {toolTabId: number, contentTabId: number}) {
+        return this.hook("requestScan", tabIds, async () => {
+            const { toolTabId, contentTabId } = tabIds;
+            getDevtoolsController(toolTabId, false, "remote").setScanningState("initializing");
+            await this.initTab(contentTabId!);
             // We want this to execute after the message returns
             (async () => {
                 let settings = await this.getSettings();
-                getDevtoolsController(false, "remote", senderTabId).setScanningState("running");
-                let report : IReport = await myExecuteScript2(senderTabId, (settings: ISettings) => {
+                getDevtoolsController(toolTabId, false, "remote").setScanningState("running");
+                let report : IReport = await myExecuteScript2(contentTabId, (settings: ISettings) => {
                     let checker = new (<any>window).aceIBMa.Checker();
                     if (Object.keys(checker.engine.nlsMap).length === 0) {
                         // Some problem grabbing messages for given locale. Let's try to get en-US data out of the engine
@@ -415,7 +416,7 @@ class BackgroundController extends Controller {
                 let browser = (navigator.userAgent.match(/\) ([^)]*)$/) || ["", "Unknown"])[1];
                 this.metrics.profileV2(report.totalTime, browser, settings.selected_ruleset.id);
                 this.metrics.sendLogsV2();
-                getDevtoolsController(false, "remote", senderTabId).setScanningState("processing");
+                getDevtoolsController(toolTabId, false, "remote").setScanningState("processing");
                 if (report) {
                     for (const result of report.results) {
                         if (result.ruleTime > 50) {
@@ -459,8 +460,8 @@ class BackgroundController extends Controller {
                     report.counts = counts;
                 }
 
-                getDevtoolsController(false, "remote", senderTabId).setReport(report);
-                getDevtoolsController(false, "remote", senderTabId).setScanningState("idle");
+                getDevtoolsController(toolTabId, false, "remote").setReport(report);
+                getDevtoolsController(toolTabId, false, "remote").setScanningState("idle");
             })();
             return {};
         });

diff --git a/accessibility-checker-extension/src/ts/contentScripts/TabStopHighlight.ts b/accessibility-checker-extension/src/ts/contentScripts/TabStopHighlight.ts
@@ -229,7 +229,7 @@ export default class TabStopHighlight {
                     let issue = this.getIssueByXpath(elementXpath,regularTabstops);
                     if (issue) {
                         let tabId = await getBGController().getTabId();
-                        let devtoolsController = getDevtoolsController(true, "remote", tabId);
+                        let devtoolsController = getDevtoolsController(tabId, true, "remote");
                         await devtoolsController.setSelectedIssue(null);
                         if (await devtoolsController.getActivePanel() === "elements") {
                             await devtoolsController.inspectPath(elementXpath,element);
@@ -247,7 +247,7 @@ export default class TabStopHighlight {
                     let issue = this.getIssueByXpath(elementXpath,tabStopsErrors);
                     if (issue) {
                         let tabId = await getBGController().getTabId();
-                        let devtoolsController = getDevtoolsController(true, "remote", tabId);
+                        let devtoolsController = getDevtoolsController(tabId, true, "remote");
                         await devtoolsController.setSelectedIssue(issue);
                         if (await devtoolsController.getActivePanel() === "elements") {
                             await devtoolsController.inspectPath(elementXpath,element);

diff --git a/accessibility-checker-extension/src/ts/contentScripts/viewInspect.ts b/accessibility-checker-extension/src/ts/contentScripts/viewInspect.ts
@@ -24,7 +24,7 @@ type Overlays = { elem: HTMLDivElement, info: HTMLDivElement };
 
 (async () => {
     let myTabId = await getBGController().getTabId()!;
-    let devtoolsController = getDevtoolsController(true, "remote", myTabId);
+    let devtoolsController = getDevtoolsController(myTabId, true);
 
     function setProps<T>(objToModify: T, objPropsToSet: Partial<T>) {
         for (const key in objPropsToSet) {

diff --git a/accessibility-checker-extension/src/ts/contentScripts/viewKCM.ts b/accessibility-checker-extension/src/ts/contentScripts/viewKCM.ts
@@ -28,7 +28,7 @@ let myKCMState = false;
 (async() => {
     let settings = await bgController.getSettings();
     let myTabId = await bgController.getTabId()!;
-    let devtoolsController = getDevtoolsController(true, "remote", myTabId);
+    let devtoolsController = getDevtoolsController(myTabId, true);
 
     async function refreshDrawing() {
         // if viewState.kcm === true then scan has occurred and KCM button has been pushed
@@ -305,7 +305,7 @@ function deleteDrawing(classToRemove: string) {
 document.documentElement.addEventListener("keypress", async (evt: KeyboardEvent) => {
     if (evt.code === "KeyS" && evt.ctrlKey && evt.altKey) {
         let tabId = await bgController.getTabId();
-        bgController.requestScan(tabId);    
+        bgController.requestScan({ toolTabId: tabId, contentTabId: tabId });    
         evt.preventDefault();
         evt.stopPropagation();
     }

diff --git a/accessibility-checker-extension/src/ts/devtools/components/helpScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/helpScreen.tsx
@@ -19,6 +19,7 @@ import { Column, InlineLoading, Grid } from "@carbon/react";
 import { IIssue } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
 import { getBGController } from "../../background/backgroundController";
+import { getDevtoolsAppController } from "../devtoolsAppController";
 
 interface IHelpScreenState {
     issue: IIssue | null
@@ -38,13 +39,14 @@ export default class HelpScreen extends React.Component<IHelpScreenProps, IHelpS
         help2: null,
         loading: true
     }
-    private static devtoolsController = getDevtoolsController();
+    private devtoolsAppController = getDevtoolsAppController();
+    private devtoolsController = getDevtoolsController(this.devtoolsAppController.toolTabId);
 
     async componentDidMount(): Promise<void> {
-        HelpScreen.devtoolsController.addSelectedIssueListener(async (issue) => {
+        this.devtoolsController.addSelectedIssueListener(async (issue) => {
             this.setIssue(issue);
         });
-        let issue = await HelpScreen.devtoolsController.getSelectedIssue();
+        let issue = await this.devtoolsController.getSelectedIssue();
         this.setIssue(issue!);
     }