From 5a2c05fa204af7f6df80dc0d8fbdc2bbeec1ceca Mon Sep 17 00:00:00 2001 From: abelginrayen Date: Thu, 22 Mar 2018 19:40:39 +0530 Subject: [PATCH 01/13] Improving API's for testing. --- extend-expect.js | 7 ++++++ package.json | 3 ++- src/__tests__/fetch.js | 12 ++++++++++- src/jest-extensions.js | 48 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 extend-expect.js create mode 100644 src/jest-extensions.js diff --git a/extend-expect.js b/extend-expect.js new file mode 100644 index 00000000..603d15bf --- /dev/null +++ b/extend-expect.js @@ -0,0 +1,7 @@ +const expect = require('expect') //eslint-disable-line import/no-extraneous-dependencies +const extensions = require('./dist/jest-extensions') + +const {toBeInTheDOM, toHaveTextContent, toSatisfyDOM} = extensions.default +expect.extend({toBeInTheDOM, toHaveTextContent, toSatisfyDOM}) + +module.exports = expect diff --git a/package.json b/package.json index 8794fdfe..8939ddd7 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ }, "files": [ "dist", - "typings" + "typings", + "extend-expect.js" ], "keywords": [], "author": "Kent C. Dodds (http://kentcdodds.com/)", diff --git a/src/__tests__/fetch.js b/src/__tests__/fetch.js index 6cca6f44..842cf1cd 100644 --- a/src/__tests__/fetch.js +++ b/src/__tests__/fetch.js @@ -1,6 +1,7 @@ import React from 'react' import axiosMock from 'axios' import {render, Simulate, flushPromises} from '../' +import '../../extend-expect' //eslint-disable-line import/no-unassigned-import // instead of importing it, we'll define it inline here // import Fetch from '../fetch' @@ -37,7 +38,7 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl }), ) const url = '/greeting' - const {getByTestId, container} = render() + const {getByTestId, container, queryByTestId} = render() // Act Simulate.click(getByTestId('load-greeting')) @@ -45,6 +46,15 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl await flushPromises() // Assert + expect(queryByTestId('foo')).not.toBeInTheDOM() + expect(queryByTestId('greeting-text')).toBeInTheDOM() + expect(queryByTestId('greeting-text')).toHaveTextContent('hello there') + expect(getByTestId('greeting-text')).toSatisfyDOM( + el => el.textContent === 'hello there', + ) + expect(queryByTestId('greeting-text')).not.toHaveTextContent( + 'you are not there', + ) expect(axiosMock.get).toHaveBeenCalledTimes(1) expect(axiosMock.get).toHaveBeenCalledWith(url) expect(getByTestId('greeting-text').textContent).toBe('hello there') diff --git a/src/jest-extensions.js b/src/jest-extensions.js new file mode 100644 index 00000000..361e90e7 --- /dev/null +++ b/src/jest-extensions.js @@ -0,0 +1,48 @@ +const extensions = { + toBeInTheDOM(received) { + if (received) { + return { + message: () => 'expected the dom to be present', + pass: true, + } + } else { + return { + message: () => 'expected the dom not to be present', + pass: false, + } + } + }, + + toHaveTextContent(htmlElement, checkWith) { + const textContent = htmlElement.textContent + const pass = textContent === checkWith + if (pass) { + return { + message: () => `expected ${textContent} not equals to ${checkWith}`, + pass: true, + } + } else { + return { + message: () => `expected ${textContent} equals to ${checkWith}`, + pass: false, + } + } + }, + + toSatisfyDOM(element, fn) { + const pass = fn(element) + if (pass) { + return { + message: () => 'expected condition not equals to true', + pass: true, + } + } else { + return { + message: () => 'expected condition equals to true', + pass: false, + } + } + }, +} + +export default extensions From dd727d0bc4661e82006afe3107e43db0401b11dc Mon Sep 17 00:00:00 2001 From: abelginrayen Date: Thu, 22 Mar 2018 19:41:40 +0530 Subject: [PATCH 02/13] Improving Apis From 485e8fb79325b09c853de0afad6ff893f03a5f89 Mon Sep 17 00:00:00 2001 From: abelginrayen Date: Thu, 22 Mar 2018 19:56:55 +0530 Subject: [PATCH 03/13] Adding all contributions --- .all-contributorsrc | 10 ++++++++++ README.md | 8 +++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 90dd9791..4cd065e3 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -67,6 +67,16 @@ "doc", "test" ] + }, + { + "login": "antoaravinth", + "name": "Anto Aravinth", + "avatar_url": "https://avatars1.githubusercontent.com/u/1241511?s=460&v=4", + "profile": "github.com/antoaravinth", + "contributions": [ + "code", + "test" + ] } ] } diff --git a/README.md b/README.md index bc9d6383..162facad 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] @@ -382,11 +382,9 @@ light-weight, simple, and understandable. Thanks goes to these people ([emoji key][emojis]): - -| [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | -| :---: | :---: | :---: | :---: | :---: | :---: | - +| [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Anto Aravinth](github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") | +| :---: | :---: | :---: | :---: | :---: | :---: | :---: | This project follows the [all-contributors][all-contributors] specification. From 96a1a9e0af73da59e3143c3064cd9803bd97dcfd Mon Sep 17 00:00:00 2001 From: abelginrayen Date: Thu, 22 Mar 2018 19:58:52 +0530 Subject: [PATCH 04/13] Fixing wrong url --- .all-contributorsrc | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 4cd065e3..a21d19b1 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -72,7 +72,7 @@ "login": "antoaravinth", "name": "Anto Aravinth", "avatar_url": "https://avatars1.githubusercontent.com/u/1241511?s=460&v=4", - "profile": "github.com/antoaravinth", + "profile": "https://github.com/antoaravinth", "contributions": [ "code", "test" diff --git a/README.md b/README.md index 162facad..20ada27a 100644 --- a/README.md +++ b/README.md @@ -383,7 +383,7 @@ Thanks goes to these people ([emoji key][emojis]): -| [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Anto Aravinth](github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") | +| [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | From cc2a1c30a1547f77c87aed062b56e1cd6b9f2f28 Mon Sep 17 00:00:00 2001 From: Anto Aravinth Date: Sat, 24 Mar 2018 14:53:51 +0530 Subject: [PATCH 05/13] Fixing review comments & making colorful assertions :) --- package.json | 3 +- src/__tests__/fetch.js | 14 +++++---- src/jest-extensions.js | 70 +++++++++++++++++++++++++++++++++++++----- 3 files changed, 72 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 8939ddd7..70f270f2 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,8 @@ "eslintConfig": { "extends": "./node_modules/kcd-scripts/eslint.js", "rules": { - "react/prop-types": "off" + "react/prop-types": "off", + "import/no-unassigned-import" : "off" } }, "eslintIgnore": [ diff --git a/src/__tests__/fetch.js b/src/__tests__/fetch.js index 842cf1cd..48e5d452 100644 --- a/src/__tests__/fetch.js +++ b/src/__tests__/fetch.js @@ -1,7 +1,7 @@ import React from 'react' import axiosMock from 'axios' import {render, Simulate, flushPromises} from '../' -import '../../extend-expect' //eslint-disable-line import/no-unassigned-import +import '../../extend-expect' // instead of importing it, we'll define it inline here // import Fetch from '../fetch' @@ -46,7 +46,13 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl await flushPromises() // Assert - expect(queryByTestId('foo')).not.toBeInTheDOM() + expect(axiosMock.get).toHaveBeenCalledTimes(1) + expect(axiosMock.get).toHaveBeenCalledWith(url) + expect(getByTestId('greeting-text').textContent).toBe('hello there') + expect(container.firstChild).toMatchSnapshot() + + //other ways to assert your test cases, but you don't need all of them. + expect(queryByTestId('greeting-text')).toBeInTheDOM() expect(queryByTestId('greeting-text')).toBeInTheDOM() expect(queryByTestId('greeting-text')).toHaveTextContent('hello there') expect(getByTestId('greeting-text')).toSatisfyDOM( @@ -55,8 +61,4 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl expect(queryByTestId('greeting-text')).not.toHaveTextContent( 'you are not there', ) - expect(axiosMock.get).toHaveBeenCalledTimes(1) - expect(axiosMock.get).toHaveBeenCalledWith(url) - expect(getByTestId('greeting-text').textContent).toBe('hello there') - expect(container.firstChild).toMatchSnapshot() }) diff --git a/src/jest-extensions.js b/src/jest-extensions.js index 361e90e7..ea58200f 100644 --- a/src/jest-extensions.js +++ b/src/jest-extensions.js @@ -1,44 +1,98 @@ +import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils' //eslint-disable-line import/no-extraneous-dependencies + +function getDisplayName(subject) { + if (subject && subject.constructor) { + return subject.constructor.name + } else { + return typeof subject + } +} + +const assertMessage = (assertionName, message, received, expected) => () => + `${matcherHint(`${assertionName}`, 'received', '')} \n${message}: ` + + `${printExpected(expected)} \nReceived: ${printReceived(received)}` + const extensions = { toBeInTheDOM(received) { + getDisplayName(received) if (received) { return { - message: () => 'expected the dom to be present', + message: () => + `${matcherHint( + '.not.toBeInTheDOM', + 'received', + '', + )} Expected the element not to be present` + + `\nReceived : ${printReceived(received)}`, pass: true, } } else { return { - message: () => 'expected the dom not to be present', + message: () => + `${matcherHint( + '.toBeInTheDOM', + 'received', + '', + )} Expected the element to be present` + + `\nReceived : ${printReceived(received)}`, pass: false, } } }, toHaveTextContent(htmlElement, checkWith) { + if (!(htmlElement instanceof HTMLElement)) + throw new Error( + `The given subject is a ${getDisplayName( + htmlElement, + )}, not an HTMLElement`, + ) + const textContent = htmlElement.textContent const pass = textContent === checkWith if (pass) { return { - message: () => `expected ${textContent} not equals to ${checkWith}`, + message: assertMessage( + '.not.toHaveTextContent', + 'Expected value not equals to', + htmlElement, + checkWith, + ), pass: true, } } else { return { - message: () => `expected ${textContent} equals to ${checkWith}`, + message: assertMessage( + '.toHaveTextContent', + 'Expected value equals to', + htmlElement, + checkWith, + ), pass: false, } } }, - toSatisfyDOM(element, fn) { - const pass = fn(element) + toSatisfyDOM(actual, predicate) { + const pass = predicate(actual) if (pass) { return { - message: () => 'expected condition not equals to true', + message: assertMessage( + '.not.toSatisfyDOM()', + 'Expected predicate not equals to true', + actual, + '', + ), pass: true, } } else { return { - message: () => 'expected condition equals to true', + message: assertMessage( + '.not.toSatisfyDOM()', + 'Expected predicate equals to true', + actual, + '', + ), pass: false, } } From 3ae81f63f491e8ea54c26b7262728472a135834b Mon Sep 17 00:00:00 2001 From: Anto Aravinth Date: Sat, 24 Mar 2018 20:15:54 +0530 Subject: [PATCH 06/13] Removing unwanted changes --- package.json | 10 ++++------ src/__tests__/text-matchers.js | 2 -- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 86a41415..d709aae9 100644 --- a/package.json +++ b/package.json @@ -19,19 +19,17 @@ }, "files": [ "dist", - "typings", - "extend-expect.js" + "typings" ], "keywords": [], "author": "Kent C. Dodds (http://kentcdodds.com/)", "license": "MIT", - "dependencies": { - "jest-extended": "^0.6.0" - }, + "dependencies": {}, "devDependencies": { "@types/react-dom": "^16.0.4", "axios": "^0.18.0", "history": "^4.7.2", + "jest-in-case": "^1.0.2", "kcd-scripts": "^0.36.1", "react": "^16.2.0", "react-dom": "^16.2.0", @@ -64,4 +62,4 @@ "url": "https://github.com/kentcdodds/react-testing-library/issues" }, "homepage": "https://github.com/kentcdodds/react-testing-library#readme" -} +} \ No newline at end of file diff --git a/src/__tests__/text-matchers.js b/src/__tests__/text-matchers.js index 2885f464..c932572a 100644 --- a/src/__tests__/text-matchers.js +++ b/src/__tests__/text-matchers.js @@ -1,7 +1,5 @@ import React from 'react' -/* eslint-disable */ import cases from 'jest-in-case' -/* eslint-disable */ import {render} from '../' cases( From 987c4f3b773e4a6f6489390d45617534f9e9e381 Mon Sep 17 00:00:00 2001 From: Anto Aravinth Date: Tue, 27 Mar 2018 21:30:39 +0530 Subject: [PATCH 07/13] Fixing review comments --- extend-expect.js | 8 +------- src/__tests__/element-queries.js | 12 +++--------- src/extend-expect.js | 7 +++++++ src/jest-extensions.js | 28 ++-------------------------- src/queries.js | 20 +++++++++++--------- src/utils.js | 9 +++++++++ 6 files changed, 33 insertions(+), 51 deletions(-) create mode 100644 src/extend-expect.js create mode 100644 src/utils.js diff --git a/extend-expect.js b/extend-expect.js index 603d15bf..3cee4049 100644 --- a/extend-expect.js +++ b/extend-expect.js @@ -1,7 +1 @@ -const expect = require('expect') //eslint-disable-line import/no-extraneous-dependencies -const extensions = require('./dist/jest-extensions') - -const {toBeInTheDOM, toHaveTextContent, toSatisfyDOM} = extensions.default -expect.extend({toBeInTheDOM, toHaveTextContent, toSatisfyDOM}) - -module.exports = expect +require('./dist/extend-expect') diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 1c776e53..23bfff40 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -1,6 +1,6 @@ import React from 'react' import {render} from '../' -import '../../extend-expect' +import '../extend-expect' test('query can return null', () => { const { @@ -68,17 +68,11 @@ test('totally empty label', () => { }) test('using jest helpers to assert element states', () => { - const {queryByTestId, getByTestId} = render( - 2, - ) + const {queryByTestId} = render(2) - //other ways to assert your test cases, but you don't need all of them. + // other ways to assert your test cases, but you don't need all of them. expect(queryByTestId('count-value')).toBeInTheDOM() expect(queryByTestId('count-value')).toHaveTextContent('2') - expect(getByTestId('count-value')).toSatisfyDOM(el => el.textContent === '2') - expect(queryByTestId('count-value')).not.toHaveTextContent( - 'you are not there', - ) }) /* eslint jsx-a11y/label-has-for:0 */ diff --git a/src/extend-expect.js b/src/extend-expect.js new file mode 100644 index 00000000..58359822 --- /dev/null +++ b/src/extend-expect.js @@ -0,0 +1,7 @@ +import expect from 'expect' //eslint-disable-line import/no-extraneous-dependencies +import extensions from './jest-extensions' + +const {toBeInTheDOM, toHaveTextContent} = extensions +expect.extend({toBeInTheDOM, toHaveTextContent}) + +export default expect diff --git a/src/jest-extensions.js b/src/jest-extensions.js index 74f2660d..a7e702aa 100644 --- a/src/jest-extensions.js +++ b/src/jest-extensions.js @@ -1,4 +1,5 @@ import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils' //eslint-disable-line import/no-extraneous-dependencies +import matches from './utils' function getDisplayName(subject) { if (subject && subject.constructor) { @@ -49,7 +50,7 @@ const extensions = { ) const textContent = htmlElement.textContent - const pass = textContent === checkWith + const pass = matches(textContent, htmlElement, checkWith) if (pass) { return { message: assertMessage( @@ -72,31 +73,6 @@ const extensions = { } } }, - - toSatisfyDOM(actual, predicate) { - const pass = predicate(actual) - if (pass) { - return { - message: assertMessage( - '.not.toSatisfyDOM()', - 'Expected predicate not equals to true', - actual, - predicate, - ), - pass: true, - } - } else { - return { - message: assertMessage( - '.not.toSatisfyDOM()', - 'Expected predicate equals to true', - actual, - predicate, - ), - pass: false, - } - } - }, } export default extensions diff --git a/src/queries.js b/src/queries.js index 94382dab..1e23e650 100644 --- a/src/queries.js +++ b/src/queries.js @@ -1,3 +1,5 @@ +import matches from './utils' + // Here are the queries for the library. // The queries here should only be things that are accessible to both users who are using a screen reader // and those who are not using a screen reader (with the exception of the data-testid attribute query). @@ -69,15 +71,15 @@ function getText(node) { .join(' ') } -function matches(textToMatch, node, matcher) { - if (typeof matcher === 'string') { - return textToMatch.toLowerCase().includes(matcher.toLowerCase()) - } else if (typeof matcher === 'function') { - return matcher(textToMatch, node) - } else { - return matcher.test(textToMatch) - } -} +// function matches(textToMatch, node, matcher) { +// if (typeof matcher === 'string') { +// return textToMatch.toLowerCase().includes(matcher.toLowerCase()) +// } else if (typeof matcher === 'function') { +// return matcher(textToMatch, node) +// } else { +// return matcher.test(textToMatch) +// } +// } // getters // the reason we're not dynamically generating these functions that look so similar: diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 00000000..358414aa --- /dev/null +++ b/src/utils.js @@ -0,0 +1,9 @@ +export default function matches(textToMatch, node, matcher) { + if (typeof matcher === 'string') { + return textToMatch.toLowerCase().includes(matcher.toLowerCase()) + } else if (typeof matcher === 'function') { + return matcher(textToMatch, node) + } else { + return matcher.test(textToMatch) + } +} From 57fd42422551d581631b4d6207bac06ad135c7d5 Mon Sep 17 00:00:00 2001 From: Anto Aravinth Date: Tue, 27 Mar 2018 21:31:47 +0530 Subject: [PATCH 08/13] removing unwanted comments --- src/queries.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/queries.js b/src/queries.js index 1e23e650..9b0c95b3 100644 --- a/src/queries.js +++ b/src/queries.js @@ -71,16 +71,6 @@ function getText(node) { .join(' ') } -// function matches(textToMatch, node, matcher) { -// if (typeof matcher === 'string') { -// return textToMatch.toLowerCase().includes(matcher.toLowerCase()) -// } else if (typeof matcher === 'function') { -// return matcher(textToMatch, node) -// } else { -// return matcher.test(textToMatch) -// } -// } - // getters // the reason we're not dynamically generating these functions that look so similar: // 1. The error messages are specific to each one and depend on arguments From d1157a28cf4fc0400798eef7b722968293735c3b Mon Sep 17 00:00:00 2001 From: Anto Aravinth Date: Wed, 28 Mar 2018 06:39:41 +0530 Subject: [PATCH 09/13] Adding test cases for the coverage --- src/__tests__/element-queries.js | 7 +++++++ src/jest-extensions.js | 8 ++++---- src/queries.js | 2 +- src/utils.js | 3 ++- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 23bfff40..d9e38d0b 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -72,7 +72,14 @@ test('using jest helpers to assert element states', () => { // other ways to assert your test cases, but you don't need all of them. expect(queryByTestId('count-value')).toBeInTheDOM() + expect(queryByTestId('count-value1')).not.toBeInTheDOM() expect(queryByTestId('count-value')).toHaveTextContent('2') + expect(queryByTestId('count-value')).not.toHaveTextContent('21') + expect(() => + expect(queryByTestId('count-value2')).toHaveTextContent('2'), + ).toThrowError() + // expect(() => queryByTestId('count-value1')) + // expect(queryByTestId('count-value1')).not.toHaveTextContent('21') }) /* eslint jsx-a11y/label-has-for:0 */ diff --git a/src/jest-extensions.js b/src/jest-extensions.js index a7e702aa..69e1e92c 100644 --- a/src/jest-extensions.js +++ b/src/jest-extensions.js @@ -1,5 +1,5 @@ import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils' //eslint-disable-line import/no-extraneous-dependencies -import matches from './utils' +import {matches} from './utils' function getDisplayName(subject) { if (subject && subject.constructor) { @@ -9,7 +9,7 @@ function getDisplayName(subject) { } } -const assertMessage = (assertionName, message, received, expected) => () => +const assertMessage = (assertionName, message, received, expected) => `${matcherHint(`${assertionName}`, 'received', '')} \n${message}: ` + `${printExpected(expected)} \nReceived: ${printReceived(received)}` @@ -18,7 +18,7 @@ const extensions = { getDisplayName(received) if (received) { return { - message: () => + message: `${matcherHint( '.not.toBeInTheDOM', 'received', @@ -29,7 +29,7 @@ const extensions = { } } else { return { - message: () => + message: `${matcherHint( '.toBeInTheDOM', 'received', diff --git a/src/queries.js b/src/queries.js index 9b0c95b3..485e2826 100644 --- a/src/queries.js +++ b/src/queries.js @@ -1,4 +1,4 @@ -import matches from './utils' +import {matches} from './utils' // Here are the queries for the library. // The queries here should only be things that are accessible to both users who are using a screen reader diff --git a/src/utils.js b/src/utils.js index 358414aa..87ecef8b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,4 +1,5 @@ -export default function matches(textToMatch, node, matcher) { +//eslint-disable-next-line import/prefer-default-export +export function matches(textToMatch, node, matcher) { if (typeof matcher === 'string') { return textToMatch.toLowerCase().includes(matcher.toLowerCase()) } else if (typeof matcher === 'function') { From 74d82050405bc8c63439b293d2ac9f007f7d1d81 Mon Sep 17 00:00:00 2001 From: Anto Aravinth Date: Wed, 28 Mar 2018 06:57:38 +0530 Subject: [PATCH 10/13] removing commented code and making few changes to the contribution file --- .all-contributorsrc | 3 ++- README.md | 4 +--- src/__tests__/element-queries.js | 2 -- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index adea5f3e..91f0d2cd 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -84,7 +84,8 @@ "profile": "https://github.com/antoaravinth", "contributions": [ "code", - "test" + "test", + "doc" ] }, { diff --git a/README.md b/README.md index 5182f77d..a97073a6 100644 --- a/README.md +++ b/README.md @@ -585,12 +585,10 @@ light-weight, simple, and understandable. Thanks goes to these people ([emoji key][emojis]): - | [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Justin Hall](https://github.com/wKovacs64)
[๐Ÿ“ฆ](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | -| [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | - +| [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index d9e38d0b..a5912c8d 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -78,8 +78,6 @@ test('using jest helpers to assert element states', () => { expect(() => expect(queryByTestId('count-value2')).toHaveTextContent('2'), ).toThrowError() - // expect(() => queryByTestId('count-value1')) - // expect(queryByTestId('count-value1')).not.toHaveTextContent('21') }) /* eslint jsx-a11y/label-has-for:0 */ From 8348852572237756f9c3ae6d04e205c27423d5a0 Mon Sep 17 00:00:00 2001 From: abelginrayen Date: Wed, 28 Mar 2018 16:27:04 +0530 Subject: [PATCH 11/13] Updating the readme --- README.md | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index a97073a6..dbc30293 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ components. It provides light utility functions on top of `react-dom` and * [`Simulate`](#simulate) * [`flushPromises`](#flushpromises) * [`render`](#render) +* [Custom Jest Matchers](#custom-jest-matchers) * [`TextMatch`](#textmatch) * [`query` APIs](#query-apis) * [Examples](#examples) @@ -219,13 +220,16 @@ const usernameInputElement = getByTestId('username-input') > Learn more about `data-testid`s from the blog post > ["Making your UI tests resilient to change"][data-testid-blog-post] -#### `toBeInTheDOM` +## Custom Jest Matchers There are two simple API which extend the `expect` API of jest for making assertions easier. -The first one `toBeInTheDOM` which allows you to assert whether an element present in the DOM or not + +#### `toBeInTheDOM` + +This allows you to assert whether an element present in the DOM or not. ```javascript -import 'extend-expect' //adds few API to jest's extend +import 'react-testing-library/extend-expect' // adds few API to jest's extend render(2) expect(queryByTestId('count-value')).toBeInTheDOM() @@ -237,13 +241,16 @@ expect(queryByTestId('count-value1')).not.toBeInTheDOM() This API allows you to check whether the given element has a text content or not. ```javascript -import 'extend-expect' //adds few API to jest's extend +import 'react-testing-library/extend-expect' // adds few API to jest's extend render(2) -expect(queryByTestId('count-value')).toHaveTextContent('2') -expect(queryByTestId('count-value')).not.toHaveTextContent('21') +expect(getByTestId('count-value')).toHaveTextContent('2') +expect(getByTestId('count-value')).not.toHaveTextContent('21') ``` +Note: for the above assertions, make sure you use a query function (like `queryByTestId`) rather than a get function (like `getByTestId`). +Otherwise the `get*` function could throw an error. + ## `TextMatch` Several APIs accept a `TextMatch` which can be a `string`, `regex` or a @@ -585,10 +592,12 @@ light-weight, simple, and understandable. Thanks goes to these people ([emoji key][emojis]): + | [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Justin Hall](https://github.com/wKovacs64)
[๐Ÿ“ฆ](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | + This project follows the [all-contributors][all-contributors] specification. From 492645b70a4d6d17b442295db56034a0f07f9d6b Mon Sep 17 00:00:00 2001 From: abelginrayen Date: Wed, 28 Mar 2018 16:29:02 +0530 Subject: [PATCH 12/13] Making line break changes --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index dbc30293..63c2f1e2 100644 --- a/README.md +++ b/README.md @@ -248,8 +248,7 @@ expect(getByTestId('count-value')).toHaveTextContent('2') expect(getByTestId('count-value')).not.toHaveTextContent('21') ``` -Note: for the above assertions, make sure you use a query function (like `queryByTestId`) rather than a get function (like `getByTestId`). -Otherwise the `get*` function could throw an error. +Note: for the above assertions, make sure you use a query function (like `queryByTestId`) rather than a get function (like `getByTestId`). Otherwise the `get*` function could throw an error. ## `TextMatch` From e222206fd0e4d271a0d30726d43611ddf697ff58 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 28 Mar 2018 09:18:51 -0600 Subject: [PATCH 13/13] Update README.md --- README.md | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 63c2f1e2..3d767216 100644 --- a/README.md +++ b/README.md @@ -224,32 +224,40 @@ const usernameInputElement = getByTestId('username-input') There are two simple API which extend the `expect` API of jest for making assertions easier. -#### `toBeInTheDOM` +### `toBeInTheDOM` This allows you to assert whether an element present in the DOM or not. ```javascript -import 'react-testing-library/extend-expect' // adds few API to jest's extend +// add the custom expect matchers +import 'react-testing-library/extend-expect' -render(2) +// ... +const {queryByTestId} = render(2) expect(queryByTestId('count-value')).toBeInTheDOM() expect(queryByTestId('count-value1')).not.toBeInTheDOM() +// ... ``` -#### `toHaveTextContent` +> Note: when using `toBeInTheDOM`, make sure you use a query function +> (like `queryByTestId`) rather than a get function (like `getByTestId`). +> Otherwise the `get*` function could throw an error before your assertion. + +### `toHaveTextContent` This API allows you to check whether the given element has a text content or not. ```javascript -import 'react-testing-library/extend-expect' // adds few API to jest's extend +// add the custom expect matchers +import 'react-testing-library/extend-expect' -render(2) +// ... +const {getByTestId} = render(2) expect(getByTestId('count-value')).toHaveTextContent('2') expect(getByTestId('count-value')).not.toHaveTextContent('21') +// ... ``` -Note: for the above assertions, make sure you use a query function (like `queryByTestId`) rather than a get function (like `getByTestId`). Otherwise the `get*` function could throw an error. - ## `TextMatch` Several APIs accept a `TextMatch` which can be a `string`, `regex` or a