Add testing setup

[kevinramharak]

I messed around with the repository to try and add a testing framework.
I initially tried to setup vitest but ran into issues not being able to mock require calls, which causes some issues internally with Phaser when ran in a node environment.

Jest

I tried again with jest and you can check out the branch here: https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-jest?expand=1.

It became larger than I intended because of the following issues:

• yarn v1 has a bug where in the dependency tree it installs a wrong version. Its the classic dependency of a dependency of a dependency problem, so its not easily fixed. The only workaround I found is to upgrade yarn to v3 or v4.
  • (referencing the cjs version instead of the esm version?  yargs/cliui#150)
  • (Dependency on @isaacs/cliui@8.0.2 is broken isaacs/jackspeak#5)
  • ([Bug]: CommonJS / ESM modules issue jestjs/jest#14881).
• I had to add canvas additionally to jsdom because even with the headless mode, Phaser still uses some API's when booting that require an actual implementation.
• a __mocks__/phaser3spectorjs.js is required because of a webpack DefinePlugin quirk (Statement is always true phaserjs/phaser#6644)
• add a props.config.banner check for the Phavuer banner to not pollute the logs when running tests. See https://github.com/phaserjs/phaser/blob/v3.70.0/src/core/Config.js#L305

Note that the test emits the boot event fails. This is because Phaser only emits that event async when the new Phaser() constructor runs before DOMContentLoaded emits. If it runs after, it will emit the boot event sync (https://github.com/phaserjs/phaser/blob/master/src/dom/DOMContentLoaded.js#L27).
Therefore in Phavuer the lines:

<script>
      const game = new Phaser.Game(Object.assign({ parent: canvasRoot.value }, props.config))
      game.events.addListener('boot', () => {
        context.emit('boot', game)
      })
</script>

Will never actually catch the boot event, because the event is emitted before the listener is attached. Since Phavuer is part of a Vue application, I doubt there will ever be an instance where the vue application is mounted before the DOMContentLoaded event is emitted.
My suggestion would be to drop the boot event. An alternative is to use the postBoot callback (see https://newdocs.phaser.io/docs/3.60.0/Phaser.Types.Core.CallbacksConfig).
But in that case the boot event will actually be emitted after the ready event. see https://github.com/phaserjs/phaser/blob/v3.70.0/src/core/Game.js#L416-L434.

Could you check out the branch and see if this is a workable setup for tests? I might try another vitest setup and see if I can avoid upgrading yarn, but I think that might give more issues since it doesn't aim to support require, and Phaser is very dependent on how require works.

---

Vitest

With a lot of pain I setup vitest here: https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-vitest?expand=1

This uses the experimental browser feature from vitest, which has your tests run in an actual browser.
This fixes so much pain with jsdom and canvas, so I think its miles better than using jest with a jsdom/canvas setup.

The only ugly thing there was having to set string-width to ^4.2.2 because of ESM issues deep in the dependency tree.

[laineus]

@kevinramharak Thank you!
I will check out your branch later.

I might try another vitest setup and see if I can avoid upgrading yarn

It would be great if this could be achieved.

Thank you for the information regarding the boot issue.
I think I would like to remove the boot event.

[kevinramharak]

@laineus

I managed to find a setup with vitest:
https://github.com/laineus/phavuer/compare/master...kevinramharak:phavuer:feature/add-tests-vitest?expand=1

This does not require a yarn upgrade. It also removes a lot of pain with running phaser in node, having to use jsdom and node-canvas.

This uses the experimental browser feature from vitest, which has your tests run in an actual browser.
This fixes so much pain with jsdom and canvas, so I think its miles better than using jest with a jsdom/canvas setup.

The only ugly thing there was having to set string-width to ^4.2.2 because of ESM issues deep in the dependency tree.

[laineus]

@kevinramharak Great!

One thing I noticed is that there isn't a 'hideBanner' property in the BannerConfig options. Could it be a mistake for 'hidePhaser'?
https://newdocs.phaser.io/docs/3.60.0/Phaser.Types.Core.BannerConfig

Could you then create a Pull Request against master?

[kevinramharak]

@laineus I added a PR at #5

Good catch on the hideBanner. Turns out hidePhaser only hides a piece of the text, so the only way to disable the banner is config.banner === false. I adjust the code accordingly.

I also noticed you dropped the boot event thus I removed the test for it.