fix: Allow running in node environment (#64)

Author: sheerun

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),