Added UMD build system, IE11 compatibility and test suite #1

micheleriva · 2019-03-04T15:46:40Z

Hi!
I've made the following tasks:

Added Webpack/Babel-based build system
Added IE11 compatibility thanks to UMD build
Added sourcemaps for development and debugging purposes
Added test suite with Jest, Puppeteer and server side rendering
Added Husky for git hooks, so you won't commit a development build (it often happens to me 😞)

Great project!
Best regards

lsimone · 2019-03-05T15:48:05Z

first of all, thanks @micheleriva for your contribution!
I will review this ASAP.
For sure we will pull jest tests, IE11 compatibility and babel configuration even if perhaps we will keep it simpler avoiding webpack (just babel transpilation).

Thank you again for your time and effort!

lsimone · 2019-03-06T20:15:42Z

@micheleriva I tried to clone your master and run tests:

git clone https://github.com/micheleriva/msm-crypto.git
cd msm-crypto
npm i
npm run test

I guess there's a problem:


> msm-crypto@1.0.0 test /media/DATA/proj/TESTS/msm-crypto
> jest --coverage


  ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "Error: Navigation failed because browser has disconnected!
        at CDPSession.LifecycleWatcher._eventListeners.helper.addEventListener (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/LifecycleWatcher.js:47:107)
        at CDPSession.emit (events.js:127:13)
        at CDPSession._onClosed (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/Connection.js:215:10)
        at Connection._onMessage (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/Connection.js:105:17)
        at WebSocketTransport._ws.addEventListener.event (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/WebSocketTransport.js:41:24)
        at WebSocket.onMessage (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/node_modules/ws/lib/event-target.js:120:16)
        at WebSocket.emit (events.js:127:13)
        at Receiver.receiverOnMessage (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/node_modules/ws/lib/websocket.js:792:20)
        at Receiver.emit (events.js:127:13)
        at Receiver.dataMessage (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/node_modules/ws/lib/receiver.js:422:14)
      -- ASYNC --
        at Frame.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:108:27)
        at Page.goto (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/Page.js:656:49)
        at Page.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:109:23)
        at Object.goto (/media/DATA/proj/TESTS/msm-crypto/tests/msmCrypto.test.js:4:10)
        at Object.asyncJestLifecycle (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:41:12)
        at new Promise (<anonymous>)
        at mapper (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:71:41)
        at <anonymous>
      -- ASYNC --
        at Page.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:108:27)
        at Object.goto (/media/DATA/proj/TESTS/msm-crypto/tests/msmCrypto.test.js:4:10)
        at Object.asyncJestLifecycle (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:53:37)
        at resolve (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:41:12)
        at new Promise (<anonymous>)
        at mapper (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:71:41)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:160:7)".

      2 | 
      3 |   beforeEach(() => {
    > 4 |     page.goto(PATH, { waitUntil: 'load' })
        |          ^
      5 |         .catch((err) => console.log(err))
      6 |   })
      7 |   

      at CDPSession.LifecycleWatcher._eventListeners.helper.addEventListener (node_modules/puppeteer/lib/LifecycleWatcher.js:47:107)
      at CDPSession._onClosed (node_modules/puppeteer/lib/Connection.js:215:10)
      at Connection._onMessage (node_modules/puppeteer/lib/Connection.js:105:17)
      at WebSocketTransport._ws.addEventListener.event (node_modules/puppeteer/lib/WebSocketTransport.js:41:24)
      at WebSocket.onMessage (node_modules/puppeteer/node_modules/ws/lib/event-target.js:120:16)
      at Receiver.receiverOnMessage (node_modules/puppeteer/node_modules/ws/lib/websocket.js:792:20)
      at Receiver.dataMessage (node_modules/puppeteer/node_modules/ws/lib/receiver.js:422:14)
        -- ASYNC --
      at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at Page.goto (node_modules/puppeteer/lib/Page.js:656:49)
      at Page.<anonymous> (node_modules/puppeteer/lib/helper.js:109:23)
      at Object.goto (tests/msmCrypto.test.js:4:10)
        -- ASYNC --
      at Page.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at Object.goto (tests/msmCrypto.test.js:4:10)
      at process._tickCallback (internal/process/next_tick.js:160:7)".
      at log (tests/msmCrypto.test.js:5:33)


  ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "{ Error: Protocol error (Runtime.callFunctionOn): Target closed.
        at Promise (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/Connection.js:183:56)
        at new Promise (<anonymous>)
        at CDPSession.send (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/Connection.js:182:12)
        at ExecutionContext.evaluateHandle (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/ExecutionContext.js:106:44)
        at ExecutionContext.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:109:23)
        at ExecutionContext.evaluate (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/ExecutionContext.js:48:31)
        at ExecutionContext.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:109:23)
        at DOMWorld.evaluate (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/DOMWorld.js:105:20)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:160:7)
      -- ASYNC --
        at Frame.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:108:27)
        at Page.evaluate (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/Page.js:809:43)
        at Page.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:109:23)
        at Object.evaluate (/media/DATA/proj/TESTS/msm-crypto/tests/msmCrypto.test.js:9:28)
        at Object.asyncJestTest (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:41:12)
        at new Promise (<anonymous>)
        at mapper (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:71:41)
        at <anonymous>
      -- ASYNC --
        at Page.<anonymous> (/media/DATA/proj/TESTS/msm-crypto/node_modules/puppeteer/lib/helper.js:108:27)
        at Object.evaluate (/media/DATA/proj/TESTS/msm-crypto/tests/msmCrypto.test.js:9:28)
        at Object.asyncJestTest (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:41:12)
        at new Promise (<anonymous>)
        at mapper (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/media/DATA/proj/TESTS/msm-crypto/node_modules/jest-jasmine2/build/queueRunner.js:71:41)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:160:7)
      message: 'Protocol error (Runtime.callFunctionOn): Target closed.' }".

       7 |   
       8 |   test('Should return bar', () => {
    >  9 |     const msmCrypto = page.evaluate(() => {
         |                            ^
      10 |       console.log('Loaded msmCrypto');
      11 |       return msmCrypto();
      12 |     })

      at Promise (node_modules/puppeteer/lib/Connection.js:183:56)
      at CDPSession.send (node_modules/puppeteer/lib/Connection.js:182:12)
      at ExecutionContext.evaluateHandle (node_modules/puppeteer/lib/ExecutionContext.js:106:44)
      at ExecutionContext.<anonymous> (node_modules/puppeteer/lib/helper.js:109:23)
      at ExecutionContext.evaluate (node_modules/puppeteer/lib/ExecutionContext.js:48:31)
      at ExecutionContext.<anonymous> (node_modules/puppeteer/lib/helper.js:109:23)
      at DOMWorld.evaluate (node_modules/puppeteer/lib/DOMWorld.js:105:20)
        -- ASYNC --
      at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at Page.evaluate (node_modules/puppeteer/lib/Page.js:809:43)
      at Page.<anonymous> (node_modules/puppeteer/lib/helper.js:109:23)
      at Object.evaluate (tests/msmCrypto.test.js:9:28)
        -- ASYNC --
      at Page.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at Object.evaluate (tests/msmCrypto.test.js:9:28)
        message: 'Protocol error (Runtime.callFunctionOn): Target closed.' }".
      at log (tests/msmCrypto.test.js:14:29)

 PASS  tests/msmCrypto.test.js
  Testing MsmCrypto
    ✓ Should return bar (4ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.827s
Ran all test suites.```

micheleriva · 2019-03-06T20:49:40Z

Ok I understood the problem.
Jest throws an error 'cause it wasn't able to log results due to its asyncronous nature.
In order to work properly, I needed to add Puppeteer for browser testing (window.crypto.subtle is not available on Node.js yet, as far as I know).
Jest needs to startup a development server with Express/Koa/Node Http, then it uses Puppeteer in order to run tests on a headless chrome. Sometimes, Jest is not able to get log messages from Puppeteer (because of its asynchronous apis), so it throws that error.
First of all, I've added a better Jest/Puppeteer configuration in order to spawn all the processes in a correct way (I'm pushing asap).
Tests implementation weren't a goal for my PR (but I can do it, I love TDD), so I made a little foo/bar mock that runs correctly as an example for a possible test configuration.

I'm pushing a fix asap :)

lsimone · 2019-03-06T20:55:09Z

Thanks @micheleriva , I figured why you used puppeteer, indeed it's not possible to test this library in a node env.

BTW another problem I have so far is that after building the library and npm-linking (npm link msm-crypto) in another consumer project, when I use it there, it seems the lib exported function are not really exported:

import { encrypt, decrypt } from 'msm-crypto'
console.log(encrypt, decrypt)     // here it prints `undefined` twice

Could it be a misconfigured webpack build?

micheleriva · 2019-03-06T21:31:14Z

Hi @lsimone
I pushed a fix for Jest/Puppeteer, now it works great thanks to async/await, babel-polyfill and regeneratorRuntime.

I tried to run the UMD build on the browser and it worked prefectly. I couldn't test it on Node because of the missing Node API, is the symlink working correctly?
Btw if you're working on a Node environment for development, I'd suggest to import the index.js file instead of the UMD build, so you'll have access to JSDoc comments and tree-shakable modules. This is easily configurable via package.json and works great!

lsimone · 2019-03-07T16:52:00Z

ok @micheleriva , thank you very much again, I managed to merge almost everything.
BTW there's still a problem in tests: when we read the msmCrypto variable from the global object window, we receive an object containing 2 objects encrypt and decrypt while I would expect them to be 2 functions.

Here's the code I have modified to test through jest-puppeteer

micheleriva · 2019-03-08T10:22:22Z

Wow that's pretty strange, I can't reproduce it right now. I'll try asap on another environment and I'll submit a new PR if I have any news.
Regards!

micheleriva added 6 commits March 4, 2019 15:55

added build system

5deb4cc

Added IE11 compatibility with msCrypto

4cf0934

added Husky in order to build the library with each commit

c4f97fe

improved code formatting

7f73b7f

updated build system

c9d6668

added test suite

2f30b3d

lsimone self-assigned this Mar 6, 2019

fixed Jest/Puppeteer

001f827

lsimone merged commit 001f827 into musement:master Mar 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added UMD build system, IE11 compatibility and test suite #1

Added UMD build system, IE11 compatibility and test suite #1

micheleriva commented Mar 4, 2019

lsimone commented Mar 5, 2019

lsimone commented Mar 6, 2019 •

edited

Loading

micheleriva commented Mar 6, 2019

lsimone commented Mar 6, 2019 •

edited

Loading

micheleriva commented Mar 6, 2019 •

edited

Loading

lsimone commented Mar 7, 2019

micheleriva commented Mar 8, 2019

Added UMD build system, IE11 compatibility and test suite #1

Added UMD build system, IE11 compatibility and test suite #1

Conversation

micheleriva commented Mar 4, 2019

lsimone commented Mar 5, 2019

lsimone commented Mar 6, 2019 • edited Loading

micheleriva commented Mar 6, 2019

lsimone commented Mar 6, 2019 • edited Loading

micheleriva commented Mar 6, 2019 • edited Loading

lsimone commented Mar 7, 2019

micheleriva commented Mar 8, 2019

lsimone commented Mar 6, 2019 •

edited

Loading

lsimone commented Mar 6, 2019 •

edited

Loading

micheleriva commented Mar 6, 2019 •

edited

Loading