test: components

Author: Barbapapazes

package.json

@@ -53,9 +53,11 @@
     "@nuxt/schema": "^3.12.1",
     "@nuxt/test-utils": "^3.13.1",
     "@types/node": "^20.14.2",
+    "@vue/test-utils": "^2.4.6",
     "changelogen": "^0.5.5",
     "eslint": "^9.4.0",
     "nuxt": "^3.12.1",
+    "playwright-core": "^1.46.1",
     "typescript": "latest",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.21"

pnpm-lock.yaml

@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { setup, createPage } from '@nuxt/test-utils/e2e'
+
+describe('Components', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/components', import.meta.url)),
+  })
+
+  it('should render correctly', async () => {
+    const page = await createPage('/')
+
+    expect(await page.getByTestId('view-can').isVisible()).toBeTruthy()
+    expect(await page.getByTestId('view-not-can').isVisible()).toBeFalsy()
+    expect(await page.getByTestId('view-cannot').isVisible()).toBeFalsy()
+    expect(await page.getByTestId('view-not-cannot').isVisible()).toBeTruthy()
+
+    await page.close()
+  })
+})

test/component.spec.ts

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { defineAbility } from '#imports'
+import { Can } from '#components'
+
+const can = defineAbility(() => {
+  return true
+})
+
+const cannot = defineAbility(() => {
+  return false
+})
+</script>
+
+<template>
+  <div>
+    <Can
+      :bouncer-ability="can"
+      :args="[]"
+    >
+      <div data-testid="view-can">
+        Can
+      </div>
+    </Can>
+
+    <Can
+      :bouncer-ability="cannot"
+      :args="[]"
+    >
+      <div data-testid="view-not-can">
+        Cannot
+      </div>
+    </Can>
+
+    <Cannot
+      :bouncer-ability="can"
+      :args="[]"
+    >
+      <div data-testid="view-cannot">
+        Cannot
+      </div>
+    </Cannot>
+
+    <Cannot
+      :bouncer-ability="cannot"
+      :args="[]"
+    >
+      <div data-testid="view-not-cannot">
+        Can
+      </div>
+    </Cannot>
+  </div>
+</template>

test/fixtures/components/app/app.vue

@@ -0,0 +1,15 @@
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin({
+  name: 'authorization-resolver',
+  parallel: true,
+  setup() {
+    return {
+      provide: {
+        authorization: {
+          resolveClientUser: () => ({ id: 2, name: 'User 1' }),
+        },
+      },
+    }
+  },
+})

test/fixtures/components/app/plugins/authorization-resolver.ts

@@ -0,0 +1,7 @@
+export default defineNuxtConfig({
+  modules: ['../../src/module.ts'],
+
+  future: {
+    compatibilityVersion: 4,
+  },
+})