From 8de61c1162f304c7f018677ac6753b71e305441a Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 20 May 2020 16:26:27 -0600 Subject: [PATCH] fix: modernize the project and fix a few bugs (#290) --- .babelrc | 13 - .gitattributes | 2 +- .github/ISSUE_TEMPLATE.md | 46 + .github/PULL_REQUEST_TEMPLATE.md | 42 + .gitignore | 11 +- .huskyrc.js | 1 + .npmrc | 1 + .nvmrc | 1 - .prettierignore | 3 + .prettierrc.js | 4 +- .travis.yml | 42 +- CHANGELOG.md | 5 + CONTRIBUTING.md | 46 + LICENSE | 5 +- README.md | 263 +- __tests__/react/clear.js | 94 - __tests__/react/click.js | 437 - __tests__/react/dblclick.js | 211 - __tests__/react/selectoptions.js | 282 - __tests__/react/tab.js | 277 - __tests__/react/type.js | 265 - __tests__/react/upload.js | 124 - __tests__/vue/click.js | 342 - __tests__/vue/dblclick.js | 126 - __tests__/vue/selectoptions.js | 254 - __tests__/vue/type.js | 240 - jest.config.js | 13 + lint-staged.config.js | 21 - other/CODE_OF_CONDUCT.md | 74 + other/MAINTAINING.md | 70 + other/USERS.md | 12 + other/manual-releases.md | 44 + package-lock.json | 20650 +++++++++++------------------ package.json | 78 +- src/__tests__/clear.js | 88 + src/__tests__/click.js | 433 + src/__tests__/dblclick.js | 206 + src/__tests__/selectoptions.js | 277 + src/__tests__/tab.js | 275 + src/__tests__/type.js | 258 + src/__tests__/upload.js | 113 + src/index.js | 562 +- tests/setup-env.js | 36 + typings/index.d.ts | 40 +- 44 files changed, 10316 insertions(+), 16071 deletions(-) delete mode 100644 .babelrc create mode 100644 .github/ISSUE_TEMPLATE.md create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 .huskyrc.js create mode 100644 .npmrc delete mode 100644 .nvmrc create mode 100644 .prettierignore create mode 100644 CHANGELOG.md create mode 100644 CONTRIBUTING.md delete mode 100644 __tests__/react/clear.js delete mode 100644 __tests__/react/click.js delete mode 100644 __tests__/react/dblclick.js delete mode 100644 __tests__/react/selectoptions.js delete mode 100644 __tests__/react/tab.js delete mode 100644 __tests__/react/type.js delete mode 100644 __tests__/react/upload.js delete mode 100644 __tests__/vue/click.js delete mode 100644 __tests__/vue/dblclick.js delete mode 100644 __tests__/vue/selectoptions.js delete mode 100644 __tests__/vue/type.js create mode 100644 jest.config.js delete mode 100644 lint-staged.config.js 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/__tests__/clear.js create mode 100644 src/__tests__/click.js create mode 100644 src/__tests__/dblclick.js create mode 100644 src/__tests__/selectoptions.js create mode 100644 src/__tests__/tab.js create mode 100644 src/__tests__/type.js create mode 100644 src/__tests__/upload.js create mode 100644 tests/setup-env.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 50e4d6bd..00000000 --- a/.babelrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "node": "8", - }, - }, - ], - "@babel/preset-react" - ] -} diff --git a/.gitattributes b/.gitattributes index 6b43d8e8..6313b56c 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1 @@ -text=auto +* text=auto eol=lf diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..09c17479 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,46 @@ + + +- `@testing-library/user-event` version: +- Testing Framework and version: + +- DOM Environment: + + + + +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..41a73d92 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,42 @@ + + + + +**What**: + + + +**Why**: + + + +**How**: + + + +**Checklist**: + + + + +- [ ] Documentation +- [ ] Tests +- [ ] Typings +- [ ] Ready to be merged + + + diff --git a/.gitignore b/.gitignore index 2b60d167..8e0c70cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,9 @@ node_modules -coverage/ -dist/ -.idea/ +coverage +dist +.DS_Store + +# these cause more harm than good +# when working with contributors +package-lock.json +yarn.lock diff --git a/.huskyrc.js b/.huskyrc.js new file mode 100644 index 00000000..5e45c45d --- /dev/null +++ b/.huskyrc.js @@ -0,0 +1 @@ +module.exports = require('kcd-scripts/husky') diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..a57cc9e5 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry=http://registry.npmjs.org/ diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 4e8c43e7..00000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v13.8.0 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..9c628283 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +node_modules +coverage +dist diff --git a/.prettierrc.js b/.prettierrc.js index 44e9d201..4679d9bf 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,3 +1 @@ -module.exports = { - proseWrap: "always" -}; +module.exports = require('kcd-scripts/prettier') diff --git a/.travis.yml b/.travis.yml index e7dbd21e..c070fb0b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,30 +1,24 @@ -env: - global: - - CC_TEST_REPORTER_ID=432df2a7d2692b54e9c072feb2c8cec8cd943456c14800c18445b6e65f709a3c - - CODECOV_TOKEN="a0f80db0-4517-4d00-a6e6-eaf8a7089079" language: node_js -cache: - directories: - - ~/.npm +cache: npm notifications: email: false node_js: - - '13' - - '12' - - '10' -before_script: - - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter - - chmod +x ./cc-test-reporter - - ./cc-test-reporter before-build -after_script: - - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT + - 10 + - 12 + - 14 + - node +install: npm install script: - - npm run test:coverage -after_success: - - npm run codecov - - npm run build - - rm ./cc-test-reporter - - npm run travis-deploy-once "npm run semantic-release" + - npm run validate + - npx codecov@3 branches: - except: - - /^v\d+\.\d+\.\d+$/ + only: + - master + - beta + +jobs: + include: + - stage: release + node_js: 14 + script: kcd-scripts travis-release + if: fork = false diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..2a675299 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# 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..7f9fd7e7 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,46 @@ +# 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/testing-library/user-event +> 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`. + +## 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. + +## 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/all-contributors/all-contributors +[issues]: https://github.com/testing-library/user-event/issues + diff --git a/LICENSE b/LICENSE index 80f29b68..527063a1 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,5 @@ -MIT License - -Copyright (c) 2018 Giorgio Polvara +The MIT License (MIT) +Copyright (c) 2020 Giorgio Polvara Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index d214fe92..8f2dcca5 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@
-

user-event

+

@testing-library/user-event

- + -

Simulate user events for react-testing-library.

+

Fire events the same way the user does


-
+--- -[![Build Status](https://travis-ci.org/testing-library/user-event.svg?branch=master)](https://travis-ci.org/testing-library/user-event) -[![Maintainability](https://api.codeclimate.com/v1/badges/75f1ff4397e994c6004e/maintainability)](https://codeclimate.com/github/testing-library/user-event/maintainability) -[![Test Coverage](https://api.codeclimate.com/v1/badges/75f1ff4397e994c6004e/test_coverage)](https://codeclimate.com/github/testing-library/user-event/test_coverage) -[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-) + +[![Build Status][build-badge]][build] +[![Code Coverage][coverage-badge]][coverage] +[![version][version-badge]][package] +[![downloads][downloads-badge]][npmtrends] +[![MIT License][license-badge]][license] + +[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-) +[![PRs Welcome][prs-badge]][prs] +[![Code of Conduct][coc-badge]][coc] + + + + + +- [The problem](#the-problem) +- [The solution](#the-solution) +- [Installation](#installation) +- [API](#api) + - [`click(element)`](#clickelement) + - [`dblClick(element)`](#dblclickelement) + - [`async type(element, text, [options])`](#async-typeelement-text-options) + - [`upload(element, file, [{ clickInit, changeInit }])`](#uploadelement-file--clickinit-changeinit-) + - [`clear(element)`](#clearelement) + - [`selectOptions(element, values)`](#selectoptionselement-values) + - [`tab({shift, focusTrap})`](#tabshift-focustrap) +- [Contributors](#contributors) +- [LICENSE](#license) + + ## The problem @@ -55,11 +81,11 @@ yarn add @testing-library/user-event --dev Now simply import it in your tests: ```js -import userEvent from "@testing-library/user-event"; +import userEvent from '@testing-library/user-event' // or -var userEvent = require("@testing-library/user-event"); +var userEvent = require('@testing-library/user-event') ``` ## API @@ -70,27 +96,27 @@ Clicks `element`, depending on what `element` is it can have different side effects. ```jsx -import React from "react"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import React from 'react' +import {render, screen} from '@testing-library/react' +import userEvent from '@testing-library/user-event' -test("click", () => { +test('click', () => { render(
- -
- ); + + , + ) - userEvent.click(screen.getByText("Check")); - expect(screen.getByTestId("checkbox")).toHaveAttribute("checked", true); -}); + userEvent.click(screen.getByText('Check')) + expect(screen.getByLabelText('Check')).toHaveAttribute('checked', true) +}) ``` You can also ctrlClick / shiftClick etc with ```js -userEvent.click(elem, { ctrlKey: true, shiftKey: true }); +userEvent.click(elem, {ctrlKey: true, shiftKey: true}) ``` See the @@ -103,18 +129,18 @@ Clicks `element` twice, depending on what `element` is it can have different side effects. ```jsx -import React from "react"; -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; - -test("double click", () => { - const onChange = jest.fn(); - render(); - const checkbox = screen.getByTestId("checkbox"); - userEvent.dblClick(checkbox); - expect(onChange).toHaveBeenCalledTimes(2); - expect(checkbox).toHaveProperty("checked", false); -}); +import React from 'react' +import {render, screen} from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +test('double click', () => { + const onChange = jest.fn() + render() + const checkbox = screen.getByTestId('checkbox') + userEvent.dblClick(checkbox) + expect(onChange).toHaveBeenCalledTimes(2) + expect(checkbox).toHaveProperty('checked', false) +}) ``` ### `async type(element, text, [options])` @@ -122,16 +148,16 @@ test("double click", () => { Writes `text` inside an `` or a `