@linktr.ee/messaging-react 4.5.0-rc-1788297811 → 4.5.0-rc-1788325575

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.5.0-rc-1788297811",
+  "version": "4.5.0-rc-1788325575",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.6.0-rc-1788297811",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788297811",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788325575",
+    "@linktr.ee/messaging-taxonomy": "0.12.0-rc-1788325575",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelHeader.test.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+import type { Channel } from 'stream-chat'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../test/utils'
+
+import ChannelHeader from './ChannelHeader'
+
+let activeChannel: unknown
+let activeClient: unknown
+
+vi.mock('stream-chat-react', () => ({
+  useChannelStateContext: () => ({ channel: activeChannel }),
+  useChatContext: () => ({ client: activeClient }),
+}))
+
+const avatarRenderCalls: Array<Record<string, unknown>> = []
+vi.mock('./Avatar', () => ({
+  Avatar: (props: Record<string, unknown>) => {
+    avatarRenderCalls.push({ ...props })
+    return <div data-testid="avatar" />
+  },
+}))
+
+vi.mock('./ChannelActionsMenu', () => ({
+  ChannelActionsMenu: () => <div data-testid="channel-actions-menu" />,
+}))
+
+vi.mock('../hooks/useChannelStar', () => ({
+  useChannelStar: () => false,
+}))
+
+const createChannel = ({
+  customerTag,
+  isFollower = true,
+  participantUser = { id: 'linker-1', name: 'Linker' },
+  hasState = true,
+  hasData = true,
+}: {
+  customerTag?: unknown
+  isFollower?: boolean
+  participantUser?: { id?: string; name?: string; image?: string } | undefined
+  hasState?: boolean
+  hasData?: boolean
+} = {}) =>
+  ({
+    id: 'channel-1',
+    type: 'messaging',
+    data: hasData ? { customer_tag: customerTag } : undefined,
+    state: hasState
+      ? {
+          members: {
+            me: { user: { id: 'visitor-1', name: 'Visitor' } },
+            other: { user: participantUser, is_follower: isFollower },
+          },
+        }
+      : undefined,
+  }) as unknown as Channel
+
+const CONNECTED_CLIENT = { userID: 'visitor-1' }
+
+const renderHeader = (channel: Channel, ...client: [unknown?]) => {
+  activeChannel = channel
+  activeClient = client.length > 0 ? client[0] : CONNECTED_CLIENT
+  return renderWithProviders(<ChannelHeader showBackButton={false} />)
+}
+
+const paidBadge = () => screen.queryByLabelText('Paid customer')
+
+beforeEach(() => {
+  avatarRenderCalls.length = 0
+})
+
+describe('ChannelHeader paid-customer badge', () => {
+  it.each([
+    ['the canonical tag', 'CUSTOMER_PAID'],
+    ['a space-separated tag', 'customer paid'],
+    ['a hyphen-separated tag', 'Customer-Paid'],
+    ['a tag padded with whitespace', '  customer paid  '],
+    ['a tag with repeated separators', 'customer - paid'],
+  ])('badges a follower carrying %s', (_label, customerTag) => {
+    renderHeader(createChannel({ customerTag }))
+
+    expect(paidBadge()).not.toBeNull()
+  })
+
+  it('does not badge a follower whose tag is a different string', () => {
+    renderHeader(createChannel({ customerTag: 'CUSTOMER_FREE' }))
+
+    expect(paidBadge()).toBeNull()
+  })
+
+  it('does not badge a follower whose tag is a partial match', () => {
+    renderHeader(createChannel({ customerTag: 'customer_paid_trial' }))
+
+    expect(paidBadge()).toBeNull()
+  })
+
+  it.each([
+    ['a number', 42],
+    ['an object', { value: 'CUSTOMER_PAID' }],
+    ['undefined', undefined],
+  ])(
+    'ignores a non-string tag (%s) without throwing',
+    (_label, customerTag) => {
+      renderHeader(createChannel({ customerTag }))
+
+      expect(paidBadge()).toBeNull()
+      expect(screen.getByText('Linker')).toBeInTheDocument()
+    }
+  )
+
+  it('does not badge a paid tag when the participant is not a follower', () => {
+    renderHeader(
+      createChannel({ customerTag: 'CUSTOMER_PAID', isFollower: false })
+    )
+
+    expect(paidBadge()).toBeNull()
+  })
+})
+
+describe('ChannelHeader participant resolution', () => {
+  it('renders before the chat client is connected, with nobody excluded as “me”', () => {
+    renderHeader(createChannel(), undefined)
+
+    expect(screen.getByText('Visitor')).toBeInTheDocument()
+  })
+
+  it('renders a channel whose state has not hydrated yet', () => {
+    renderHeader(
+      createChannel({ hasState: false, customerTag: 'CUSTOMER_PAID' })
+    )
+
+    expect(screen.getByText('Unknown member')).toBeInTheDocument()
+    expect(paidBadge()).toBeNull()
+  })
+
+  it('renders a channel with no custom data', () => {
+    renderHeader(createChannel({ hasData: false }))
+
+    expect(screen.getByText('Linker')).toBeInTheDocument()
+    expect(paidBadge()).toBeNull()
+  })
+
+  it('keys the avatar off the channel and drops the image when members are absent', () => {
+    renderHeader(createChannel({ hasState: false }))
+
+    expect(avatarRenderCalls.at(-1)?.id).toBe('channel-1')
+    expect(avatarRenderCalls.at(-1)?.image).toBeUndefined()
+  })
+
+  it('keys the avatar on the participant, falling back to the channel id', () => {
+    renderHeader(createChannel())
+    expect(avatarRenderCalls.at(-1)?.id).toBe('linker-1')
+
+    avatarRenderCalls.length = 0
+    renderHeader(createChannel({ participantUser: { name: 'Nameless' } }))
+    expect(avatarRenderCalls.at(-1)?.id).toBe('channel-1')
+  })
+})

