weixin_39838231
weixin_39838231
2020-12-09 09:18

implement toBlob and toDataURL

Goals

  • [x] monkey patch toBlob
  • [x] monkey patch toDataURL
  • [x] increase test coverage of prototype mocking functions to 100%
  • [x] move mock functions to their own folder
  • [x] change codeCoverageFrom in package.json to include src/mock/**/*.js
  • [x] test toBlob
  • [x] test toDataURL
  • [x] implement clip
  • [x] test clip
  • [x] implement createImageData
  • [x] test createImageData
  • [x] close #21 and re-close #15

toBlob and toDataURL problems

When the "canvas" package is not installed, toBlob() and toDataURL() will throw errors because the jsdom package expects canvas integration. In this case, we just override the default behavior because we don't expect the canvas package to be available at all.

createImageData

This function was left unimplemented by mistake and is included in this pull request via #15 and thanks to .

clip

This function was accidentally left unimplemented, and has the same parameter checks as the fill() function, so it was easy to copy paste, and verify parameter inputs.

Problems with implementation

If the "canvas" package is installed, we call the internal function provided by jsdom. Since we do not install "canvas" as a development dependency this branch of code that exists on line 14 of ./src/mock/prototype.js becomes uncovered for test coverage.

Instead, we use a trap door like this:

ts
  /**
   * This test is very special, because it helps increase the code coverage to 100%. It patches
   * console.error to supress calls to console.error, sets an internal dataset value to force the
   * getContext() function to call it's internal getContext() provided by jsdom.
   */
  it('should call internal function if "canvas" is installed', () => {
    const error = console.error;
    console.error = () => void 0;
    canvas.dataset.internalRequireTest = true;
    canvas.getContext('webgl');
    console.error = error;
  });

This allows the code path to be artificially executed and result in 100% code coverage.

testing

would you mind testing this fork in your test suite? You can clone the repo into your node-modules folder and run:


npm install
npm test
npm build

Test Coverage

There is currently only one line of code uncovered in mock/prototype.js.


------------------------------|----------|----------|----------|----------|-------------------|
File                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------------|----------|----------|----------|----------|-------------------|
All files                     |      100 |      100 |      100 |      100 |                   |
 classes                      |      100 |      100 |      100 |      100 |                   |
  CanvasGradient.js           |      100 |      100 |      100 |      100 |                   |
  CanvasPattern.js            |      100 |      100 |      100 |      100 |                   |
  CanvasRenderingContext2D.js |      100 |      100 |      100 |      100 |                   |
  DOMMatrix.js                |      100 |      100 |      100 |      100 |                   |
  ImageData.js                |      100 |      100 |      100 |      100 |                   |
  Path2D.js                   |      100 |      100 |      100 |      100 |                   |
  TextMetrics.js              |      100 |      100 |      100 |      100 |                   |
 mock                         |      100 |      100 |      100 |      100 |                   |
  prototype.js                |      100 |      100 |      100 |      100 |                   |
------------------------------|----------|----------|----------|----------|-------------------|

该提问来源于开源项目:hustcc/jest-canvas-mock

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

8条回答

  • weixin_39560245 weixin_39560245 5月前

    Thank you for the quick response. I couldn't run the tests for some reason (jest couldn't find any) but I was able to build and run my test suite which uses jest-canvas-mock and it now passes :-)

    点赞 评论 复制链接分享
  • weixin_39703773 weixin_39703773 5月前

    Thanks for all, will release new alpha version quickly.

    点赞 评论 复制链接分享
  • weixin_39703773 weixin_39703773 5月前

    v2.0.0-alpha.1 released

    点赞 评论 复制链接分享
  • weixin_39560245 weixin_39560245 5月前

    Latest v2.0.0-alpha.1 release works for me. Thanks!

    点赞 评论 复制链接分享
  • weixin_39629969 weixin_39629969 5月前

    Coverage Status

    Coverage decreased (-0.1%) to 99.877% when pulling 49b953323113cf8511d0f1d668bffe29e1cd9b69 on jtenner:toBlob-toDataURL2 into 045eb6a93fa3fc26b8a0e052cfeda856743fc1c0 on hustcc:master.

    点赞 评论 复制链接分享
  • weixin_39629969 weixin_39629969 5月前

    Coverage Status

    Coverage remained the same at 100.0% when pulling 939bef74f3a45e42c98ae354d0ab51fb7cb13e46 on jtenner:toBlob-toDataURL2 into 045eb6a93fa3fc26b8a0e052cfeda856743fc1c0 on hustcc:master.

    点赞 评论 复制链接分享
  • weixin_39838231 weixin_39838231 5月前

    This pull request will include a proper implementation of createImageData. Sorry for the mistake and trouble.

    If you clone the repo into your node modules folder, you can run these commands to test out this branch.

    
    npm uninstall jest-canvas-mock
    cd node_modules
    git clone -b toBlob-toDataURL2 https://github.com/jtenner/jest-canvas-mock.git
    cd jest-canvas-mock
    npm install
    npm test
    npm build
    

    Please feel free to comment in a new issue if you have trouble. I will do my best to help.

    点赞 评论 复制链接分享
  • weixin_39838231 weixin_39838231 5月前

    I know I've been very busy, but this should re-cover #15 and patch the toBlob and toDataURL functions as requested.

    点赞 评论 复制链接分享

相关推荐