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

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()
+})

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()
+})

tests/e2e/ssr.test.ts → 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)
+ })
+}

tests/fixture/app.vue → 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>

tests/fixture/minimal/nuxt.config.ts

@@ -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
+ }
+})

tests/fixture/regular/app.vue

@@ -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>

tests/fixture/regular/machines/loading.js

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

tests/fixture/regular/nuxt.config.ts

@@ -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
+ }
+})

vercel.json

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

vitest.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
  }
 })