package/src/components/MessageBubble/components/_shared/BubbleShell.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../../../test/utils'
+
+import BubbleShell from './BubbleShell'
+
+const renderShell = (
+  props: Partial<React.ComponentProps<typeof BubbleShell>> = {}
+): HTMLElement => {
+  renderWithProviders(<BubbleShell variant="sent" text="body" {...props} />)
+  // eslint-disable-next-line testing-library/no-node-access -- the bubble box wraps the text and carries the theme contract; it has no semantic query.
+  return screen.getByText(props.text ?? 'body').parentElement as HTMLElement
+}
+
+describe('BubbleShell', () => {
+  it('inks each variant from its own theme variable, with the canonical fallback', () => {
+    expect(renderShell({ variant: 'sent', text: 'mine' }).style.color).toBe(
+      'var(--str-chat__own-message-bubble-color, #fff)'
+    )
+    expect(
+      renderShell({ variant: 'received', text: 'theirs' }).style.color
+    ).toBe('var(--str-chat__message-bubble-color, #000000)')
+  })
+
+  it('rounds the bubble from the theme variable rather than a hard-coded radius', () => {
+    expect(renderShell().style.borderRadius).toBe(
+      'var(--str-chat__message-bubble-border-radius, 1.5rem)'
+    )
+  })
+
+  it('establishes the stacking context the z-index:-1 tail paints inside', () => {
+    const bubble = renderShell()
+
+    // `relative` + `isolation: isolate` keep the z-index:-1 tail behind the
+    // bubble but in front of the page.
+    expect(bubble.className).toMatch(/(?:^|\s)relative(?:\s|$)/)
+    expect(bubble.style.isolation).toBe('isolate')
+  })
+
+  it('keeps the channel-matched typography metrics so previews stay pixel-identical', () => {
+    // Mirrors the in-channel bubble metrics in `styles.css`.
+    const className = renderShell().className
+
+    expect(className).toMatch(/(?:^|\s)text-\[0\.875rem\](?:\s|$)/)
+    expect(className).toMatch(/(?:^|\s)leading-\[1\.3125rem\](?:\s|$)/)
+    expect(className).toMatch(/(?:^|\s)tracking-\[0\.14px\](?:\s|$)/)
+  })
+})

package/src/components/MessageBubble/components/_shared/bubbleTail.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders } from '../../../../test/utils'
+import type { MessageBubbleVariant } from '../../types'
+
+import { BubbleTail } from './bubbleTail'
+
+// The canonical 20×23 tail silhouette, also drawn by `styles.css` in-channel.
+const EXPECTED_TAIL_MASK =
+  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E\") no-repeat center / 100% 100%"
+
+const CORNER_OFFSET = 'calc(-1 * 0.3125rem)'
+
+const renderTail = (variant: MessageBubbleVariant): HTMLElement => {
+  const { container } = renderWithProviders(<BubbleTail variant={variant} />)
+  // eslint-disable-next-line testing-library/no-node-access -- the tail is aria-hidden by design, so it has no semantic query.
+  return container.firstElementChild as HTMLElement
+}
+
+describe('BubbleTail', () => {
+  it('pins the sent tail to the bubble’s bottom-right corner, unmirrored', () => {
+    const tail = renderTail('sent')
+
+    expect(tail.style.insetInlineEnd).toBe(CORNER_OFFSET)
+    expect(tail.style.insetInlineStart).toBe('')
+    expect(tail.style.transform).toBe('')
+  })
+
+  it('pins the received tail to the bottom-left corner and mirrors it', () => {
+    const tail = renderTail('received')
+
+    expect(tail.style.insetInlineStart).toBe(CORNER_OFFSET)
+    expect(tail.style.insetInlineEnd).toBe('')
+    expect(tail.style.transform).toBe('scaleX(-1)')
+    expect(tail.style.transformOrigin).toBe('center')
+  })
+
+  it('tints each tail with its own bubble’s surface variable', () => {
+    expect(renderTail('sent').style.backgroundColor).toBe(
+      'var(--str-chat__own-message-bubble-background-color, #1e2330)'
+    )
+    expect(renderTail('received').style.backgroundColor).toBe(
+      'var(--str-chat__message-bubble-background-color, #f1f0ee)'
+    )
+  })
+
+  it('paints both variants with the one canonical tail mask', () => {
+    expect(renderTail('sent').style.mask).toBe(EXPECTED_TAIL_MASK)
+    expect(renderTail('received').style.mask).toBe(EXPECTED_TAIL_MASK)
+  })
+
+  it('is decorative: hidden from assistive tech and not hit-testable', () => {
+    const tail = renderTail('sent')
+
+    expect(tail.getAttribute('aria-hidden')).toBe('true')
+    expect(tail.className).toMatch(/(?:^|\s)pointer-events-none(?:\s|$)/)
+  })
+})