Skip to content

Commit 86d0f7d

Browse files
sainthkhbahmutovchrisbreiding
authored
feat: Add TypeScript example. (#515)
Co-authored-by: Gleb Bahmutov <gleb.bahmutov@gmail.com> Co-authored-by: Chris Breiding <chrisbreiding@gmail.com>
1 parent 6fe0687 commit 86d0f7d

File tree

14 files changed

+137
-4
lines changed

14 files changed

+137
-4
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Recipe | Description
1717
[Wrapping Cypress module API](./examples/fundamentals__module-api-wrap) | Writing a wrapper around "cypress run" command line parsing
1818
[Custom browsers](./examples/fundamentals__custom-browsers) | Control which browsers the project can use, or even add a custom browser into the list
1919
[Use Chrome Remote Interface](./examples/fundamentals__chrome-remote-debugging) | Use Chrome debugger protocol to trigger hover state and print media style
20+
[Out-of-the-box TypeScript](./examples/fundamentals__typescript) | Write tests in TypeScript without setting up preprocessors
2021
[Per-test timeout](./examples/fundamentals__timeout) | Fail a test if it runs longer than the specified time limit
2122

2223
## Testing the DOM

‎circle.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,8 @@ jobs:
291291
<<: *defaults
292292
fundamentals__chrome-remote-debugging:
293293
<<: *defaults
294+
fundamentals__typescript:
295+
<<: *defaults
294296

295297
# list all jobs to run and their dependencies here
296298
# and then use this list from workflow definition
@@ -522,6 +524,9 @@ all_jobs: &all_jobs
522524
requires:
523525
- build
524526
test-command: npm run test:ci
527+
- fundamentals__typescript:
528+
requires:
529+
- build
525530

526531
# to avoid constantly tweaking required jobs on CircleCI
527532
# we can have a single job wait on all other test jobs here.
@@ -554,6 +559,7 @@ all_jobs: &all_jobs
554559
- fundamentals__module-api-wrap
555560
- fundamentals__add-custom-command
556561
- fundamentals__add-custom-command-ts
562+
- fundamentals__typescript
557563
- logging-in__csrf-tokens
558564
- logging-in__html-web-forms
559565
- logging-in__single-sign-on

‎examples/fundamentals__typescript/README.Md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Out-of-the-box TypeScript
2+
> Write tests in TypeScript without setting up preprocessors
3+
4+
From Cypress 4.4.0, you can write tests in TypeScript without setting up preprocessors. See [the official doc](https://on.cypress.io/typescript-support) for more details.
5+
6+
- Use out-of-the-box TypeScript.
7+
- Write spec, plugin, support files in TypeScript.
8+
- Define type for the custom commands.
9+
- Check types in the spec files.
10+
- Show difference between Test Runner `window` and `AUTWindow` types. And how to extend `AUTWindow` type.

‎examples/fundamentals__typescript/cypress.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎examples/fundamentals__typescript/cypress/fixtures/test.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Test</title>
5+
</head>
6+
<body>
7+
<a href="#">click me</a>
8+
</body>
9+
<script>
10+
window.add = (a, b) => a + b
11+
</script>
12+
</html>

‎examples/fundamentals__typescript/cypress/integration/tests.spec.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* global window */
2+
/// <reference path="../types.d.ts" />
3+
4+
describe('tests', () => {
5+
it('test custom command', () => {
6+
cy.visit('cypress/fixtures/test.html')
7+
cy.clickLink('click me')
8+
})
9+
10+
it('test extending AUTWindow', () => {
11+
// Test Runner window object doesn't have add() function.
12+
// So, it should fail the type check.
13+
// @ts-expect-error
14+
window.add = (a, b) => a + b
15+
16+
cy.window().then((win) => {
17+
// AUT add() is defined in the fixture, test.html.
18+
// So, it should pass the type check.
19+
return win.add(2, 3)
20+
})
21+
})
22+
})

‎examples/fundamentals__typescript/cypress/plugins/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="cypress" />
2+
3+
export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
4+
5+
}

‎examples/fundamentals__typescript/cypress/support/commands.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/// <reference types="cypress" />
2+
3+
// Copied an example command from https://on.cypress.io/custom-commands
4+
Cypress.Commands.add('clickLink', (label: string | number | RegExp) => {
5+
cy.get('a').contains(label).click()
6+
})

‎examples/fundamentals__typescript/cypress/support/index.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

‎examples/fundamentals__typescript/cypress/types.d.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// reference code is written like below to avoid the clash in mocha types.
2+
// in most of the cases, simple <reference types="cypress" /> will do.
3+
/// <reference path="../../../node_modules/cypress/types/cy-blob-util.d.ts" />
4+
/// <reference path="../../../node_modules/cypress/types/cy-bluebird.d.ts" />
5+
/// <reference path="../../../node_modules/cypress/types/cy-moment.d.ts" />
6+
/// <reference path="../../../node_modules/cypress/types/cy-minimatch.d.ts" />
7+
/// <reference path="../../../node_modules/cypress/types/lodash/index.d.ts" />
8+
/// <reference path="../../../node_modules/cypress/types/sinon/index.d.ts" />
9+
/// <reference path="../../../node_modules/cypress/types/jquery/index.d.ts" />
10+
/// <reference path="../../../node_modules/cypress/types/cypress.d.ts" />
11+
/// <reference path="../../../node_modules/cypress/types/cypress-type-helpers.d.ts" />
12+
/// <reference path="../../../node_modules/cypress/types/cypress-global-vars.d.ts" />
13+
14+
declare namespace Cypress {
15+
// add custom Cypress command to the interface Chainable<Subject>
16+
interface Chainable<Subject=any> {
17+
// let TS know we have a custom command cy.clickLink(...)
18+
clickLink(label: string | number | RegExp): void
19+
}
20+
21+
// add properties the application adds to its "window" object
22+
// by adding them to the interface ApplicationWindow
23+
interface ApplicationWindow {
24+
// let TS know the application's code will add
25+
// method window.add with the following signature
26+
add(a: number, b: number): number
27+
}
28+
}

0 commit comments

Comments
 (0)