Skip to content

Commit ffb75ea

Browse files
bahmutovbahmutov
authored
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
1 parent 060f17b commit ffb75ea

File tree

14 files changed

+1604
-7
lines changed

14 files changed

+1604
-7
lines changed

‎.circleci/config.yml

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# https://circleci.com/docs/2.0/configuration-reference/
22
version: 2.1
33
orbs:
4-
cypress: cypress-io/cypress@1.17.1 # used to run e2e tests
4+
cypress: cypress-io/cypress@1.19.2 # used to run e2e tests
55
node: circleci/[email protected] # used to publish new NPM version
66

77
jobs:
@@ -255,6 +255,41 @@ workflows:
255255
../../node_modules/.bin/only-covered main.ts calc.ts
256256
working_directory: examples/ts-example
257257

258+
- cypress/run:
259+
attach-workspace: true
260+
name: example-use-webpack
261+
requires:
262+
- cypress/install
263+
# there are no jobs to follow this one
264+
# so no need to save the workspace files (saves time)
265+
no-workspace: true
266+
working_directory: examples/use-webpack
267+
build: npm run build
268+
start: npm start
269+
wait-on: 'http://localhost:5000'
270+
command: '../../node_modules/.bin/cypress run'
271+
# wrong path when using working_directory
272+
# https://github.com/cypress-io/circleci-orb/issues/265
273+
# store screenshots and videos
274+
# store_artifacts: true
275+
post-steps:
276+
- store_artifacts:
277+
path: examples/use-webpack/cypress/videos
278+
- store_artifacts:
279+
path: examples/use-webpack/cypress/screenshots
280+
# store the created coverage report folder
281+
# you can click on it in the CircleCI UI
282+
# to see live static HTML site
283+
- store_artifacts:
284+
path: examples/use-webpack/coverage
285+
- run:
286+
name: Check code coverage 📈
287+
command: |
288+
../../node_modules/.bin/check-coverage src/index.js
289+
../../node_modules/.bin/check-coverage src/calc.js
290+
../../node_modules/.bin/only-covered src/index.js src/calc.js
291+
working_directory: examples/use-webpack
292+
258293
- cypress/run:
259294
attach-workspace: true
260295
name: example-same-folder
@@ -428,3 +463,4 @@ workflows:
428463
- example-one-spec
429464
- example-exclude-files
430465
- example-docker-paths
466+
- example-use-webpack

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,7 @@ Full examples we use for testing in this repository:
323323
- [examples/before-each-visit](examples/before-each-visit) checks if code coverage correctly keeps track of code when doing `cy.visit` before each test
324324
- [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
325325
- [examples/ts-example](examples/ts-example) uses Babel + Parcel to instrument and serve TypeScript file
326+
- [examples/use-webpack](examples/use-webpack) shows Webpack build with source maps and Babel
326327

327328
### External examples
328329

‎examples/use-webpack/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["istanbul"]
3+
}

‎examples/use-webpack/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# use-webpack
2+
3+
> Instruments the built bundle using Webpack
4+
5+
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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"baseUrl": "http://localhost:5000",
3+
"supportFile": "../../support",
4+
"fixturesFolder": false,
5+
"viewportHeight": 400,
6+
"viewportWidth": 400
7+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/// <reference types="cypress" />
2+
import { add } from '../../src/calc'
3+
4+
describe('Webpack example', () => {
5+
it('loads', () => {
6+
cy.visit('/')
7+
cy.contains('Webpack page').should('be.visible')
8+
cy.get('#user-input').type('Hello{enter}')
9+
cy.contains('olleH').should('be.visible')
10+
})
11+
12+
it('has add function', () => {
13+
// test "add" via this unit test
14+
expect(add(2, 3)).to.equal(5)
15+
})
16+
})

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/// <reference types="cypress" />
2+
const webpack = require('@cypress/webpack-preprocessor')
3+
4+
/**
5+
* @type {Cypress.PluginConfig}
6+
*/
7+
module.exports = (on, config) => {
8+
const options = {
9+
// use the same Webpack options to bundle spec files as your app does "normally"
10+
// which should instrument the spec files in this project
11+
webpackOptions: require('../../webpack.config'),
12+
watchOptions: {}
13+
}
14+
on('file:preprocessor', webpack(options))
15+
16+
require('../../../../task')(on, config)
17+
return config
18+
}

‎examples/use-webpack/dist/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Webpack example</title>
5+
<style>
6+
.console-log-div {
7+
width: 95% !important;
8+
background-color: #efefef;
9+
}
10+
#log {
11+
margin: 10px 0px;
12+
display: block;
13+
white-space: pre;
14+
font-family: monospace;
15+
}
16+
#log:before {
17+
content: 'log javascript:';
18+
font-style: italic;
19+
color: #555;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<p>Webpack page</p>
25+
<input id="user-input" type="text" />
26+
<div id="reversed"></div>
27+
<script src="main.js"></script>
28+
</body>
29+
</html>

‎examples/use-webpack/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "example-use-webpack",
3+
"version": "1.0.0",
4+
"description": "Code coverage from webpack",
5+
"private": true,
6+
"scripts": {
7+
"cy:open": "../../node_modules/.bin/cypress open",
8+
"cy:run": "../../node_modules/.bin/cypress run",
9+
"dev": "../../node_modules/.bin/start-test 5000 cy:open",
10+
"build": "../../node_modules/.bin/webpack",
11+
"start": "../../node_modules/.bin/serve dist",
12+
"test:ci": "../../node_modules/.bin/start-test 5000 cy:run"
13+
},
14+
"keywords": [],
15+
"author": "",
16+
"license": "ISC"
17+
}

‎examples/use-webpack/src/calc.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const add = (a, b) => {
2+
return a + b
3+
}
4+
5+
export const reverse = s => {
6+
return s
7+
.split('')
8+
.reverse()
9+
.join('')
10+
}

‎examples/use-webpack/src/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { reverse } from './calc'
2+
3+
if (window.Cypress) {
4+
require('console-log-div')
5+
console.log('attaching event listeners')
6+
}
7+
8+
document.getElementById('user-input').addEventListener('change', e => {
9+
const s = e.target.value
10+
console.log(`input string "${s}"`)
11+
const reversed = reverse(s)
12+
document.getElementById('reversed').innerText = reversed
13+
})
14+
console.log('added event listener')

‎examples/use-webpack/webpack.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const path = require('path')
2+
3+
// https://webpack.js.org/guides/development/
4+
module.exports = {
5+
entry: './src/index.js',
6+
mode: 'development',
7+
devtool: 'inline-source-map',
8+
output: {
9+
filename: 'main.js',
10+
path: path.resolve(__dirname, 'dist')
11+
},
12+
module: {
13+
rules: [
14+
{
15+
// when bundling application's own source code
16+
// transpile using Babel which uses .babelrc file
17+
// and instruments code using babel-plugin-istanbul
18+
test: /\.js/,
19+
exclude: /(node_modules|bower_components)/,
20+
use: [
21+
{
22+
loader: 'babel-loader'
23+
}
24+
]
25+
}
26+
]
27+
}
28+
}

0 commit comments

Comments
 (0)