From 6eec06d11323e57295fb611da1c0c9245956b63c Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 19 Apr 2018 22:39:18 -0600 Subject: [PATCH 1/4] Add Test and add myself to list of contributors --- .all-contributorsrc | 9 ++++++ README.md | 6 ++-- src/__tests__/react-context.js | 59 ++++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 src/__tests__/react-context.js diff --git a/.all-contributorsrc b/.all-contributorsrc index d35f6f03..d2f46602 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -186,6 +186,15 @@ "contributions": [ "doc" ] + }, + { + "login": "ChrisWcs", + "name": "Christian", + "avatar_url": "https://avatars1.githubusercontent.com/u/19828824?v=4", + "profile": "http://Chriswcs.github.io", + "contributions": [ + "test" + ] } ] } diff --git a/README.md b/README.md index dad16227..aaf1926b 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-18-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-19-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] @@ -753,13 +753,11 @@ 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") | [
Łukasz Gandecki](http://team.thebrain.pro)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | [
Ivan Babak](https://sompylasar.github.io)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [πŸ€”](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Jesse Day](https://github.com/jday3)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | [
Ernesto GarcΓ­a](http://gnapse.github.io)
[πŸ’¬](#question-gnapse "Answering Questions") [πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Documentation") | [
Josef Maxx Blake](http://jomaxx.com)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Tests") | -| [
Michal Baranowski](https://twitter.com/baranovskim)
[πŸ“](#blog-mbaranovski "Blogposts") [βœ…](#tutorial-mbaranovski "Tutorials") | [
Arthur Puthin](https://github.com/aputhin)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [
Thomas Chia](https://github.com/thchia)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [
Thiago Galvani](http://ilegra.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | - +| [
Michal Baranowski](https://twitter.com/baranovskim)
[πŸ“](#blog-mbaranovski "Blogposts") [βœ…](#tutorial-mbaranovski "Tutorials") | [
Arthur Puthin](https://github.com/aputhin)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [
Thomas Chia](https://github.com/thchia)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [
Thiago Galvani](http://ilegra.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | [
Christian](http://Chriswcs.github.io)
[⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=ChrisWcs "Tests") | This project follows the [all-contributors][all-contributors] specification. diff --git a/src/__tests__/react-context.js b/src/__tests__/react-context.js new file mode 100644 index 00000000..9d30875b --- /dev/null +++ b/src/__tests__/react-context.js @@ -0,0 +1,59 @@ +import React from 'react' +import {render, Simulate} from '../' + +const StateContext = React.createContext() + +const MyButton = () => ( + + {({handleToggle}) => ( + + )} + +) + +const SecretMessage = () => ( + + {({toggleStatus}) => ( +

+ {toggleStatus ? 'Secret Message' : 'Hidden'} +

+ )} + +) + +class Container extends React.Component { + state = { + toggleStatus: false, + } + + handleToggle = () => { + this.setState(prevState => ({ + toggleStatus: !prevState.toggleStatus, + })) + } + + render() { + return ( +
+ + + + +
+ ) + } +} + +test('Component renders with the correct message, correctly changes message after clicking butotn', () => { + const {getByTestId} = render() + expect(getByTestId('message').textContent).toBe('Hidden') + Simulate.click(getByTestId('button')) + expect(getByTestId('message').textContent).toBe('Secret Message') +}) From 89707e6a4f242124d0b82704acfaf3c4feb48c16 Mon Sep 17 00:00:00 2001 From: Christian Date: Fri, 20 Apr 2018 11:46:52 -0600 Subject: [PATCH 2/4] Change getByTestId to getByText --- src/__tests__/react-context.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/__tests__/react-context.js b/src/__tests__/react-context.js index 9d30875b..0807e9e8 100644 --- a/src/__tests__/react-context.js +++ b/src/__tests__/react-context.js @@ -6,7 +6,7 @@ const StateContext = React.createContext() const MyButton = () => ( {({handleToggle}) => ( - )} @@ -16,7 +16,7 @@ const MyButton = () => ( const SecretMessage = () => ( {({toggleStatus}) => ( -

+

{toggleStatus ? 'Secret Message' : 'Hidden'}

)} @@ -52,8 +52,8 @@ class Container extends React.Component { } test('Component renders with the correct message, correctly changes message after clicking butotn', () => { - const {getByTestId} = render() - expect(getByTestId('message').textContent).toBe('Hidden') - Simulate.click(getByTestId('button')) - expect(getByTestId('message').textContent).toBe('Secret Message') + const {getByText} = render() + expect(getByText('Hidden').textContent).toBe('Hidden'); + Simulate.click(getByText('Push Me')) + expect(getByText('Secret Message').textContent).toBe('Secret Message'); }) From 230acba39c1a5fbad96c6c9f3f2c5668f8be7777 Mon Sep 17 00:00:00 2001 From: Christian Date: Fri, 20 Apr 2018 20:24:28 -0600 Subject: [PATCH 3/4] Chage how value is set on Provider because it is better on performance --- src/__tests__/react-context.js | 34 +++++++++++----------------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/src/__tests__/react-context.js b/src/__tests__/react-context.js index 0807e9e8..4d10eb0b 100644 --- a/src/__tests__/react-context.js +++ b/src/__tests__/react-context.js @@ -5,44 +5,32 @@ const StateContext = React.createContext() const MyButton = () => ( - {({handleToggle}) => ( - - )} + {({handleToggle}) => } ) const SecretMessage = () => ( - {({toggleStatus}) => ( -

- {toggleStatus ? 'Secret Message' : 'Hidden'} -

- )} + {({toggleStatus}) =>

{toggleStatus ? 'Secret Message' : 'Hidden'}

} ) class Container extends React.Component { - state = { - toggleStatus: false, - } - handleToggle = () => { this.setState(prevState => ({ toggleStatus: !prevState.toggleStatus, })) } + state = { + toggleStatus: false, + handleToggle: this.handleToggle, + } + render() { return (
- + @@ -51,9 +39,9 @@ class Container extends React.Component { } } -test('Component renders with the correct message, correctly changes message after clicking butotn', () => { +test('Component renders with the correct message then correctly changes message after clicking button', () => { const {getByText} = render() - expect(getByText('Hidden').textContent).toBe('Hidden'); + expect(getByText('Hidden').textContent).toBe('Hidden') Simulate.click(getByText('Push Me')) - expect(getByText('Secret Message').textContent).toBe('Secret Message'); + expect(getByText('Secret Message').textContent).toBe('Secret Message') }) From c2de87b212c7085d716be210705b96d5a89316c4 Mon Sep 17 00:00:00 2001 From: Christian Date: Fri, 20 Apr 2018 20:27:27 -0600 Subject: [PATCH 4/4] Add test to list of examples in README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index aaf1926b..71e7fe92 100644 --- a/README.md +++ b/README.md @@ -456,6 +456,7 @@ Some included are: * [`react-redux`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/react-redux.js) * [`react-router`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/react-router.js) +* [`react-context`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/react-context.js) Examples of TDD with react-testing-library: