Merge pull request #206 from IBMa/cypress-native

Cypress native

.github/workflows/publish.yml

@@ -75,6 +75,8 @@ jobs:
         run: echo ::set-env name=RELEASE_VERSION::${GITHUB_REF:10}
       - run: npm install
         working-directory: cypress-accessibility-checker
+      - run: npm run build:report
+        working-directory: cypress-accessibility-checker
       - run: npm run package:npm
         working-directory: cypress-accessibility-checker
       - run: gitactions/publish/cypress-achecker.sh

.github/workflows/test.yml

@@ -207,7 +207,8 @@ jobs:
         working-directory: accessibility-checker-engine
       - run: npm install
         working-directory: cypress-accessibility-checker
-
+      - run: npm run build:report
+        working-directory: cypress-accessibility-checker        
       - run: npm test
         working-directory: cypress-accessibility-checker
 

cypress-accessibility-checker/.achecker.yml

@@ -50,6 +50,7 @@ captureScreenshots: false
 # Default: json
 outputFormat:
     - json
+    - html
 
 # Optional - Specify labels that you would like associated to your scan
 #

cypress-accessibility-checker/README.md

@@ -1,6 +1,6 @@
 # cypress-accessibility-checker
 
-Cypress plugin for Accessibility Testing. This plugin is a wrapper around the NodeJS version of `accessibility-checker` which is [available on NPM](https://www.npmjs.com/package/accessibility-checker). The plugin works by taking a stringified version of the page and passing it down to a Cypress plugin which then executes the `accessibility-checker` library against the stringified page. Please see the `Usage` section in this README for more details.
+Cypress plugin for Accessibility Testing. This plugin is a Cypress flavor of the NodeJS version of `accessibility-checker` which is also [available on NPM](https://www.npmjs.com/package/accessibility-checker). The plugin works by injecting the accessibility-checker engine into the Cypress browser and scanning the page in context. Please see the `Usage` section in this README for more details.
 
 ## Bugs and Issues
 
@@ -12,7 +12,7 @@ All bugs or issues related to the cypress-accessibility-checker code can be crea
 
 ## Installation
 
-Install the package as a devDependency. It will pull in a few packages including `accessibility-checker` which runs the actual tests.
+Install the package as a devDependency.
 
 ```
 npm install cypress-accessibility-checker --save-dev
@@ -30,10 +30,10 @@ There are two setup steps you must complete in order for the Cypress tests to be
 
 In the `cypress/plugins/index.js` file located in your project, require the plugin and then register it with Cypress.
 ```
-const a11yTasks = require('cypress-accessibility-checker/plugin');
+const aCheckerTasks = require('cypress-accessibility-checker/plugin');
 module.exports = (on, config) => {
   on('task', {
-    accessibilityChecker: a11yTasks
+    accessibilityChecker: aCheckerTasks
   });
 };
 ```
@@ -53,30 +53,26 @@ The typical use case will be to get the accessibility compliance of a document a
 ```
 // Retrieves the compliance of the document then checks the results against the defined settings.
 // If there are issues when compared to the defined settings, it will fail the Cypress test.
-cy.getA11yComplianceOfDocument('my scan').assertA11yCompliance()
+cy.getCompliance('my scan').assertCompliance()
 ```
 
 Examples on how to use each of the APIs below can be found in the `achecker.js` test file [located here](https://github.com/IBMa/equal-access/blob/master/cypress-accessibility-checker/test/cypress/integration/achecker.js).
 
-- `cy.getA11yCompliance(content: string, label)`
-  - `content` must only be a string of HTML. Due to the nature of how the plugin works, only string version of HTML is supported.
+- `cy.getCompliance(label)`
+  - Similar to `getCompliance()` in the reference API above.
   - Returned data ([defined here](https://www.npmjs.com/package/accessibility-checker#async-acheckergetcompliance-content--label--string)) will only contain the `report` object.
-- `cy.getA11yComplianceOfDocument(label)`
-  - Similar to `getCompliance()` in the reference API above, however it will automatically pass in the document.
+- `cy.getCompliance(cyObj, label)`
+  - Similar to `getCompliance()` in the reference API above, using the passed cy object (typically obtained via `cy.document`).
   - Returned data ([defined here](https://www.npmjs.com/package/accessibility-checker#async-acheckergetcompliance-content--label--string)) will only contain the `report` object.
-- `cy.assertA11yCompliance(failOnError?: boolean)`
+- `cy.assertCompliance(failOnError?: boolean)`
   - If `failOnError` is set to false, this will not fail your test. This is useful for testing what needs to be fixed without failing the test. By default this command will fail your test unless you specify `false` here.
-- `cy.getA11yDiffResults(label)`
-- `cy.getA11yBaseline(label)`
-- `cy.diffA11yResultsWithExpected(actual, expected, clean)`
-- `cy.stringifyA11yResults(report)`
-- `cy.getA11yConfig()`
-- `cy.closeA11y()`
-
-You can chain the commands similar to other Cypress commands. For example, `cy.getA11yComplianceOfDocument('my-label').assertA11yCompliance()` will get the compliance report of the document and then assert there are no violations or that it matches up with a baseline of the same label.
-
-**NOTE**: The results folder will contain scan results. Each file will contain the stringified version of what was scanned on the page instead of the URL scanned. This is currently working as expected.
+- `cy.getDiffResults(label)`
+- `cy.getBaseline(label)`
+- `cy.diffResultsWithExpected(actual, expected, clean)`
+- `cy.stringifyResults(report)`
+- `cy.getACheckerConfig()`
 
+You can chain the commands similar to other Cypress commands. For example, `cy.getCompliance('my-label').assertCompliance()` will get the compliance report of the document and then assert there are no violations or that it matches up with a baseline of the same label.
 
 ### Using Baselines
 Baselines are a helpful feature of `accessibility-checker` that can also be used in this Cypress wrapper. The concept involves capturing a scan result as a 'baseline' so that future scans will pass if they match the baseline. If they differ, then the test will fail. This feature is useful for things like false positives or issues you plan on not fixing.

cypress-accessibility-checker/boilerplates/cypress/integration/accessibility-checker-example.spec.js

@@ -17,10 +17,10 @@
 /// <reference types="cypress" />
 
 context('Accessibility checker example', () => {
-  it('Scan website that contains failures', () => {
-    // Replace URL with application URL
-    cy.visit('http://localhost:8080/example-html-file.html')
-      .getA11yComplianceOfDocument('example') // Label should be unique per call to the function
-      .assertA11yCompliance();
-  });
+    it('Scan website that contains failures', () => {
+        // Replace URL with application URL
+        cy.visit('http://localhost:8080/example-html-file.html')
+            .getCompliance('example') // Label should be unique per call to the function
+            .assertCompliance();
+    });
 });

cypress-accessibility-checker/cypress.json

@@ -0,0 +1 @@
+{}

cypress-accessibility-checker/package.json

@@ -4,10 +4,11 @@
   "description": "Accessibility Checker for Cypress",
   "scripts": {
     "lint": "eslint .",
-    "test": "start-server-and-test 'npm run test:start-http' 8080 'cd test && cypress run'",
-    "test:open": "cd test && cypress open",
+    "test": "npm run build:report && start-server-and-test 'npm run test:start-http' 8080 'cd test && cypress run'",
+    "test:open": "npm run build:report && cd test && cypress open",
     "test:start-http": "http-server -c-1 --silent",
-    "package:common": "rm -rf package && mkdir package && cp -R *.js src package/ && cp package.json package/ && cp README.md package/",
+    "build:report": "(cd ../report-react && npm run build && cd ../cypress-accessibility-checker && shx cp ../report-react/build/genReport.js ./src/lib/reporters/)",
+    "package:common": "npm run build:report && rm -rf package && mkdir package && cp -R *.js src package/ && cp package.json package/ && cp README.md package/",
     "package:zip": "npm run package:common && cd package && npm pack",
     "package:npm": "npm run package:common"
   },
@@ -32,7 +33,7 @@
     "cypress": "^3 || ^4"
   },
   "devDependencies": {
-    "cypress": "^4.5.0",
+    "cypress": "^5.2.0",
     "eslint": "^7.0.0",
     "eslint-plugin-cypress": "^2.10.3",
     "http-server": "^0.12.3",