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

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -3,10 +3,10 @@ import type { Attachment, LocalMessage } from 'stream-chat'
 import { describe, expect, it } from 'vitest'
 
 import {
-  fireEvent,
   renderWithProviders,
   screen,
   within,
+  userEvent,
 } from '../../test/utils'
 
 import StreamAttachmentMessage, {
@@ -198,11 +198,17 @@ describe('StreamAttachmentMessage', () => {
     )
 
     const link = screen.getByRole('link', { name: /my linktree/i })
+    const linkCard = screen.getByTestId('link-card')
     const imageBubble = screen.getByTestId('image-attachment')
 
-    expect(link.compareDocumentPosition(imageBubble)).toBe(
-      Node.DOCUMENT_POSITION_FOLLOWING
+    const attachmentRows = within(screen.getByTestId('message-attachment-rows'))
+    const attachments = attachmentRows.getAllByTestId(
+      /link-card|image-attachment/
     )
+    expect(attachments.indexOf(linkCard)).toBeLessThan(
+      attachments.indexOf(imageBubble)
+    )
+    expect(link).toBeInTheDocument()
     expect(screen.getByTestId('message-caption-bubble')).toHaveTextContent(
       'caption'
     )
@@ -257,7 +263,8 @@ describe('StreamAttachmentMessage', () => {
     )
   })
 
-  it('keeps the original image source in the viewer for channel image attachments', () => {
+  it('keeps the original image source in the viewer for channel image attachments', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
@@ -272,7 +279,7 @@ describe('StreamAttachmentMessage', () => {
       />
     )
 
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
     const viewer = screen.getByTestId('image-viewer')
 
     expect(viewer).toHaveAttribute('open')
@@ -361,4 +368,37 @@ describe('StreamAttachmentMessage', () => {
       'from the trip'
     )
   })
+
+  it('forwards a persisted duration and waveform to the audio card', () => {
+    // Audio is sent as `type: "file"` with an `audio/*` mime type (for
+    // mobile compatibility), and the composer persists `duration` +
+    // `waveform_data` on the outgoing attachment. Without this
+    // passthrough every sent and received card would fall back to
+    // `--:--` and a flat placeholder even though the data is there.
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage
+        message={message([
+          {
+            type: 'file',
+            asset_url: 'https://cdn.example.com/take-1.mp3',
+            mime_type: 'audio/mpeg',
+            title: 'take-1.mp3',
+            duration: 12,
+            waveform_data: [0.2, 0.9, 0.5, 0.7],
+          },
+        ])}
+      />
+    )
+
+    expect(screen.getByText('00:12')).toBeInTheDocument()
+    // The flat placeholder renders every bar at 0%; a real waveform is
+    // observable as bars drawn above that floor.
+    const barHeights = screen
+      .getAllByTestId('amplitude-bar')
+      .map((bar) => bar.style.getPropertyValue('--mes-audio-wave-bar'))
+    expect(barHeights).toHaveLength(35)
+    expect(barHeights.some((height) => height !== '0%')).toBe(true)
+  })
 })

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -255,6 +255,12 @@ function mediaItemForKind(
         src: trimToUndefined(attachment.asset_url) ?? '',
         mimeType: trimToUndefined(attachment.mime_type) ?? 'audio/mpeg',
         filename: trimToUndefined((attachment as { title?: string }).title),
+        // Both are first-class `stream-chat` Attachment fields. The
+        // composer writes them at send time so the waveform card paints
+        // the real amplitudes and the correct duration with no remote
+        // decode and no CDN CORS exposure.
+        durationSeconds: attachment.duration,
+        waveformData: attachment.waveform_data,
       }
     case 'pdf':
       return {

package/src/components/CustomMessage/TipMessage/TipMessage.test.tsx

@@ -34,6 +34,7 @@ describe('TipMessage', () => {
     )
 
     const tipTag = screen.getByText('$5.50 tip!')
+    // eslint-disable-next-line testing-library/no-node-access -- the component wrapper class has no semantic query.
     expect(tipTag.closest('.message-tip-pill')).not.toBeNull()
   })
 
@@ -48,6 +49,7 @@ describe('TipMessage', () => {
     )
 
     const tipTag = screen.getByText('$50.00 tip!')
+    // eslint-disable-next-line testing-library/no-node-access -- the component wrapper class has no semantic query.
     expect(tipTag.closest('.message-tip-pill')).not.toBeNull()
   })
 
@@ -60,6 +62,7 @@ describe('TipMessage', () => {
       />
     )
 
+    // eslint-disable-next-line testing-library/no-node-access -- the null-rendering DOM contract has no semantic query.
     expect(container.firstChild).toBeNull()
   })
 })

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import {
+  userEvent,
+  fireEvent,
+  renderWithProviders,
+  screen,
+  within,
+} from '../../test/utils'
 
 import { CustomMessageInput } from '.'
 
