From b1913547e8f593e373c4f0bb5aeefa3f245b090f Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 19 Mar 2018 07:40:35 -0600 Subject: [PATCH] feat: initial release --- .all-contributorsrc | 23 ++++++ .gitattributes | 2 + .github/ISSUE_TEMPLATE.md | 38 ++++++++++ .github/PULL_REQUEST_TEMPLATE.md | 42 +++++++++++ .gitignore | 12 +++ .npmrc | 2 + .prettierignore | 4 + .prettierrc | 10 +++ .travis.yml | 13 ++++ CHANGELOG.md | 4 + CONTRIBUTING.md | 72 ++++++++++++++++++ LICENSE | 20 +++++ other/CODE_OF_CONDUCT.md | 74 +++++++++++++++++++ other/MAINTAINING.md | 63 ++++++++++++++++ other/USERS.md | 12 +++ other/manual-releases.md | 43 +++++++++++ src/__mocks__/axios.js | 3 + src/__tests__/__snapshots__/fetch.js.snap | 16 ++++ src/__tests__/fetch.js | 52 +++++++++++++ src/__tests__/mock.react-transition-group.js | 50 +++++++++++++ src/__tests__/number-display.js | 29 ++++++++ .../shallow.react-transition-group.js | 51 +++++++++++++ src/index.js | 28 +++++++ 23 files changed, 663 insertions(+) create mode 100644 .all-contributorsrc create mode 100644 .gitattributes create mode 100644 .github/ISSUE_TEMPLATE.md create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .travis.yml create mode 100644 CHANGELOG.md create mode 100644 CONTRIBUTING.md create mode 100644 LICENSE create mode 100644 other/CODE_OF_CONDUCT.md create mode 100644 other/MAINTAINING.md create mode 100644 other/USERS.md create mode 100644 other/manual-releases.md create mode 100644 src/__mocks__/axios.js create mode 100644 src/__tests__/__snapshots__/fetch.js.snap create mode 100644 src/__tests__/fetch.js create mode 100644 src/__tests__/mock.react-transition-group.js create mode 100644 src/__tests__/number-display.js create mode 100644 src/__tests__/shallow.react-transition-group.js create mode 100644 src/index.js diff --git a/.all-contributorsrc b/.all-contributorsrc new file mode 100644 index 00000000..5d154811 --- /dev/null +++ b/.all-contributorsrc @@ -0,0 +1,23 @@ +{ + "projectName": "react-testing-library", + "projectOwner": "kentcdodds", + "files": [ + "README.md" + ], + "imageSize": 100, + "commit": false, + "contributors": [ + { + "login": "kentcdodds", + "name": "Kent C. Dodds", + "avatar_url": "https://avatars.githubusercontent.com/u/1500684?v=3", + "profile": "https://kentcdodds.com", + "contributions": [ + "code", + "doc", + "infra", + "test" + ] + } + ] +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..391f0a4e --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +* text=auto +*.js text eol=lf diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..6a7b4bff --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,38 @@ + + +* `react-testing-library` version: +* `node` version: +* `npm` (or `yarn`) version: + +Relevant code or config + +```javascript +``` + +What you did: + +What happened: + + + +Reproduction repository: + + + +Problem description: + +Suggested solution: diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..aa0dc2b8 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,42 @@ + + + + +**What**: + + + +**Why**: + + + +**How**: + + + +**Checklist**: + + + + + +* [ ] Documentation +* [ ] Tests +* [ ] Ready to be merged +* [ ] Added myself to contributors table + + diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..09048d22 --- /dev/null +++ b/.gitignore @@ -0,0 +1,12 @@ +node_modules +coverage +dist +.opt-in +.opt-out +.DS_Store +.eslintcache + +# these cause more harm than good +# when working with contributors +package-lock.json +yarn.lock diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..d2722898 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +registry=http://registry.npmjs.org/ +package-lock=false diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..30117ea2 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +package.json +node_modules +dist +coverage diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..68f30bd7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": false, + "singleQuote": true, + "trailingComma": 'all', + "bracketSpacing": false, + "jsxBracketSameLine": false +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..08be7ec0 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,13 @@ +sudo: false +language: node_js +cache: + directories: + - ~/.npm +notifications: + email: false +node_js: '8' +install: npm install +script: npm run validate +after_success: kcd-scripts travis-after-success +branches: + only: master diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..06d221aa --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,4 @@ +# CHANGELOG + +The changelog is automatically updated using [semantic-release](https://github.com/semantic-release/semantic-release). +You can see it on the [releases page](../../releases). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..2cb6bdbf --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,72 @@ +# Contributing + +Thanks for being willing to contribute! + +**Working on your first Pull Request?** You can learn how from this _free_ series +[How to Contribute to an Open Source Project on GitHub][egghead] + +## Project setup + +1. Fork and clone the repo +2. Run `npm run setup -s` to install dependencies and run validation +3. Create a branch for your PR with `git checkout -b pr/your-branch-name` + +> Tip: Keep your `master` branch pointing at the original repository and make +> pull requests from branches on your fork. To do this, run: +> +> ``` +> git remote add upstream https://github.com/kentcdodds/react-testing-library.git +> git fetch upstream +> git branch --set-upstream-to=upstream/master master +> ``` +> +> This will add the original repository as a "remote" called "upstream," +> Then fetch the git information from that remote, then set your local `master` +> branch to use the upstream master branch whenever you run `git pull`. +> Then you can make all of your pull request branches based on this `master` +> branch. Whenever you want to update your version of `master`, do a regular +> `git pull`. + +## Add yourself as a contributor + +This project follows the [all contributors][all-contributors] specification. +To add yourself to the table of contributors on the `README.md`, please use the +automated script as part of your PR: + +```console +npm run add-contributor +``` + +Follow the prompt and commit `.all-contributorsrc` and `README.md` in the PR. +If you've already added yourself to the list and are making +a new type of contribution, you can run it again and select the added +contribution type. + +## Committing and Pushing changes + +Please make sure to run the tests before you commit your changes. You can run +`npm run test:update` which will update any snapshots that need updating. +Make sure to include those changes (if they exist) in your commit. + +### opt into git hooks + +There are git hooks set up with this project that are automatically installed +when you install dependencies. They're really handy, but are turned off by +default (so as to not hinder new contributors). You can opt into these by +creating a file called `.opt-in` at the root of the project and putting this +inside: + +``` +pre-commit +``` + +## Help needed + +Please checkout the [the open issues][issues] + +Also, please watch the repo and respond to questions/bug reports/feature +requests! Thanks! + +[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github +[all-contributors]: https://github.com/kentcdodds/all-contributors +[issues]: https://github.com/kentcdodds/react-testing-library/issues diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..4c43675b --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) +Copyright (c) 2017 Kent C. Dodds + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/other/CODE_OF_CONDUCT.md b/other/CODE_OF_CONDUCT.md new file mode 100644 index 00000000..afe24327 --- /dev/null +++ b/other/CODE_OF_CONDUCT.md @@ -0,0 +1,74 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +nationality, personal appearance, race, religion, or sexual identity and +orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at kent+coc@doddsfamily.us. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/other/MAINTAINING.md b/other/MAINTAINING.md new file mode 100644 index 00000000..025b6732 --- /dev/null +++ b/other/MAINTAINING.md @@ -0,0 +1,63 @@ +# Maintaining + +This is documentation for maintainers of this project. + +## Code of Conduct + +Please review, understand, and be an example of it. Violations of the code of conduct are +taken seriously, even (especially) for maintainers. + +## Issues + +We want to support and build the community. We do that best by helping people learn to solve +their own problems. We have an issue template and hopefully most folks follow it. If it's +not clear what the issue is, invite them to create a minimal reproduction of what they're trying +to accomplish or the bug they think they've found. + +Once it's determined that a code change is necessary, point people to +[makeapullrequest.com](http://makeapullrequest.com) and invite them to make a pull request. +If they're the one who needs the feature, they're the one who can build it. If they need +some hand holding and you have time to lend a hand, please do so. It's an investment into +another human being, and an investment into a potential maintainer. + +Remember that this is open source, so the code is not yours, it's ours. If someone needs a change +in the codebase, you don't have to make it happen yourself. Commit as much time to the project +as you want/need to. Nobody can ask any more of you than that. + +## Pull Requests + +As a maintainer, you're fine to make your branches on the main repo or on your own fork. Either +way is fine. + +When we receive a pull request, a travis build is kicked off automatically (see the `.travis.yml` +for what runs in the travis build). We avoid merging anything that breaks the travis build. + +Please review PRs and focus on the code rather than the individual. You never know when this is +someone's first ever PR and we want their experience to be as positive as possible, so be +uplifting and constructive. + +When you merge the pull request, 99% of the time you should use the +[Squash and merge](https://help.github.com/articles/merging-a-pull-request/) feature. This keeps +our git history clean, but more importantly, this allows us to make any necessary changes to the +commit message so we release what we want to release. See the next section on Releases for more +about that. + +## Release + +Our releases are automatic. They happen whenever code lands into `master`. A travis build gets +kicked off and if it's successful, a tool called +[`semantic-release`](https://github.com/semantic-release/semantic-release) is used to +automatically publish a new release to npm as well as a changelog to GitHub. It is only able to +determine the version and whether a release is necessary by the git commit messages. With this +in mind, **please brush up on [the commit message convention][commit] which drives our releases.** + +> One important note about this: Please make sure that commit messages do NOT contain the words +> "BREAKING CHANGE" in them unless we want to push a major version. I've been burned by this +> more than once where someone will include "BREAKING CHANGE: None" and it will end up releasing +> a new major version. Not a huge deal honestly, but kind of annoying... + +## Thanks! + +Thank you so much for helping to maintain this project! + +[commit]: https://github.com/conventional-changelog-archived-repos/conventional-changelog-angular/blob/ed32559941719a130bb0327f886d6a32a8cbc2ba/convention.md diff --git a/other/USERS.md b/other/USERS.md new file mode 100644 index 00000000..4bc12816 --- /dev/null +++ b/other/USERS.md @@ -0,0 +1,12 @@ +# Users + +If you or your company uses this project, add your name to this list! Eventually +we may have a website to showcase these (wanna build it!?) + +> No users have been added yet! + + diff --git a/other/manual-releases.md b/other/manual-releases.md new file mode 100644 index 00000000..a058d797 --- /dev/null +++ b/other/manual-releases.md @@ -0,0 +1,43 @@ +# manual-releases + +This project has an automated release set up. So things are only released when there are +useful changes in the code that justify a release. But sometimes things get messed up one way or another +and we need to trigger the release ourselves. When this happens, simply bump the number below and commit +that with the following commit message based on your needs: + +**Major** + +``` +fix(release): manually release a major version + +There was an issue with a major release, so this manual-releases.md +change is to release a new major version. + +Reference: # + +BREAKING CHANGE: +``` + +**Minor** + +``` +feat(release): manually release a minor version + +There was an issue with a minor release, so this manual-releases.md +change is to release a new minor version. + +Reference: # +``` + +**Patch** + +``` +fix(release): manually release a patch version + +There was an issue with a patch release, so this manual-releases.md +change is to release a new patch version. + +Reference: # +``` + +The number of times we've had to do a manual release is: 0 diff --git a/src/__mocks__/axios.js b/src/__mocks__/axios.js new file mode 100644 index 00000000..57eb52ec --- /dev/null +++ b/src/__mocks__/axios.js @@ -0,0 +1,3 @@ +module.exports = { + get: jest.fn(() => Promise.resolve({data: {}})), +} diff --git a/src/__tests__/__snapshots__/fetch.js.snap b/src/__tests__/__snapshots__/fetch.js.snap new file mode 100644 index 00000000..ff2344ca --- /dev/null +++ b/src/__tests__/__snapshots__/fetch.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Fetch makes an API call and displays the greeting when load-greeting is clicked 1`] = ` +
+ + + hello there + +
+`; diff --git a/src/__tests__/fetch.js b/src/__tests__/fetch.js new file mode 100644 index 00000000..f6fc9546 --- /dev/null +++ b/src/__tests__/fetch.js @@ -0,0 +1,52 @@ +import React from 'react' +import axiosMock from 'axios' +import {render, Simulate, flushPromises} from '../' + +// instead of importing it, we'll define it inline here +// import Fetch from '../fetch' + +class Fetch extends React.Component { + state = {} + componentDidUpdate(prevProps) { + if (this.props.url !== prevProps.url) { + this.fetch() + } + } + fetch = async () => { + const response = await axiosMock.get(this.props.url) + this.setState({data: response.data}) + } + render() { + const {data} = this.state + return ( +
+ + {data ? {data.greeting} : null} +
+ ) + } +} + +test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => { + // Arrange + axiosMock.get.mockImplementationOnce(() => + Promise.resolve({ + data: {greeting: 'hello there'}, + }), + ) + const url = '/greeting' + const {queryByTestId, container} = render() + + // Act + Simulate.click(queryByTestId('load-greeting')) + + await flushPromises() + + // Assert + expect(axiosMock.get).toHaveBeenCalledTimes(1) + expect(axiosMock.get).toHaveBeenCalledWith(url) + expect(queryByTestId('greeting-text').textContent).toBe('hello there') + expect(container.firstChild).toMatchSnapshot() +}) diff --git a/src/__tests__/mock.react-transition-group.js b/src/__tests__/mock.react-transition-group.js new file mode 100644 index 00000000..7467c41e --- /dev/null +++ b/src/__tests__/mock.react-transition-group.js @@ -0,0 +1,50 @@ +import React from 'react' +import {CSSTransition} from 'react-transition-group' +import {render, Simulate} from '../' + +function Fade({children, ...props}) { + return ( + + {children} + + ) +} + +class HiddenMessage extends React.Component { + state = {show: this.props.initialShow || false} + toggle = () => { + this.setState(({show}) => ({show: !show})) + } + render() { + return ( +
+ + +
Hello world
+ +
+ ) + } +} + +jest.mock('react-transition-group', () => { + const FakeTransition = jest.fn(({children}) => children) + const FakeCSSTransition = jest.fn( + props => + props.in ? {props.children} : null, + ) + return {CSSTransition: FakeCSSTransition, Transition: FakeTransition} +}) + +test('you can mock things with jest.mock', () => { + const {queryByTestId} = render() + expect(queryByTestId('hidden-message')).toBeTruthy() // we just care it exists + // hide the message + Simulate.click(queryByTestId('toggle-message')) + // in the real world, the CSSTransition component would take some time + // before finishing the animation which would actually hide the message. + // So we've mocked it out for our tests to make it happen instantly + expect(queryByTestId('hidden-message')).toBeFalsy() // we just care it doesn't exist +}) diff --git a/src/__tests__/number-display.js b/src/__tests__/number-display.js new file mode 100644 index 00000000..fedf7ac1 --- /dev/null +++ b/src/__tests__/number-display.js @@ -0,0 +1,29 @@ +import React from 'react' +import {render} from '../' + +let idCounter = 1 + +class NumberDisplay extends React.Component { + id = idCounter++ // to ensure we don't remount a different instance + render() { + return ( +
+ {this.props.number} + {this.id} +
+ ) + } +} + +test('calling render with the same component on the same container does not remount', () => { + const {container, queryByTestId} = render() + expect(queryByTestId('number-display').textContent).toBe('1') + + // re-render the same component with different props + // but pass the same container in the options argument. + // which will cause a re-render of the same instance (normal React behavior). + render(, {container}) + expect(queryByTestId('number-display').textContent).toBe('2') + + expect(queryByTestId('instance-id').textContent).toBe('1') +}) diff --git a/src/__tests__/shallow.react-transition-group.js b/src/__tests__/shallow.react-transition-group.js new file mode 100644 index 00000000..6e03337d --- /dev/null +++ b/src/__tests__/shallow.react-transition-group.js @@ -0,0 +1,51 @@ +import React from 'react' +import {CSSTransition} from 'react-transition-group' +import {render, Simulate} from '../' + +function Fade({children, ...props}) { + return ( + + {children} + + ) +} + +class HiddenMessage extends React.Component { + state = {show: this.props.initialShow || false} + toggle = () => { + this.setState(({show}) => ({show: !show})) + } + render() { + return ( +
+ + +
Hello world
+ +
+ ) + } +} + +jest.mock('react-transition-group', () => { + const FakeCSSTransition = jest.fn(() => null) + return {CSSTransition: FakeCSSTransition} +}) + +test('you can mock things with jest.mock', () => { + const {queryByTestId} = render() + const context = expect.any(Object) + const children = expect.any(Object) + const defaultProps = {children, timeout: 1000, className: 'fade'} + expect(CSSTransition).toHaveBeenCalledWith( + {in: true, ...defaultProps}, + context, + ) + Simulate.click(queryByTestId('toggle-message')) + expect(CSSTransition).toHaveBeenCalledWith( + {in: true, ...defaultProps}, + expect.any(Object), + ) +}) diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..23c450e7 --- /dev/null +++ b/src/index.js @@ -0,0 +1,28 @@ +import ReactDOM from 'react-dom' +import {Simulate} from 'react-dom/test-utils' + +// we may expose this eventually +function sel(id) { + return `[data-test="${id}"]` +} + +// we may expose this eventually +function queryDivByTestId(div, id) { + return div.querySelector(sel(id)) +} + +function render(ui, {container = document.createElement('div')} = {}) { + ReactDOM.render(ui, container) + return { + container, + queryByTestId: queryDivByTestId.bind(null, container), + } +} + +// this returns a new promise and is just a simple way to +// wait until the next tick so resolved promises chains will continue +function flushPromises() { + return new Promise(resolve => setImmediate(resolve)) +} + +export {render, flushPromises, Simulate}