A11y: Add axe-puppeteer tests (#302)

Author: microbit-mark

editor.html

@@ -180,7 +180,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
             <p>{{ hint }}</p>
             <p><button id="button-decrypt-link">{{ button }}</button></p>
         </script>
-        <main id="main" role="main" class="vbox">
+        <main id="main" role="main" class="vbox main">
           <div id="toolbox" class="hbox">
             <div id="commands" class="hbox">
                 <a href="#" class="roundbutton action" id="command-download"

tests/jest.config.js

@@ -123,7 +123,9 @@ module.exports = {
   setupFiles: ['<rootDir>/setup-tests.js'],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+   setupFilesAfterEnv: [
+    "@wordpress/jest-puppeteer-axe"
+   ],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   // snapshotSerializers: [],

tests/package-lock.json

@@ -17,6 +17,9 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@wordpress/jest-puppeteer-axe": "^1.3.0",
+    "axe-puppeteer": "1.0.0",
+    "@babel/runtime": "^7.7.2",
     "jest": "^24.9.0",
     "node-forge": "0.8.2",
     "node-static": "^0.7.11",

tests/package.json

@@ -0,0 +1,80 @@
+/* Puppeteer tests for the A11y. */
+const { AxePuppeteer } = require('axe-puppeteer');
+const puppeteer = require('puppeteer');
+
+describe("Puppeteer accessibility tests for the Python Editor.", function() {
+    'use strict';
+
+    const editorURL = 'http://localhost:5000/editor.html';
+    const helpURL = 'http://localhost:5000/help.html';
+    let browser = null;
+
+    beforeAll(async () => {
+        // Setup a headless Chromium browser.
+        // Flags allow Puppeteer to run within a container.
+        browser = await puppeteer.launch({
+            headless: true,
+            args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"]
+        });
+    });
+
+    afterAll(async () => {
+        browser.close();
+    });
+
+    test( 'Checks the editor.html page with Axe', async () => {
+        // First, run some code which loads the content of the page.
+        const page = await browser.newPage();
+        await page.goto(editorURL);
+        await new AxePuppeteer(page).analyze();
+        await expect(page).toPassAxeTests({
+            // disable tab-index as we have values greater than 0
+            // and h1 as we aren't using this heading
+            disabledRules: [ 'tabindex', 'page-has-heading-one' ],
+        });
+        await page.close();
+    });
+
+    test( 'Checks the Load/Save modal with Axe', async () => {
+        const page = await browser.newPage();
+        await page.goto(editorURL);
+        await page.waitForSelector("#command-files");
+        await page.click("#command-files");
+        await new AxePuppeteer(page).analyze();
+        await expect(page).toPassAxeTests({
+            // exclude everything else in main
+            exclude: '.main',
+            // disable checking for h1 as we aren't using this heading
+            disabledRules: [ 'page-has-heading-one' ],
+        });
+        await page.close();
+    });
+
+    test( 'Checks the Load/Save modal with Axe', async () => {
+        const page = await browser.newPage();
+        await page.goto(editorURL);
+        await page.waitForSelector("#command-snippet");
+        await page.click("#command-snippet");
+        await new AxePuppeteer(page).analyze();
+        await expect(page).toPassAxeTests({
+            // exclude everything else in main
+            exclude: '.main',
+            // disable checking for h1 as we aren't using this heading
+            disabledRules: [ 'page-has-heading-one' ],
+        });
+        await page.close();
+    });
+
+    test( 'Checks the help.html page with Axe', async () => {
+        const page = await browser.newPage();
+        await page.goto(helpURL);
+        await new AxePuppeteer(page).analyze();
+        await expect(page).toPassAxeTests({    
+            // exclude code highlighter        
+            exclude: '.hljs-comment',
+            // disable checking for h1 as we aren't using this heading
+            disabledRules: [ 'page-has-heading-one' ],
+        });
+        await page.close();
+    });
+});