feat(clerk-js,nextjs,clerk-react,testing,types,vue): UserAvatar component (#6808)

Author: tmilewski

.changeset/purple-apples-read.md

@@ -0,0 +1,13 @@
+---
+'@clerk/tanstack-react-start': minor
+'@clerk/chrome-extension': minor
+'@clerk/react-router': minor
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/remix': minor
+'@clerk/types': minor
+'@clerk/vue': minor
+---
+
+Add new <UserAvatar /> component

.changeset/silver-tools-clean.md

@@ -0,0 +1,5 @@
+---
+'@clerk/testing': minor
+---
+
+Add Playwright testing helpers under unstable page-objects: `userAvatar.goTo()`, `userAvatar.waitForMounted()`, and `userAvatar.toBeVisible()` for <UserAvatar />.

integration/templates/next-app-router/src/app/user-avatar/page.tsx

@@ -0,0 +1,9 @@
+import { UserAvatar } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <UserAvatar fallback={<>Loading user avatar</>} />
+    </div>
+  );
+}

integration/templates/react-vite/src/main.tsx

@@ -15,6 +15,7 @@ import UserButtonCustomDynamicLabelsAndCustomPages from './custom-user-button/wi
 import UserButtonCustomTrigger from './custom-user-button-trigger';
 import UserButtonCustomDynamicItems from './custom-user-button/with-dynamic-items.tsx';
 import UserButton from './user-button';
+import UserAvatar from './user-avatar';
 import Waitlist from './waitlist';
 import OrganizationProfile from './organization-profile';
 import OrganizationList from './organization-list';
@@ -68,6 +69,10 @@ const router = createBrowserRouter([
         path: '/user-button',
         element: <UserButton />,
       },
+      {
+        path: '/user-avatar',
+        element: <UserAvatar />,
+      },
       {
         path: '/protected',
         element: <Protected />,

integration/templates/react-vite/src/user-avatar/index.tsx

@@ -0,0 +1,11 @@
+import { UserAvatar } from '@clerk/clerk-react';
+import React from 'react';
+
+export default function UserAvatarPage() {
+  return (
+    <div>
+      <h1>UserAvatar</h1>
+      <UserAvatar fallback={<>Loading user avatar</>} />
+    </div>
+  );
+}

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

@@ -41,6 +41,11 @@ const routes = [
     path: '/pricing-table',
     component: () => import('./views/PricingTable.vue'),
   },
+  {
+    name: 'UserAvatar',
+    path: '/user-avatar',
+    component: () => import('./views/UserAvatar.vue'),
+  },
   // This was added for billing tests
   {
     name: 'User',
@@ -72,7 +77,7 @@ const router = createRouter({
 
 router.beforeEach(async (to, _, next) => {
   const { isSignedIn, isLoaded } = useAuth();
-  const authenticatedPages = ['Profile', 'Admin', 'CustomUserProfile', 'CustomOrganizationProfile'];
+  const authenticatedPages = ['Profile', 'Admin', 'CustomUserProfile', 'CustomOrganizationProfile', 'UserAvatar'];
 
   if (!isLoaded.value) {
     await waitForClerkJsLoaded(isLoaded);

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

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

integration/tests/components.test.ts

@@ -41,6 +41,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('component
       protected: true,
       fallback: 'Loading user profile',
     },
+    {
+      name: 'UserAvatar',
+      path: '/user-avatar',
+      protected: true,
+      fallback: 'Loading user avatar',
+    },
     {
       name: 'UserButton',
       path: '/user-button',

integration/tests/user-avatar.test.ts

@@ -0,0 +1,48 @@
+import { test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({
+  withEnv: [appConfigs.envs.withEmailCodes],
+  withPattern: ['react.vite.withEmailCodes', 'vue.vite'],
+})('UserAvatar component integration tests @generic', ({ app }) => {
+  test.describe.configure({ mode: 'serial' });
+
+  let fakeUser: FakeUser;
+
+  test.beforeAll(async () => {
+    const u = createTestUtils({ app });
+    fakeUser = u.services.users.createFakeUser({
+      withPhoneNumber: true,
+      withUsername: true,
+    });
+    await u.services.users.createBapiUser(fakeUser);
+  });
+
+  test.afterAll(async () => {
+    await app.teardown();
+    await fakeUser.deleteIfExists();
+  });
+
+  test.afterEach(async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.signOut();
+    await u.page.context().clearCookies();
+  });
+
+  test('UserAvatar loads and renders correctly when user is signed in', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    await u.po.signIn.goTo();
+    await u.po.signIn.signInWithEmailAndInstantPassword({
+      email: fakeUser.email,
+      password: fakeUser.password,
+    });
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.userAvatar.goTo();
+    await u.po.userAvatar.toBeVisible();
+  });
+});

integration/tests/vue/components.test.ts

@@ -38,6 +38,17 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
     await expect(u.page.getByRole('link', { name: /Sign in/i })).toBeVisible();
   });
 
+  test('render UserAvatar component when user completes sign in flow', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in');
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.userAvatar.goTo();
+    await u.po.userAvatar.toBeVisible();
+  });
+
   test('render user button component when user completes sign in flow', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in');