Skip to content

Commit d074ff7

Browse files
committed
minor changes
1 parent e4e2544 commit d074ff7

File tree

1 file changed

+44
-36
lines changed

1 file changed

+44
-36
lines changed

content/guides/tooling/typescript-support.md

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ declare global {
109109
*/
110110
dataCy(value: string): Chainable<Element>
111111
}
112-
}
112+
}
113113
}
114114
```
115115

@@ -122,9 +122,9 @@ by any users of your custom command.
122122

123123
<Alert type="info">
124124

125-
Please note, types of all the parameters taken by implementation callback are
126-
inferred automatically based on declared interface. Thus, in the example above
127-
the `value` will be of type `string` implicitly.
125+
Types of all the parameters taken by the implementation callback are inferred
126+
automatically based on the declared interface. Thus, in the example above, the
127+
`value` will be of type `string` implicitly.
128128

129129
</Alert>
130130

@@ -142,8 +142,8 @@ it('works', () => {
142142

143143
#### Adding child or dual commands
144144

145-
When you add a custom command with `prevSubject` Cypress will infer subject type
146-
automatically based on kind of specified `prevSubject`(s)
145+
When you add a custom command with `prevSubject`, Cypress will infer the subject
146+
type automatically based on the specified `prevSubject`.
147147

148148
```typescript
149149
// in cypress/support/index.ts
@@ -154,62 +154,70 @@ declare global {
154154
namespace Cypress {
155155
interface Chainable {
156156
/**
157-
* Custom command to type few random words into input elements
157+
* Custom command to type a few random words into input elements
158158
* @param count=3
159159
* @example cy.get('input').typeRandomWords()
160160
*/
161-
typeRandomWords(count?: number, options?: Partial<TypeOptions>): Chainable<Element>
161+
typeRandomWords(
162+
count?: number,
163+
options?: Partial<TypeOptions>
164+
): Chainable<Element>
162165
}
163-
}
166+
}
164167
}
165168
```
166169

167170
```typescript
168171
// cypress/support/index.ts
169-
Cypress.Commands.add('typeRandomWords', {prevSubject: 'element'}, (
170-
subject /* :JQuery<HTMLElement> */, count = 3, options?,
172+
Cypress.Commands.add('typeRandomWords', { prevSubject: 'element' }, (
173+
subject /* :JQuery<HTMLElement> */,
174+
count = 3,
175+
options?
171176
) => {
172-
return cy.wrap(subject).type(generateRandomWords(cound), options)
177+
return cy.wrap(subject).type(generateRandomWords(count), options)
173178
})
174179
```
175180

176-
177181
#### Overwriting child or dual commands
178182

179-
When overwriting either built-in or custom commands which make use of `prevSubject`
180-
you have to help the type-checker to understand this.
183+
When overwriting either built-in or custom commands which make use of
184+
`prevSubject`, you must specify generic parameters to help the type-checker to
185+
understand the type of the `prevSubject`.
181186

182187
```typescript
183188
interface TypeOptions extends Cypress.TypeOptions {
184189
sensitive: boolean
185190
}
186191

187-
Cypress.Commands.overwrite<'type', 'element'>('type', (
188-
originalFn, element, text, options?: Partial<TypeOptions>,
189-
) => {
190-
if (options && options.sensitive) {
191-
// turn off original log
192-
options.log = false
193-
// create our own log with masked message
194-
Cypress.log({
195-
$el: element,
196-
name: 'type',
197-
message: '*'.repeat(text.length),
198-
})
192+
Cypress.Commands.overwrite<'type', 'element'>(
193+
'type',
194+
(originalFn, element, text, options?: Partial<TypeOptions>) => {
195+
if (options && options.sensitive) {
196+
// turn off original log
197+
options.log = false
198+
// create our own log with masked message
199+
Cypress.log({
200+
$el: element,
201+
name: 'type',
202+
message: '*'.repeat(text.length),
203+
})
204+
}
205+
206+
return originalFn(element, text, options)
199207
}
200-
201-
return originalFn(element, text, options)
202-
})
208+
)
203209
```
204210

205211
As you can see there are generic parameters `<'type', 'element'>` are used:
206212

207-
1. This is the command name, should equal to actual first parameter passed to `cy.overwite`
208-
2. Type of prevSubject that is used by the original command. Possible values:
209-
- 'element' will infer second param as `JQuery<HTMLElement>`
210-
- 'window' will infer second param as `Window`
211-
- 'document' will infer second param as `Document`
212-
- 'optional' will infer second param as `unknown`
213+
1. The first parameter is the command name, equal to first parameter passed to
214+
`Cypress.Commands.overwrite`.
215+
2. The second parameter is the type of the `prevSubject` that is used by the
216+
original command. Possible values:
217+
- 'element' infers it as `JQuery<HTMLElement>`
218+
- 'window' infers it as `Window`
219+
- 'document' infers it as `Document`
220+
- 'optional' infers it as `unknown`
213221

214222
#### Examples:
215223

0 commit comments

Comments
 (0)