Any functional Test framework in phaser?

[John Ng]

I am a new html5 developper and I am going to use Phaser to create games,

but testing is a very important point for it and I cant find any good framework for Phaser functional test?

Have any suggestion?

Is common JavaScript testing framework is work on Phaser like Jasmine/Karma/Nightwatch?

[mattstyles]

I don't think there is any approved or recommended test framework for Phaser, nor do I think there is a need for one. Use whichever you are comfortable with, any of those you mention would work fine (with the possible exception of Nightwatch which targets DOM rather than canvas, not sure what support they have for canvas rendering).

I mostly use tape but any agnostic test framework (i.e. pretty much all of them) would work.

[drhayes]

I'm curious what other people are testing. I don't know of a good way to test the sprite- or image-related stuff -- that's more of a, "Does it look good?" or "Is the graphics hardware doing a good job?"

When you isolate your sprite's behavior out of your sprite classes that's way easier to test and makes the choice of framework a lot easier, like mattstyles said: pick any of them.

[mattstyles]

I'd also be really interested if anyone knows of any super test lib that would work well with canvas, i.e if I render a sprite then it can analyse pixel data from the canvas and tell if my sprite is in the correct position, not screen shot testing, but some sort of actual canvas querying, similar to how nightwatch inspects the dom, but for canvas instead.

Ditto if anyone knows of a good 'is the gpu working good' lib, I'd guess you'd have to measure fps over a series of tests. No idea how reliable such a test would be though, but at least you'd get a good benchmark to work against, although I'd guess that isolating the gpu process could get problematic (or maybe it doesn't).

[Noid]

@John Ng for any function that processes some data and where you can check whether it's returning what it should you can use your favorite test framework. However, if you plan to use TDD for the whole game, I'm not sure it's feasible. You cannot run your game for say 10 seconds, capture a screenshot and expect it to be always the same. 

[John Ng]

Sorry for not clearly question, I know that I can not testing about canvas behavior, I just want to testing about data display correctly.

ex. I have a HP Text on screen, default value is 100, after I click two buttons, the HP Text will show 50.00, just like that.

[mattstyles]

5 hours ago, John Ng said:

Sorry for not clearly question, I know that I can not testing about canvas behavior, I just want to testing about data display correctly.

ex. I have a HP Text on screen, default value is 100, after I click two buttons, the HP Text will show 50.00, just like that.

You don't need to test visualisation for that, just test the data structures that are driving the render layer.

tape('Test HP decrement', assert => {
  assert.plan(2)

  var hp = new HPFoo()
  assert.equal(hp.value, 100, 'HP defaults to 100')

  var actionDispatcher = new Dispatcher()
  var action = new Action('HP_DECREMENT')
  actionDispatcher.observe(hp)
  
  actionDispatcher.dispatch(action)
  actionDispatcher.dispatch(action)

  assert.equal(hp.value, 50, 'After 2 clicks HP is 50)
})

This example is a little terse, I added the dispatcher stuff because your tests will often end up spread across a few different elements, but it would entirely be dependent upon how you structure your app. Ideally these sort of integration tests are minimal but nothing wrong with different types of unit tests, particularly where function and structure is linked across components.

This test doesn't test what actually gets visualised, instead it strips the unit test down to the bare minimum, if the HPFoo object handled its own logic for altering its value then the test could be stripped even further. Given that the HP element is responsible for rendering its value, if the value is correct then the render will be correct, and the tests for those should be contained in your rendering code (which could be Phaser/Pixi etc or React/Vue etc if you were doing DOM stuff). No need to test the render here because thats covered elsewhere.

Taking this further you might also want to test properties of the Text or Sprite element that fronts this data structure, i.e. test that its values get set correctly, or test it position or whatever. Not sure its absolutely necessary, but you'd have to make that call based on your project.