Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add e2e tests for rollup #681

Merged
merged 1 commit into from
Jan 13, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
124 changes: 124 additions & 0 deletions .github/workflows/e2e-rollup-workflow.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
on:
schedule:
- cron: '0 */4 * * *'
push:
branches:
- master
pull_request:
paths:
- .github/workflows/e2e-rollup-workflow.yml
- scripts/e2e-setup-ci.sh

name: 'E2E rollup.js'
jobs:
chore:
name: 'Validating rollup.js'
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@master

- name: 'Use Node.js 10.x'
uses: actions/setup-node@master
with:
node-version: 10.x

- name: 'Build the standard bundle'
run: |
node ./scripts/run-yarn.js build:cli

- name: 'Running the integration test'
run: |
source scripts/e2e-setup-ci.sh

yarn init -p
yarn add -D rollup@^1.29.0

# Tree-shaking
echo "export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'cjs' } };" | tee rollup.config.js

mkdir src
echo "export function square(x) { return x * x } export function cube(x) { return x * x * x }" | tee src/maths.js
echo "import { cube } from './maths.js'; console.log(cube(5));" | tee src/main.js

yarn rollup -c
[[ "$(node dist/bundle.js)" = "125" ]]
cat dist/bundle.js | grep -v "square"

rm -rf dist src

# Multiple entry modules
echo "export default { input: ['src/main.js', 'src/otherEntry.js'], output: { dir: 'dist', format: 'cjs' } };" | tee rollup.config.js

mkdir src
echo "import hyperCube from './hyperCube.js'; console.log(hyperCube(5));" | tee src/main.js
echo "import cube from './cube.js'; console.log(cube(5));" | tee src/otherEntry.js
echo "import square from './square.js'; export default function cube(x) { return square(x) * x; }" | tee src/cube.js
echo "import cube from './cube.js'; export default function hyperCube(x) { return cube(x) * x; }" | tee src/hyperCube.js
echo "export default function square(x) { return x * x; }" | tee src/square.js

yarn rollup -c
[[ "$(node dist/main.js)" = "625" ]]
[[ "$(node dist/otherEntry.js)" = "125" ]]
ls dist | grep "cube"

rm -rf dist src

# With NPM packages
yarn add the-answer@^1.0.0
yarn add -D @rollup/plugin-node-resolve@^7.0.0

echo "import resolve from '@rollup/plugin-node-resolve'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'cjs' }, plugins: [resolve()]};" | tee rollup.config.js

mkdir src
echo "import answer from 'the-answer'; console.log('the answer is ' + answer);" | tee src/main.js

yarn rollup -c
[[ "$(node dist/bundle.js)" = "the answer is 42" ]]

rm -rf dist src

# Peer dependencies
yarn add -P lodash

echo "import resolve from '@rollup/plugin-node-resolve'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'cjs' }, plugins: [resolve()], external: ['lodash']};" | tee rollup.config.js

mkdir src
echo "import answer from 'the-answer'; import _ from 'lodash';" | tee src/main.js

yarn rollup -c
cat dist/bundle.js | grep -v "lodash"

rm -rf src dist

# Babel
yarn add -D rollup-plugin-babel@^4.3.3 @babel/core@^7.7.7 @babel/preset-env@^7.7.7

echo "import resolve from '@rollup/plugin-node-resolve'; import babel from 'rollup-plugin-babel'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'cjs' }, plugins: [resolve(), babel({ exclude: 'node_modules/**' })]};" | tee rollup.config.js

mkdir src
echo '{ "presets": [["@babel/preset-env", { "modules": false }]] }' | tee src/.babelrc
echo "import answer from 'the-answer'; console.log(\`the answer is \${answer}\`);" | tee src/main.js

yarn rollup -c
[[ "$(node dist/bundle.js)" = "the answer is 42" ]]
cat dist/bundle.js | grep -v "console.log(\`"

rm -rf src dist

# rollup-plugin-postcss
yarn add -D rollup-plugin-postcss@^2.0.3

echo "import postcss from 'rollup-plugin-postcss'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'cjs' }, plugins: [postcss({ extract: true, modules: true })] }" | tee rollup.config.js

mkdir src
echo "import style from './style.css'; console.log(style);" | tee src/main.js
echo ".app { color: red; }" | tee src/style.css

yarn rollup -c
[[ "$(cat dist/bundle.css)" = ".style_app__3FC6W { color: red; }" ]]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the 3FC6W stable? Can it cause the build to periodically fail?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's a hash of the css file, which means that if we don't change the content of the css file, and the hash function never changed, it would be fine.

However, rollup also do not guarantee that the hashing function would never changed, we could argue that the result is not stable... Maybe we should think of other alternatives, any idea?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typically this can be solved by doing a replace operation: | sed 's/__[0-9A-F]+/__xxx/'. This way the result is always stable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a regex approach with =~ would be much cleaner 🤔? I can open up a follow up PR if that sounds good to you 😉

[[ "$(node dist/bundle.js)" = "{ app: 'style_app__3FC6W' }" ]]

rm -rf src dist