test: add additional tests for different implementations (#20)

* chore: silence vercel comments

* test: add separate tests for different xstate implementations

* test: add requirement for machine to be defined

Author: Lexpeartha

Diff for: tests/e2e/minimal.test.ts

@@ -0,0 +1,18 @@
+/**
+ * @vitest-environment node
+ */
+import { fileURLToPath } from 'node:url'
+import { describe } from 'vitest'
+import { setup } from '@nuxt/test-utils'
+
+import runTests from './tests'
+
+describe('Minimal implementation of the module', async () => {
+  await setup({
+    server: true,
+    browser: true,
+    rootDir: fileURLToPath(new URL('../fixture/minimal', import.meta.url))
+  })
+
+  runTests()
+})

Diff for: tests/e2e/regular.test.ts

@@ -0,0 +1,18 @@
+/**
+ * @vitest-environment node
+ */
+import { fileURLToPath } from 'node:url'
+import { describe } from 'vitest'
+import { setup } from '@nuxt/test-utils'
+
+import runTests from './tests'
+
+describe('Regular implementation of the module', async () => {
+  await setup({
+    server: true,
+    browser: true,
+    rootDir: fileURLToPath(new URL('../fixture/regular', import.meta.url))
+  })
+
+  runTests()
+})

Diff for: tests/e2e/ssr.test.ts renamed to tests/e2e/tests.ts

@@ -1,17 +1,7 @@
-/**
- * @vitest-environment node
- */
-import { fileURLToPath } from 'node:url'
-import { describe, test, expect } from 'vitest'
-import { setup, createPage } from '@nuxt/test-utils'
-
-describe('ssr', async () => {
-  await setup({
-    server: true,
-    browser: true,
-    rootDir: fileURLToPath(new URL('../fixture', import.meta.url))
-  })
+import { test, expect } from 'vitest'
+import { createPage } from '@nuxt/test-utils'
 
+export default function () {
   test('shows proper state before clicking', async () => {
     const page = await createPage('/')
 
@@ -28,7 +18,13 @@ describe('ssr', async () => {
     expect(stateText).toBe('loading')
   })
 
-  // test('auto-imports state machine correctly', () => {
-  //   expect(1 + 1).toBe(2)
-  // })
-})
+  test('auto-imported state machine works correctly', async () => {
+    const page = await createPage('/')
+
+    const machineString = await page.innerText('[data-test-id="machine"]')
+    const machine = JSON.parse(machineString)
+
+    // TODO: Add more (possibly complex) test cases
+    expect(machine.state).not.toBe(undefined)
+  })
+}

Diff for: tests/fixture/app.vue renamed to tests/fixture/minimal/app.vue

@@ -4,9 +4,13 @@
     <button data-test-id="click-btn" @click="send('CLICK')">
       CLICK
     </button>
+    <p data-test-id="machine">
+      {{ machine }}
+    </p>
   </div>
 </template>
 
 <script setup>
-const { state, send } = useMachine(loadingMachine)
+const machine = useMachine(loadingMachine)
+const { state, send } = machine
 </script>

Diff for: tests/fixture/machines/loading.js renamed to tests/fixture/minimal/machines/loading.js

@@ -0,0 +1,13 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import XStateModule from '../../../'
+
+// Fixture module used mostly for testing when using the minimal option
+export default defineNuxtConfig({
+  modules: [
+    // @ts-ignore-next-line
+    XStateModule
+  ],
+  xState: {
+    minimal: true
+  }
+})

Diff for: tests/fixture/minimal/nuxt.config.ts

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Current state: <span data-test-id="state-txt">{{ state.value }}</span></h1>
+    <button data-test-id="click-btn" @click="send('CLICK')">
+      CLICK
+    </button>
+    <p data-test-id="machine">
+      {{ machine }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+const machine = useMachine(loadingMachine)
+const { state, send } = machine
+</script>

Diff for: tests/fixture/nuxt.config.ts

@@ -0,0 +1,17 @@
+export default createMachine({
+  id: 'loading',
+  initial: 'idle',
+  predictableActionArguments: true,
+  states: {
+    idle: {
+      on: {
+        CLICK: 'loading'
+      }
+    },
+    loading: {
+      on: {
+        CLICK: 'idle'
+      }
+    }
+  }
+})

Diff for: tests/fixture/regular/app.vue

@@ -0,0 +1,13 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import XStateModule from '../../../'
+
+// Fixture module used mostly for testing when using the minimal option
+export default defineNuxtConfig({
+  modules: [
+    // @ts-ignore-next-line
+    XStateModule
+  ],
+  xState: {
+    minimal: false
+  }
+})

Diff for: tests/fixture/regular/machines/loading.js

@@ -0,0 +1,5 @@
+{
+    "github": {
+        "silent": true
+    }
+}

Diff for: tests/fixture/regular/nuxt.config.ts

@@ -4,8 +4,8 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     deps: {
-      inline: [/@nuxt\/test-utils-edge/]
+      inline: [/@nuxt\/test-utils/]
     },
-    testTimeout: 10000
+    testTimeout: 15000
   }
 })