Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"dist/dom-testing-library.umd.js": {
"bundled": 115443,
"minified": 50960,
"gzipped": 15294
"bundled": 144335,
"minified": 52790,
"gzipped": 15639
}
}
2 changes: 1 addition & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const jestConfig = require('kcd-scripts/jest')

module.exports = Object.assign(jestConfig, {
testEnvironment: 'jest-environment-jsdom',
testEnvironment: 'jest-environment-node',
})
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@
"build": "kcd-scripts build && kcd-scripts build --bundle umd --no-clean",
"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",
"dtslint": "dtslint typings"
Expand All @@ -38,14 +39,15 @@
"typings"
],
"dependencies": {
"mutationobserver-shim": "^0.3.2",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this file now vendored rather than a regular dep? If it needs a change, I'd prefer that dep be updated first.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it mutates window directly instead of exporting MutationObserver. It needs to be this way or you need to fork this project and use what I created in this repository (i.e. prevent assigning MutationObserver to window + check if typeof window !== 'undefined' before using window

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This dep is not maintained and not updated for 2 years

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you really don't want to put it in this repository I suggest forking it and publishing under @kentcdodds/mutationobserver-shim send PR there and use your version for now. I think vendor is OK personally

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. How about this, you publish a fork yourself and we can use that 👍

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The mutation observer polyfill is the only thing that breaks when you import dtl in a non-DOM environment. It would be great to make it not break to allow modules to consume/extend queries without going through dist/.

"@sheerun/mutationobserver-shim": "^0.3.2",
"pretty-format": "^23.6.0",
"wait-for-expect": "^1.0.0"
},
"devDependencies": {
"dtslint": "^0.3.0",
"jest-dom": "^1.7.0",
"jest-dom": "^2.0.4",
"jest-in-case": "^1.0.2",
"jsdom": "^12.2.0",
"kcd-scripts": "^0.41.0",
"microbundle": "^0.4.4"
},
Expand Down
9 changes: 4 additions & 5 deletions src/__tests__/element-queries.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import 'jest-dom/extend-expect'
import {render} from './helpers/test-utils'
import document from './helpers/document'

beforeEach(() => {
window.Cypress = null
document.defaultView.Cypress = null
})

test('query can return null', () => {
Expand Down Expand Up @@ -148,9 +149,7 @@ test('get element by its alt text', () => {
<img alt="finding nemo poster" src="/finding-nemo.png" />
</div>,
`)
expect(getByAltText(/fin.*nem.*poster$/i).src).toBe(
'http://localhost/finding-nemo.png',
)
expect(getByAltText(/fin.*nem.*poster$/i).src).toContain('/finding-nemo.png')
})

test('query/get element by its title', () => {
Expand Down Expand Up @@ -489,7 +488,7 @@ test('test the debug helper prints the dom state here', () => {
})

test('get throws a useful error message without DOM in Cypress', () => {
window.Cypress = {}
document.defaultView.Cypress = {}
const {
getByLabelText,
getBySelectText,
Expand Down
3 changes: 2 additions & 1 deletion src/__tests__/events.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {fireEvent} from '..'
import document from './helpers/document'

const eventTypes = [
{
Expand Down Expand Up @@ -171,7 +172,7 @@ test('assigning a value to a target that cannot have a value throws an error', (

test('assigning the files property on an input', () => {
const node = document.createElement('input')
const file = new File(['(⌐□_□)'], 'chucknorris.png', {
const file = new document.defaultView.File(['(⌐□_□)'], 'chucknorris.png', {
type: 'image/png',
})
fireEvent.change(node, {target: {files: [file]}})
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/example.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import {getByLabelText, getByText, getByTestId, queryByTestId, wait} from '../'
// adds special assertions like toHaveTextContent
import 'jest-dom/extend-expect'
import document from './helpers/document'

function getExampleDOM() {
// This is just a raw example of setting up some DOM
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/get-queries-for-element.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {getQueriesForElement} from '../get-queries-for-element'
import {queries} from '..'
import document from './helpers/document'

test('uses default queries', () => {
const container = document.createElement('div')
Expand Down
35 changes: 35 additions & 0 deletions src/__tests__/helpers/document.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
let testWindow = typeof window === 'undefined' ? undefined : window

if (typeof window === 'undefined') {
const {JSDOM} = require('jsdom')
const dom = new JSDOM()
testWindow = dom.window
}

// TODO: these events are not supported by JSDOM so we need to shim them

if (!testWindow.ClipboardEvent) {
testWindow.ClipboardEvent = class ClipboardEvent extends testWindow.Event {}
}

if (!testWindow.DragEvent) {
testWindow.DragEvent = class DragEvent extends testWindow.Event {}
}

if (!testWindow.TransitionEvent) {
testWindow.TransitionEvent = class TransitionEvent extends testWindow.Event {}
}

if (!testWindow.AnimationEvent) {
testWindow.AnimationEvent = class AnimationEvent extends testWindow.Event {}
}

if (!testWindow.AnimationEvent) {
testWindow.AnimationEvent = class AnimationEvent extends testWindow.Event {}
}

if (!testWindow.InputEvent) {
testWindow.InputEvent = class InputEvent extends testWindow.Event {}
}

module.exports = testWindow.document
1 change: 1 addition & 0 deletions src/__tests__/helpers/test-utils.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {getQueriesForElement} from '../../get-queries-for-element'
import document from './document'

function render(html) {
const container = document.createElement('div')
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/pretty-dom.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {prettyDOM} from '../pretty-dom'
import {render} from './helpers/test-utils'
import document from './helpers/document'

test('it prints out the given DOM element tree', () => {
const {container} = render('<div>Hello World!</div>')
Expand Down
12 changes: 11 additions & 1 deletion src/__tests__/wait-for-element.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {waitForElement, wait} from '../'
// adds special assertions like toBeTruthy
import 'jest-dom/extend-expect'
import {render} from './helpers/test-utils'
import document from './helpers/document'

async function skipSomeTime(delayMs) {
await new Promise(resolve => setTimeout(resolve, delayMs))
Expand Down Expand Up @@ -104,7 +105,16 @@ test('it waits for the next DOM mutation with default callback', async () => {
const successHandler = jest.fn().mockName('successHandler')
const errorHandler = jest.fn().mockName('errorHandler')

const promise = waitForElement().then(successHandler, errorHandler)
let promise

if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
promise = waitForElement().then(successHandler, errorHandler)
} else {
promise = waitForElement(undefined, {container: document}).then(
successHandler,
errorHandler,
)
}

// Promise callbacks are always asynchronous.
expect(successHandler).toHaveBeenCalledTimes(0)
Expand Down
Loading