chore: improve type safety and clean up stale props in test files (#3070)

## Summary

- Add type annotations to ~140 untyped `let` declarations across 30+
test files
- Fix all 46 TS2345 errors (incomplete data passed where full types
expected) using `fromPartial()` from `@total-typescript/shoehorn`
- Replace 410 of 435 `as any` casts with proper types —
`fromPartial<Type>()`, specific type assertions, or removed as
unnecessary
- Fix `markReadApi` mock builder bug: `last_read_message_id` was
returning a full message object instead of a string ID, and `duration`
was a number instead of a string
- Remove stale props passed to components that no longer accept them:
- `ChannelList`: `channel`, `setActiveChannel`,
`additionalChannelSearchProps`
- `ChannelListUI`: `LoadingErrorIndicator`, `LoadingIndicator` (moved to
`ComponentProvider`)
- `MessageList`: `hasMoreNewer`, `highlightedMessageId` (moved to
`ChannelStateContext`)
- `Message`: `getMessageActions`, `isMyMessage` (belong to
`MessageContextValue`, not `MessageProps`)
- `MessageUI`: `channelConfig` (already provided via
`ChannelStateContext`)
  - `Thread`: `propName`, `read` in `additionalMessageListProps`
- Fix ChannelList delete/hidden tests that were passing for the wrong
reason (asserting on mount call instead of event call)

## Test plan

- [x] `yarn lint-fix` passes (verified locally, enforced by pre-commit
hook)
- [ ] `yarn types` passes
- [ ] `yarn test` passes — all existing tests remain green with no
behavioral changes
- [ ] Only 25 `as any` casts remain, all justified (browser global mocks
like `window.ResizeObserver`, `navigator.mediaDevices`, and intentional
invalid-input tests)

Author: oliverlaz

src/components/Attachment/__tests__/Audio.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 import { Audio } from '../Audio';
 import {
@@ -126,7 +127,7 @@ describe('Audio', () => {
     const { getByTestId } = renderComponent({ og: audioAttachment });
     await clickToPlay();
     vi.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockImplementationOnce(
-      () => ({ width: 120, x: 0 }) as any,
+      () => fromPartial<DOMRect>({ width: 120, x: 0 }),
     );
 
     vi.spyOn(HTMLAudioElement.prototype, 'currentTime', 'set').mockImplementationOnce(

src/components/Attachment/__tests__/Card.test.tsx

@@ -25,6 +25,7 @@ import {
   mockTranslationContextValue,
   useMockedApis,
 } from '../../../mock-builders';
+import type { GenerateChannelOptions } from '../../../mock-builders';
 import { WithAudioPlayback } from '../../AudioPlayback';
 
 let chatClient: StreamChat;
@@ -36,11 +37,13 @@ vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {}
 vi.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation(() => {});
 const channelActionContext = fromPartial<ChannelActionContextValue>({});
 
-const mockedChannel = generateChannel({
-  members: [generateMember({ user })],
-  messages: [],
-  threads: [],
-} as any);
+const mockedChannel = generateChannel(
+  fromPartial<GenerateChannelOptions>({
+    members: [generateMember({ user })],
+    messages: [],
+    threads: [],
+  }),
+);
 
 const renderCard = ({ cardProps, chatContext, theRenderer = render }: any) =>
   theRenderer(

src/components/Attachment/__tests__/Geolocation.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import { act, render, type RenderResult, screen } from '@testing-library/react';
 import { Channel } from '../../Channel';
 import { Chat } from '../../Chat';
 import { Geolocation } from '../Geolocation';
@@ -43,7 +43,7 @@ const renderComponent = async (
     channels: [defaultChannel],
     client: defaultClient,
   } = await initClientWithChannels({ customUser: ownUser });
-  let result;
+  let result: RenderResult;
   await act(() => {
     result = render(
       <Chat client={client ?? defaultClient}>

src/components/Attachment/__tests__/VoiceRecording.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 import {
   generateMessage,
@@ -23,18 +24,20 @@ const attachment = generateVoiceRecordingAttachment();
 
 (window as any).ResizeObserver = ResizeObserverMock;
 
-vi.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockReturnValue({
-  width: 120,
-} as any);
+vi.spyOn(HTMLDivElement.prototype, 'getBoundingClientRect').mockReturnValue(
+  fromPartial<DOMRect>({
+    width: 120,
+  }),
+);
 
 const clickPlay = async () => {
   await act(async () => {
     await fireEvent.click(screen.queryByTestId('play-audio'));
   });
 };
 
-vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(
-  () => undefined as any,
+vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() =>
+  Promise.resolve(),
 );
 vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
 
@@ -111,8 +114,8 @@ describe('VoiceRecording', () => {
 describe('VoiceRecordingPlayer', () => {
   beforeAll(() => {
     vi.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
-    vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(
-      () => undefined as any,
+    vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() =>
+      Promise.resolve(),
     );
     vi.spyOn(window.HTMLMediaElement.prototype, 'canPlayType').mockReturnValue('maybe');
   });

src/components/AudioPlayback/__tests__/AudioPlayer.test.ts

@@ -177,7 +177,7 @@ describe('AudioPlayer', () => {
     const { onError, plugin } = makeErrorPlugin();
     const player = makePlayer({ plugins: [plugin] });
 
-    let resolve;
+    let resolve: (value: void | PromiseLike<void>) => void;
     // attach and stub play to a pending promise
     player['ensureElementRef']();
     vi.spyOn(player.elementRef, 'play').mockImplementation(
@@ -205,7 +205,7 @@ describe('AudioPlayer', () => {
     const { onError, plugin } = makeErrorPlugin();
     const player = makePlayer({ plugins: [plugin] });
 
-    let resolve;
+    let resolve: (value: void | PromiseLike<void>) => void;
     player['ensureElementRef']();
     vi.spyOn(player.elementRef, 'play').mockImplementation(
       () =>

src/components/AudioPlayback/__tests__/WithAudioPlayback.test.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { act, cleanup, render } from '@testing-library/react';
 
 import { useAudioPlayer, WithAudioPlayback } from '../WithAudioPlayback';
+import type { AudioPlayer } from '../AudioPlayer';
 
 // mock context used by WithAudioPlayback
 vi.mock('../../../context', () => {
@@ -96,7 +97,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
     'allowConcurrentPlayback is %s',
     (allowConcurrentPlayback) => {
       it('useAudioPlayer returns undefined when src is missing', () => {
-        let seen;
+        let seen: AudioPlayer | undefined;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: <RegisterPlayer onReady={(p) => (seen = p)} params={{}} />,
@@ -105,7 +106,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('creates an AudioPlayer when src is provided and does not associate audio element until played', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -159,7 +160,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('subscriptions: sets secondsElapsed and progress in state on timeupdate Event ', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -186,7 +187,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('subscriptions: resets playback state on Event "ended"', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -221,7 +222,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('subscriptions: error with MediaError.code=4 logs and sets canPlayRecord=false', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -261,7 +262,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('registerError mapping: failed-to-start -> translated message and notification', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -284,7 +285,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('registerError mapping: not-playable / seek-not-supported', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -311,7 +312,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('registerError uses raw Error message if provided', () => {
-        let player;
+        let player: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -331,7 +332,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('unmounting WithAudioPlayback clears pool: element src is cleared and load() called', () => {
-        let player;
+        let player: AudioPlayer;
         const { unmount } = renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -354,7 +355,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       });
 
       it('unmounting WithAudioPlayback unsubscribes audio element listeners and pauses', () => {
-        let player;
+        let player: AudioPlayer;
         const { unmount } = renderWithProvider({
           allowConcurrentPlayback,
           ui: (
@@ -384,7 +385,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       it('re-mounting provider with same props creates a fresh player and cleans previous element', () => {
         const params = { mimeType: 'audio/mpeg', src: 'https://example.com/a.mp3' };
 
-        let firstPlayer;
+        let firstPlayer: AudioPlayer;
         const { unmount } = renderWithProvider({
           allowConcurrentPlayback,
           ui: <RegisterPlayer onReady={(p) => (firstPlayer = p)} params={params} />,
@@ -402,7 +403,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
         expect(firstPlayer.elementRef).toBeNull();
 
         // New provider -> new pool -> new player + new <audio>
-        let secondPlayer;
+        let secondPlayer: AudioPlayer;
         renderWithProvider({
           allowConcurrentPlayback,
           ui: <RegisterPlayer onReady={(p) => (secondPlayer = p)} params={params} />,

src/components/AudioPlayback/plugins/__tests__/AudioPlayerNotificationsPlugin.test.ts

@@ -1,8 +1,10 @@
 import { fromPartial } from '@total-typescript/shoehorn';
+import type { StreamChat } from 'stream-chat';
+import type { TFunction } from 'i18next';
 import { audioPlayerNotificationsPluginFactory } from '../AudioPlayerNotificationsPlugin';
 
 describe('audioPlayerNotificationsPluginFactory', () => {
-  const t = (s: any) => s;
+  const t: TFunction = ((s: string) => s) as TFunction;
 
   const makeClient = () => {
     const addError = vi.fn();
@@ -15,8 +17,8 @@ describe('audioPlayerNotificationsPluginFactory', () => {
   it('reports mapped error messages for known errCodes', () => {
     const { addError, client } = makeClient();
     const plugin = audioPlayerNotificationsPluginFactory({
-      client: client as any,
-      t: t as any,
+      client: fromPartial<StreamChat>(client),
+      t,
     });
 
     // simulate failed-to-start
@@ -44,8 +46,8 @@ describe('audioPlayerNotificationsPluginFactory', () => {
   it('falls back to provided Error if no errCode', () => {
     const { addError, client } = makeClient();
     const plugin = audioPlayerNotificationsPluginFactory({
-      client: client as any,
-      t: t as any,
+      client: fromPartial<StreamChat>(client),
+      t,
     });
 
     plugin.onError?.({ error: new Error('X-Error'), player: fromPartial({}) });
@@ -57,8 +59,8 @@ describe('audioPlayerNotificationsPluginFactory', () => {
   it('falls back to generic message if no errCode and no Error', () => {
     const { addError, client } = makeClient();
     const plugin = audioPlayerNotificationsPluginFactory({
-      client: client as any,
-      t: t as any,
+      client: fromPartial<StreamChat>(client),
+      t,
     });
 
     plugin.onError?.({ player: fromPartial({}) });