test(e2e): Expand Vue testing (#8068)

Author: tmilewski

.changeset/hungry-chicken-flash.md

@@ -0,0 +1,2 @@
+---
+---

integration/templates/vue-vite/src/router.ts

@@ -68,6 +68,48 @@ const routes = [
     path: '/billing/subscription-details-btn',
     component: () => import('./views/billing/SubscriptionDetailsBtn.vue'),
   },
+  // Composable state routes (public, for testing composable output)
+  {
+    name: 'AuthState',
+    path: '/auth-state',
+    component: () => import('./views/AuthState.vue'),
+  },
+  {
+    name: 'UserState',
+    path: '/user-state',
+    component: () => import('./views/UserState.vue'),
+  },
+  {
+    name: 'SessionState',
+    path: '/session-state',
+    component: () => import('./views/SessionState.vue'),
+  },
+  {
+    name: 'OrgState',
+    path: '/org-state',
+    component: () => import('./views/OrgState.vue'),
+  },
+  // Component test routes
+  {
+    name: 'SignOut',
+    path: '/sign-out',
+    component: () => import('./views/SignOutPage.vue'),
+  },
+  {
+    name: 'OrganizationList',
+    path: '/org-list',
+    component: () => import('./views/OrganizationListPage.vue'),
+  },
+  {
+    name: 'CreateOrganization',
+    path: '/create-org',
+    component: () => import('./views/CreateOrganizationPage.vue'),
+  },
+  {
+    name: 'ShowComponent',
+    path: '/show-component',
+    component: () => import('./views/ShowComponent.vue'),
+  },
 ];
 
 const router = createRouter({

integration/templates/vue-vite/src/views/AuthState.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useAuth } from '@clerk/vue';
+
+const { isLoaded, isSignedIn, userId, sessionId, orgId, orgRole, orgSlug } = useAuth();
+</script>
+
+<template>
+  <div id="auth-state">
+    <p data-auth-is-loaded>{{ isLoaded }}</p>
+    <p data-auth-is-signed-in>{{ isSignedIn }}</p>
+    <p data-auth-user-id>{{ userId }}</p>
+    <p data-auth-session-id>{{ sessionId }}</p>
+    <p data-auth-org-id>{{ orgId }}</p>
+    <p data-auth-org-role>{{ orgRole }}</p>
+    <p data-auth-org-slug>{{ orgSlug }}</p>
+  </div>
+</template>

integration/templates/vue-vite/src/views/CreateOrganizationPage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { CreateOrganization } from '@clerk/vue';
+</script>
+
+<template>
+  <CreateOrganization />
+</template>

integration/templates/vue-vite/src/views/OrgState.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useOrganization } from '@clerk/vue';
+
+const { isLoaded, organization, membership } = useOrganization();
+</script>
+
+<template>
+  <div id="org-state">
+    <p data-org-is-loaded>{{ isLoaded }}</p>
+    <p data-org-id>{{ organization?.id }}</p>
+    <p data-org-name>{{ organization?.name }}</p>
+    <p data-org-slug>{{ organization?.slug }}</p>
+    <p data-org-role>{{ membership?.role }}</p>
+  </div>
+</template>

integration/templates/vue-vite/src/views/OrganizationListPage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { OrganizationList } from '@clerk/vue';
+</script>
+
+<template>
+  <OrganizationList />
+</template>

integration/templates/vue-vite/src/views/SessionState.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useSession } from '@clerk/vue';
+
+const { isLoaded, isSignedIn, session } = useSession();
+</script>
+
+<template>
+  <div id="session-state">
+    <p data-session-is-loaded>{{ isLoaded }}</p>
+    <p data-session-is-signed-in>{{ isSignedIn }}</p>
+    <p data-session-id>{{ session?.id }}</p>
+    <p data-session-status>{{ session?.status }}</p>
+    <p data-session-user-id>{{ session?.user?.id }}</p>
+  </div>
+</template>

integration/templates/vue-vite/src/views/ShowComponent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Show } from '@clerk/vue';
+</script>
+
+<template>
+  <div id="show-tests">
+    <div data-show-signed-in>
+      <Show when="signed-in">
+        <p>show-signed-in-content</p>
+      </Show>
+    </div>
+    <div data-show-signed-out>
+      <Show when="signed-out">
+        <p>show-signed-out-content</p>
+      </Show>
+    </div>
+    <div data-show-role>
+      <Show :when="{ role: 'org:admin' }">
+        <p>show-admin-content</p>
+        <template #fallback>
+          <p>show-admin-fallback</p>
+        </template>
+      </Show>
+    </div>
+    <div data-show-permission>
+      <Show :when="{ permission: 'org:sys_memberships:manage' }">
+        <p>show-permission-content</p>
+        <template #fallback>
+          <p>show-permission-fallback</p>
+        </template>
+      </Show>
+    </div>
+  </div>
+</template>

integration/templates/vue-vite/src/views/SignOutPage.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { SignOutButton, Show } from '@clerk/vue';
+</script>
+
+<template>
+  <div>
+    <Show when="signed-in">
+      <p data-signed-in>You are signed in</p>
+      <SignOutButton />
+    </Show>
+    <Show when="signed-out">
+      <p data-signed-out>You are signed out</p>
+    </Show>
+  </div>
+</template>

integration/templates/vue-vite/src/views/UserState.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useUser } from '@clerk/vue';
+
+const { isLoaded, isSignedIn, user } = useUser();
+</script>
+
+<template>
+  <div id="user-state">
+    <p data-user-is-loaded>{{ isLoaded }}</p>
+    <p data-user-is-signed-in>{{ isSignedIn }}</p>
+    <p data-user-id>{{ user?.id }}</p>
+    <p data-user-email>{{ user?.primaryEmailAddress?.emailAddress }}</p>
+    <p data-user-first-name>{{ user?.firstName }}</p>
+    <p data-user-last-name>{{ user?.lastName }}</p>
+  </div>
+</template>