chore: type mockClient with StreamChat and use vi.spyOn for public methods

- Type connectUser and mockClient params as StreamChat instead of any
- Use bracket notation for internal properties (_user, connectionId,
  userToken) that are on the StreamChat type but not public API
- Replace direct method assignments (client.muteUser = mock) with
  vi.spyOn(client, 'muteUser').mockImplementation() in Message.test.tsx
  (12 occurrences) — proper spy pattern for public methods
- Type ThreadStart client variable as StreamChat

Author: oliverlaz

src/components/Message/__tests__/Message.test.tsx

@@ -384,7 +384,7 @@ describe('<Message /> component', () => {
     const muteUser = vi.fn(() => Promise.resolve());
     const userMutedNotification = 'User muted!';
     const getMuteUserSuccessNotification = vi.fn(() => userMutedNotification);
-    client.muteUser = muteUser as any;
+    vi.spyOn(client, 'muteUser').mockImplementation(muteUser as any);
     let context;
 
     await renderComponent({
@@ -412,7 +412,7 @@ describe('<Message /> component', () => {
     const client = await getTestClientWithUser(alice);
     const addSuccessSpy = vi.spyOn(client.notifications, 'addSuccess');
     const muteUser = vi.fn(() => Promise.resolve());
-    client.muteUser = muteUser as any;
+    vi.spyOn(client, 'muteUser').mockImplementation(muteUser as any);
     let context;
 
     await renderComponent({
@@ -441,7 +441,7 @@ describe('<Message /> component', () => {
     const muteUser = vi.fn(() => Promise.reject());
     const userMutedFailNotification = 'User mute failed!';
     const getMuteUserErrorNotification = vi.fn(() => userMutedFailNotification);
-    client.muteUser = muteUser as any;
+    vi.spyOn(client, 'muteUser').mockImplementation(muteUser as any);
     let context;
 
     await renderComponent({
@@ -470,7 +470,7 @@ describe('<Message /> component', () => {
     const addErrorSpy = vi.spyOn(client.notifications, 'addError');
     const muteUser = vi.fn(() => Promise.reject());
     const defaultFailNotification = 'Error muting a user ...';
-    client.muteUser = muteUser as any;
+    vi.spyOn(client, 'muteUser').mockImplementation(muteUser as any);
     let context;
 
     await renderComponent({
@@ -499,7 +499,7 @@ describe('<Message /> component', () => {
     const unmuteUser = vi.fn(() => Promise.resolve());
     const userUnmutedNotification = 'User unmuted!';
     const getMuteUserSuccessNotification = vi.fn(() => userUnmutedNotification);
-    client.unmuteUser = unmuteUser as any;
+    vi.spyOn(client, 'unmuteUser').mockImplementation(unmuteUser as any);
     let context;
 
     await renderComponent({
@@ -528,7 +528,7 @@ describe('<Message /> component', () => {
     const addSuccessSpy = vi.spyOn(client.notifications, 'addSuccess');
     const unmuteUser = vi.fn(() => Promise.resolve());
     const defaultSuccessNotification = '{{ user }} has been unmuted';
-    client.unmuteUser = unmuteUser as any;
+    vi.spyOn(client, 'unmuteUser').mockImplementation(unmuteUser as any);
     let context;
 
     await renderComponent({
@@ -557,7 +557,7 @@ describe('<Message /> component', () => {
     const unmuteUser = vi.fn(() => Promise.reject());
     const userMutedFailNotification = 'User muted failed!';
     const getMuteUserErrorNotification = vi.fn(() => userMutedFailNotification);
-    client.unmuteUser = unmuteUser as any;
+    vi.spyOn(client, 'unmuteUser').mockImplementation(unmuteUser as any);
     let context;
 
     await renderComponent({
@@ -586,7 +586,7 @@ describe('<Message /> component', () => {
     const addErrorSpy = vi.spyOn(client.notifications, 'addError');
     const unmuteUser = vi.fn(() => Promise.reject());
     const defaultFailNotification = 'Error unmuting a user ...';
-    client.unmuteUser = unmuteUser as any;
+    vi.spyOn(client, 'unmuteUser').mockImplementation(unmuteUser as any);
     let context;
 
     await renderComponent({
@@ -778,7 +778,7 @@ describe('<Message /> component', () => {
     const client = await getTestClientWithUser(alice);
     const addSuccessSpy = vi.spyOn(client.notifications, 'addSuccess');
     const flagMessage = vi.fn(() => Promise.resolve());
-    client.flagMessage = flagMessage as any;
+    vi.spyOn(client, 'flagMessage').mockImplementation(flagMessage as any);
     const messageFlaggedNotification = 'Message flagged!';
     const getFlagMessageSuccessNotification = vi.fn(() => messageFlaggedNotification);
     let context;
@@ -807,7 +807,7 @@ describe('<Message /> component', () => {
     const client = await getTestClientWithUser(alice);
     const addSuccessSpy = vi.spyOn(client.notifications, 'addSuccess');
     const flagMessage = vi.fn(() => Promise.resolve());
-    client.flagMessage = flagMessage as any;
+    vi.spyOn(client, 'flagMessage').mockImplementation(flagMessage as any);
     const defaultSuccessNotification = 'Message has been successfully flagged';
     let context;
 
@@ -834,7 +834,7 @@ describe('<Message /> component', () => {
     const client = await getTestClientWithUser(alice);
     const addErrorSpy = vi.spyOn(client.notifications, 'addError');
     const flagMessage = vi.fn(() => Promise.reject());
-    client.flagMessage = flagMessage as any;
+    vi.spyOn(client, 'flagMessage').mockImplementation(flagMessage as any);
     const messageFlagFailedNotification = 'Message flagged failed!';
     const getFlagMessageErrorNotification = vi.fn(() => messageFlagFailedNotification);
     let context;
@@ -863,7 +863,7 @@ describe('<Message /> component', () => {
     const client = await getTestClientWithUser(alice);
     const addErrorSpy = vi.spyOn(client.notifications, 'addError');
     const flagMessage = vi.fn(() => Promise.reject());
-    client.flagMessage = flagMessage as any;
+    vi.spyOn(client, 'flagMessage').mockImplementation(flagMessage as any);
     const defaultFlagMessageFailedNotification = 'Error adding flag';
     let context;
 

src/components/Thread/__tests__/ThreadStart.test.tsx

@@ -9,6 +9,7 @@ import {
   TranslationProvider,
 } from '../../../context';
 
+import type { StreamChat } from 'stream-chat';
 import {
   generateMessage,
   getTestClientWithUser,
@@ -17,7 +18,7 @@ import {
   mockTranslationContextValue,
 } from '../../../mock-builders';
 
-let client: any;
+let client: StreamChat;
 
 const mockedChannel = {
   off: vi.fn(),

src/mock-builders/index.ts

@@ -1,36 +1,34 @@
-/* eslint-disable no-underscore-dangle */
 import { StreamChat } from 'stream-chat';
 import type { UserResponse } from 'stream-chat';
 import { nanoid } from 'nanoid';
 
 const apiKey = 'API_KEY';
 const token = 'dummy_token';
 
-const connectUser = (client: any, user: Partial<UserResponse>) =>
+const connectUser = (client: StreamChat, user: Partial<UserResponse>) =>
   new Promise<void>((resolve) => {
-    client.connectionId = 'dumm_connection_id';
-    client.user = user;
-    client.user.mutes = [];
-    client._user = { ...user };
+    client['connectionId'] = 'dumm_connection_id';
+    client.user = { ...user, mutes: [] } as UserResponse;
+    client['_user'] = { ...user } as UserResponse;
     client.userID = user.id;
-    client.userToken = token;
-    client.wsPromise = Promise.resolve(true);
+    client['userToken'] = token;
+    client.wsPromise = Promise.resolve(true) as any;
     resolve();
   });
 
 const noop = () => {};
 
-function mockClient(client: any, mocks: Record<string, any> = {}) {
-  vi.spyOn(client, '_setToken').mockImplementation(noop);
-  vi.spyOn(client, '_setupConnection').mockImplementation(noop);
+function mockClient(client: StreamChat, mocks: Record<string, any> = {}) {
+  vi.spyOn(client, '_setToken').mockImplementation(noop as any);
+  vi.spyOn(client, '_setupConnection').mockImplementation(noop as any);
   vi.spyOn(client, 'getAppSettings').mockImplementation(mocks.getAppSettings ?? noop);
   vi.spyOn(client, 'queryReactions').mockImplementation(mocks.queryReactions ?? noop);
   client.tokenManager = {
     getToken: vi.fn(() => token),
     tokenReady: vi.fn(() => true),
-  };
-  client.connectUser = connectUser.bind(null, client);
-  return client as StreamChat;
+  } as any;
+  client['connectUser'] = connectUser.bind(null, client) as any;
+  return client;
 }
 
 export const getTestClient = (mocks?: Record<string, unknown>) =>