Add Typescript example

Signed-off-by: Tiago Melo <tmelo@suse.com>

examples/preprocessors__typescript-none/README.md

@@ -0,0 +1,44 @@
+# Typescript with Webpack
+
+This is an example showing TypeScript tests with Cypress using Webpack. See Cypress' [TypeScript Support](https://on.cypress.io/typescript-support) docs for more details.
+
+- Uses [webpack](https://github.com/webpack/webpack) to transpile TypeScript tests via [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor)
+- Lints TypeScript spec code against Cypress type definitions
+
+## Install
+
+Because this recipe is part of the monorepo with lots of examples, we don't want to install dependencies per-recipe, but instead use the common root dependencies. Thus when copying _just_ this recipe into its own project you would need to install the following dev dependencies:
+
+- `webpack`
+- `@cypress/webpack-preprocessor`
+- `babel-loader`
+- `@babel/preset-typescript`
+- `typescript`
+
+## See
+- [webpack.config.js](webpack.config.js)
+- [cypress/plugins/index.js](cypress/plugins/index.js)
+- [cypress/integration/spec.ts](cypress/integration/spec.ts)
+
+## Run
+
+```shell
+npm run cypress:open
+```
+
+Click `spec.ts`
+
+![Cypress GUI](img/gui.png)
+
+## Commands
+
+The E2E tests should run in Cypress right away. There are few other commands configured in this example recipe as a demonstration only.
+
+- `npm run build` runs Webpack to convert spec TS file into `out.js`
+- `npm run lint` lints TypeScript specs using [tslint](https://palantir.github.io/tslint) and then TypeScript compiler to type check test source files.
+
+## Source maps
+
+[webpack.config.js](webpack.config.js) sets the source maps, if there is `debugger` keyword or an exception from the TypeScript code, its position should be shown correctly.
+
+![Debugger](img/source-map.png)

examples/preprocessors__typescript-none/cypress.json

@@ -0,0 +1,5 @@
+{
+  "supportFile": "cypress/support/index.ts",
+  "fixturesFolder": false,
+  "pluginsFile": false
+}

examples/preprocessors__typescript-none/cypress/integration/spec.ts

@@ -0,0 +1,61 @@
+// import function "add" from another TypeScript file
+import { add } from '../support/add'
+
+describe('TypeScript', () => {
+  it('works', () => {
+    // note TypeScript definition
+    const x: number = 42
+
+    expect(x).to.equal(42)
+  })
+
+  it('checks shape of an object', () => {
+    const object = {
+      age: 21,
+      name: 'Joe',
+    }
+
+    expect(object).to.have.all.keys('name', 'age')
+  })
+
+  it('uses cy commands', () => {
+    cy.wrap({}).should('deep.eq', {})
+  })
+
+  it('tests our example site', () => {
+    cy.visit('https://example.cypress.io/')
+    cy.get('.home-list')
+    .contains('Querying')
+    .click()
+
+    cy.get('#query-btn').should('contain', 'Button')
+  })
+
+  // enable once we release updated TypeScript definitions
+  it('has Cypress object type definition', () => {
+    expect(Cypress.version).to.be.a('string')
+  })
+
+  // wrong code on purpose to type check our definitions
+  // it('can visit website', () => {
+  //   cy.boo()
+  // })
+
+  it('adds numbers', () => {
+    expect(add(2, 3)).to.equal(5)
+  })
+
+  it('uses custom command cy.foo()', () => {
+    cy.foo().should('be.equal', 'foo')
+  })
+
+  it('yields the subject to .then callback', () => {
+    cy.wrap({ foo: 'bar' })
+    .then((o) => {
+      // webpack config should set the source maps correctly
+      // to make sure when debugger is hit, the correct source line is shown
+      // debugger
+      expect(o).to.have.property('foo', 'bar')
+    })
+  })
+})

examples/preprocessors__typescript-none/cypress/support/add.ts

@@ -0,0 +1 @@
+export const add = (a: number, b: number) => a + b

examples/preprocessors__typescript-none/cypress/support/commands.ts

@@ -0,0 +1,39 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+// add a custom command cy.foo()
+Cypress.Commands.add('foo', () => 'foo')
+
+// see more example of adding custom commands to Cypress TS interface
+// in https://github.com/cypress-io/add-cypress-custom-command-in-typescript
+// add new command to the existing Cypress interface
+// tslint:disable-next-line no-namespace
+declare namespace Cypress {
+  // tslint:disable-next-line interface-name
+  interface Chainable {
+    foo: () => string
+  }
+}

examples/preprocessors__typescript-none/cypress/support/index.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

examples/preprocessors__typescript-none/cypress/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "skipLibCheck": true,
+    "strict": true,
+    "types": [
+      // load Cypress global type
+      "cypress"
+    ]
+  },
+  "include": [
+    // process only spec files
+    "**/*.ts"
+  ]
+}

examples/preprocessors__typescript-none/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "cypress-example-typescript",
+  "version": "1.0.0",
+  "description": "Example showing TypeScript tests with Cypress",
+  "scripts": {
+    "build": "../../node_modules/.bin/webpack --output-filename out.js --entry ./cypress/integration/*.ts",
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "precypress:run": "npm run lint",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "lint": "../../node_modules/.bin/tslint --project ./cypress/tsconfig.json",
+    "postlint": "npm run tsc",
+    "test:ci": "../../node_modules/.bin/cypress run",
+    "tsc": "../../node_modules/.bin/tsc  -p ./cypress/tsconfig.json --pretty --noEmit"
+  }
+}

examples/preprocessors__typescript-none/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "downlevelIteration": true,
+    "importHelpers": true,
+    "module": "esnext",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "allowJs": true
+  },
+  "exclude": [
+    ".protractor-report",
+    "coverage",
+    "dist",
+    "node_modules",
+    "cypress"
+  ]
+}

examples/preprocessors__typescript-none/tslint.json

@@ -0,0 +1,13 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "semicolon": [
+      true,
+      "never"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ]
+  }
+}