Better ts commands (#7)

* ..

* much better TS commands thanks to declare global

* comment out TS linting for now

* update travis file

* add package lock file

* update readme file

Author: bahmutov

.npmrc

@@ -0,0 +1,4 @@
+registry=http://registry.npmjs.org/
+save-exact=true
+progress=false
+package-lock=true

.travis.yml

@@ -1,19 +1,18 @@
-## our React TodoMVC app is written
-## in node so thats what we select.
-## Cypress is agnostic to your apps
-## backend language though.
 language: node_js
 
 node_js:
-  - 8
+  - 10
 
 cache:
   directories:
-    - node_modules
+    - ~/.npm
+    - ~/.cache
 
 install:
-  - npm install
+  - npm ci
 
 script:
-  - npm run lint
+  # comment out for now - Cypress v3.1.1 should have better TS definition for jQuery
+  # to pass linting
+  # - npm run lint
   - npm run cypress:run

README.md

@@ -1,68 +1,26 @@
 [![Build Status](https://travis-ci.org/cypress-io/add-cypress-custom-command-in-typescript.svg?branch=master)](https://travis-ci.org/cypress-io/add-cypress-custom-command-in-typescript)
 
-* install typescript compiler v2.6.2
-* install Cypress v1.4.1
-* open Cypress once to scaffold tests
-* rename [cypress/integration/spec.ts](cypress/integration/spec.ts)
-* created `tsconfig.json` file
+To add TypeScript support to Cypress
 
-```json
-{
-  "include": [
-    "node_modules/cypress",
-    "cypress/*/*.ts"
-  ]
-}
-```
+* `npm i -D @bahmutov/add-typescript-to-cypress`
+* start using TypeScript in your [cypress/integration/spec.ts](cypress/integration/spec.ts)
+* you can write [custom Cypress commands](https://on.cypress.io/custom-commands) in TypeScript, see example in [cypress/support/plugins.ts](cypress/support/plugins.ts) to add custom commands.
 
-* inside [cypress/support/commands.ts](cypress/support/commands.ts) create new function `foo`
+## Screenshots
 
-```ts
-function foo() {
-  return 'foo'
-}
-```
-
-* then add this function Cypress commands
-
-```ts
-Cypress.Commands.add('foo', foo)
-```
-
-* and add to Cypress TS chainer interface
-
-```ts
-declare namespace Cypress {
-  interface Chainable {
-    /**
-     * Yields "foo"
-     *
-     * @returns {typeof foo}
-     * @memberof Chainable
-     * @example
-     *    cy.foo().then(f => ...) // f is "foo"
-     */
-    foo(): typeof foo
-  }
-}
-```
-
-* use this in the test [cypress/integration/spec.ts](cypress/integration/spec.ts)
-
-```ts
-it('has new command foo', () => {
-  cy.foo().should('equal', 'foo')
-})
-```
-
-* add TypeScript preprocessor to Cypress using `npm i -D @bahmutov/add-typescript-to-cypress` v 1.1.1
-
-* run Cypress to make sure the test passes
+* passing tests that exercise custom commands
 
 ![test](images/cy-foo-works.png)
 
 * VSCode IntelliSense correctly shows `cy.foo()` docs
 
 ![IntelliSense](images/cy-foo-intellisense.png)
 
+## Problems
+
+If you hit a problem, please open an issue either in this repo or in [cypress-io/cypress](https://github.com/cypress-io/cypress) with reproducible source code. The best issues are the ones we can "git clone ...", install dependencies and run to see the problem. This ensures we can fix it quicker.
+
+## Additional information
 
+- [bahmutov/add-typescript-to-cypress](https://github.com/bahmutov/add-typescript-to-cypress)
+- [Cypress Tooling: TypeScript](https://on.cypress.io/typescript-support)

cypress.json

@@ -1,4 +1,4 @@
 {
   "ignoreTestFiles": "*.js",
-  "videoRecording": false
+  "video": false
 }

cypress/integration/spec.ts

@@ -1,18 +1,11 @@
-;(() => {
-  // try to have name constant in test as in commands.ts
-  const _ = Cypress._
-  const name = 'Cypress-command'
-  console.log('name in commands is', name)
+it('works', () => {
+  expect(Cypress.version).to.be.a('string')
+})
 
-  it('works', () => {
-    expect(Cypress.version).to.be.a('string')
-  })
+it('has new command foo', () => {
+  cy.foo().should('equal', 'foo')
+})
 
-  it('has new command foo', () => {
-    cy.foo().should('equal', 'foo')
-  })
-
-  it('has new command foo2 that uses foo', () => {
-    cy.foo2().should('equal', 'foo')
-  })
-})()
+it('has new command foo2 that uses foo', () => {
+  cy.foo2().should('equal', 'foo')
+})

cypress/plugins/cy-ts-preprocessor.js

@@ -0,0 +1,26 @@
+const wp = require('@cypress/webpack-preprocessor')
+
+const webpackOptions = {
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+    ]
+  }
+}
+
+const options = {
+  webpackOptions
+}
+
+module.exports = wp(options)

cypress/plugins/index.js

@@ -1,26 +1,5 @@
-const wp = require('@cypress/webpack-preprocessor')
-
-const webpackOptions = {
-  resolve: {
-    extensions: ['.ts'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: [/node_modules/],
-        loader: 'ts-loader',
-        options: {
-          configFile: '../../tsconfig.json',
-        },
-      },
-    ],
-  },
-}
+const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor')
 
 module.exports = on => {
-  const options = {
-    webpackOptions,
-  }
-  on('file:preprocessor', wp(options))
+  on('file:preprocessor', cypressTypeScriptPreprocessor)
 }

cypress/support/actions.ts

@@ -1,33 +1,41 @@
-// importing into the TS module that merged module interface does not work
-// https://github.com/cypress-io/add-cypress-custom-command-in-typescript/issues/2
-// import {foo, foo2} from './actions'
-// but requiring in CommonJS style works
-;(() => {
-  const { foo, foo2 } = require('./actions')
-  const _ = Cypress._
-
-  // add commands to Cypress like "cy.foo()" and "cy.foo2()"
-  Cypress.Commands.add('foo', foo)
-  Cypress.Commands.add('foo2', foo2)
-
-  // unrelated constant - does it conflict with a constant with same name
-  // in your tests?
-  const name = 'Cypress-command'
-  console.log('name in commands is', name)
-})()
-
 // add new command to the existing Cypress interface
-declare namespace Cypress {
-  interface Chainable {
-    /**
-     * Yields "foo"
-     *
-     * @returns {typeof foo}
-     * @memberof Chainable
-     * @example
-     *    cy.foo().then(f = ...) // f is "foo"
-     */
-    foo: () => string
-    foo2: () => string
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Yields "foo"
+       *
+       * @returns {typeof foo}
+       * @memberof Chainable
+       * @example
+       *    cy.foo().then(f = ...) // f is "foo"
+       */
+      foo: typeof foo
+      foo2: typeof foo2
+    }
   }
 }
+
+  /**
+ * An example function "foo()"
+ *
+ * @returns {string} "foo"
+ * @example
+ *    foo() // "foo"
+ */
+export function foo() {
+  return 'foo'
+}
+
+/**
+ * Uses cy.foo() internally
+ *
+ * @returns
+ */
+export function foo2() {
+  return cy.foo()
+}
+
+// add commands to Cypress like "cy.foo()" and "cy.foo2()"
+Cypress.Commands.add('foo', foo)
+Cypress.Commands.add('foo2', foo2)