test: Add tests for remote ACT repo (#2744)

* test: Add tests for remote ACT repo

* chore: npm install act-rules instead

* chore: resolve review feedback

* chore: move act dir

* chore: resolve comments

.circleci/config.yml

@@ -111,6 +111,16 @@ jobs:
       - run: npm run build
       - run: npm run test:examples
 
+  # Run ACT test cases
+  test_act:
+    <<: *defaults
+    <<: *unix_box
+    steps:
+      - checkout
+      - <<: *restore_dependency_cache_unix
+      - run: npm run build
+      - run: npm run test:act
+
   # Test locale files
   test_locales:
     <<: *defaults
@@ -246,6 +256,9 @@ workflows:
       - test_examples:
           requires:
             - test_unix
+      - test_act:
+          requires:
+            - test_unix
       - test_locales:
           requires:
             - test_unix

package.json

@@ -81,6 +81,8 @@
     "test:integration:firefox": "start-server-and-test 9876 integration:firefox",
     "test:integration:ie": "start-server-and-test 9876 integration:ie",
     "test:examples": "node ./doc/examples/test-examples",
+    "test:act": "karma start test/act-mapping/karma.config.js",
+    "test:act:debug": "npm run test:act -- --no-single-run --browsers=Chrome",
     "test:locales": "mocha test/test-locales.js",
     "test:rule-help-version": "mocha test/test-rule-help-version.js",
     "test:node": "mocha test/node/*.js",
@@ -98,6 +100,7 @@
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.5.4",
     "@deque/dot": "^1.1.5",
+    "act-rules.github.io": "github:act-rules/act-rules.github.io#master",
     "aria-query": "^3.0.0",
     "chai": "~4.2.0",
     "chalk": "^4.1.0",

test/act-mapping/aria-hidden-is-focusable.json

@@ -0,0 +1,5 @@
+{
+  "id": "6cfa84",
+  "title": "Element with aria-hidden has no focusable content",
+  "axeRules": ["aria-hidden-focus"]
+}

test/act-mapping/aria-props-permitted.json

@@ -0,0 +1,5 @@
+{
+  "id": "5c01ea",
+  "title": "ARIA state or property is permitted",
+  "axeRules": ["aria-allowed-attr"]
+}

test/act-mapping/autocomplete-valid.json

@@ -0,0 +1,5 @@
+{
+  "id": "73f2c2",
+  "title": "autocomplete attribute has valid value",
+  "axeRules": ["autocomplete-valid"]
+}

test/act-mapping/button-has-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "97a4e1",
+  "title": "Button has non-empty accessible name",
+  "axeRules": ["button-name", "aria-command-name"]
+}

test/act-mapping/css-orientation-lock.json

@@ -0,0 +1,5 @@
+{
+  "id": "b33eff",
+  "title": "Orientation of the page is not restricted using CSS transform property",
+  "axeRules": ["css-orientation-lock"]
+}

test/act-mapping/form-field-acc-name.json

@@ -0,0 +1,10 @@
+{
+  "id": "e086e5",
+  "title": "Form field has non-empty accessible name",
+  "axeRules": [
+    "label",
+    "select-name",
+    "aria-input-field-name",
+    "aria-toggle-field-name"
+  ]
+}

test/act-mapping/id-value-unique.json

@@ -0,0 +1,5 @@
+{
+  "id": "3ea0c8",
+  "title": "id attribute value is unique",
+  "axeRules": ["duplicate-id", "duplicate-id-aria", "duplicate-id-active"]
+}

test/act-mapping/image-button-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "59796f",
+  "title": "Image button has non-empty accessible name",
+  "axeRules": ["input-image-alt"]
+}

test/act-mapping/img-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "23a2a8",
+  "title": "Image has non-empty accessible name",
+  "axeRules": ["image-alt", "role-img-alt"]
+}

test/act-mapping/karma.config.js

