Add jest boilerplate, fix terser typeof issue (#1461)

IBMa · May 22, 2023 · 9743df7 · 9743df7
1 parent 2b1fcb2
commit 9743df7
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 8 deletions.
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/.gitignore b/accessibility-checker/boilerplates/jest-puppeteer-ts/.gitignore
@@ -0,0 +1 @@
+results
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/achecker.js b/accessibility-checker/boilerplates/jest-puppeteer-ts/achecker.js
@@ -0,0 +1,52 @@
+module.exports = {
+  // optional - Specify the rule archive
+  // Default: latest
+  // Run `npx aat archives` for a list of valid ruleArchive ids and policy ids
+  ruleArchive: 'latest',
+
+  // optional - Specify one or many policies to scan.
+  // Run `npx aat archives` for a list of valid ruleArchive ids and policy ids
+  policies: [ "IBM_Accessibility"],
+
+  // optional - Specify one or many violation levels on which to fail the test
+  //            i.e. If specified violation then the testcase will only fail if
+  //                 a violation is found during the scan.
+  // i.e. failLevels: ["violation"]
+  // i.e. failLevels: ["violation","potential violation"] or refer to below as a list
+  // Default: ["violation","potential violation"]
+  failLevels: [ "violation" ],
+
+  // optional - Specify one or many violation levels which should be reported
+  //            i.e. If specified violation then in the report it would only contain
+  //                 results which are level of violation.
+  // i.e. reportLevels: ["violation"]
+  // Valid values: violation, potentialviolation, recommendation, potentialrecommendation, manual
+  // Default: ["violation","potential violation"]
+  reportLevels: [
+      "violation",
+      "potentialviolation",
+      "recommendation",
+      "potentialrecommendation",
+      "manual"
+  ],
+
+  // Optional - Which type should the results be outputted to
+  // Valid values: json, csv
+  // Default: json
+  outputFormat: [ "json" ],
+
+  // Optional - Specify labels that you would like associated to your scan
+  //
+  // i.e.
+  //   label: ["Firefox","master","V12","Linux"]
+  // Default: N/A
+  label: [],
+
+  // optional - Where the scan results should be saved.
+  // Default: results
+  outputFolder: "results",
+
+  // optional - Where the baseline results should be loaded from
+  // Default: baselines
+  baselineFolder: "baselines",
+}
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/matchers/toBeAccessible.ts b/accessibility-checker/boilerplates/jest-puppeteer-ts/matchers/toBeAccessible.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { assertCompliance, getCompliance, stringifyResults } from "accessibility-checker";
+import { Page } from "puppeteer";
+
+async function toBeAccessible(node: Page) {
+  let results = await getCompliance(node, this.currentTestName.replace(/[ \\/]/g, "_"));
+  if (assertCompliance(results.report) === 0) {
+    return {
+      pass: true
+    }
+  } else {
+    return {
+      pass:false,
+      message: () => stringifyResults(results.report)
+    }
+  }
+}
+module.exports = toBeAccessible;
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/package.json b/accessibility-checker/boilerplates/jest-puppeteer-ts/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@ibma/eac-jest-boilerplate",
+  "version": "3.0.0",
+  "description": "Example usage of IBM Equal Access Checker with Jest, Puppeteer, and Typescript",
+  "scripts": {
+    "test": "jest test-ts/*.test.ts"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "setupFilesAfterEnv": [
+      "./setupAfterEnv.ts"
+    ],
+    "transformIgnorePatterns": [
+      "ace-node\\.js"
+    ]
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.5.0",
+    "@types/jest": "^29.5.1",
+    "accessibility-checker": "*",
+    "jest": "^29.5.0",
+    "puppeteer": "^20.2.1",
+    "ts-jest": "^29.1.0",
+    "typescript": "^4.1.5"
+  }
+}
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/sample/Hello.html b/accessibility-checker/boilerplates/jest-puppeteer-ts/sample/Hello.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html ng-app="helloApp" ng-controller="helloCtrl" lang='{{locale}}'>
+
+<head>
+    <title>Sample App</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
+    <script type="text/javascript" src="Hello.js"></script>
+</head>
+
+<body ng-cloak layout="column">
+    <md-toolbar layout="row" class="md-toolbar-tools" role="banner">
+        <h1>Sample App</h1>
+    </md-toolbar>
+
+    <div flex layout="row">
+
+        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp" role="navigation">
+            Sidenav
+        </md-sidenav>
+
+        <md-content flex id="content" role="main">
+            <a id="clickMe" ng-click="showCard = !showCard">Click Me</a>
+            <md-card ng-if="showCard">
+                <md-card-content>
+                    <h2>Card headline</h2>
+                    <p>Card content</p>
+                    <img src="hello.png" />
+                </md-card-content>
+                <md-card-footer>
+                    Card footer
+                </md-card-footer>
+            </md-card>
+        </md-content>
+
+
+    </div>
+    <div>
+
+    </div>
+
+</body>
+
+</html>
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/sample/Hello.js b/accessibility-checker/boilerplates/jest-puppeteer-ts/sample/Hello.js
@@ -0,0 +1,10 @@
+var app = angular.module("helloApp", ["ngMaterial","ngAria"], function config($ariaProvider) {
+    $ariaProvider.config({
+        bindRoleForClick: false
+    });
+});
+
+app.controller("helloCtrl", function ($scope) {
+    $scope.locale = "en-US";
+    $scope.test = 1+2;
+});
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/setupAfterEnv.ts b/accessibility-checker/boilerplates/jest-puppeteer-ts/setupAfterEnv.ts
@@ -0,0 +1,2 @@
+const toBeAccessible = require('./matchers/toBeAccessible');
+expect.extend({ toBeAccessible });
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/src/HelloWidget.js b/accessibility-checker/boilerplates/jest-puppeteer-ts/src/HelloWidget.js
@@ -0,0 +1,9 @@
+var React = require("react");
+
+var HelloWidget = React.createClass({
+    render: function () {
+        return "<div>Hello {this.props.name}</div>";
+    }
+});
+
+module.exports = HelloWidget;
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/test-ts/basic.test.ts b/accessibility-checker/boilerplates/jest-puppeteer-ts/test-ts/basic.test.ts
@@ -0,0 +1,61 @@
+'use strict';
+
+import {describe, expect, beforeAll, afterAll, test} from '@jest/globals';
+import { Browser, Page, launch } from 'puppeteer';
+
+let browser: Browser;
+beforeAll(async () => {
+    try {
+        browser = await launch({ headless: "new"});
+    } catch (e) {
+        console.log(e);
+    }
+    return Promise.resolve();
+});
+
+afterAll(async() => {
+    await browser.close();
+    return Promise.resolve();
+});
+
+// Describe this Suite of testscases, describe is a test Suite and 'it' is a testcase.
+describe('Altoro Mutual', () => {
+    let page: Page;
+    beforeAll(async () => {
+        page = await browser.newPage();
+        await page.goto('http://altoromutual.com/');
+    });
+
+    afterAll(async () => {
+        return page.close();
+    });
+
+    test('should be titled "Altoro Mutual"', async () => {
+        await expect(page.title()).resolves.toMatch('Altoro Mutual');
+    });
+
+    test ('should be accessible', async() => {
+        await (expect(page) as any).toBeAccessible();
+    })
+
+    describe('"Personal" page', () => {
+        beforeAll(async () => {
+            await page.click("#LinkHeader2");
+        });
+
+        test ('should be accessible', async() => {
+            await (expect(page) as any).toBeAccessible();
+        })
+    });
+
+    // describe('"Small Business" page', () => {
+    //     beforeAll(async () => {
+    //         await page.click("#LinkHeader3");
+    //     });
+
+    //     it ('should be accessible', async() => {
+    //         await expect(page).toBeAccessible();
+    //     })
+    // });
+});
+
diff --git a/accessibility-checker/boilerplates/jest-puppeteer-ts/tsconfig.json b/accessibility-checker/boilerplates/jest-puppeteer-ts/tsconfig.json
@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "declaration": true,
+        "allowJs": true,
+        "target": "ES6",
+        "module": "es2022",
+        "removeComments": false,
+        "noEmitOnError": true,
+        "sourceMap": true,
+        "moduleResolution": "node",
+        "alwaysStrict": true,
+        "experimentalDecorators": true,
+        // "module": "commonjs",
+        "outDir": "test",
+        "emitDecoratorMetadata": true,
+        "lib": [
+            "dom",
+            "es7"
+        ]
+    },
+    "include": [
+        "test-ts/**/*.ts",
+        "test-ts/**/*.js"
+    ],
+    "exclude": [
+        "node_modules",
+        "coverage",
+        ".nyc_output"
+    ]
+}
diff --git a/accessibility-checker/gulp/gulpfile.mjs b/accessibility-checker/gulp/gulpfile.mjs
@@ -38,8 +38,10 @@ import terser from "gulp-terser";
 
 gulp.task("build-uglify", function () {
     return gulp.src(["../src/**/lib/**/*.js", "../src/*/index.js", "!../src/node_modules/**"])
-        .pipe(terser())
-        .pipe(greplace('if(void 0===globalThis.ace_ibma)', "if('undefined' === typeof(globalThis.ace_ibma))"))
+        .pipe(terser({compress:{typeofs: false}}))
+        // .pipe(greplace('if(void 0===globalThis.ace_ibma)', "if('undefined' === typeof(globalThis.ace_ibma))"))
+        // .pipe(greplace('void 0===ace', "'undefined'===typeof ace"))
+        // .pipe(greplace('void 0!==ace', "'undefined'!==typeof ace"))
         .pipe(ginsert.prepend(notice("2016,2017,2018,2019")))
         .pipe(gulp.dest("../package"));
 
@@ -48,6 +50,7 @@ gulp.task("build-uglify", function () {
 gulp.task("build-copy", function () {
     return gulp.src([
         "../src/**/bin/achecker.js",
+        "../src/mjs/index.d.ts",
         "../src/package.json",
         "../src/README.md",
     ])

diff --git a/accessibility-checker/src-ts/lib/ACEngineManager.ts b/accessibility-checker/src-ts/lib/ACEngineManager.ts
@@ -16,20 +16,20 @@ export class ACEngineManager {
             await page.evaluate((scriptUrl) => {
                 try {
                     var ace_backup_in_ibma;
-                    if ('undefined' !== typeof(ace)) {
+                    if ('undefined' !== typeof ace) {
                         if (!ace || !ace.Checker)
                             ace_backup_in_ibma = ace;
                         ace = null;
                     }
-                    if ('undefined' === typeof (ace) || ace === null) {
+                    if ('undefined' === typeof ace || ace === null) {
                         return new Promise<void>((resolve, reject) => {
                             let script = document.createElement('script');
                             script.setAttribute('type', 'text/javascript');
                             script.setAttribute('aChecker', 'ACE');
                             script.setAttribute('src', scriptUrl);
                             script.addEventListener('load', function () {
                                 globalThis.ace_ibma = ace;
-                                if ('undefined' !== typeof(ace)) {
+                                if ('undefined' !== typeof ace) {
                                     ace = ace_backup_in_ibma;
                                 }
                                 resolve();
@@ -54,19 +54,19 @@ export class ACEngineManager {
                     `let cb = arguments[arguments.length - 1];
 try {
     var ace_backup_in_ibma;
-        if ('undefined' !== typeof(ace)) {
+        if ('undefined' !== typeof ace) {
             if (!ace || !ace.Checker) 
                 ace_backup_in_ibma = ace;
             ace = null; 
         } 
-        if ('undefined' === typeof (ace) || ace === null) {
+        if ('undefined' === typeof ace || ace === null) {
         let script = document.createElement('script');
         script.setAttribute('type', 'text/javascript');
         script.setAttribute('aChecker', 'ACE');
         script.setAttribute('src', '${config.rulePack}/ace.js');
         script.addEventListener('load', function() {
             globalThis.ace_ibma = ace;
-            if ('undefined' !== typeof(ace)) {
+            if ('undefined' !== typeof ace) {
                 ace = ace_backup_in_ibma;
             } 
             cb();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const toBeAccessible = require('./matchers/toBeAccessible');
		expect.extend({ toBeAccessible });