npmpackage.info

Gathering detailed insights and metrics for jest-webgl-canvas-mock

As of June 2024, the npm registry hosts over 2 million packages, making it one of the largest open-source software repositories in the world.

jest-webgl-canvas-mock

A module used to mock both 2d and WebGL contexts in jest.

2.5.3

MIT

JavaScript

19.58 kB

3,476,816

3.4

Installations

npm install jest-webgl-canvas-mock

Score

98.4

Supply Chain

100

Quality

75.4

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

0

Total

5

Closed

2

Merged

3

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Developer

adamfsk

Module System

BETA

CommonJS

Statistics

22 Stars

124 Commits

11 Forks

2 Branches

1 Contributors

Updated on 19 Jun 2024

Bundle Size

79.48 kB

Minified

19.58 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

3,476,816

Last day

92.6%

9,297

Compared to previous day

Last week

14.3%

37,716

Compared to previous week

Last month

26.1%

134,414

Compared to previous month

Last year

31.7%

1,229,618

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

cssfontparser moo-color

Dev Dependencies

@antv/g2plot @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @commitlint/cli @commitlint/config-angular @inrupt/jest-jsdom-polyfills babel-jest babel-plugin-version coveralls husky jest jest-environment-jsdom jsdom prettier

Versions

jest-webgl-canvas-mock

Mock canvas when run unit test cases with jest. For more browser environment.

jest-random-mock Mock Math.random in jest, with deterministic random generator.

jest-date-mock Mock Date when run unit test with jest, test Date easily.

Disclaimer

This project is a simple merge of jest-canvas-mock with webgl-mock so that both 2d and webgl contexts can be tested in jest. As such, the only tests provided are those from the original projects.

The current goal of this project is simply to make any tests using pixi.js work in jest.

Please feel free to contribute and add any additional functionality required.

Install

This should only be installed as a development dependency (devDependencies) as it is only designed for testing.

1npm i --save-dev jest-webgl-canvas-mock

Setup

In your package.json under the jest, create a setupFiles array and add jest-webgl-canvas-mock to the array.

1{
2  "jest": {
3    "setupFiles": ["jest-webgl-canvas-mock"]
4  }
5}

If you already have a setupFiles attribute you can also append jest-webgl-canvas-mock to the array.

1{
2  "jest": {
3    "setupFiles": ["./__setups__/other.js", "jest-webgl-canvas-mock"]
4  }
5}

More about in configuration section.

Setup file

Alternatively you can create a new setup file which then requires this module or add the require statement to an existing setup file.

__setups__/canvas.js

1import 'jest-webgl-canvas-mock';
2// or
3require('jest-webgl-canvas-mock');

Add that file to your setupFiles array:

1"jest": {
2  "setupFiles": [
3    "./__setups__/canvas.js"
4  ]
5}

Reset

If you reset the jest mocks (for example, with jest.resetAllMocks()), you can call setupJestCanvasMock() to re-create it.

import { setupJestCanvasMock } from 'jest-webgl-canvas-mock';

beforeEach(() => {
  jest.resetAllMocks();
  setupJestCanvasMock();
});

Mock Strategy

This mock strategy implements all the canvas functions and actually verifies the parameters. If a known condition would cause the browser to throw a TypeError or a DOMException, it emulates the error. For instance, the CanvasRenderingContext2D#arc function will throw a TypeError if the radius is negative, or if it was not provided with enough parameters.

1// arc throws a TypeError when the argument length is less than 5
2expect(() => ctx.arc(1, 2, 3, 4)).toThrow(TypeError);
3
4// when radius is negative, arc throws a dom exception when all parameters are finite
5expect(() => ctx.arc(0, 0, -10, 0, Math.PI * 2)).toThrow(DOMException);

The function will do Number type coercion and verify the inputs exactly like the browser does. So this is valid input.

1expect(() => ctx.arc('10', '10', '20', '0', '6.14')).not.toThrow();

Another part of the strategy is to validate input types. When using the CanvasRenderingContext2D#fill function, if you pass it an invalid fillRule it will throw a TypeError just like the browser does.

1expect(() => ctx.fill('invalid!')).toThrow(TypeError);
2expect(() => ctx.fill(new Path2D(), 'invalid!')).toThrow(TypeError);

We try to follow the ECMAScript specification as closely as possible.

Snapshots

There are multiple ways to validate canvas state using snapshots. There are currently three methods attached to the CanvasRenderingContext2D class. The first way to use this feature is by using the __getEvents method.

1/**
2 * In order to see which functions and properties were used for the test, you can use `__getEvents`
3 * to gather this information.
4 */
5const events = ctx.__getEvents();
6
7expect(events).toMatchSnapshot(); // jest will assert the events match the snapshot

The second way is to inspect the current path associated with the context.

1ctx.beginPath();
2ctx.arc(1, 2, 3, 4, 5);
3ctx.moveTo(6, 7);
4ctx.rect(6, 7, 8, 9);
5ctx.closePath();
6
7/**
8 * Any method that modifies the current path (and subpath) will be pushed to an event array. When
9 * using the `__getPath` method, that array will sliced and usable for snapshots.
10 */
11const path = ctx.__getPath();
12expect(path).toMatchSnapshot();

The third way is to inspect all of the successful draw calls submitted to the context.

1ctx.drawImage(img, 0, 0);
2
3/**
4 * Every drawImage, fill, stroke, fillText, or strokeText function call will be logged in an event
5 * array. This method will return those events here for inspection.
6 */
7const calls = ctx.__getDrawCalls();
8expect(calls).toMatchSnapshot();

In some cases it may be useful to clear the events or draw calls that have already been logged.

1// Clear events
2ctx.__clearEvents();
3
4// Clear draw calls
5ctx.__clearDrawCalls();

Finally, it's possible to inspect the clipping region calls by using the __getClippingRegion function.

1const clippingRegion = ctx.__getClippingRegion();
2expect(clippingRegion).toMatchSnapshot();

The clipping region cannot be cleared because it's based on the stack values and when the .clip() function is called.

Override default mock return value

You can override the default mock return value in your test to suit your need. For example, to override return value of toDataURL:

1canvas.toDataURL.mockReturnValueOnce(
2  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
3);

Contributors

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.4

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to jest-webgl-canvas-mock

jest-webgl-canvas-mock-v2

1.0.3

Mock both 2D and WebGL contexts in Jest v2.