Add simple webpack example (#204)

* add webpack example folder

* add webpack example

* add CI for use-webpack example

* call the right script

* store artifacts for use-webpack

* store artifacts using full folder for now

* try contains before typing

* try showing the console log messages

* fix variable print

* test with dev version of the orb

* use orb 1.19.2

* update readme files

Author: bahmutov

.circleci/config.yml

@@ -1,7 +1,7 @@
 # https://circleci.com/docs/2.0/configuration-reference/
 version: 2.1
 orbs:
-  cypress: cypress-io/cypress@1.17.1 # used to run e2e tests
+  cypress: cypress-io/cypress@1.19.2 # used to run e2e tests
   node: circleci/node@1.1.6 # used to publish new NPM version
 
 jobs:
@@ -255,6 +255,41 @@ workflows:
                   ../../node_modules/.bin/only-covered main.ts calc.ts
                 working_directory: examples/ts-example
 
+      - cypress/run:
+          attach-workspace: true
+          name: example-use-webpack
+          requires:
+            - cypress/install
+          # there are no jobs to follow this one
+          # so no need to save the workspace files (saves time)
+          no-workspace: true
+          working_directory: examples/use-webpack
+          build: npm run build
+          start: npm start
+          wait-on: 'http://localhost:5000'
+          command: '../../node_modules/.bin/cypress run'
+          # wrong path when using working_directory
+          # https://github.com/cypress-io/circleci-orb/issues/265
+          # store screenshots and videos
+          # store_artifacts: true
+          post-steps:
+            - store_artifacts:
+                path: examples/use-webpack/cypress/videos
+            - store_artifacts:
+                path: examples/use-webpack/cypress/screenshots
+            # store the created coverage report folder
+            # you can click on it in the CircleCI UI
+            # to see live static HTML site
+            - store_artifacts:
+                path: examples/use-webpack/coverage
+            - run:
+                name: Check code coverage 📈
+                command: |
+                  ../../node_modules/.bin/check-coverage src/index.js
+                  ../../node_modules/.bin/check-coverage src/calc.js
+                  ../../node_modules/.bin/only-covered src/index.js src/calc.js
+                working_directory: examples/use-webpack
+
       - cypress/run:
           attach-workspace: true
           name: example-same-folder
@@ -428,3 +463,4 @@ workflows:
             - example-one-spec
             - example-exclude-files
             - example-docker-paths
+            - example-use-webpack

README.md

@@ -323,6 +323,7 @@ Full examples we use for testing in this repository:
 - [examples/before-each-visit](examples/before-each-visit) checks if code coverage correctly keeps track of code when doing `cy.visit` before each test
 - [examples/one-spec.js](examples/one-spec.js) confirms that coverage is collected and filtered correctly if the user only executes a single Cypress test
 - [examples/ts-example](examples/ts-example) uses Babel + Parcel to instrument and serve TypeScript file
+- [examples/use-webpack](examples/use-webpack) shows Webpack build with source maps and Babel
 
 ### External examples
 

examples/use-webpack/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["istanbul"]
+}

examples/use-webpack/README.md

@@ -0,0 +1,5 @@
+# use-webpack
+
+> Instruments the built bundle using Webpack
+
+Webpack uses [webpack.config.js](webpack.config.js) to build the bundle from [src/index.js](src/index.js) into `dist/main.js`, loaded from [dist/index.html](dist/index.html). The [cypress/integration/spec.js](cypress/integration/spec.js) also uses one of the functions from [src/calc.js](src/calc.js) directly. The final coverage includes both E2E and unit test coverage information.

examples/use-webpack/cypress.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "http://localhost:5000",
+  "supportFile": "../../support",
+  "fixturesFolder": false,
+  "viewportHeight": 400,
+  "viewportWidth": 400
+}

examples/use-webpack/cypress/integration/spec.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+import { add } from '../../src/calc'
+
+describe('Webpack example', () => {
+  it('loads', () => {
+    cy.visit('/')
+    cy.contains('Webpack page').should('be.visible')
+    cy.get('#user-input').type('Hello{enter}')
+    cy.contains('olleH').should('be.visible')
+  })
+
+  it('has add function', () => {
+    // test "add" via this unit test
+    expect(add(2, 3)).to.equal(5)
+  })
+})

examples/use-webpack/cypress/plugins/index.js

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+const webpack = require('@cypress/webpack-preprocessor')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  const options = {
+    // use the same Webpack options to bundle spec files as your app does "normally"
+    // which should instrument the spec files in this project
+    webpackOptions: require('../../webpack.config'),
+    watchOptions: {}
+  }
+  on('file:preprocessor', webpack(options))
+
+  require('../../../../task')(on, config)
+  return config
+}

examples/use-webpack/dist/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Webpack example</title>
+    <style>
+      .console-log-div {
+        width: 95% !important;
+        background-color: #efefef;
+      }
+      #log {
+        margin: 10px 0px;
+        display: block;
+        white-space: pre;
+        font-family: monospace;
+      }
+      #log:before {
+        content: 'log javascript:';
+        font-style: italic;
+        color: #555;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Webpack page</p>
+    <input id="user-input" type="text" />
+    <div id="reversed"></div>
+    <script src="main.js"></script>
+  </body>
+</html>

examples/use-webpack/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "example-use-webpack",
+  "version": "1.0.0",
+  "description": "Code coverage from webpack",
+  "private": true,
+  "scripts": {
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "cy:run": "../../node_modules/.bin/cypress run",
+    "dev": "../../node_modules/.bin/start-test 5000 cy:open",
+    "build": "../../node_modules/.bin/webpack",
+    "start": "../../node_modules/.bin/serve dist",
+    "test:ci": "../../node_modules/.bin/start-test 5000 cy:run"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

examples/use-webpack/src/calc.js

@@ -0,0 +1,10 @@
+export const add = (a, b) => {
+  return a + b
+}
+
+export const reverse = s => {
+  return s
+    .split('')
+    .reverse()
+    .join('')
+}

examples/use-webpack/src/index.js

@@ -0,0 +1,14 @@
+import { reverse } from './calc'
+
+if (window.Cypress) {
+  require('console-log-div')
+  console.log('attaching event listeners')
+}
+
+document.getElementById('user-input').addEventListener('change', e => {
+  const s = e.target.value
+  console.log(`input string "${s}"`)
+  const reversed = reverse(s)
+  document.getElementById('reversed').innerText = reversed
+})
+console.log('added event listener')

examples/use-webpack/webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path')
+
+// https://webpack.js.org/guides/development/
+module.exports = {
+  entry: './src/index.js',
+  mode: 'development',
+  devtool: 'inline-source-map',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  module: {
+    rules: [
+      {
+        // when bundling application's own source code
+        // transpile using Babel which uses .babelrc file
+        // and instruments code using babel-plugin-istanbul
+        test: /\.js/,
+        exclude: /(node_modules|bower_components)/,
+        use: [
+          {
+            loader: 'babel-loader'
+          }
+        ]
+      }
+    ]
+  }
+}