Add ts-loader example (#85)

Author: bahmutov

.gitignore

@@ -2,7 +2,7 @@ node_modules/
 .DS_Store
 *.log*
 _test-output
-cypress/videos
+**/cypress/videos
 cypress/screenshots
 examples/react-app/build/
 dist

README.md

@@ -46,6 +46,7 @@ module.exports = (on) => {
 
 - [React app](examples/react-app) shows how to point Cypress at Webpack configuration from `react-scripts` dependency
 - [use-babelrc](examples/use-babelrc) shows to to use your project's `.babelrc` with Webpack
+- [use-ts-loader](examples/use-ts-loader) shows how to transpile TypeScript specs following [Webpack TypeScript guide](https://webpack.js.org/guides/typescript/)
 
 ## Options
 

circle.yml

@@ -57,14 +57,33 @@ workflows:
           no-workspace: true
           working_directory: examples/use-babelrc
 
+      - cypress/run:
+          name: Test ts-loader
+          requires:
+            - Install
+          executor: cypress/base-12-14-0
+          # we still need to install local TypeScript and Cypress
+          install-command: npm install
+          # not really a build command, just TS check
+          build: npm run types
+          timeout: '1m'
+          no-workspace: true
+          working_directory: examples/use-ts-loader
+
       # wait for all jobs to finish and possible run NPM release
       - cypress/run:
           name: NPM release
+          # only run NPM release from specific branch(es)
+          filters:
+            branches:
+              only:
+                - master
           requires:
             - Install
             - Tests
             - Test React App
             - Test babelrc
+            - Test ts-loader
           executor: cypress/base-12-14-0
           # nothing to install - cypress/install job does it
           # and nothing to pass to the next job

examples/use-ts-loader/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "env": {
+    "cypress/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:cypress/recommended"
+  ],
+  "plugins": [
+    "cypress"
+  ]
+}

examples/use-ts-loader/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/use-ts-loader/README.md

@@ -0,0 +1,3 @@
+# use-ts-loader
+
+> Transpiling TypeScript specs following [Webpack ts-loader guide](https://webpack.js.org/guides/typescript/)

examples/use-ts-loader/cypress.json

@@ -0,0 +1,4 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false
+}

examples/use-ts-loader/cypress/integration/spec.ts

@@ -0,0 +1,16 @@
+describe('Use ts-loader', () => {
+  it('works', () => {
+    const data = {
+      person: {
+        firstName: 'Joe',
+      },
+    }
+
+    expect(data.person.firstName).to.equal('Joe')
+
+    cy.wrap(data).should('have.property', 'person')
+    .should('deep.equal', {
+      firstName: 'Joe',
+    })
+  })
+})

examples/use-ts-loader/cypress/plugins/index.js

@@ -0,0 +1,7 @@
+const webpackPreprocessor = require('../../../..')
+
+module.exports = (on) => {
+  const webpack = require('../../webpack.config.js')
+
+  on('file:preprocessor', webpackPreprocessor({ webpack }))
+}

examples/use-ts-loader/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "use-babelrc",
+  "version": "1.0.0",
+  "description": "Transpiling specs using local .babelrc file",
+  "private": true,
+  "scripts": {
+    "cy:open": "cypress open",
+    "test": "cypress run",
+    "types": "tsc --noEmit --lib es2015,dom --types cypress cypress/integration/*.ts"
+  },
+  "devDependencies": {
+    "cypress": "4.5.0",
+    "ts-loader": "7.0.4",
+    "typescript": "3.9.2"
+  },
+  "license": "ISC",
+  "author": "",
+  "keywords": []
+}