test: trim RoleBadge tests to user-visible label behavior

Removes assertions on the root tag name, Vue rerender mechanics, and
class-fallthrough utility forwarding — these locked down implementation
details rather than user-visible behavior. The meaningful regression
coverage for role labels lives in MemberListItem.test.ts.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/11383#discussion_r3176431334

src/platform/workspace/components/RoleBadge.test.ts

@@ -1,37 +1,11 @@
 import { render, screen } from '@testing-library/vue'
-import { createI18n } from 'vue-i18n'
 import { describe, expect, it } from 'vitest'
 
 import RoleBadge from './RoleBadge.vue'
 
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      workspaceSwitcher: {
-        roleOwner: 'Owner',
-        roleMember: 'Member'
-      }
-    }
-  }
-})
-
-function renderRoleBadge(role: 'owner' | 'member') {
-  return render(RoleBadge, {
-    props: { role },
-    global: { plugins: [i18n] }
-  })
-}
-
 describe('RoleBadge', () => {
-  it('renders the owner label', () => {
-    renderRoleBadge('owner')
-    expect(screen.getByText('Owner')).toBeInTheDocument()
-  })
-
-  it('renders the member label', () => {
-    renderRoleBadge('member')
-    expect(screen.getByText('Member')).toBeInTheDocument()
+  it('renders the label text', () => {
+    render(RoleBadge, { props: { label: 'PRO' } })
+    expect(screen.getByText('PRO')).toBeInTheDocument()
   })
 })

src/platform/workspace/components/RoleBadge.vue

@@ -2,23 +2,12 @@
   <span
     class="rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
   >
-    {{ roleBadgeLabel }}
+    {{ label }}
   </span>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { role } = defineProps<{
-  role: 'owner' | 'member'
+defineProps<{
+  label: string
 }>()
-
-const { t } = useI18n()
-
-const roleBadgeLabel = computed(() =>
-  role === 'owner'
-    ? t('workspaceSwitcher.roleOwner')
-    : t('workspaceSwitcher.roleMember')
-)
 </script>

src/platform/workspace/components/WorkspaceSwitcherPopover.vue

@@ -46,12 +46,10 @@
                           : workspace.name
                       }}
                     </span>
-                    <span
+                    <RoleBadge
                       v-if="resolveTierLabel(workspace)"
-                      class="rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
-                    >
-                      {{ resolveTierLabel(workspace) }}
-                    </span>
+                      :label="resolveTierLabel(workspace)!"
+                    />
                   </div>
                   <span class="text-xs text-muted-foreground">
                     {{ getRoleLabel(workspace.role) }}
@@ -112,6 +110,7 @@ import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import RoleBadge from '@/platform/workspace/components/RoleBadge.vue'
 import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.vue

@@ -60,12 +60,11 @@
                 >
                   {{ workspace.name }}
                 </span>
-                <span
+                <RoleBadge
                   v-if="tierLabels.get(workspace.id)"
-                  class="shrink-0 rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
-                >
-                  {{ tierLabels.get(workspace.id) }}
-                </span>
+                  class="shrink-0"
+                  :label="tierLabels.get(workspace.id)!"
+                />
               </div>
             </div>
             <span class="text-primary-foreground shrink-0 text-sm font-medium">
@@ -141,6 +140,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import RoleBadge from '@/platform/workspace/components/RoleBadge.vue'
 import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
 import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'
 import { useWorkspaceTierLabel } from '@/platform/workspace/composables/useWorkspaceTierLabel'

src/platform/workspace/components/dialogs/settings/MemberListItem.test.ts

@@ -0,0 +1,69 @@
+import type { ComponentProps } from 'vue-component-type-helpers'
+
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { WorkspaceMember } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+import MemberListItem from './MemberListItem.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { you: 'you', moreOptions: 'More options' },
+      workspaceSwitcher: { roleOwner: 'Owner', roleMember: 'Member' }
+    }
+  },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+const baseMember: WorkspaceMember = {
+  id: 'u1',
+  name: 'Alice',
+  email: 'alice@example.com',
+  joinDate: new Date('2025-01-01'),
+  role: 'owner'
+}
+
+const baseProps: ComponentProps<typeof MemberListItem> = {
+  member: baseMember,
+  isCurrentUser: false,
+  gridCols: 'grid-cols-3',
+  showRoleBadge: true
+}
+
+function renderItem(
+  propOverrides?: Partial<ComponentProps<typeof MemberListItem>>
+) {
+  return render(MemberListItem, {
+    props: { ...baseProps, ...propOverrides },
+    global: {
+      plugins: [i18n],
+      stubs: {
+        UserAvatar: { template: '<div />' },
+        Button: { template: '<button />', props: ['variant', 'size'] }
+      }
+    }
+  })
+}
+
+describe('MemberListItem', () => {
+  it('shows translated owner badge for owner role', () => {
+    renderItem({ member: { ...baseMember, role: 'owner' } })
+    expect(screen.getByText('Owner')).toBeInTheDocument()
+  })
+
+  it('shows translated member badge for member role', () => {
+    renderItem({ member: { ...baseMember, role: 'member' } })
+    expect(screen.getByText('Member')).toBeInTheDocument()
+  })
+
+  it('hides role badge when showRoleBadge is false', () => {
+    renderItem({ showRoleBadge: false })
+    expect(screen.queryByText('Owner')).not.toBeInTheDocument()
+  })
+})

src/platform/workspace/components/dialogs/settings/MemberListItem.vue

@@ -22,7 +22,10 @@
               ({{ $t('g.you') }})
             </span>
           </span>
-          <RoleBadge v-if="showRoleBadge" :role="member.role" />
+          <RoleBadge
+            v-if="showRoleBadge"
+            :label="getRoleBadgeLabel(member.role)"
+          />
         </div>
         <span class="text-sm text-muted-foreground">
           {{ member.email }}
@@ -84,7 +87,13 @@ defineEmits<{
   showMenu: [event: Event]
 }>()
 
-const { d } = useI18n()
+const { d, t } = useI18n()
+
+function getRoleBadgeLabel(role: string): string {
+  return role === 'owner'
+    ? t('workspaceSwitcher.roleOwner')
+    : t('workspaceSwitcher.roleMember')
+}
 
 function formatDate(date: Date): string {
   return d(date, { dateStyle: 'medium' })