Allow running in node environment

jest.config.js

@@ -1,7 +1,7 @@
 const jestConfig = require('kcd-scripts/jest')
 
 module.exports = Object.assign(jestConfig, {
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: 'jest-environment-node',
   testURL: 'http://localhost/',
   setupTestFrameworkScriptFile: '<rootDir>/setupTests.js',
 })

package.json

@@ -13,8 +13,9 @@
     "build": "kcd-scripts build",
     "lint": "kcd-scripts lint",
     "test": "kcd-scripts test",
+    "test:all": "npm test && npm test -- --env jsdom",
     "test:update": "npm test -- --updateSnapshot --coverage",
-    "validate": "kcd-scripts validate",
+    "validate": "kcd-scripts validate build,lint,test:all",
     "setup": "npm install && npm run validate -s",
     "precommit": "kcd-scripts precommit"
   },
@@ -40,6 +41,7 @@
     "redent": "^2.0.0"
   },
   "devDependencies": {
+    "jsdom": "^12.2.0",
     "kcd-scripts": "^0.44.0"
   },
   "eslintConfig": {

src/__tests__/helpers/document.js

@@ -0,0 +1,8 @@
+if (global.document) {
+  module.exports = global.document
+} else {
+  const {JSDOM} = require('jsdom')
+  const {window} = new JSDOM()
+
+  module.exports = window.document
+}

src/__tests__/helpers/test-utils.js

@@ -1,3 +1,5 @@
+import document from './document'
+
 function render(html) {
   const container = document.createElement('div')
   container.innerHTML = html

src/__tests__/to-be-in-the-document.js

@@ -1,3 +1,5 @@
+import document from './helpers/document'
+
 test('.toBeInTheDocument', () => {
   document.body.innerHTML = `
     <span data-testid="html-element"><span>Html Element</span></span>

src/__tests__/to-have-style.js

@@ -1,4 +1,5 @@
 import {render} from './helpers/test-utils'
+import document from './helpers/document'
 
 describe('.toHaveStyle', () => {
   test('handles positive test cases', () => {

src/__tests__/utils.js

@@ -1,6 +1,4 @@
-import {checkDocumentKey, deprecate} from '../utils'
-
-function matcherMock() {}
+import {deprecate} from '../utils'
 
 test('deprecate', () => {
   const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
@@ -16,28 +14,3 @@ test('deprecate', () => {
 
   spy.mockRestore()
 })
-
-test('checkDocumentKey', () => {
-  const fakeKey = 'fakeKey'
-  const realKey = 'documentElement'
-  const badKeyMessage = `${fakeKey} is undefined on document but is required to use ${
-    matcherMock.name
-  }.`
-
-  const badDocumentMessage = `document is undefined on global but is required to use ${
-    matcherMock.name
-  }.`
-
-  expect(() =>
-    checkDocumentKey(document, realKey, matcherMock),
-  ).not.toThrowError()
-
-  expect(() => {
-    checkDocumentKey(document, fakeKey, matcherMock)
-  }).toThrow(badKeyMessage)
-
-  expect(() => {
-    //eslint-disable-next-line no-undef
-    checkDocumentKey(undefined, realKey, matcherMock)
-  }).toThrow(badDocumentMessage)
-})

src/to-be-in-the-document.js

@@ -3,17 +3,18 @@ import {
   stringify,
   RECEIVED_COLOR as receivedColor,
 } from 'jest-matcher-utils'
-import {checkHtmlElement, checkDocumentKey} from './utils'
+import {checkHtmlElement} from './utils'
 
 export function toBeInTheDocument(element) {
   if (element !== null) {
     checkHtmlElement(element, toBeInTheDocument, this)
   }
 
-  checkDocumentKey(global.document, 'documentElement', toBeInTheDocument)
+  const pass =
+    element === null ? false : element.ownerDocument.contains(element)
 
   return {
-    pass: document.documentElement.contains(element),
+    pass,
     message: () => {
       return [
         matcherHint(
@@ -22,11 +23,9 @@ export function toBeInTheDocument(element) {
           '',
         ),
         '',
-        receivedColor(`${stringify(
-          document.documentElement.cloneNode(false),
-        )} ${this.isNot ? 'contains:' : 'does not contain:'} ${stringify(
-          element ? element.cloneNode(false) : element,
-        )}
+        receivedColor(`${stringify(element.ownerDocument.cloneNode(false))} ${
+          this.isNot ? 'contains:' : 'does not contain:'
+        } ${stringify(element ? element.cloneNode(false) : element)}
         `),
       ].join('\n')
     },

src/to-be-visible.js

@@ -2,6 +2,8 @@ import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
 function isStyleVisible(element) {
+  const {getComputedStyle} = element.ownerDocument.defaultView
+
   const {display, visibility, opacity} = getComputedStyle(element)
   return (
     display !== 'none' &&

src/to-contain-html.js

@@ -1,7 +1,8 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
-function checkHtmlText(htmlText, ...args) {
+function checkHtmlText(element, htmlText, ...args) {
+  const DOMParser = element.ownerDocument.defaultView.DOMParser
   const htmlElement =
     typeof htmlText === 'string'
       ? new DOMParser().parseFromString(htmlText, 'text/html').body.firstChild
@@ -11,7 +12,7 @@ function checkHtmlText(htmlText, ...args) {
 
 export function toContainHTML(container, htmlText) {
   checkHtmlElement(container, toContainHTML, this)
-  checkHtmlText(htmlText, toContainHTML, this)
+  checkHtmlText(container, htmlText, toContainHTML, this)
 
   return {
     pass: container.outerHTML.includes(htmlText),

src/to-have-focus.js

@@ -5,13 +5,13 @@ export function toHaveFocus(element) {
   checkHtmlElement(element, toHaveFocus, this)
 
   return {
-    pass: document.activeElement === element,
+    pass: element.ownerDocument.activeElement === element,
     message: () => {
       return [
         matcherHint(`${this.isNot ? '.not' : ''}.toHaveFocus`, 'element', ''),
         '',
         'Received:',
-        `  ${printReceived(document.activeElement)}`,
+        `  ${printReceived(element.ownerDocument.activeElement)}`,
       ].join('\n')
     },
   }

src/to-have-style.js

@@ -3,7 +3,7 @@ import jestDiff from 'jest-diff'
 import chalk from 'chalk'
 import {checkHtmlElement, checkValidCSS} from './utils'
 
-function getStyleDeclaration(css) {
+function getStyleDeclaration(document, css) {
   const copy = document.createElement('div')
   copy.style = css
   const styles = copy.style
@@ -48,8 +48,9 @@ function expectedDiff(expected, computedStyles) {
 export function toHaveStyle(htmlElement, css) {
   checkHtmlElement(htmlElement, toHaveStyle, this)
   checkValidCSS(css, toHaveStyle, this)
+  const {getComputedStyle} = htmlElement.ownerDocument.defaultView
 
-  const expected = getStyleDeclaration(css)
+  const expected = getStyleDeclaration(htmlElement.ownerDocument, css)
   const received = getComputedStyle(htmlElement)
 
   return {

src/utils.js

@@ -34,8 +34,9 @@ class HtmlElementTypeError extends Error {
 
 function checkHtmlElement(htmlElement, ...args) {
   if (
-    !(htmlElement instanceof HTMLElement) &&
-    !(htmlElement instanceof SVGElement)
+    !htmlElement.ownerDocument &&
+    !(htmlElement instanceof htmlElement.ownerDocument.HTMLElement) &&
+    !(htmlElement instanceof htmlElement.ownerDocument.SVGElement)
   ) {
     throw new HtmlElementTypeError(htmlElement, ...args)
   }
@@ -74,39 +75,6 @@ function checkValidCSS(css, ...args) {
   }
 }
 
-class InvalidDocumentError extends Error {
-  constructor(message, matcherFn) {
-    super()
-
-    /* istanbul ignore next */
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, matcherFn)
-    }
-
-    this.message = message
-  }
-}
-
-function checkDocumentKey(document, key, matcherFn) {
-  if (typeof document === 'undefined') {
-    throw new InvalidDocumentError(
-      `document is undefined on global but is required to use ${
-        matcherFn.name
-      }.`,
-      matcherFn,
-    )
-  }
-
-  if (typeof document[key] === 'undefined') {
-    throw new InvalidDocumentError(
-      `${key} is undefined on document but is required to use ${
-        matcherFn.name
-      }.`,
-      matcherFn,
-    )
-  }
-}
-
 function display(value) {
   return typeof value === 'string' ? value : stringify(value)
 }
@@ -147,7 +115,6 @@ function normalize(text) {
 }
 
 export {
-  checkDocumentKey,
   checkHtmlElement,
   checkValidCSS,
   deprecate,