@linktr.ee/messaging-react 4.4.3 → 4.4.4-rc-1788181757

package/src/components/Avatar/Avatar.test.tsx

@@ -42,111 +42,84 @@ describe('Avatar', () => {
   )
 
   it('does not show a star by default but shows one when starred', () => {
-    const defaultAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" />
-    )
-    expect(defaultAvatar.container.querySelector('svg')).not.toBeInTheDocument()
+    const view = renderWithProviders(<Avatar id="user-1" name="Alice" />)
+    expect(screen.queryByTestId('avatar-star')).not.toBeInTheDocument()
+    view.unmount()
 
-    const starredAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" starred />
-    )
-    expect(starredAvatar.container.querySelector('svg')).toBeInTheDocument()
+    renderWithProviders(<Avatar id="user-1" name="Alice" starred />)
+    expect(screen.getByTestId('avatar-star')).toBeInTheDocument()
   })
 
   it('uses a squircle by default and a circle when explicitly requested', () => {
-    const squircleAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" />
-    )
-    const squircleElements = squircleAvatar.container.querySelectorAll(
-      '[style*="border-radius"]'
-    )
-    expect(squircleElements).toHaveLength(3)
-    squircleElements.forEach((element) =>
+    // All three layers (frame, ring, clipped inner) have to agree on the
+    // radius, or the corners of one show through another.
+    const rounded = () =>
+      ['avatar', 'avatar-ring', 'avatar-inner'].map((testId) =>
+        screen.getByTestId(testId)
+      )
+
+    const view = renderWithProviders(<Avatar id="user-1" name="Alice" />)
+    rounded().forEach((element) =>
       expect(element).toHaveStyle({ borderRadius: '1rem' })
     )
+    view.unmount()
 
-    const circleAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" shape="circle" />
-    )
-    const circleElements = circleAvatar.container.querySelectorAll(
-      '[style*="border-radius"]'
-    )
-    expect(circleElements).toHaveLength(3)
-    circleElements.forEach((element) =>
+    renderWithProviders(<Avatar id="user-1" name="Alice" shape="circle" />)
+    rounded().forEach((element) =>
       expect(element).toHaveStyle({ borderRadius: '50%' })
     )
   })
 
   it('only applies the AI ring when dmAgentEnabled is true', () => {
-    const defaultAvatar = renderWithProviders(
+    const { unmount: unmountPlain } = renderWithProviders(
       <Avatar id="user-1" name="Alice" size={40} />
     )
-    expect(
-      defaultAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).not.toHaveStyle({
+    expect(screen.getByTestId('avatar-ring')).not.toHaveStyle({
       borderWidth: '2px',
       borderStyle: 'solid',
     })
+    unmountPlain()
 
-    const enabledAvatar = renderWithProviders(
+    const { unmount: unmountEnabled } = renderWithProviders(
       <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
     )
-    expect(
-      enabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).toHaveStyle({
+    expect(screen.getByTestId('avatar-ring')).toHaveStyle({
       borderWidth: '2px',
       borderStyle: 'solid',
       borderColor: 'var(--AI-Gradient, #7F22FE)',
       boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
     })
+    unmountEnabled()
 
-    const smallEnabledAvatar = renderWithProviders(
+    renderWithProviders(
       <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
     )
-    expect(
-      smallEnabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).toHaveStyle({ borderWidth: '1px' })
+    expect(screen.getByTestId('avatar-ring')).toHaveStyle({
+      borderWidth: '1px',
+    })
   })
 
   it('renders an image instead of the emoji fallback when image is provided', () => {
-    const fallbackAvatar = renderWithProviders(<Avatar id="" name="Alice" />)
-    expect(
-      fallbackAvatar.container.querySelector('img')
-    ).not.toBeInTheDocument()
-    expect(fallbackAvatar.container).toHaveTextContent('🍎')
-    expect(
-      fallbackAvatar.container.querySelector('.avatar-fallback')
-    ).toHaveClass(
-      'avatar-fallback',
-      'flex',
-      'h-full',
-      'w-full',
-      'items-center',
-      'justify-center',
-      'font-semibold',
-      'select-none',
-      'transition-colors'
-    )
+    const view = renderWithProviders(<Avatar id="" name="Alice" />)
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('🍎')
+    view.unmount()
 
-    const imageAvatar = renderWithProviders(
+    renderWithProviders(
       <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
     )
-    expect(imageAvatar.container.querySelector('img')).toHaveAttribute(
+    expect(screen.getByRole('img')).toHaveAttribute(
       'src',
       'https://example.com/avatar.png'
     )
-    expect(imageAvatar.container).not.toHaveTextContent('🍎')
+    expect(screen.queryByTestId('avatar-fallback')).not.toBeInTheDocument()
   })
 
   it('applies the fallback background color and forwards custom classes', () => {
-    const { container } = renderWithProviders(
-      <Avatar id="" name="Alice" className="custom-avatar" />
-    )
-    const root = container.firstElementChild
-    const ring = container.querySelector('[data-testid="avatar-ring"]')
+    renderWithProviders(<Avatar id="" name="Alice" className="custom-avatar" />)
+    const root = screen.getByTestId('avatar')
 
-    expect(root).toHaveClass('relative', 'flex-shrink-0', 'custom-avatar')
-    expect(ring).toHaveClass('h-full', 'w-full', 'bg-transparent')
+    expect(root).toHaveClass('custom-avatar')
     expect(root).toHaveStyle({
       backgroundColor: '#FFD1DD',
       width: '40px',

package/src/components/Avatar/index.tsx

@@ -50,12 +50,17 @@ export const Avatar = ({
     shape === 'circle' ? { borderRadius: '50%' } : { borderRadius: '1rem' }
 
   const avatarInner = (
-    <div className="h-full w-full overflow-hidden" style={borderStyle}>
+    <div
+      data-testid="avatar-inner"
+      className="h-full w-full overflow-hidden"
+      style={borderStyle}
+    >
       {image ? (
         <img src={image} alt="" className="h-full w-full object-cover" />
       ) : (
         <div
           aria-hidden="true"
+          data-testid="avatar-fallback"
           className={classNames(
             'avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors'
           )}
@@ -69,6 +74,7 @@ export const Avatar = ({
 
   return (
     <div
+      data-testid="avatar"
       className={classNames('relative flex-shrink-0', className)}
       style={
         {
@@ -83,6 +89,7 @@ export const Avatar = ({
       {starred && (
         <div
           aria-hidden="true"
+          data-testid="avatar-star"
           className="absolute -left-1.5 -top-1.5 z-10 flex size-5 items-center justify-center rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
         >
           <StarIcon className="size-3 text-yellow-600" weight="duotone" />

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -87,7 +87,7 @@ describe('CustomChannelPreview', () => {
     defaultProps.onChannelSelect.mockClear()
   })
 
-  it('applies selected and unselected row styling from context', () => {
+  it('drops the hover affordance on the selected row only', () => {
     const channel = createMockChannel([])
     const otherChannel = createMockChannel([])
     otherChannel.id = 'channel-2'
@@ -105,7 +105,6 @@ describe('CustomChannelPreview', () => {
     )
 
     let row = screen.getByRole('button')
-    expect(row).toHaveClass('bg-black/[0.04]')
     expect(row).not.toHaveClass('hover:bg-black/[0.02]')
 
     rerender(
@@ -121,7 +120,6 @@ describe('CustomChannelPreview', () => {
     )
 
     row = screen.getByRole('button')
-    expect(row).not.toHaveClass('bg-black/[0.04]')
     expect(row).toHaveClass('hover:bg-black/[0.02]')
 
     rerender(
@@ -141,12 +139,12 @@ describe('CustomChannelPreview', () => {
   it('selects the channel by click and activation keys only', () => {
     const channel = createMockChannel([])
     const onChannelSelect = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelListProvider value={{ onChannelSelect, debug: false }}>
         <CustomChannelPreview channel={channel} />
       </ChannelListProvider>
     )
-    const row = container.querySelector('[role="button"]') as HTMLElement
+    const row = screen.getByRole('button')
 
     fireEvent.click(row)
     fireEvent.keyDown(row, { key: 'Enter' })
@@ -213,11 +211,11 @@ describe('CustomChannelPreview', () => {
       image: 'https://example.com/alice.png',
     }
 
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <CustomChannelPreview {...defaultProps} channel={channel} />
     )
-    expect(container.querySelectorAll('img')).toHaveLength(1)
-    expect(container.querySelector('img')).toHaveAttribute(
+    expect(screen.getAllByRole('img', { hidden: true })).toHaveLength(1)
+    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
       'src',
       'https://example.com/alice.png'
     )
@@ -229,7 +227,7 @@ describe('CustomChannelPreview', () => {
     rerender(
       <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
     )
-    expect(container.querySelectorAll('img')).toHaveLength(0)
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
   })
 
   it.each([
@@ -239,7 +237,7 @@ describe('CustomChannelPreview', () => {
     [100, '99+'],
   ])('renders the unread badge for unread=%s', (unread, expectedBadge) => {
     const channel = createMockChannel([])
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomChannelPreview
         {...defaultProps}
         channel={channel}
@@ -248,10 +246,12 @@ describe('CustomChannelPreview', () => {
     )
 
     if (expectedBadge) {
-      expect(screen.getByText(expectedBadge)).toBeInTheDocument()
+      expect(
+        screen.getByTestId('channel-preview-unread-badge')
+      ).toHaveTextContent(expectedBadge)
     } else {
       expect(
-        container.querySelector('span[class*="bg-[#7f22fe]"]')
+        screen.queryByTestId('channel-preview-unread-badge')
       ).not.toBeInTheDocument()
     }
   })
@@ -267,21 +267,21 @@ describe('CustomChannelPreview', () => {
       },
     ])
 
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <CustomChannelPreview {...defaultProps} channel={channel} />
     )
-    const timestamp = () =>
-      container.querySelector('h3')?.parentElement?.querySelector('span')
 
-    expect(timestamp()).toHaveTextContent('Just now')
-    expect(screen.getByText('Just now')).toBeInTheDocument()
+    expect(screen.getByTestId('channel-preview-timestamp')).toHaveTextContent(
+      'Just now'
+    )
 
     Object.assign(channel.state.messages[0], { created_at: undefined })
     rerender(
       <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
     )
-    expect(timestamp()).toBeNull()
-    expect(screen.queryByText('Just now')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('channel-preview-timestamp')
+    ).not.toBeInTheDocument()
   })
 
   it.each([

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -192,7 +192,10 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
                 {participantName}
               </h3>
               {lastMessageTime && (
-                <span className="text-xs text-[#717070] flex-shrink-0">
+                <span
+                  data-testid="channel-preview-timestamp"
+                  className="text-xs text-[#717070] flex-shrink-0"
+                >
                   {lastMessageTime}
                 </span>
               )}
@@ -204,7 +207,10 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
                 {messagePreview}
               </p>
               {unreadCount > 0 && (
-                <span className="bg-[#7f22fe] text-white text-[10px] rounded-full h-4 flex items-center justify-center p-1 min-w-4 text-center flex-shrink-0">
+                <span
+                  data-testid="channel-preview-unread-badge"
+                  className="bg-[#7f22fe] text-white text-[10px] rounded-full h-4 flex items-center justify-center p-1 min-w-4 text-center flex-shrink-0"
+                >
                   {unreadCount > 99 ? '99+' : unreadCount}
                 </span>
               )}

package/src/components/ChannelView.outbound-resolution.integration.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import React, { useEffect } from 'react'
 import { Channel as StreamChannel, StreamChat } from 'stream-chat'
 import { Channel, Chat } from 'stream-chat-react'
@@ -75,42 +75,37 @@ describe('ChannelView outbound resolution', () => {
       <RowProbe>{messageNode}</RowProbe>
     )
 
-    let rerender!: ReturnType<typeof render>['rerender']
-    await act(async () => {
-      rerender = render(
-        <Chat client={client}>
-          <Channel channel={channel as StreamChannel}>
-            <ChannelView
-              channel={channel as StreamChannel}
-              resolveOutbound={firstResolver}
-              renderMessage={renderMessage}
-            />
-          </Channel>
-        </Chat>
-      ).rerender
-    })
+    const { rerender } = render(
+      <Chat client={client}>
+        <Channel channel={channel as StreamChannel}>
+          <ChannelView
+            channel={channel as StreamChannel}
+            resolveOutbound={firstResolver}
+            renderMessage={renderMessage}
+          />
+        </Channel>
+      </Chat>
+    )
 
+    await waitFor(() => expect(mounts).toHaveBeenCalledOnce())
     expect(
       screen.queryByTestId('sent-message-outbound-status')
     ).not.toBeInTheDocument()
-    expect(mounts).toHaveBeenCalledOnce()
 
-    act(() => {
-      rerender(
-        <Chat client={client}>
-          <Channel channel={channel as StreamChannel}>
-            <ChannelView
-              channel={channel as StreamChannel}
-              resolveOutbound={secondResolver}
-              renderMessage={renderMessage}
-            />
-          </Channel>
-        </Chat>
-      )
-    })
+    rerender(
+      <Chat client={client}>
+        <Channel channel={channel as StreamChannel}>
+          <ChannelView
+            channel={channel as StreamChannel}
+            resolveOutbound={secondResolver}
+            renderMessage={renderMessage}
+          />
+        </Channel>
+      </Chat>
+    )
 
     expect(
-      screen.getByTestId('sent-message-outbound-status')
+      await screen.findByTestId('sent-message-outbound-status')
     ).toHaveTextContent('July 9th Class absentee')
     expect(mounts).toHaveBeenCalledOnce()
     expect(unmounts).not.toHaveBeenCalled()

package/src/components/ChannelView.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-import { renderWithProviders, screen } from '../test/utils'
+import { renderWithProviders, screen, within } from '../test/utils'
 
 import { ChannelView } from './ChannelView'
 
@@ -222,26 +222,22 @@ describe('ChannelView', () => {
   })
 
   it('widens the content column in the official (read-only) channel via the width var', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelView
         channel={createChannel({ channelType: OFFICIAL_CHANNEL_TYPE })}
       />
     )
 
-    const root = container.querySelector(
-      '.messaging-channel-view'
-    ) as HTMLElement
+    const root = screen.getByTestId('channel-view')
     expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('368px')
   })
 
   it('leaves the card-width var unset in a regular channel (default widths)', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelView channel={createChannel({ channelType: 'messaging' })} />
     )
 
-    const root = container.querySelector(
-      '.messaging-channel-view'
-    ) as HTMLElement
+    const root = screen.getByTestId('channel-view')
     expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('')
   })
 
@@ -266,9 +262,7 @@ describe('ChannelView', () => {
     ).not.toBeInTheDocument()
     expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
 
-    const avatars = screen.getAllByTestId('avatar')
-    expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].closest('button')).toBeNull()
+    expect(screen.getAllByTestId('avatar').length).toBeGreaterThanOrEqual(1)
     expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
   })
 
@@ -284,16 +278,10 @@ describe('ChannelView', () => {
     const button = screen.getByRole('button', {
       name: /view details for linker/i,
     })
-    expect(button).toHaveClass(
-      'appearance-none',
-      'border-0',
-      'bg-transparent',
-      'flex-col'
-    )
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].closest('button')).toBe(button)
+    expect(button).toContainElement(avatars[0])
     expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
 
     button.click()
@@ -346,8 +334,8 @@ describe('ChannelView', () => {
     )
 
     expect(
-      screen.getByText('Linker').closest('[data-testid="message-list"]')
-    ).toBeNull()
+      within(screen.getByTestId('message-list')).queryByText('Linker')
+    ).not.toBeInTheDocument()
   })
 
   it('renders the actions menu by default', () => {
@@ -641,14 +629,14 @@ describe('ChannelView', () => {
 
   it('fires onMessageLinkClick with the href and undefined message when the link is not inside a message wrapper', () => {
     const handler = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelView channel={createChannel()} onMessageLinkClick={handler} />
     )
 
     const anchor = document.createElement('a')
     anchor.href = 'https://example.com/clicked'
     anchor.addEventListener('click', (e) => e.preventDefault())
-    container.querySelector('.messaging-channel-view')?.appendChild(anchor)
+    screen.getByTestId('channel-view').appendChild(anchor)
     anchor.click()
 
     expect(handler).toHaveBeenCalledOnce()
@@ -670,7 +658,7 @@ describe('ChannelView', () => {
       message,
     ]
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelView channel={channel} onMessageLinkClick={handler} />
     )
 
@@ -680,7 +668,7 @@ describe('ChannelView', () => {
     anchor.href = 'https://example.com/clicked'
     anchor.addEventListener('click', (e) => e.preventDefault())
     wrapper.appendChild(anchor)
-    container.querySelector('.messaging-channel-view')?.appendChild(wrapper)
+    screen.getByTestId('channel-view').appendChild(wrapper)
     anchor.click()
 
     expect(handler).toHaveBeenCalledOnce()
@@ -689,7 +677,7 @@ describe('ChannelView', () => {
 
   it('passes undefined when the wrapper data-message-id does not match any message in state', () => {
     const handler = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ChannelView channel={createChannel()} onMessageLinkClick={handler} />
     )
 
@@ -699,7 +687,7 @@ describe('ChannelView', () => {
     anchor.href = 'https://example.com/clicked'
     anchor.addEventListener('click', (e) => e.preventDefault())
     wrapper.appendChild(anchor)
-    container.querySelector('.messaging-channel-view')?.appendChild(wrapper)
+    screen.getByTestId('channel-view').appendChild(wrapper)
     anchor.click()
 
     expect(handler).toHaveBeenCalledOnce()
@@ -710,14 +698,12 @@ describe('ChannelView', () => {
   })
 
   it('does not throw when a link is clicked without onMessageLinkClick set', () => {
-    const { container } = renderWithProviders(
-      <ChannelView channel={createChannel()} />
-    )
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
     const anchor = document.createElement('a')
     anchor.href = 'https://example.com'
     anchor.addEventListener('click', (e) => e.preventDefault())
-    container.querySelector('.messaging-channel-view')?.appendChild(anchor)
+    screen.getByTestId('channel-view').appendChild(anchor)
     expect(() => anchor.click()).not.toThrow()
   })
 })

package/src/components/ChannelView.tsx

@@ -391,6 +391,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     return (
       <div
         ref={containerRef}
+        data-testid="channel-view"
         className={classNames(
           'messaging-channel-view h-full flex flex-col',
           className

package/src/components/CustomLinkPreviewList/CustomLinkPreviewList.test.tsx

@@ -36,13 +36,16 @@ describe('CustomLinkPreviewList', () => {
     // alone dropped the hero for the whole ~1.5s debounce + scrape window, so
     // the skeleton was two bare text bars that then snapped open to the 250px
     // featured box (MES-1349).
-    const { container } = stage({ status: LinkPreviewStatus.LOADING })
+    stage({ status: LinkPreviewStatus.LOADING })
 
     const shell = screen.getByLabelText(LOADING_LABEL)
     expect(shell).toHaveAttribute('aria-busy', 'true')
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved 250px is the regression itself, and jsdom has no layout to observe the snap-open.
     expect(shell.className).toContain('h-[250px]')
-    // Hero placeholder + the two chin bars: without the hero there are two.
-    expect(container.querySelectorAll('.animate-pulse')).toHaveLength(3)
+    // The hero placeholder is the regression guard; the two chin bars stand
+    // in for the title and URL either way.
+    expect(screen.getByTestId('card-thumbnail-skeleton')).toBeInTheDocument()
+    expect(screen.getAllByTestId('card-body-skeleton-bar')).toHaveLength(2)
   })
 
   it('keeps the featured hero once a preview loads with an image', () => {
@@ -68,13 +71,13 @@ describe('CustomLinkPreviewList', () => {
     // The inverted layout contract — see this component's doc comment. While
     // this list scrolled and shrank on its own, a staged preview was cropped to
     // keep the textarea above the keyboard instead of scrolling with it.
-    const { container } = stage({
+    stage({
       status: LinkPreviewStatus.LOADED,
       title: 'Example story',
       image_url: 'https://cdn.example.com/story.jpg',
     })
 
-    const list = container.querySelector('.messaging-link-preview-list')
+    const list = screen.getByTestId('link-preview-list')
     expect(list).not.toHaveClass('overflow-y-auto')
     expect(list).not.toHaveClass('min-h-0')
   })

package/src/components/CustomLinkPreviewList/index.tsx

@@ -95,7 +95,10 @@ export const CustomLinkPreviewList = () => {
     // scrolls sideways instead of spilling; at 320px the dismiss button's right
     // edge lands ~6px past the fold, reachable by scrolling. That residue
     // belongs to whoever owns the mobile layout contract, not to this component.
-    <div className="messaging-link-preview-list flex flex-col items-stretch w-full gap-2">
+    <div
+      data-testid="link-preview-list"
+      className="messaging-link-preview-list flex flex-col items-stretch w-full gap-2"
+    >
       {stateLinkPreviews.map((linkPreview) => {
         // A LOADING preview has no `image_url` yet, so keying the layout off
         // the image alone rendered the skeleton as two bare text bars and then