Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fdaa7e5

Browse files
TheGallerykentcdodds
andauthored
feat(TS): move types from DefinitelyTyped (#148)
Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
1 parent ae925b4 commit fdaa7e5

File tree

7 files changed

+278
-16
lines changed

7 files changed

+278
-16
lines changed

‎README.md‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,13 @@ This allows you to use all the useful
5858
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
5959
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
6060

61+
6162
- [Installation](#installation)
6263
- [With TypeScript](#with-typescript)
64+
- [Intellisense for JavaScript with VS Code](#intellisense-for-javascript-with-vs-code)
6365
- [Usage](#usage)
6466
- [Differences from DOM Testing Library](#differences-from-dom-testing-library)
67+
- [Config testIdAttribute](#config-testidattribute)
6568
- [Other Solutions](#other-solutions)
6669
- [Contributors](#contributors)
6770
- [LICENSE](#license)
@@ -79,21 +82,21 @@ npm install --save-dev @testing-library/cypress
7982

8083
### With TypeScript
8184

82-
Typings are defined in `@types/testing-library__cypress` at
83-
[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress),
84-
and should be added as follows in `tsconfig.json`:
85+
Typings should be added as follows in `tsconfig.json`:
8586

8687
```json
8788
{
8889
"compilerOptions": {
89-
"types": ["cypress", "@types/testing-library__cypress"]
90+
"types": ["cypress", "@testing-library/cypress"]
9091
}
9192
}
9293
```
9394

9495
### Intellisense for JavaScript with VS Code
9596

96-
If you're not using TypeScript, you use VS Code, and want to have code-completion with the methods from this library, simply add the following line to your project's root-level `jsconfig.json` file:
97+
If you're not using TypeScript, you use VS Code, and want to have
98+
code-completion with the methods from this library, simply add the following
99+
line to your project's root-level `jsconfig.json` file:
97100

98101
```json
99102
{
@@ -116,7 +119,7 @@ commands.
116119
[See the `DOM Testing Library` docs for reference](https://testing-library.com)
117120

118121
You can find
119-
[all Library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts).
122+
[all Library definitions here](https://github.com/testing-library/cypress-testing-library/tree/master/types/index.d.ts).
120123

121124
To configure DOM Testing Library, use the following custom command:
122125

@@ -134,9 +137,7 @@ cy.findAllByLabelText('Label text', {timeout: 7000}).should('exist')
134137
cy.findAllByText('Jackie Chan').click()
135138

136139
// findAllByText _inside_ a form element
137-
cy.get('form')
138-
.findAllByText('Button Text')
139-
.should('exist')
140+
cy.get('form').findAllByText('Button Text').should('exist')
140141
```
141142

142143
### Differences from DOM Testing Library
@@ -177,14 +178,16 @@ cy.findByText('Some Text').should('exist')
177178

178179
## Config testIdAttribute
179180

180-
If you would like to change the default testId from `data-testId` to `data-test-id`, add to your project's `cypress/support/index.js`:
181+
If you would like to change the default testId from `data-testId` to
182+
`data-test-id`, add to your project's `cypress/support/index.js`:
181183

182184
```javascript
183185
import {configure} from '@testing-library/cypress'
184186
configure({testIdAttribute: 'data-test-id'})
185187
```
186188

187-
It accepts all configurations listed in [DOM testing library](https://testing-library.com/docs/dom-testing-library/api-configuration).
189+
It accepts all configurations listed in
190+
[DOM testing library](https://testing-library.com/docs/dom-testing-library/api-configuration).
188191

189192
## Other Solutions
190193

@@ -247,6 +250,7 @@ Thanks goes to these people ([emoji key][emojis]):
247250

248251
<!-- markdownlint-enable -->
249252
<!-- prettier-ignore-end -->
253+
250254
<!-- ALL-CONTRIBUTORS-LIST:END -->
251255

252256
This project follows the [all-contributors][all-contributors] specification.
@@ -297,5 +301,6 @@ MIT
297301
[all-contributors]: https://github.com/all-contributors/all-contributors
298302
[dom-testing-library]: https://github.com/testing-library/dom-testing-library
299303
[cypress]: https://www.cypress.io/
300-
[discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square
304+
[discord-badge]:
305+
https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square
301306
[discord]: https://discord.gg/c6JN9fM

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.0.0-semantically-released",
44
"description": "Simple and complete custom Cypress commands and utilities that encourage good testing practices.",
55
"main": "dist/index.js",
6+
"types": "types/index.d.ts",
67
"engines": {
78
"node": ">=10",
89
"npm": ">=6"
@@ -18,11 +19,13 @@
1819
"test:cypress:run": "cypress run",
1920
"test:unit": "kcd-scripts test --no-watch",
2021
"test:unit:watch": "kcd-scripts test",
21-
"validate": "kcd-scripts validate build,lint,test"
22+
"typecheck": "dtslint ./types/",
23+
"validate": "kcd-scripts validate build,lint,test,typecheck"
2224
},
2325
"files": [
2426
"dist",
25-
"add-commands.js"
27+
"add-commands.js",
28+
"types"
2629
],
2730
"keywords": [
2831
"testing",
@@ -38,11 +41,11 @@
3841
"license": "MIT",
3942
"dependencies": {
4043
"@babel/runtime": "^7.11.2",
41-
"@testing-library/dom": "^7.22.2",
42-
"@types/testing-library__cypress": "^5.0.6"
44+
"@testing-library/dom": "^7.22.2"
4345
},
4446
"devDependencies": {
4547
"cypress": "^5.0.0",
48+
"dtslint": "^3.6.14",
4649
"kcd-scripts": "^6.2.4",
4750
"npm-run-all": "^4.1.5"
4851
},

‎types/add-commands.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Allow `import '@testing-library/cypress/add-commands'` from a `cypress/commands.ts` file
2+
import './'

‎types/index.d.ts‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
// TypeScript Version: 3.8
2+
3+
import {
4+
configure,
5+
Matcher,
6+
MatcherOptions as DTLMatcherOptions,
7+
ByRoleOptions as DTLByRoleOptions,
8+
SelectorMatcherOptions as DTLSelectorMatcherOptions,
9+
} from '@testing-library/dom'
10+
11+
export interface CTLMatcherOptions {
12+
timeout?: number
13+
container?: HTMLElement | JQuery
14+
}
15+
16+
export type MatcherOptions = DTLMatcherOptions | CTLMatcherOptions
17+
export type ByRoleOptions = DTLByRoleOptions | CTLMatcherOptions
18+
export type SelectorMatcherOptions = DTLSelectorMatcherOptions | CTLMatcherOptions
19+
20+
declare global {
21+
namespace Cypress {
22+
interface Chainable<Subject = any> {
23+
/**
24+
* dom-testing-library helpers for Cypress
25+
*
26+
* `findBy*` APIs search for an element and throw an error if nothing found
27+
* `findAllBy*` APIs search for all elements and an error if nothing found
28+
*
29+
* @see https://github.com/testing-library/cypress-testing-library#usage
30+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
31+
*/
32+
findByPlaceholderText(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
33+
34+
/**
35+
* dom-testing-library helpers for Cypress
36+
*
37+
* `findBy*` APIs search for an element and throw an error if nothing found
38+
* `findAllBy*` APIs search for all elements and an error if nothing found
39+
*
40+
* @see https://github.com/testing-library/cypress-testing-library#usage
41+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
42+
*/
43+
findAllByPlaceholderText(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
44+
45+
/**
46+
* dom-testing-library helpers for Cypress
47+
*
48+
* `findBy*` APIs search for an element and throw an error if nothing found
49+
* `findAllBy*` APIs search for all elements and an error if nothing found
50+
*
51+
* @see https://github.com/testing-library/cypress-testing-library#usage
52+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
53+
*/
54+
findByText(id: Matcher, options?: SelectorMatcherOptions): Chainable<JQuery>
55+
56+
/**
57+
* dom-testing-library helpers for Cypress
58+
*
59+
* `findBy*` APIs search for an element and throw an error if nothing found
60+
* `findAllBy*` APIs search for all elements and an error if nothing found
61+
*
62+
* @see https://github.com/testing-library/cypress-testing-library#usage
63+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
64+
*/
65+
findAllByText(id: Matcher, options?: SelectorMatcherOptions): Chainable<JQuery>
66+
67+
/**
68+
* dom-testing-library helpers for Cypress
69+
*
70+
* `findBy*` APIs search for an element and throw an error if nothing found
71+
* `findAllBy*` APIs search for all elements and an error if nothing found
72+
*
73+
* @see https://github.com/testing-library/cypress-testing-library#usage
74+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
75+
*/
76+
findByLabelText(id: Matcher, options?: SelectorMatcherOptions): Chainable<JQuery>
77+
78+
/**
79+
* dom-testing-library helpers for Cypress
80+
*
81+
* `findBy*` APIs search for an element and throw an error if nothing found
82+
* `findAllBy*` APIs search for all elements and an error if nothing found
83+
*
84+
* @see https://github.com/testing-library/cypress-testing-library#usage
85+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
86+
*/
87+
findAllByLabelText(id: Matcher, options?: SelectorMatcherOptions): Chainable<JQuery>
88+
89+
/**
90+
* dom-testing-library helpers for Cypress
91+
*
92+
* `findBy*` APIs search for an element and throw an error if nothing found
93+
* `findAllBy*` APIs search for all elements and an error if nothing found
94+
*
95+
* @see https://github.com/testing-library/cypress-testing-library#usage
96+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
97+
*/
98+
findByAltText(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
99+
100+
/**
101+
* dom-testing-library helpers for Cypress
102+
*
103+
* `findBy*` APIs search for an element and throw an error if nothing found
104+
* `findAllBy*` APIs search for all elements and an error if nothing found
105+
*
106+
* @see https://github.com/testing-library/cypress-testing-library#usage
107+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
108+
*/
109+
findAllByAltText(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
110+
111+
/**
112+
* dom-testing-library helpers for Cypress
113+
*
114+
* `findBy*` APIs search for an element and throw an error if nothing found
115+
* `findAllBy*` APIs search for all elements and an error if nothing found
116+
*
117+
* @see https://github.com/testing-library/cypress-testing-library#usage
118+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
119+
*/
120+
findByTestId(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
121+
122+
/**
123+
* dom-testing-library helpers for Cypress
124+
*
125+
* `findBy*` APIs search for an element and throw an error if nothing found
126+
* `findAllBy*` APIs search for all elements and an error if nothing found
127+
*
128+
* @see https://github.com/testing-library/cypress-testing-library#usage
129+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
130+
*/
131+
findAllByTestId(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
132+
133+
/**
134+
* dom-testing-library helpers for Cypress
135+
*
136+
* `findBy*` APIs search for an element and throw an error if nothing found
137+
* `findAllBy*` APIs search for all elements and an error if nothing found
138+
*
139+
* @see https://github.com/testing-library/cypress-testing-library#usage
140+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
141+
*/
142+
findByTitle(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
143+
144+
/**
145+
* dom-testing-library helpers for Cypress
146+
*
147+
* `findBy*` APIs search for an element and throw an error if nothing found
148+
* `findAllBy*` APIs search for all elements and an error if nothing found
149+
*
150+
* @see https://github.com/testing-library/cypress-testing-library#usage
151+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
152+
*/
153+
findAllByTitle(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
154+
155+
/**
156+
* dom-testing-library helpers for Cypress
157+
*
158+
* `findBy*` APIs search for an element and throw an error if nothing found
159+
* `findAllBy*` APIs search for all elements and an error if nothing found
160+
*
161+
* @see https://github.com/testing-library/cypress-testing-library#usage
162+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
163+
*/
164+
findByDisplayValue(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
165+
166+
/**
167+
* dom-testing-library helpers for Cypress
168+
*
169+
* `findBy*` APIs search for an element and throw an error if nothing found
170+
* `findAllBy*` APIs search for all elements and an error if nothing found
171+
*
172+
* @see https://github.com/testing-library/cypress-testing-library#usage
173+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
174+
*/
175+
findAllByDisplayValue(id: Matcher, options?: MatcherOptions): Chainable<JQuery>
176+
177+
/**
178+
* dom-testing-library helpers for Cypress
179+
*
180+
* `findBy*` APIs search for an element and throw an error if nothing found
181+
* `findAllBy*` APIs search for all elements and an error if nothing found
182+
*
183+
* @see https://github.com/testing-library/cypress-testing-library#usage
184+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
185+
*/
186+
findByRole(id: Matcher, options?: ByRoleOptions): Chainable<JQuery>
187+
188+
/**
189+
* dom-testing-library helpers for Cypress
190+
*
191+
* `findBy*` APIs search for an element and throw an error if nothing found
192+
* `findAllBy*` APIs search for all elements and an error if nothing found
193+
*
194+
* @see https://github.com/testing-library/cypress-testing-library#usage
195+
* @see https://github.com/testing-library/dom-testing-library#table-of-contents
196+
*/
197+
findAllByRole(id: Matcher, options?: ByRoleOptions): Chainable<JQuery>
198+
}
199+
}
200+
}
201+
202+
export { configure }

‎types/test.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/// <reference types="Cypress" />
2+
import { configure } from '@testing-library/cypress'
3+
import '@testing-library/cypress/add-commands'
4+
5+
configure({ testIdAttribute: 'data-myown-testid' })
6+
7+
// findBy*
8+
cy.findByPlaceholderText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
9+
cy.findByText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
10+
cy.findByLabelText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
11+
cy.findByAltText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
12+
cy.findByTestId('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
13+
cy.findByTitle('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
14+
cy.findByDisplayValue('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
15+
cy.findByRole('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
16+
17+
// findAllBy*
18+
cy.findAllByPlaceholderText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
19+
cy.findAllByText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
20+
cy.findAllByLabelText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
21+
cy.findAllByAltText('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
22+
cy.findAllByTestId('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
23+
cy.findAllByTitle('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
24+
cy.findAllByDisplayValue('foo') // $ExpectType Chainable<JQuery<HTMLElement>>
25+
cy.findAllByRole('foo') // $ExpectType Chainable<JQuery<HTMLElement>>

‎types/tsconfig.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"lib": ["es6", "dom"],
5+
"noImplicitAny": true,
6+
"noImplicitThis": true,
7+
"strictFunctionTypes": true,
8+
"strictNullChecks": true,
9+
"baseUrl": ".",
10+
"noEmit": true,
11+
"types": [],
12+
"paths": {
13+
"@testing-library/cypress": ["."]
14+
}
15+
}
16+
}

‎types/tslint.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": ["dtslint/dtslint.json"],
3+
"rules": {
4+
"no-useless-files": false,
5+
"no-relative-import-in-test": false,
6+
"semicolon": false,
7+
"whitespace": false
8+
}
9+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /