-
Notifications
You must be signed in to change notification settings - Fork 153
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(commands): use waitForElement; add jest & cypress tests (#2)
* feat(commands): use waitForElement; add jest & cypress tests @kentcdodds I apologize for this one huge commit but I wanted to make it all real, fast (in a few hours). - change commands to use `waitForElement` from `dom-testing-library` (updated to latest) - update `kcd-scripts` dependency to latest - add jest tests for basic smoke check on the exports - add cypress tests for functionality check of the commands - add npm scripts that run the tests in both development and CI environments (somewhat convoluted because cypress hasn't got enough hooks to spin up the fixture server from JavaScript; I didn't want to write a Node app so I used `serve` which needs to be killed after cypress exits but regardless of its exit code, so I used `npm-run-all` and `fkill-cli` and a combination of npm scripts with parallel/sequential execution) * fix(ci): attempt to use `[` instead of `[[` for bash test tool * fix(package): add missing `fkill-cli` needed by npm scripts * Update package.json * Update cypress.json * Update commands.spec.js * Update package.json
- Loading branch information
1 parent
5106558
commit ef22f87
Showing
13 changed files
with
194 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"baseUrl": "http://localhost:13370", | ||
"videoRecording": false, | ||
"screenshotOnHeadlessFailure": false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>cypress-testing-library</title> | ||
<style> | ||
blockquote { | ||
margin: 0; | ||
border-left: 4px solid grey; | ||
padding-left: 10px; | ||
color: grey; | ||
} | ||
section { | ||
padding: 10px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<blockquote> | ||
No auto-reload after changing this static HTML markup: | ||
click <span title="Run All Tests">↻</span> Run All Tests. | ||
</blockquote> | ||
<section> | ||
<h2>getByPlaceholderText</h2> | ||
<input type="text" placeholder="Placeholder Text" /> | ||
</section> | ||
<section> | ||
<h2>getByText</h2> | ||
<button onclick="this.innerText = 'Button Clicked'">Button Text</button> | ||
</section> | ||
<section> | ||
<h2>getByLabelText</h2> | ||
<label for="input-labelled-by-id">Label For Input Labelled By Id</label> | ||
<input type="text" placeholder="Input Labelled By Id" id="input-labelled-by-id" /> | ||
</section> | ||
<section> | ||
<h2>getByAltText</h2> | ||
<img | ||
src="data:image/png;base64," | ||
alt="Image Alt Text" | ||
onclick="this.style.border = '5px solid red'" | ||
/> | ||
</section> | ||
<section> | ||
<h2>getByTestId</h2> | ||
<img | ||
data-testid="image-with-random-alt-tag" | ||
src="data:image/png;base64," | ||
onclick="this.style.border = '5px solid red'" | ||
/> | ||
</section> | ||
<!-- Prettier unindents the script tag below --> | ||
<script> | ||
document | ||
.querySelector('[data-testid="image-with-random-alt-tag"]') | ||
.setAttribute('alt', 'Image Random Alt Text ' + Math.random()) | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
describe('dom-testing-library commands', () => { | ||
beforeEach(() => { | ||
cy.visit('/') | ||
}) | ||
it('getByPlaceholderText', () => { | ||
cy | ||
.getByPlaceholderText('Placeholder Text') | ||
.click() | ||
.type('Hello Placeholder') | ||
}) | ||
|
||
it('getByText', () => { | ||
cy | ||
.getByText('Button Text') | ||
.click() | ||
}) | ||
|
||
it('getByLabelText', () => { | ||
cy | ||
.getByLabelText('Label For Input Labelled By Id') | ||
.click() | ||
.type('Hello Input Labelled By Id') | ||
}) | ||
|
||
it('getByAltText', () => { | ||
cy | ||
.getByAltText('Image Alt Text') | ||
.click() | ||
}) | ||
|
||
it('getByTestId', () => { | ||
cy | ||
.getByTestId('image-with-random-alt-tag') | ||
.click() | ||
}) | ||
}) | ||
|
||
/* global cy */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// Keeping this file here, otherwise it gets recreated by Cypress on each run. | ||
module.exports = () => {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import '../../src/add-commands' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
const jestConfig = require('kcd-scripts/jest') | ||
|
||
module.exports = Object.assign(jestConfig, { | ||
testEnvironment: 'jest-environment-jsdom', | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`exports expected commands 1`] = ` | ||
Array [ | ||
"getByPlaceholderText", | ||
"getByText", | ||
"getByLabelText", | ||
"getByAltText", | ||
"getByTestId", | ||
] | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import {commands} from '../' | ||
|
||
test('adds commands to Cypress', () => { | ||
const addMock = jest.fn().mockName('Cypress.Commands.add') | ||
global.Cypress = {Commands: {add: addMock}} | ||
global.cy = {} | ||
|
||
require('../add-commands') | ||
|
||
expect(addMock).toHaveBeenCalledTimes(commands.length) | ||
commands.forEach(({name}, index) => { | ||
expect(addMock.mock.calls[index]).toMatchObject([ | ||
name, | ||
// We get a new function that is `command.bind(null, cy)` i.e. global `cy` passed into the first argument. | ||
// The commands themselves will be tested separately in the Cypress end-to-end tests. | ||
expect.any(Function), | ||
]) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import {commands} from '../' | ||
|
||
test('exports expected commands', () => { | ||
expect(commands).toMatchObject(expect.any(Array)) | ||
expect(commands.map(({name}) => name)).toMatchSnapshot() | ||
commands.forEach(command => | ||
expect(command).toMatchObject({ | ||
name: expect.any(String), | ||
// We get a new function that wraps the respective query from `dom-testing-library`. | ||
// The commands themselves will be tested separately in the Cypress end-to-end tests. | ||
command: expect.any(Function), | ||
}), | ||
) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
import {commands} from './' | ||
|
||
commands.forEach(({name, command}) => { | ||
Cypress.Commands.add(name, command) | ||
Cypress.Commands.add(name, command.bind(null, cy)) | ||
}) | ||
|
||
/* global Cypress */ | ||
/* global Cypress, cy */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,44 +1,27 @@ | ||
import {queries} from 'dom-testing-library' | ||
import {queries, waitForElement} from 'dom-testing-library' | ||
|
||
const commands = Object.keys(queries) | ||
.filter(queryName => queryName.startsWith('getBy')) | ||
.map(queryName => { | ||
return { | ||
name: queryName, | ||
command: (...args) => { | ||
const fn = new Function( | ||
'args', | ||
'query', | ||
'getCommandWaiter', | ||
command: (cy, ...args) => { | ||
const queryImpl = queries[queryName] | ||
const commandImpl = doc => | ||
waitForElement(() => queryImpl(doc, ...args), {container: doc}) | ||
const thenHandler = new Function( | ||
'commandImpl', | ||
` | ||
return function Command__${queryName}({document}) { | ||
return getCommandWaiter(document, () => query(document, ...args))(); | ||
}; | ||
return function Command__${queryName}(thenArgs) { | ||
return commandImpl(thenArgs.document) | ||
} | ||
`, | ||
)(args, queries[queryName], getCommandWaiter) | ||
return cy.window({log: false}).then(fn) | ||
)(commandImpl) | ||
return cy.window({log: false}).then(thenHandler) | ||
}, | ||
} | ||
}) | ||
|
||
function getCommandWaiter(container, fn) { | ||
return function waiter() { | ||
const val = fn() | ||
if (val) { | ||
return val | ||
} else { | ||
return new Promise(resolve => { | ||
const observer = new MutationObserver(() => { | ||
observer.disconnect() | ||
resolve(waiter()) | ||
}) | ||
observer.observe(container, {subtree: true, childList: true}) | ||
}) | ||
} | ||
} | ||
} | ||
|
||
export {commands, getCommandWaiter} | ||
export {commands} | ||
|
||
/* eslint no-new-func:0, import/default:0 */ | ||
/* global cy */ | ||
/* eslint no-new-func:0 */ |