feat: native typescript support

.gitignore

@@ -7,3 +7,4 @@ dist
 # when working with contributors
 package-lock.json
 yarn.lock
+yarn-error.log

.travis.yml

@@ -5,7 +5,7 @@ cache: npm
 notifications:
   email: false
 node_js:
-  - 10.14
+  - 10.18
   - 12
   - node
 install: npm install

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

extend-expect.d.ts

@@ -0,0 +1 @@
+import './dist/typings'

matchers.d.ts

@@ -0,0 +1 @@
+export * from './dist/typings/matchers'

package.json

@@ -3,13 +3,16 @@
   "version": "0.0.0-semantically-released",
   "description": "Custom jest matchers to test the state of the DOM",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "engines": {
     "node": ">=8",
     "npm": ">=6",
     "yarn": ">=1"
   },
   "scripts": {
-    "build": "kcd-scripts build",
+    "build": "npm run build:source && npm run build:types",
+    "build:source": "kcd-scripts build",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
     "format": "kcd-scripts format",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",
@@ -20,7 +23,9 @@
   "files": [
     "dist",
     "extend-expect.js",
-    "matchers.js"
+    "extend-expect.d.ts",
+    "matchers.js",
+    "matchers.d.ts"
   ],
   "keywords": [
     "testing",
@@ -32,7 +37,6 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@types/testing-library__jest-dom": "^5.0.2",
     "chalk": "^3.0.0",
     "css": "^2.2.4",
     "css.escape": "^1.5.1",
@@ -42,11 +46,16 @@
     "redent": "^3.0.0"
   },
   "devDependencies": {
+    "@types/css": "^0.0.31",
+    "@types/jsdom": "^16.2.1",
+    "@types/lodash": "^4.14.150",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.1",
     "kcd-scripts": "^5.6.0",
-    "pretty-format": "^25.1.0"
+    "pretty-format": "^25.1.0",
+    "ts-jest": "^25.5.0",
+    "typescript": "^3.8.3"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/helpers/document.ts

@@ -0,0 +1,25 @@
+import * as extensions from '../../matchers'
+
+let document: Document
+
+const globalWithDocument = global as {
+  document?: Document
+}
+
+if (globalWithDocument.document) {
+  document = globalWithDocument.document
+} else {
+  const {JSDOM} = require('jsdom')
+  const {window} = new JSDOM()
+  document = window.document
+}
+
+export default document
+
+type Extensions = typeof extensions
+
+declare global {
+  namespace jest {
+    interface Matchers<R, T> extends Extensions {}
+  }
+}

src/__tests__/helpers/test-utils.js → src/__tests__/helpers/test-utils.ts

@@ -1,9 +1,9 @@
 import document from './document'
 
-function render(html) {
+function render(html: string) {
   const container = document.createElement('div')
   container.innerHTML = html
-  const queryByTestId = testId =>
+  const queryByTestId = (testId: string) =>
     container.querySelector(`[data-testid="${testId}"]`)
 
   // Some tests need to look up global ids with document.getElementById()

src/__tests__/to-be-in-the-dom.js → src/__tests__/to-be-in-the-dom.ts

@@ -52,6 +52,7 @@ test('.toBeInTheDOM', () => {
   ).toThrowError()
 
   expect(() => {
+    // @ts-ignore
     expect(valueElement).toBeInTheDOM(fakeElement)
   }).toThrowError()
 

src/__tests__/to-be-invalid.js → src/__tests__/to-be-invalid.ts

@@ -19,7 +19,7 @@ import {render} from './helpers/test-utils'
  * @link https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
  * @link https://github.com/jsdom/jsdom
  */
-function getDOMElement(htmlString, selector) {
+function getDOMElement(htmlString: string, selector: string) {
   return new JSDOM(htmlString).window.document.querySelector(selector)
 }
 

src/__tests__/to-be-visible.js → src/__tests__/to-be-visible.ts

@@ -38,7 +38,7 @@ describe('.toBeVisible', () => {
 
   // eslint-disable-next-line max-lines-per-function
   describe('with a <details /> element', () => {
-    let subject
+    let subject: ReturnType<typeof render> | undefined
 
     afterEach(() => {
       subject = undefined
@@ -55,26 +55,26 @@ describe('.toBeVisible', () => {
       })
 
       it('returns true to the details content', () => {
-        expect(subject.container.querySelector('div')).toBeVisible()
+        expect(subject!.container.querySelector('div')).toBeVisible()
       })
 
       it('returns true to the most inner details content', () => {
-        expect(subject.container.querySelector('small')).toBeVisible()
+        expect(subject!.container.querySelector('small')).toBeVisible()
       })
 
       it('returns true to the details summary', () => {
-        expect(subject.container.querySelector('summary')).toBeVisible()
+        expect(subject!.container.querySelector('summary')).toBeVisible()
       })
 
       describe('when the user clicks on the summary', () => {
-        beforeEach(() => subject.container.querySelector('summary').click())
+        beforeEach(() => subject!.container.querySelector('summary')!.click())
 
         it('returns false to the details content', () => {
-          expect(subject.container.querySelector('div')).not.toBeVisible()
+          expect(subject!.container.querySelector('div')).not.toBeVisible()
         })
 
         it('returns true to the details summary', () => {
-          expect(subject.container.querySelector('summary')).toBeVisible()
+          expect(subject!.container.querySelector('summary')).toBeVisible()
         })
       })
     })
@@ -90,22 +90,22 @@ describe('.toBeVisible', () => {
       })
 
       it('returns false to the details content', () => {
-        expect(subject.container.querySelector('div')).not.toBeVisible()
+        expect(subject!.container.querySelector('div')).not.toBeVisible()
       })
 
       it('returns true to the summary content', () => {
-        expect(subject.container.querySelector('summary')).toBeVisible()
+        expect(subject!.container.querySelector('summary')).toBeVisible()
       })
 
       describe('when the user clicks on the summary', () => {
-        beforeEach(() => subject.container.querySelector('summary').click())
+        beforeEach(() => subject!.container.querySelector('summary')!.click())
 
         it('returns true to the details content', () => {
-          expect(subject.container.querySelector('div')).toBeVisible()
+          expect(subject!.container.querySelector('div')).toBeVisible()
         })
 
         it('returns true to the details summary', () => {
-          expect(subject.container.querySelector('summary')).toBeVisible()
+          expect(subject!.container.querySelector('summary')).toBeVisible()
         })
       })
     })
@@ -121,11 +121,11 @@ describe('.toBeVisible', () => {
       })
 
       it('returns false to the details content', () => {
-        expect(subject.container.querySelector('div')).not.toBeVisible()
+        expect(subject!.container.querySelector('div')).not.toBeVisible()
       })
 
       it('returns false to the details summary', () => {
-        expect(subject.container.querySelector('summary')).not.toBeVisible()
+        expect(subject!.container.querySelector('summary')).not.toBeVisible()
       })
     })
 
@@ -146,23 +146,25 @@ describe('.toBeVisible', () => {
 
         it('returns true to the nested details content', () => {
           expect(
-            subject.container.querySelector('details > details > div'),
+            subject!.container.querySelector('details > details > div'),
           ).toBeVisible()
         })
 
         it('returns true to the nested details summary', () => {
           expect(
-            subject.container.querySelector('details > details > summary'),
+            subject!.container.querySelector('details > details > summary'),
           ).toBeVisible()
         })
 
         it('returns true to the outer details content', () => {
-          expect(subject.container.querySelector('details > div')).toBeVisible()
+          expect(
+            subject!.container.querySelector('details > div'),
+          ).toBeVisible()
         })
 
         it('returns true to the outer details summary', () => {
           expect(
-            subject.container.querySelector('details > summary'),
+            subject!.container.querySelector('details > summary'),
           ).toBeVisible()
         })
       })
@@ -183,23 +185,25 @@ describe('.toBeVisible', () => {
 
         it('returns false to the nested details content', () => {
           expect(
-            subject.container.querySelector('details > details > div'),
+            subject!.container.querySelector('details > details > div'),
           ).not.toBeVisible()
         })
 
         it('returns true to the nested details summary', () => {
           expect(
-            subject.container.querySelector('details > details > summary'),
+            subject!.container.querySelector('details > details > summary'),
           ).toBeVisible()
         })
 
         it('returns true to the outer details content', () => {
-          expect(subject.container.querySelector('details > div')).toBeVisible()
+          expect(
+            subject!.container.querySelector('details > div'),
+          ).toBeVisible()
         })
 
         it('returns true to the outer details summary', () => {
           expect(
-            subject.container.querySelector('details > summary'),
+            subject!.container.querySelector('details > summary'),
           ).toBeVisible()
         })
       })
@@ -220,25 +224,25 @@ describe('.toBeVisible', () => {
 
         it('returns false to the nested details content', () => {
           expect(
-            subject.container.querySelector('details > details > div'),
+            subject!.container.querySelector('details > details > div'),
           ).not.toBeVisible()
         })
 
         it('returns false to the nested details summary', () => {
           expect(
-            subject.container.querySelector('details > details > summary'),
+            subject!.container.querySelector('details > details > summary'),
           ).not.toBeVisible()
         })
 
         it('returns false to the outer details content', () => {
           expect(
-            subject.container.querySelector('details > div'),
+            subject!.container.querySelector('details > div'),
           ).not.toBeVisible()
         })
 
         it('returns true to the outer details summary', () => {
           expect(
-            subject.container.querySelector('details > summary'),
+            subject!.container.querySelector('details > summary'),
           ).toBeVisible()
         })
       })

src/__tests__/to-contain-element.js → src/__tests__/to-contain-element.ts

@@ -44,6 +44,7 @@ test('.toContainElement negative test cases', () => {
     expect(nonExistantElement).toContainElement(nonExistantElement),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(nonExistantElement).toContainElement(fakeElement),
   ).toThrowError()
   expect(() =>
@@ -53,7 +54,9 @@ test('.toContainElement negative test cases', () => {
     expect(fakeElement).not.toContainElement(nonExistantElement),
   ).toThrowError()
   expect(() => expect(fakeElement).toContainElement(grandparent)).toThrowError()
+  // @ts-ignore
   expect(() => expect(grandparent).toContainElement(fakeElement)).toThrowError()
+  // @ts-ignore
   expect(() => expect(fakeElement).toContainElement(fakeElement)).toThrowError()
   expect(() => expect(grandparent).not.toContainElement(child)).toThrowError()
   expect(() =>

src/__tests__/to-contain-html.js → src/__tests__/to-contain-html.ts

@@ -38,9 +38,11 @@ test('.toContainHTML', () => {
     expect(nonExistantElement).not.toContainHTML(stringChildElement),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(nonExistantElement).not.toContainHTML(nonExistantElement),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(stringChildElement).not.toContainHTML(fakeElement),
   ).toThrowError()
   expect(() =>
@@ -63,9 +65,12 @@ test('.toContainHTML', () => {
   expect(() =>
     expect(grandparent).toContainHTML(nonExistantString),
   ).toThrowError()
+  // @ts-ignore
   expect(() => expect(child).toContainHTML(nonExistantElement)).toThrowError()
+  // @ts-ignore
   expect(() => expect(parent).toContainHTML(nonExistantElement)).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(grandparent).toContainHTML(nonExistantElement),
   ).toThrowError()
   expect(() =>

src/__tests__/to-have-attribute.js → src/__tests__/to-have-attribute.ts

@@ -39,6 +39,7 @@ test('.toHaveAttribute', () => {
     expect(queryByTestId('svg-element')).not.toHaveAttribute('width', '12'),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect({thisIsNot: 'an html element'}).not.toHaveAttribute(),
   ).toThrowError()