Merge pull request #5 from kevinramharak/feature/add-tests-vitest

Add testing setup

package.json

@@ -12,7 +12,8 @@
   },
   "scripts": {
     "dev": "webpack --mode development --watch",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "test": "vitest"
   },
   "files": [
     "dist",
@@ -24,9 +25,20 @@
     "vue": "^3.3.13"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/browser": "^1.3.0",
     "@vue/compiler-sfc": "^3.3.13",
+    "@vue/test-utils": "^2.4.4",
+    "mock-require": "^3.0.3",
+    "phaser": "^3.70.0",
+    "vitest": "^1.3.0",
+    "vue": "^3.3.13",
     "vue-loader": "^17.3.1",
+    "webdriverio": "^8.32.2",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

src/components/Game.vue

@@ -15,12 +15,14 @@ export default defineComponent({
     config: { type: Object }
   },
   setup (props, context) {
-    console.log(
-      `%c %cPhavuer v${packageJson.version}%c https://github.com/laineus/phavuer`,
-      'background-color: #42b883; padding: 2px 0;',
-      'background-color: #213547; padding: 2px 8px; color: white; font-weight: bold;',
-      ''
-    )
+    if (props.config?.banner !== false) {
+      console.log(
+        `%c %cPhavuer v${packageJson.version}%c https://github.com/laineus/phavuer`,
+        'background-color: #42b883; padding: 2px 0;',
+        'background-color: #213547; padding: 2px 8px; color: white; font-weight: bold;',
+        ''
+      )
+    }
     const canvasRoot = ref(false)
     const show = ref(false)
     onMounted(() => {

src/components/__tests__/Game.spec.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Game from '../Game.vue'
+
+describe('Game', () => {
+  /**
+   * @type {import('phaser').Types.Core.GameConfig}
+   */
+  const config = {
+    /**
+     * Prevent the Phaser & Phavuer banner from polluting the test logs
+     */
+    banner: false,
+  };
+
+  it('emits the create event', () => {
+    const wrapper = mount(Game, {
+      props: {
+        config,
+      },
+    })
+    expect(wrapper.emitted().create).toBeTruthy()
+  })
+
+  it('appends a canvas element to the [data-phavuer-canvas]', () => {
+    const wrapper = mount(Game, {
+      props: {
+        config,
+      },
+    })
+    expect(wrapper.find('[data-phavuer-canvas] > canvas').exists()).toBe(true)
+  })
+
+  it('emits the ready event', async () => {
+    vi.useFakeTimers();
+    const wrapper = mount(Game, {
+      props: {
+        config,
+      },
+    })
+    await vi.runOnlyPendingTimersAsync()
+    expect(wrapper.emitted().ready).toBeTruthy()
+  })
+})

vitest.config.mjs

@@ -0,0 +1,22 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    browser: {
+      /**
+       * `name` is required
+       */
+      name: 'chrome',
+      enabled: true,
+      providerOptions: {
+        logLevel: 'silent', logLevels: { webdriver: 'silent' }
+      },
+    },
+    setupFiles: [
+      './vitest.setup.mjs',
+    ],
+  },
+})

vitest.setup.mjs

@@ -0,0 +1 @@
+import 'phaser'