tests: fix unit tests and create typescript tests (#172)

* tests: fix unit tests and create typescript tests

* axe-linter

* dont ignore test dir

* Update test/index.ts

Co-authored-by: Stephen Mathieson <me@stephenmathieson.com>

Co-authored-by: Stephen Mathieson <me@stephenmathieson.com>

.github/axe-linter.yml

@@ -0,0 +1,4 @@
+exclude:
+  - ./CHANGELOG.md
+  - ./example/**/*
+  - ./cypress/**/*

.gitignore

@@ -4,3 +4,5 @@ example/build
 example/dist
 example/package-lock.json
 dist
+test/index.js
+cypress/screenshots

cypress/integration/index-test.js

@@ -21,24 +21,25 @@ describe('React-axe', function() {
     cy.get('h1').should('contain', 'Our services');
   });
 
-  it('should run axe in the context of the document', function() {
+  it('should run axe in the context of the document', function(done) {
     cy.visit('http://localhost:8080').then(function(win) {
       cy.spy(win.console, 'group');
       cy.spy(win.console, 'groupCollapsed');
       cy.spy(win.console, 'groupEnd');
 
       axe(React, ReactDOM, 0).then(function() {
         expect(win.console.group).to.be.calledWith(
-          '%cNew aXe issues',
-          'color:red;font-weight:normal;'
+          '%cNew axe issues',
+          'color:#d93251;font-weight:normal;'
         );
         expect(win.console.groupCollapsed).to.be.calledWith('%c%s: %c%s %s');
         expect(win.console.groupEnd).to.be.called;
+        done();
       });
     });
   });
 
-  it('should run axe inside of Shadow DOM', function() {
+  it('should run axe inside of Shadow DOM', function(done) {
     cy.visit('http://localhost:8080').then(function(win) {
       const groupCollapsed = cy.spy(win.console, 'groupCollapsed');
       const colorMessage = 'Elements must have sufficient color contrast';
@@ -58,6 +59,7 @@ describe('React-axe', function() {
         expect(filterLogs(groupCollapsed.args, serviceChooser)).to.equal(
           serviceChooser
         );
+        done();
       });
     });
   });

package.json

@@ -18,7 +18,9 @@
     "install:example": "cd example && npm install",
     "eslint": "eslint --ext .js,.ts *.ts",
     "pretest": "npm run install:example",
-    "test": "eslint index.ts && tsc && start-server-and-test start-server http://localhost:8080 test:run",
+    "test": "eslint index.ts after.ts && tsc && npm run test:types && npm run test:cypress",
+    "test:types": "cd test && tsc",
+    "test:cypress": "start-server-and-test start-server http://localhost:8080 test:run",
     "start-server": "cd example && npm run start",
     "test:run": "cypress run",
     "test:debug": "cypress open",

test/index.ts

@@ -0,0 +1,44 @@
+import reactAxe from '../';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// default use
+reactAxe(React, ReactDOM, 1000);
+
+// axe-core spec
+reactAxe(React, ReactDOM, 1000, {
+  checks: [
+    {
+      id: 'my-check',
+      evaluate() {}
+    }
+  ],
+  rules: [
+    {
+      id: 'my-rule',
+      any: ['my-check']
+    }
+  ]
+});
+
+const context = document.createElement('div');
+
+// axe-core context: Node
+reactAxe(React, ReactDOM, 1000, {}, context);
+
+// axe-core context: string
+reactAxe(React, ReactDOM, 1000, {}, '#container');
+
+// axe-core context: ContextObject
+reactAxe(
+  React,
+  ReactDOM,
+  1000,
+  {},
+  {
+    include: [['#container']]
+  }
+);
+
+// return type
+const promise: Promise<void> = reactAxe(React, ReactDOM, 1000);

test/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

tsconfig.json

@@ -10,5 +10,6 @@
     "lib": ["dom", "es5"],
     "resolveJsonModule": true,
     "esModuleInterop": true
-  }
+  },
+  "exclude": ["test", "dist", "node_modules"]
 }