@linktr.ee/messaging-react 4.1.6 → 4.1.7-rc-1787179679

package/src/components/LinkAttachment/components/_shared/useChinPalette.test.ts

@@ -0,0 +1,162 @@
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { useChinPalette } from './useChinPalette'
+import type { ChinPaletteInput } from './useChinPalette'
+
+const THUMBNAIL = 'https://cdn.example.com/cover.jpg'
+
+const render = (input: ChinPaletteInput) =>
+  renderHook((props: ChinPaletteInput) => useChinPalette(props), {
+    initialProps: input,
+  })
+
+describe('useChinPalette', () => {
+  it('publishes a validated accent for a ready featured hero', () => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      thumbnailUrl: THUMBNAIL,
+    })
+    expect(result.current.accentHex).toBe('#7008E7')
+    expect(result.current.thumbnailUrl).toBe(THUMBNAIL)
+    expect(result.current.isLoading).toBe(false)
+  })
+
+  it('hashes a bare hex and tolerates surrounding whitespace', () => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor: '  7008E7  ',
+      thumbnailUrl: THUMBNAIL,
+    })
+    expect(result.current.accentHex).toBe('#7008E7')
+  })
+
+  it.each([
+    'rebeccapurple',
+    'rgb(112, 8, 231)',
+    '#12g',
+    '#1234',
+    '',
+    undefined,
+  ])('drops the unusable accent %s', (accentColor) => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor,
+      thumbnailUrl: THUMBNAIL,
+    })
+    expect(result.current.accentHex).toBeUndefined()
+  })
+
+  it('drops the accent for a classic card, which has no hero', () => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      layout: 'classic',
+      thumbnailUrl: THUMBNAIL,
+    })
+    expect(result.current.accentHex).toBeUndefined()
+  })
+
+  it.each(['loading', 'failed'] as const)(
+    'drops the accent while status is %s',
+    (status) => {
+      const { result } = render({
+        variant: 'dark',
+        accentColor: '#7008E7',
+        status,
+        thumbnailUrl: THUMBNAIL,
+      })
+      expect(result.current.accentHex).toBeUndefined()
+      expect(result.current.isLoading).toBe(status === 'loading')
+    }
+  )
+
+  it.each([undefined, ''])(
+    'drops the accent when the hero url is %s',
+    (thumbnailUrl) => {
+      const { result } = render({
+        variant: 'dark',
+        accentColor: '#7008E7',
+        thumbnailUrl,
+      })
+      expect(result.current.accentHex).toBeUndefined()
+    }
+  )
+
+  it('drops the accent for playable audio, whose hero is the player', () => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      thumbnailUrl: THUMBNAIL,
+      mimeType: 'audio/mpeg',
+      sourceUrl: 'https://cdn.example.com/clip.mp3',
+    })
+    expect(result.current.accentHex).toBeUndefined()
+  })
+
+  it('keeps the accent for playable video, whose poster is the hero', () => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      thumbnailUrl: THUMBNAIL,
+      mimeType: 'video/mp4',
+      sourceUrl: 'https://cdn.example.com/clip.mp4',
+    })
+    expect(result.current.accentHex).toBe('#7008E7')
+  })
+
+  it('withdraws the hero and its accent once the image fails', () => {
+    const { result } = render({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      thumbnailUrl: THUMBNAIL,
+    })
+    act(() => {
+      result.current.onImageError()
+    })
+    expect(result.current.thumbnailUrl).toBeUndefined()
+    expect(result.current.accentHex).toBeUndefined()
+  })
+
+  it('gives a new hero url a fresh chance to load', () => {
+    const { result, rerender } = render({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      thumbnailUrl: THUMBNAIL,
+    })
+    act(() => {
+      result.current.onImageError()
+    })
+    expect(result.current.accentHex).toBeUndefined()
+
+    rerender({
+      variant: 'dark',
+      accentColor: '#7008E7',
+      thumbnailUrl: 'https://cdn.example.com/other.jpg',
+    })
+    expect(result.current.thumbnailUrl).toBe(
+      'https://cdn.example.com/other.jpg'
+    )
+    expect(result.current.accentHex).toBe('#7008E7')
+  })
+
+  it.each([
+    ['dark', '#FFFFFF'],
+    ['light', '#040403'],
+  ] as const)('inks the %s surface with %s', (variant, ink) => {
+    const { result } = render({ variant })
+    expect(result.current.chinTextColor).toBe(ink)
+    expect(result.current.surface).toBe(variant)
+  })
+
+  it('treats the audio strip as a light surface on either side', () => {
+    const { result } = render({
+      variant: 'dark',
+      mimeType: 'audio/mpeg',
+      sourceUrl: 'https://cdn.example.com/clip.mp3',
+    })
+    expect(result.current.chinTextColor).toBe('#040403')
+    expect(result.current.surface).toBe('light')
+  })
+})

package/src/testing/createMockMessagingClient.ts

@@ -141,11 +141,11 @@ export function createMockMessagingClient({
   })
   // Read/unread bookkeeping consults channel mute status; without a live
   // connection the real method throws, so report "not muted".
-  channel.muteStatus = (() => ({
+  channel.muteStatus = () => ({
     muted: false,
     createdAt: null,
     expiresAt: null,
-  })) as any
+  })
 
   // Neutralise the rest of the connection-dependent channel API that
   // stream-chat-react calls during the chat lifecycle. Each of these POSTs to