@@ -0,0 +1,39 @@
+module.exports = function(config) {
+  config.set({
+    basePath: '../../',
+    singleRun: true,
+    autoWatch: false,
+    plugins: [
+      'karma-mocha',
+      'karma-chai',
+      'karma-mocha-reporter',
+      'karma-chrome-launcher',
+      require('./preprocessor')
+    ],
+    frameworks: ['mocha', 'chai'],
+    files: [
+      'axe.js',
+      'test/act-mapping/*.json',
+      {
+        pattern: 'node_modules/act-rules.github.io/test-assets/**/*',
+        included: false,
+        served: true
+      }
+    ],
+    browsers: ['ChromeHeadless'],
+    proxies: {
+      '/test-assets': '/base/node_modules/act-rules.github.io/test-assets'
+    },
+    reporters: ['mocha'],
+    preprocessors: {
+      '**/*.json': ['act']
+    },
+    client: {
+      useIframe: false,
+      mocha: {
+        timeout: 4000,
+        reporter: 'html'
+      }
+    }
+  });
+};

test/act-mapping/link-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "c487ae",
+  "title": "Link has non-empty accessible name",
+  "axeRules": ["link-name", "area-alt"]
+}

test/act-mapping/link-same-name-context.json

@@ -0,0 +1,5 @@
+{
+  "id": "fd3a94",
+  "title": "Links with identical accessible names and context serve equivalent purpose",
+  "axeRules": ["identical-links-same-purpose"]
+}

test/act-mapping/link-same-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "b20e66",
+  "title": "Links with identical accessible names have equivalent purpose",
+  "axeRules": ["identical-links-same-purpose"]
+}

test/act-mapping/menuitem-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "m6b1q3",
+  "title": "Menuitem has non-empty accessible name",
+  "axeRules": ["aria-command-name", "button-name", "link-name"]
+}

test/act-mapping/meta-viewport-zoom.json

@@ -0,0 +1,5 @@
+{
+  "id": "b4f0c3",
+  "title": "meta viewport allows for zoom",
+  "axeRules": ["meta-viewport"]
+}

test/act-mapping/object-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "8fc3b6",
+  "title": "Object element rendering non-text content has non-empty accessible name",
+  "axeRules": ["object-alt"]
+}

test/act-mapping/page-has-lang.json

@@ -0,0 +1,5 @@
+{
+  "id": "b5c3f8",
+  "title": "HTML page has lang attribute",
+  "axeRules": ["html-has-lang"]
+}

test/act-mapping/page-has-title.json

@@ -0,0 +1,5 @@
+{
+  "id": "2779a5",
+  "title": "HTML page has non-empty title",
+  "axeRules": ["document-title"]
+}

test/act-mapping/page-lang-valid-value.json

@@ -0,0 +1,5 @@
+{
+  "id": "bf051a",
+  "title": "HTML page lang attribute has valid language tag",
+  "axeRules": ["html-lang-valid"]
+}

test/act-mapping/page-lang-xml-lang-match.json

@@ -0,0 +1,5 @@
+{
+  "actRuleId": "5b7ae0",
+  "title": "HTML page lang and xml:lang attributes have matching values",
+  "axeRules": ["html-xml-lang-mismatch"]
+}

test/act-mapping/preprocessor.js

@@ -0,0 +1,49 @@
+var path = require('path');
+var fs = require('fs');
+var template = fs.readFileSync(path.resolve(__dirname, 'runner.js'), 'utf-8');
+
+var actRepoDir = 'node_modules/act-rules.github.io/';
+var testcaseFilePath = path.resolve(actRepoDir, 'testcases.json');
+var testcaseContent = require(testcaseFilePath);
+var testcases = testcaseContent.testcases;
+
+createActPreprocessor.$inject = ['logger'];
+// Simple Karma preprocessor, takes JSON, outputs a JS file that can run tests
+function createActPreprocessor(logger) {
+  var log = logger.create('preprocessor.act');
+
+  return function(actRuleJson, file, done) {
+    try {
+      log.debug('Processing "%s".', file.originalPath);
+      file.path = file.originalPath.replace(/\.json$/, '.js');
+
+      var actRule = JSON.parse(actRuleJson);
+      var actRule = applyTestCases(actRule);
+      var testContent = JSON.stringify(actRule, null, 2);
+      var testFileContent = template.replace('{}; /*tests*/', testContent);
+
+      done(null, testFileContent);
+    } catch (e) {
+      console.error(e);
+      done(e, null);
+    }
+  };
+}
+
+module.exports = {
+  'preprocessor:act': ['factory', createActPreprocessor]
+};
+
+function applyTestCases(actRule) {
+  actRule = Object.assign({}, actRule);
+
+  actRule.testcases = testcases.filter(function(testcase) {
+    return testcase.ruleId === actRule.id;
+  });
+  actRule.testcases.forEach(function(testcase) {
+    var testcasePath = path.resolve(actRepoDir, testcase.relativePath);
+    testcase.html = fs.readFileSync(testcasePath, 'utf-8');
+  });
+
+  return actRule;
+}