@@ -207,7 +213,8 @@ describe('CustomMessageInput', () => {
       expect(notCancelled).toBe(false)
     })
 
-    it('still submits on click', () => {
+    it('still submits on click', async () => {
+      const user = userEvent.setup()
       mockChannelData = {}
       mockContextSendButton = undefined
       mockHasSendableData = true
@@ -215,7 +222,7 @@ describe('CustomMessageInput', () => {
       renderWithProviders(<CustomMessageInput />)
 
       const sendButton = screen.getByTestId('send-button')
-      fireEvent.click(sendButton)
+      await user.click(sendButton)
       expect(mockHandleSubmit).toHaveBeenCalledTimes(1)
     })
   })
@@ -285,10 +292,12 @@ describe('CustomMessageInput', () => {
     const messageInput = screen.getByTestId('message-input')
 
     expect(screen.getByTestId('composer-chrome')).toContainElement(header)
-    expect(
-      header.compareDocumentPosition(messageInput) &
-        Node.DOCUMENT_POSITION_FOLLOWING
-    ).toBeTruthy()
+    const chromeChildren = within(
+      screen.getByTestId('composer-chrome')
+    ).getAllByTestId(/composer-header|message-input/)
+    expect(chromeChildren.indexOf(header)).toBeLessThan(
+      chromeChildren.indexOf(messageInput)
+    )
   })
 
   it('keeps the frozen wrapper around a custom composerInput', () => {

package/src/components/FaqList/FaqList.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../test/utils'
 import { getAvatarEmoji } from '../Avatar/getAvatarEmoji'
 
 import { FaqListItem } from './FaqListItem'
@@ -70,7 +70,8 @@ describe('FaqListItem', () => {
     ).toHaveStyle({ backgroundColor: '#E6E5E3' })
   })
 
-  it('uses loading-only classes and blocks clicks while loading', () => {
+  it('uses loading-only classes and blocks clicks while loading', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <FaqListItem question="How do I get started?" onClick={onClick} loading />
@@ -86,17 +87,18 @@ describe('FaqListItem', () => {
       'cursor-not-allowed',
     ])
 
-    fireEvent.click(button)
+    await user.click(button)
     expect(onClick).not.toHaveBeenCalled()
   })
 
-  it('calls the click handler once when enabled', () => {
+  it('calls the click handler once when enabled', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <FaqListItem question="How do I get started?" onClick={onClick} />
     )
 
-    fireEvent.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button'))
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 })
@@ -110,16 +112,20 @@ describe('FaqList', () => {
       />
     )
 
+    // eslint-disable-next-line testing-library/no-node-access -- the null-rendering DOM contract has no semantic query.
     expect(container.firstChild).toBeNull()
   })
 
   it('renders enabled FAQs in ascending order and filters disabled FAQs', () => {
     renderWithProviders(<FaqList faqs={faqs} onFaqClick={vi.fn()} />)
 
-    expect(
-      screen.getByRole('button', { name: 'How do I get started?' })
-        .parentElement
-    ).toHaveStyle({ backgroundColor: '#F1F0EE' })
+    const firstFaq = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    // eslint-disable-next-line testing-library/no-node-access -- the wrapper class is a deliberate DOM contract with no semantic query.
+    expect(firstFaq.parentElement).toHaveStyle({
+      backgroundColor: '#F1F0EE',
+    })
     expect(
       screen.getAllByRole('button').map((button) => button.textContent)
     ).toEqual(['How do I get started?', 'What payment methods do you accept?'])
@@ -155,6 +161,7 @@ describe('FaqList', () => {
       />
     )
 
+    // eslint-disable-next-line testing-library/no-node-access -- the component shell wrapper has no semantic query.
     expect(container.firstElementChild).toHaveClass('faq-list-custom-class')
   })
 
@@ -180,7 +187,8 @@ describe('FaqList', () => {
     expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(1)
   })
 
-  it('passes the clicked FAQ id and marks only its matching row as loading', () => {
+  it('passes the clicked FAQ id and marks only its matching row as loading', async () => {
+    const user = userEvent.setup()
     const onFaqClick = vi.fn()
     renderWithProviders(
       <FaqList faqs={faqs} onFaqClick={onFaqClick} loadingFaqId="second" />
@@ -197,8 +205,8 @@ describe('FaqList', () => {
     expect(firstButton).not.toHaveClass('opacity-50', 'cursor-not-allowed')
     expect(secondButton).toHaveClass('opacity-50', 'cursor-not-allowed')
 
-    fireEvent.click(firstButton)
-    fireEvent.click(secondButton)
+    await user.click(firstButton)
+    await user.click(secondButton)
     expect(onFaqClick).toHaveBeenCalledTimes(1)
     expect(onFaqClick).toHaveBeenCalledWith('first')
   })

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../test/utils'
+import {
+  userEvent,
+  renderWithProviders,
+  screen,
+  fireEvent,
+} from '../../test/utils'
 
 import { AUDIO_BG_CLASS } from './components/_shared/CardThumbnail'
 
@@ -28,6 +33,7 @@ describe('LinkAttachment.Received (link previews)', () => {
   })
 
   it('renders as a button when no URL is set and onClick is provided', async () => {
+    const user = userEvent.setup()
     const handleClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Received
@@ -38,11 +44,12 @@ describe('LinkAttachment.Received (link previews)', () => {
     )
     const root = await screen.findByTestId('link-attachment')
     expect(root.tagName).toBe('BUTTON')
-    fireEvent.click(root)
+    await user.click(root)
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
 
   it('routes the card-level onClick through the CTA when one is set', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     const ctaOnClick = vi.fn()
     renderWithProviders(
@@ -53,7 +60,7 @@ describe('LinkAttachment.Received (link previews)', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(await screen.findByText('View FAQs'))
+    await user.click(await screen.findByText('View FAQs'))
     expect(onClick).toHaveBeenCalledTimes(1)
     expect(ctaOnClick).toHaveBeenCalledTimes(1)
   })
@@ -93,6 +100,7 @@ describe('LinkAttachment.Received (link previews)', () => {
 
 describe('LinkAttachment.Sent', () => {
   it('renders the dark variant as an external link when url is set', async () => {
+    const user = userEvent.setup()
     const handleClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Sent
@@ -107,7 +115,7 @@ describe('LinkAttachment.Sent', () => {
     expect(link.getAttribute('href')).toBe('https://tr.ee/briemix')
     expect(link.getAttribute('target')).toBe('_blank')
     expect(link.getAttribute('rel')).toBe('noopener noreferrer')
-    fireEvent.click(link)
+    await user.click(link)
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
 
@@ -480,7 +488,8 @@ const HERO = 'https://cdn.example.com/yoga.jpg'
 const shellOf = () => screen.getByTestId(/^link-(card|attachment)$/)
 
 describe('LinkAttachment.Composer chrome', () => {
-  it('anchors the dismiss control to the hero on a featured card', () => {
+  it('anchors the dismiss control to the hero on a featured card', async () => {
+    const user = userEvent.setup()
     const onDismiss = vi.fn()
     renderWithProviders(
       <LinkAttachment.Composer
@@ -496,7 +505,7 @@ describe('LinkAttachment.Composer chrome', () => {
     expect(dismiss.className).toContain('before:-inset-[10px]')
     // Hover lifts the fill so the control is not identical to its rest state.
     expect(dismiss.className).toContain('hover:bg-[#2a2928]')
-    fireEvent.click(dismiss)
+    await user.click(dismiss)
     expect(onDismiss).toHaveBeenCalledTimes(1)
   })
 
@@ -563,12 +572,13 @@ describe('LinkAttachment.Composer chrome', () => {
     expect(screen.queryByLabelText('Dismiss attachment')).toBeNull()
   })
 
-  it('renders the edit affordance only when a handler is given', () => {
+  it('renders the edit affordance only when a handler is given', async () => {
+    const user = userEvent.setup()
     const onEditClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Composer title="Brie’s FAQ" onEditClick={onEditClick} />
     )
-    fireEvent.click(screen.getByLabelText('Edit attachment'))
+    await user.click(screen.getByLabelText('Edit attachment'))
     expect(onEditClick).toHaveBeenCalledTimes(1)
     expect(screen.queryByLabelText('Dismiss attachment')).toBeNull()
   })
@@ -580,7 +590,8 @@ describe('LinkAttachment.Composer chrome', () => {
 })
 
 describe('LinkAttachment interactivity contract', () => {
-  it('keeps the Received shell non-interactive around playable media', () => {
+  it('keeps the Received shell non-interactive around playable media', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Received
@@ -594,7 +605,7 @@ describe('LinkAttachment interactivity contract', () => {
     // The native controls own clicks, so the shell is neither anchor nor button.
     const root = screen.getByTestId('link-attachment')
     expect(root.tagName).toBe('DIV')
-    fireEvent.click(root)
+    await user.click(root)
     expect(onClick).not.toHaveBeenCalled()
   })
 
@@ -642,18 +653,20 @@ describe('LinkAttachment interactivity contract', () => {
     )
   })
 
-  it('ignores the Sent onClick when there is nothing to open', () => {
+  it('ignores the Sent onClick when there is nothing to open', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Sent title="My Playlist" onClick={onClick} />
     )
     const shell = shellOf()
     expect(shell.tagName).toBe('DIV')
-    fireEvent.click(shell)
+    await user.click(shell)
     expect(onClick).not.toHaveBeenCalled()
   })
 
-  it('ignores the Sent onClick around playable media', () => {
+  it('ignores the Sent onClick around playable media', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Sent
@@ -666,7 +679,7 @@ describe('LinkAttachment interactivity contract', () => {
     )
     const shell = shellOf()
     expect(shell.tagName).toBe('DIV')
-    fireEvent.click(shell)
+    await user.click(shell)
     expect(onClick).not.toHaveBeenCalled()
   })
 })

package/src/components/LinkAttachment/components/_shared/BubbleTail.test.tsx

@@ -27,6 +27,7 @@ describe('BubbleTail', () => {
     expect(tail.parentElement?.className).toBe('relative isolate w-fit')
     expect(tail.getAttribute('aria-hidden')).toBe('true')
     // The tail follows the card so it paints over the card's bottom edge.
+    // eslint-disable-next-line testing-library/no-node-access -- sibling placement is the deliberate visual DOM contract.
     expect(screen.getByText('card').nextElementSibling).toBe(tail)
   })
 

package/src/components/LinkAttachment/components/_shared/CardBody.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../../../test/utils'
 
 import CardBody from './CardBody'
 
@@ -154,9 +154,8 @@ describe('CardBody', () => {
     )
     const icon = screen.getByTestId('app-icon')
     const title = screen.getByText('Spotify')
-    expect(
-      icon.compareDocumentPosition(title) & Node.DOCUMENT_POSITION_FOLLOWING
-    ).toBeTruthy()
+    const content = screen.getAllByText(/^(icon|Spotify)$/)
+    expect(content.indexOf(icon)).toBeLessThan(content.indexOf(title))
     expect(screen.getByText('Edit')).toBeInTheDocument()
   })
 
@@ -192,7 +191,8 @@ describe('CardBody', () => {
     expect(container).not.toBeEmptyDOMElement()
   })
 
-  it('keeps the cta interactive alongside the chin text', () => {
+  it('keeps the cta interactive alongside the chin text', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <CardBody
@@ -201,7 +201,7 @@ describe('CardBody', () => {
         cta={{ label: 'View FAQs', onClick }}
       />
     )
-    fireEvent.click(screen.getByText('View FAQs'))
+    await user.click(screen.getByText('View FAQs'))
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 })

package/src/components/LinkAttachment/components/_shared/CardCta.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../../../test/utils'
 
 import CardCta from './CardCta'
 
@@ -37,7 +37,8 @@ describe('CardCta', () => {
     ['button', undefined],
   ])(
     'fires the cta callback from the %s without bubbling to the card',
-    (_shape, href) => {
+    async (_shape, href) => {
+      const user = userEvent.setup()
       const ctaOnClick = vi.fn()
       const cardOnClick = vi.fn()
       renderWithProviders(
@@ -49,7 +50,7 @@ describe('CardCta', () => {
           />
         </div>
       )
-      fireEvent.click(screen.getByText('Act'))
+      await user.click(screen.getByText('Act'))
       expect(ctaOnClick).toHaveBeenCalledTimes(1)
       expect(cardOnClick).not.toHaveBeenCalled()
     }
@@ -58,7 +59,8 @@ describe('CardCta', () => {
   it.each([
     ['anchor', 'tr.ee/faq'],
     ['button', undefined],
-  ])('tolerates a %s cta with no callback', (_shape, href) => {
+  ])('tolerates a %s cta with no callback', async (_shape, href) => {
+    const user = userEvent.setup()
     const cardOnClick = vi.fn()
     renderWithProviders(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- stands in for the card anchor the CTA must not bubble to
@@ -66,7 +68,7 @@ describe('CardCta', () => {
         <CardCta variant="light" cta={{ label: 'Act', href }} />
       </div>
     )
-    fireEvent.click(screen.getByText('Act'))
+    await user.click(screen.getByText('Act'))
     expect(cardOnClick).not.toHaveBeenCalled()
   })
 
@@ -88,6 +90,7 @@ describe('CardCta', () => {
   it('renders the label verbatim, without a wrapper span, by default', () => {
     renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
     const cta = screen.getByText('Act')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(cta.querySelector('span')).toBeNull()
   })
 

package/src/components/LinkAttachment/components/_shared/CardShell.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../../../test/utils'
 
 import CardShell, { LOADING_LABEL } from './CardShell'
 
@@ -20,7 +20,8 @@ describe('CardShell', () => {
     expect(shell.getAttribute('data-variant')).toBe('light')
   })
 
-  it('renders an external anchor when href is set and fires onClick alongside navigation', () => {
+  it('renders an external anchor when href is set and fires onClick alongside navigation', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <CardShell
@@ -38,11 +39,12 @@ describe('CardShell', () => {
     expect(shell.getAttribute('target')).toBe('_blank')
     expect(shell.getAttribute('rel')).toBe('noopener noreferrer')
     expect(shell.className).toContain('focus-ring')
-    fireEvent.click(shell)
+    await user.click(shell)
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('renders a labelled button when onClick is set without href', () => {
+  it('renders a labelled button when onClick is set without href', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <CardShell
@@ -58,7 +60,7 @@ describe('CardShell', () => {
     expect(shell.tagName).toBe('BUTTON')
     expect(shell.getAttribute('type')).toBe('button')
     expect(shell.getAttribute('aria-label')).toBe('Open attachment preview')
-    fireEvent.click(shell)
+    await user.click(shell)
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 

package/src/components/LinkAttachment/components/_shared/CardThumbnail.test.tsx

@@ -1,12 +1,7 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import {
-  cleanup,
-  renderWithProviders,
-  screen,
-  fireEvent,
-} from '../../../../test/utils'
+import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
 
 import CardThumbnail, {
   AUDIO_BG_CLASS,
@@ -207,7 +202,7 @@ describe('CardThumbnail', () => {
   })
 
   it('pins the corner slots and omits their wrappers when unused', () => {
-    renderWithProviders(
+    const { unmount } = renderWithProviders(
       <CardThumbnail
         variant="dark"
         topLeft={<span>left</span>}
@@ -223,7 +218,7 @@ describe('CardThumbnail', () => {
     expect(topRight.className).toContain('absolute right-3 top-3')
     /* eslint-enable local/no-style-only-assertion */
 
-    cleanup()
+    unmount()
     renderWithProviders(<CardThumbnail variant="dark" />)
     expect(
       screen.queryByTestId('card-thumbnail-top-left')