Skip to content

Test Guidelines : Drawing tests

Jump to bottom
Julian Descottes edited this page Nov 23, 2016 · 17 revisions

Drawing tests

TLDR

What is a drawing test ?

Drawing tests are records of events that can be replayed automatically to recreate a piskel. The record contains the list of events as well as the expected outcome of the drawing, in the form of a spritesheet png captured at the end of the recording.

All classes related to the drawing tests are in src/js/devtools. These files are not included in the built version of Piskel. This means you need to use the debug mode to either record or play drawing tests.

What do they record ?

At the moment the Recorder and the Player handle the following events :

  • mouse events : captured via DrawingController MOUSE_EVENT, with meta modifiers
  • keyboard events : captured via ShortcutService KEYBOARD_EVENT, with meta modifiers
  • tool selection : captured via ToolController TOOL_SELECTED
  • color selection : captured via PaletteController *_COLOR_SELECTED
  • layer/frame modification : captured by decorating all methods of pskl.app.PiskelController that raise PISKEL_RESET events

How to record a new test ?

Assuming grunt play is running and serves Piskel in debug mode on 9901. All urls used in this guide therefore start with http://localhost:9901 .

Go to http://localhost:9901/?debug&test=true

You should see a small UI on the top left corner of the screen with 3 buttons :

  • load test
  • start record
  • stop record (disabled at this stage)

Before clicking on 'start record', resize your piskel to the size you intend to use for your test, as the resize event is not captured at the moment. All the current tests have been recorded for 5x5 piskels. Smaller piskels mean less events to record and therefore smaller test records.

Click on 'start record' (note that this button should be disabled now and 'stop recording' should be enabled).

Perform your drawing.

Click on 'stop record'. A file named 'Piskel_record.json' will be automatically downloaded.

How to replay a test ?

Go to http://localhost:9901/?debug&test=true.

Click on 'Load Test' and select a test file.

The drawing should be applied step by step.

FIXME : There is no test status displayed after the replay, just an ugly window.alert('Test finished : ', success);

How to add a test in a Test Suite ?

The existing drawing tests are located in /test/drawing/tests.

Save your test in this folder first.

There are two different test suites for drawing tests:

  • CasperJS test suite : /test/drawing/DrawingTests.casper.js
  • Regular/Browser test suite : /test/drawing/DrawingTests.browser.js

Some drawing tests can not run on CasperJS (even though they run fine on all other browsers), that's why the test suites are separated.

FIXME : The Casper tests list is in Require module format, while the Browser test suite is a simple JSON object.

Add your new test in the appropriate test suites.

How to run a Test Suite ?

run test suite : in browser

Go to http://localhost:9901/?debug&test-suite=DrawingTests.browser.js.

After loading piskel the test suite will run automatically, with a small UI on the top left of the screen tp follow the status of the tests. Current suite runs in approximately 30 seconds on my machine.

run test suite : in local casperjs

Use grunt test-local.

DrawingTest.js will be executed and will run drawing tests for all the drawing tests defined in the CasperJS test suite.

Performance tests

Clone this wiki locally