test/act-mapping/runner.js

@@ -0,0 +1,75 @@
+(function() {
+  // this line is replaced with the test object in preprocessor.js
+  var actRule = {}; /*tests*/
+
+  describe(actRule.title + ' (' + actRule.id + ')', function() {
+    var bodyContent;
+    before(function() {
+      var title = document.querySelector('title');
+      if (title) {
+        document.head.removeChild(title);
+      }
+      document.head.innerHTML = '';
+      bodyContent = document.body.innerHTML;
+    });
+
+    afterEach(function() {
+      document.body.innerHTML = bodyContent;
+      document.head.innerHTML = '';
+      var htmlAttrs = Array.from(document.documentElement.attributes);
+      htmlAttrs.forEach(function(attr) {
+        document.documentElement.removeAttribute(attr.name);
+      });
+    });
+
+    actRule.testcases.forEach(function(testcase) {
+      runTestCase(testcase, {
+        runOnly: actRule.axeRules
+      });
+    });
+  });
+
+  function runTestCase(testcase, axeOptions) {
+    var test = shouldSkip(testcase) ? xit : it;
+    test(testcase.testcaseTitle, function(done) {
+      exampleSetup(testcase.html);
+      axe
+        .run(axeOptions)
+        .then(function(result) {
+          assertResultsCorrect(testcase, result);
+          done();
+        })
+        .catch(done);
+    });
+  }
+
+  function exampleSetup(html) {
+    var parser = new DOMParser();
+    var newDoc = parser.parseFromString(html, 'text/html');
+    document.head.innerHTML = newDoc.head.innerHTML;
+    document.body.innerHTML += newDoc.body.innerHTML;
+    var htmlAttrs = Array.from(newDoc.documentElement.attributes);
+    htmlAttrs.forEach(function(attr) {
+      document.documentElement.setAttribute(attr.name, attr.value);
+    });
+  }
+
+  function shouldSkip(testcase) {
+    if (testcase.html.substr(0, 15) !== '<!DOCTYPE html>') {
+      return true; // Can't test SVG / MathML
+    }
+    return false;
+  }
+
+  function assertResultsCorrect(testcase, result) {
+    if (testcase.expected !== 'failed') {
+      return assert.lengthOf(result.violations, 0);
+    }
+    var issues = result.violations[0] || result.incomplete[0];
+    if (!issues) {
+      console.log(testcase.html);
+    }
+    assert.isDefined(issues);
+    assert.isAtLeast(issues.nodes.length, 1);
+  }
+})();

test/act-mapping/scrollable-region-focus.json

@@ -0,0 +1,5 @@
+{
+  "id": "0ssw9k",
+  "title": "Scrollable element is keyboard accessible",
+  "axeRules": ["scrollable-region-focusable"]
+}

test/act-mapping/svg-img-acc-name.json

@@ -0,0 +1,5 @@
+{
+  "id": "7d6734",
+  "title": "svg element with explicit role has non-empty accessible name",
+  "axeRules": ["svg-img-alt"]
+}

test/act-mapping/table-headers-attr.json

@@ -0,0 +1,5 @@
+{
+  "id": "a25f45",
+  "title": "headers attribute specified on a cell refers to cells in the same table element",
+  "axeRules": ["td-headers-attr"]
+}

test/karma.conf.js

@@ -55,10 +55,10 @@ if (testFiles.length) {
   testPaths = testDirs.map(function(dir) {
     if (dir === 'integration') {
       return path.join('test', dir, '**/*.json');
-    } else if (['virtual-rules', 'api'].includes(dir)) {
+    }
+    if (['virtual-rules', 'api'].includes(dir)) {
       return path.join('test', 'integration', dir, '**/*.js');
     }
-
     return path.join('test', dir, '**/*.js');
   });
 }
@@ -88,7 +88,6 @@ module.exports = function(config) {
         served: true
       },
       'axe.js',
-
       'test/testutils.js'
     ].concat(testPaths),
     proxies: {