Pixi.js: Help Wanted: Unit & Functional Tests

[bigtimebuddy]

Hello Pixi Devs!

We're looking for some PRs from folks to help increase our test-coverage or Pixi.js. Why are unit-tests helpful? Many reasons, but here are a few:

• they help us spot issues sooner (with Travis and running npm test)
• they improve the stability of code over time
• they aid in doing major refactoring efforts

Let's be frank, our test-coverage right now is _pretty_ poor. Until now, we hadn't realized just how poor. We have just merged PR #3041 a code-coverage tool which analyzes the Pixi code against the unit-tests to see what was run and what wasn't (uses istanbul).

Right now our current coverage is about 32%. You can view the latest report on the current dev branch. We really would like to see that number grow over time. So.... we will try to improve our coverage by at least 10% for the next couple releases.

Basically, we need some help writing some tests. Here are some of the lower-hanging fruit that's currently not being unit-tested. Here are some ideas, would gladly welcome PRs to unit-test these pieces:

Math

• [x] [Matrix](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/Matrix.js.html)
• [ ] [GroupD8](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/GroupD8.js.html)
• [x] [Point](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/Point.js.html)

• [x] [ObservablePoint](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/ObservablePoint.js.html)

  Math Shapes

• [x] [Circle](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/shapes/Circle.js.html)

• [x] [Ellipse](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/shapes/Ellipse.js.html)
• [ ] [Polygon](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/shapes/Polygon.js.html)
• [x] [Rectangle](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/shapes/Rectangle.js.html)

• [ ] [RoundedRectangle](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/core/math/shapes/RoundedRectangle.js.html)

  Loader Middleware

• [x] [bitmapFontParser](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/loaders/bitmapFontParser.js.html)

• [x] [spritesheetParser](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/loaders/spritesheetParser.js.html)
• [x] [textureParser](https://pixi-builds.s3-eu-west-1.amazonaws.com/dev/coverage/src/loaders/textureParser.js.html)

[ivanpopelyshev]

Test the point. Ugh.

I can cover textureParser and GroupD8, those are my things :)

[bigtimebuddy]

Thanks Ivan :+1:

[staff0rd]

What do the red/yellow/green highlights mean within the modules/classes?

Edit;
Red: statement not covered
Yellow: branch not covered (?)
Green: ?

[GoodBoyDigital]

Nice one @bigtimebuddy ! I agree we should definitely aim to increase this!

[bigtimebuddy]

@staff0rd Green is good means the line was run, the number on the left is the number of times it was run.

Yellow means a branch was not hit. For instance, if only one case of a switch/case is hit, the other cases would show up yellow. So technically the code is run, but not all the conditions are run.

Red means not run.

[staff0rd]

Is there any intention of moving the tests to ES6?

[englercj]

They were ES5 previously because they ran in a few browsers. Then i kept them ES5 thinking we would eventually do something like SauceLabs or BrowserStack and since they would run in our lowest common denominator they would need to be ES5.

The reality today is that currently they run in electron, and if we did switch to SauceLabs or such in the future, we could transpile them before running. I think @bigtimebuddy already changed the linter to allow ES6 in tests, so go for it.

[staff0rd]

When I run the coverage command locally, it only produces the base index.html, how can I make it do the rest?

[bigtimebuddy]

What do you mean @staff0rd? Are there any other files in the coverage directory?

[staff0rd]

I run npm run coverage and these appear in /coverage;

base.css
coverage-final.json
index.html
prettify.css
prettify.js
sort-arrow-sprite.png
sorter.js

When I browse the index.html all the links throw 404s, because they haven't been generated. For example, /source/src/accessibility/index.html.

Edit; Fixed with updated pixify.

[bigtimebuddy]

That's so weird. Are you on Windows?

[staff0rd]

Yah Windows 10

On 10 Oct 2016, at 12:20 AM, Matt Karl [email protected] wrote:

That's so weird. Are you on Windows?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[staff0rd]

Also, I added tests for Container.setChildIndex but it still displays in yellow here. Am I doing something wrong?

Edit; known issue with istanbul dependency.

[godric3]

I'm writing some tests for math shapes and just to be sure:
PIXI.Rectangle(0, 0, 1, 1) is expected to NOT contain points (0,1), (1,0) and (1,1)?

[englercj]

Looks like the algorithm currently does not count points _on_ the border as "contained". So yes, that is current behavior.

[ivanpopelyshev]

If you are working with PIXELS, that wont be good.

[geordidearns]

Hey all, I'm trying to get started writing some tests for the Ellipse math object, but can't seem to run any tests on my forked repo. I'm getting this error, any pointers? Thanks

[floss] caught outer exception: Cannot find module '../dist/pixi'

[staff0rd]

@geordidearns run the build first;
~
npm run build
~

[geordidearns]

thanks @staff0rd, got it going 👍

[out-of-band]

I stumbled on your Issues page and thought I'd take a crack at filling out your test suite a bit. Starting simple, and aiming to get some of the basic shapes up to 100% line coverage and improve the branch coverage where possible.

I have two questions (hopefully this is the right place to ask) regarding the Rectangle class:

• What is the intended functionality of the Rectangle.fit(rectangle) method? Given the following:

    const rect1 = new PIXI.Rectangle(0, 0, 5, 5);
    const rect2 = new PIXI.Rectangle(10, 10, 10, 10);

    rect1.fit(rect2);

... what _should_ be the left/top/right/bottom values for rect1? Of course I can walk through the code to determine the output, but that's not much of a test. This might also be a good place to beef up documentation.

• If the tests uncover redundant code or code that could be refactored, would you prefer to those changes to be made on a separate PR?

Thanks!

[bigtimebuddy]

GREAT NEWS was have really improved our test coverage since starting this thread it has increased nearly 10%. I'm going to close this post for now and start another thread with some new unit-testing needs. Thanks for everyone's help. Please keep adding to our tests and submitting PRs.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.