add webpack example

bahmutov · bahmutov · commit 92a544a96b52 · 2020-04-20T10:22:57.000-04:00
diff --git a/examples/use-webpack/.babelrc b/examples/use-webpack/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["istanbul"]
+}
diff --git a/examples/use-webpack/README.md b/examples/use-webpack/README.md
diff --git a/examples/use-webpack/cypress.json b/examples/use-webpack/cypress.json
@@ -1,3 +1,5 @@
 {
-  "baseUrl": "http://localhost:5000"
+  "baseUrl": "http://localhost:5000",
+  "supportFile": "../../support",
+  "fixturesFolder": false
 }
diff --git a/examples/use-webpack/cypress/integration/spec.js b/examples/use-webpack/cypress/integration/spec.js
@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+import { add } from '../../src/calc'
+
+describe('Webpack example', () => {
+  it('loads', () => {
+    cy.visit('/')
+    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)
+  })
+})
diff --git a/examples/use-webpack/cypress/plugins/index.js b/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
+}
diff --git a/examples/use-webpack/dist/index.html b/examples/use-webpack/dist/index.html
@@ -5,6 +5,8 @@
   </head>
   <body>
     <p>Webpack page</p>
+    <input id="user-input" type="text" />
+    <div id="reversed"></div>
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/examples/use-webpack/src/calc.js b/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('')
+}
diff --git a/examples/use-webpack/src/index.js b/examples/use-webpack/src/index.js
@@ -0,0 +1,7 @@
+import { reverse } from './calc'
+
+document.getElementById('user-input').addEventListener('change', e => {
+  const s = e.target.value
+  const reversed = reverse(s)
+  document.getElementById('reversed').innerText = reversed
+})
diff --git a/examples/use-webpack/webpack.config.js b/examples/use-webpack/webpack.config.js
@@ -8,5 +8,21 @@ module.exports = {
   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'
+          }
+        ]
+      }
+    ]
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,8 @@
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
+    "@cypress/webpack-preprocessor": "5.1.2",
+    "babel-loader": "8.1.0",
     "babel-plugin-istanbul": "6.0.0",
     "check-code-coverage": "1.0.1",
     "cypress": "4.4.0",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "plugins": ["istanbul"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
`1`	`1`	`{`
`2`		`- "baseUrl": "http://localhost:5000"`
	`2`	`+ "baseUrl": "http://localhost:5000",`
	`3`	`+ "supportFile": "../../support",`
	`4`	`+ "fixturesFolder": false`
`3`	`5`	`}`