cristiingineru / rabbit Goto Github PK

1.0 3.0 0.0 697 KB

A JavaScript library for testing code drawing on canvas

JavaScript 99.87% HTML 0.13%

rabbit's Introduction

Overview

Rabbit is a JavaScript library for writing tests for code drawing on canvas.

It's using Canteen to spy all the calls to a canvas and provides higher level abstraction functions and Jasmine checkers for finding and inspecting the shapes being drawn.

Rabbit is not doing image recognition and it's not testing the beauty. Only the human eye can test it so for this purpose it's recommended to create catalogs with the drawing or animation under test to allow a fast scan and issue detection. Something simple like this catalog.

This library is meant to be used for component testing - basically to test that the functions are wired correctly and the resulted image contains the expected elements or that these elements are following simple rules like specific position, size, alignment or coloring.

How it's working

A second canvas has to be used as a reference. The test writer is responsible for drawing on this reference canvas anything that he expects the canvas under test to contain. Every function call to these canvases are being recorded by Canteen and used by Rabbit to perform a sequence recognition ignoring the positions, sizes, colors, and all other styles. If the reference will be found in the canvas under test multiple times then all the instances will be returned.

![canvas under test and reference](canvas under test and reference.png)

Then the test writer can assert that the found instances have certain properties like a specific position in the canvas under test, size, alignment or color. Rabbit will provide such checkers!

Usage

Set up Canteen
Create a Rabbit object. One per test suite is enough:

var rabbit = new Rabbit();

Optional: add the Rabbit matchers to Jasmine:

jasmine.addMatchers(rabbit.customMatchers);

Let your code under test draw on canvas.
Create a reference drawing in a different canvas. It can be a simple circle, rectangle or anything you expect your canvas under test to contain.
Get the call records from both the canvases using Canteen:

var canvasUnderTestStack = canvasUnderTest.getContext('2d').stack();
var referenceCanvasStack = referenceCanvas.getContext('2d').stack();

Use Rabbit to find whether the canvas under test contains the reference:

var found = rabbit.findShapes(referenceCanvasStack, canvasUnderTestStack);
expect(found.length).toBe(1);

Or just use a custom matcher:

expect(referenceCanvasStack).toBePartOf(canvasUnderTestStack);

Documentation

rabbit's People

Contributors

Watchers

rabbit's Issues

An in-range update of browserify is breaking the build 🚨

Version 14.3.0 of browserify just got published.

Branch	Build failing 🚨
Dependency	browserify
Current Version	14.2.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As browserify is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 4 commits .

cd01926 14.3.0
08caf04 changelog
ad5060d Merge pull request #1710 from substack/https-browserify-1
7c7b4d4 update https-browserify to ^1.0.0

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

Fix the algorithm for arc when the x/y scalings are different

The issue is visible only when sx and sy scalings are different and only for intermediary angles.

Example 1

//inputs: ctx, sizeIndex;
ctx.beginPath();
ctx.translate(20, 20);
ctx.arc(20, 20, 20, 0Math.PI/4, 31Math.PI/16);
ctx.strokeStyle='rgba(255,0,0,1)';
ctx.stroke();

ctx.strokeStyle='rgba(0,0,255,0.5)';
ctx.scale(sizeIndex + 0.5, sizeIndex + 3.5);
ctx.lineWidth = sizeIndex * 2 + 1;
ctx.stroke();

Example 2

//inputs: ctx, sizeIndex;
var PI = Math.PI
ctx.arc(0, 0, 40sizeIndex + 40, PI/6, 2PI/6);
ctx.scale(2sizeIndex + 1, 2sizeIndex + 4);
ctx.lineWidth = 6;
ctx.stroke();

(Counter) Example 3

//inputs: ctx, sizeIndex;
var PI = Math.PI
ctx.arc(0, 0, 40sizeIndex + 40, PI/6, 2PI/6);
ctx.scale(2sizeIndex + 4, 2sizeIndex + 4);
ctx.lineWidth = 6;
ctx.stroke();

An in-range update of karma-firefox-launcher is breaking the build 🚨

The devDependency karma-firefox-launcher was updated from `1.1.0` to `1.2.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

karma-firefox-launcher is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Commits

The new version differs by 13 commits.

a398dae chore(release): 1.2.0
c1a3939 fix: Detect and kill browser process when launcher process is being used (#103)
c3fea39 chore: Update dependencies
2e94873 chore: Add missing is-wsl entry to yarn.lock
b4e260e feat: Add support for running Windows Firefox from WSL
2443631 chore: Add self to contributors
2dca609 chore: Update dev dependencies
16e6673 chore: Sort contributors list [skip ci]
9e86d04 chore: Drop support for Node 6 (#98)
540c1dd fix: Add -wait-for-browser
6377ee3 fix: Look for other paths for Firefox Nightly on Windows and Mac
b9455c8 chore: Fix travis (#97)
0e37f76 feat(headless): add enable remote debugging by default

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of babel-plugin-transform-es2015-modules-systemjs is breaking the build 🚨

Version 6.24.1 of babel-plugin-transform-es2015-modules-systemjs just got published.

Branch	Build failing 🚨
Dependency	babel-plugin-transform-es2015-modules-systemjs
Current Version	6.23.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-plugin-transform-es2015-modules-systemjs is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

cristiingineru / rabbit Goto Github PK

rabbit's Introduction

Overview

How it's working

Usage

Documentation

rabbit's People

Contributors

Watchers

rabbit's Issues

Version 14.3.0 of browserify just got published.

Example 1

Example 2

(Counter) Example 3

The devDependency karma-firefox-launcher was updated from 1.1.0 to 1.2.0.

Version 6.24.1 of babel-plugin-transform-es2015-modules-systemjs just got published.

Recommend Projects

Recommend Topics

Recommend Org

The devDependency karma-firefox-launcher was updated from `1.1.0` to `1.2.0`.