integrate jest #775

MKaHead · 2019-01-15T12:01:20Z

Jest Integration and necessary config changes

Changes proposed in this pull request:

regarding future Babel 7 and deprecated env key - add babelrc.js file, if babel 7 is integrated babelrc is obsolete
add jest, config, and jest runner script
add eslint jest recommented rules
remove babel external-helpers out of babel to fix issue, add it in rollup bundle proccess, but kicked out runtime helpers
add Documentation to Contribution file

Type of change

New feature (non-breaking change which adds functionality)
This change requires a documentation update

How Has This Been Tested?

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
[update]I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

AndyOGo · 2019-01-16T15:59:59Z

package.json

@@ -173,5 +177,25 @@
    "@ungap/custom-elements-builtin": "^0.1.1",
    "document-register-element": "^1.12.0",
    "react": ">=0.14.0"
+  },
+  "jest": {


Personally I prefer to keep configuration scoped in separate config files.
May we moved it jest.config.js as described here: https://jestjs.io/docs/en/configuration.html

AndyOGo · 2019-01-16T16:05:05Z

stack/tasks/bundle-demos.js

@@ -43,7 +43,8 @@ async function buildComponents() {
          .then(result => result.css),
      }),
      babel({
-        runtimeHelpers: true,


By removing this completely we loose reuse of babel-helpers:
https://babeljs.io/docs/en/6.26.3/babel-plugin-transform-runtime

Here is an interesting read about how babel's cli and helper optimisation is working:
https://brunoscopelliti.com/a-simple-babel-optimization-i-recently-learned/

unfortunately official docs are rather obscure:
https://www.npmjs.com/package/babel-plugin-external-helpers

AndyOGo · 2019-01-16T16:09:22Z

stack/tasks/bundles/app.js

 const constants = require('../../constants');
 const common = require('./_common');
+const babel = require('rollup-plugin-babel');


We should import dependencies before relative files

AndyOGo · 2019-01-16T16:09:51Z

stack/tasks/bundles/app.js

@@ -19,10 +18,11 @@ async function buildApp() {
        browser: true,
        preferBuiltins: false,
      }),
+      ENV === constants.ENV.PROD ? uglify() : () => {},


uglify should happen after transpilation

AndyOGo

Thanks for your PR, I really like jest.
Though I don't think it's the ideal test environment for custom elements.

May we discuss the drop of babel-runtime optimization.

AndyOGo · 2019-01-16T16:45:00Z

stack/tasks/bundle-demos.js

@@ -43,7 +43,8 @@ async function buildComponents() {
          .then(result => result.css),
      }),
      babel({
-        runtimeHelpers: true,
+        plugins: ['external-helpers'],
+        externalHelpers: true,


further info at rollup-plugin-babel

If you do not wish the babel helpers to be included in your bundle at all (but instead reference the global babelHelpers object), you may set the externalHelpers option to true:

By default externalHelpers option is set to false so babel helpers will be included in your bundle.

LucaMele · 2019-01-16T17:32:18Z

@AndyOGo what framework would u suggest instead? we were also thinking to try mocha

AndyOGo · 2019-01-16T20:54:57Z

@LucaMele
Karma, mocha, sinon, snapshots with enzym for mocha and real DOM not VDOM

LucaMele · 2019-01-17T07:47:14Z

@MKaHead ok lets stick to our original plan: Lets try Jest and Mocha/Karma etc and compare them.

The idea of using Karma is actually really good. We can so test various browser locally. I would also see if u can use Karma togheter with Jest.

So my suggestion is to evaluate JEST + KARMA + SNAPSHOT Capability VS Mocha + Sinon + Karma + Snapshot capability

AndyOGo · 2019-01-17T08:05:13Z

Agree.
Though as I understand Jest, it comes with a build-in test-runner within a Node environment only (no browser).
More info here:
https://jestjs.io/docs/en/configuration.html#testenvironment-string
jestjs/jest#139

LucaMele · 2019-01-17T08:05:55Z

ok thanks @AndyOGo , i guess that will come up then in the evaluation

AndyOGo · 2019-01-17T08:07:12Z

So we are not the only team with that Jest problem of no browser environment.
There are solutions like:
https://www.npmjs.com/package/jest-browser

But only for headless chrome /~https://github.com/GoogleChrome/puppeteer

LucaMele · 2019-01-17T08:26:38Z

@MKaHead also when runnning karma, when travis does the build then we can only test phantomjs. This could be a little issue. But anyway when running npm run release all the tests will done locally apart of Internet Explorer unless the releaser has a Windows PC which is very unlikley

AndyOGo · 2019-01-17T09:14:19Z

Agreed that's the other downside, CI/CD Pipeline support.

Ideally we would have a tooling which allows us to:

run tests in any browsers, concurrently
run tests within headless browsers, phantomjs, puppeteer, etc.
run tests directly in node, with fake API's like jsdom (for CI/CD speed)

All of that are different test environments.
And as said karma supports it all, like:
https://www.npmjs.com/package/karma-jsdom-launcher

integrate jest

2836149

MKaHead self-assigned this Jan 15, 2019

MKaHead requested review from LucaMele and AndyOGo January 15, 2019 12:01

MKaHead added 2 commits January 15, 2019 15:56

fix unexpected token

6427034

add docs for testing and set test env to default

10b5b15

AndyOGo reviewed Jan 16, 2019

View reviewed changes

AndyOGo suggested changes Jan 16, 2019

View reviewed changes

AndyOGo reviewed Jan 16, 2019

View reviewed changes

findings and more features to test user pattern library integration

676165b

MKaHead closed this Apr 16, 2019

jackblackCH deleted the feature/testing-tool branch May 13, 2019 11:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

integrate jest #775

integrate jest #775

MKaHead commented Jan 15, 2019 •

edited

Loading

AndyOGo Jan 16, 2019

AndyOGo Jan 16, 2019 •

edited

Loading

AndyOGo Jan 16, 2019

AndyOGo Jan 16, 2019

AndyOGo Jan 16, 2019

AndyOGo Jan 16, 2019

AndyOGo left a comment

AndyOGo Jan 16, 2019 •

edited

Loading

LucaMele commented Jan 16, 2019

AndyOGo commented Jan 16, 2019

LucaMele commented Jan 17, 2019

AndyOGo commented Jan 17, 2019

LucaMele commented Jan 17, 2019

AndyOGo commented Jan 17, 2019

LucaMele commented Jan 17, 2019

AndyOGo commented Jan 17, 2019 •

edited

Loading

integrate jest #775

integrate jest #775

Conversation

MKaHead commented Jan 15, 2019 • edited Loading

Type of change

How Has This Been Tested?

Checklist:

AndyOGo Jan 16, 2019

Choose a reason for hiding this comment

AndyOGo Jan 16, 2019 • edited Loading

Choose a reason for hiding this comment

AndyOGo Jan 16, 2019

Choose a reason for hiding this comment

AndyOGo Jan 16, 2019

Choose a reason for hiding this comment

AndyOGo Jan 16, 2019

Choose a reason for hiding this comment

AndyOGo Jan 16, 2019

Choose a reason for hiding this comment

AndyOGo left a comment

Choose a reason for hiding this comment

AndyOGo Jan 16, 2019 • edited Loading

Choose a reason for hiding this comment

LucaMele commented Jan 16, 2019

AndyOGo commented Jan 16, 2019

LucaMele commented Jan 17, 2019

AndyOGo commented Jan 17, 2019

LucaMele commented Jan 17, 2019

AndyOGo commented Jan 17, 2019

LucaMele commented Jan 17, 2019

AndyOGo commented Jan 17, 2019 • edited Loading

MKaHead commented Jan 15, 2019 •

edited

Loading

AndyOGo Jan 16, 2019 •

edited

Loading

AndyOGo Jan 16, 2019 •

edited

Loading

AndyOGo commented Jan 17, 2019 •

edited

Loading