chore: try perf test using reassure

Author: khushal87

package/.gitignore

@@ -32,3 +32,4 @@ xcuserdata
 coverage/
 
 #################################################################################################
+.reassure/

package/jest-setup.js

@@ -4,6 +4,10 @@ import { FlatList, View } from 'react-native';
 import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js';
 
 import { registerNativeHandlers } from './src/native';
+import { configure } from 'reassure';
+
+// For performance tests using reassure
+configure({ testingLibrary: 'react-native' });
 
 // eslint-disable-next-line no-underscore-dangle
 

package/src/components/ChannelList/__tests__/ChannelList.perf-test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { cleanup } from '@testing-library/react-native';
+import { measureRenders } from 'reassure';
+
+import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateChannel1, generateMember } from '../../../mock-builders/generator/channel';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelList } from '../ChannelList';
+
+describe('ChannelList', () => {
+  let chatClient;
+  let testChannel1;
+  let testChannel2;
+  let member;
+
+  beforeEach(async () => {
+    jest.clearAllMocks();
+    chatClient = await getTestClientWithUser({ id: 'khushal' });
+    const user = generateUser({ id: 'khushal' });
+    member = generateMember({ user });
+    testChannel1 = generateChannel1({ members: [member] });
+    testChannel2 = generateChannel1({ members: [member] });
+  });
+
+  afterEach(cleanup);
+
+  test('ChannelList 10 times', async () => {
+    useMockedApis(chatClient, [queryChannelsApi([testChannel1, testChannel2])]);
+
+    const scenario = async () => {};
+    const props = {
+      filters: {},
+    };
+
+    await measureRenders(<ChannelList filters={props.filters} />, {
+      wrapper: ({ children }) => <Chat client={chatClient}>{children}</Chat>,
+    });
+  });
+});

package/src/mock-builders/generator/channel.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { Channel, ChannelResponse } from 'stream-chat';
 import { v4 as uuidv4 } from 'uuid';
 
 import { generateUser, getUserDefaults } from './user';
@@ -92,6 +93,74 @@ export const generateChannel = (customValues: { [key: string]: any }) =>
     return { ...accumulated, [current]: customValues[current] };
   }, getChannelDefaults());
 
+export const generateChannel1 = (options: { channel: any; config: any; members: any }) => {
+  const { channel: optionsChannel, config, ...optionsBesidesChannel } = options;
+  const idFromOptions = optionsChannel && optionsChannel.id;
+  const type = (optionsChannel && optionsChannel.type) || 'messaging';
+  const id = idFromOptions
+    ? idFromOptions
+    : options.members && options.members.length
+    ? `!members-${uuidv4()}`
+    : uuidv4();
+  return {
+    ...optionsBesidesChannel,
+    messages: [],
+    members: [],
+    channel: {
+      type,
+      id,
+      created_at: '2020-04-28T11:20:48.578147Z',
+      updated_at: '2020-04-28T11:20:48.578147Z',
+      created_by: {
+        id: 'vishal',
+        role: 'user',
+        created_at: '2020-04-27T13:05:13.847572Z',
+        updated_at: '2020-04-28T11:21:08.357468Z',
+        last_active: '2020-04-28T11:21:08.353026Z',
+        banned: false,
+        online: false,
+      },
+      frozen: false,
+      config: {
+        created_at: '2020-04-24T11:36:43.859020368Z',
+        updated_at: '2020-04-24T11:36:43.859022903Z',
+        name: 'messaging',
+        typing_events: true,
+        read_events: true,
+        connect_events: true,
+        search: true,
+        reactions: true,
+        replies: true,
+        mutes: true,
+        uploads: true,
+        url_enrichment: true,
+        message_retention: 'infinite',
+        max_message_length: 5000,
+        automod: 'disabled',
+        automod_behavior: 'flag',
+        commands: [
+          {
+            name: 'giphy',
+            description: 'Post a random gif to the channel',
+            args: '[text]',
+            set: 'fun_set',
+          },
+        ],
+        ...config,
+      },
+      ...optionsChannel,
+    },
+  };
+};
+
+export const generateMember = (options: { user: { id: string } }) => ({
+  user_id: options.user.id,
+  is_moderator: false,
+  invited: false,
+  role: 'member',
+  ...options,
+});
+
 export const generateChannelResponse = (
   customValues: {
     channel?: Record<string, any>;

package/src/utils/benchmark/addChannels.js

@@ -0,0 +1,107 @@
+const StreamChat = require('stream-chat').StreamChat;
+
+const client = StreamChat.getInstance('nq447pefn5by');
+const user = {
+  id: 'khushalagarwalgetstreamio',
+  token:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoia2h1c2hhbGFnYXJ3YWxnZXRzdHJlYW1pbyJ9.9ZQA9dwRDagqmRJ-EPr8yKtnIR_O--GjKeXQ3-XLIoA',
+};
+
+async function connectUserAndCreateChannels() {
+  try {
+    await client.connectUser({ id: user.id }, user.token);
+    console.log('User Connected');
+    await createPollAndSendToChannel();
+  } catch (err) {
+    console.error('Error connecting user:', err);
+  }
+}
+
+async function deleteAllChannels() {
+  const channels = await client.queryChannels(
+    {
+      type: 'messaging',
+    },
+    {},
+    { limit: 100 },
+  );
+  for (const channel of channels) {
+    await channel.delete();
+    console.log(`Channel ${channel.id} deleted`);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+}
+
+async function createChannelsWithThrottle(index) {
+  if (index >= 10) {
+    console.log('All channels created!');
+    return;
+  }
+
+  try {
+    const channel = client.channel('messaging', `channel-${index}`, {
+      name: `Channel ${index}`,
+      members: [user.id, 'tommaso-80'],
+    });
+
+    await channel.create(); // Wait for channel creation
+    await channel.sendMessage({ text: `Channel ${index}! This is a test message.` });
+    console.log(`Channel ${index} created and message sent!`);
+
+    setTimeout(() => createChannelsWithThrottle(index + 1), 500); // Schedule next channel
+  } catch (err) {
+    console.error(`Error creating Channel ${index}:`, err);
+
+    // Retry with exponential backoff
+    setTimeout(() => createChannelsWithThrottle(index), 500);
+  }
+}
+
+async function sendReactionToAMessage() {
+  for (let i = 0; i < 100; i++) {
+    const channel = client.channel('messaging', 'sample-app-channel-3');
+    await channel.watch();
+    const message = await channel.sendMessage({ text: 'Hello, world!' });
+    const reaction = await channel.sendReaction(message.message.id, {
+      type: 'love',
+      user_id: `tommaso-${i}`,
+    });
+    console.log(`Reaction sent to message ${message.message.id} for user ${user.id}`);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+}
+
+const createPollAndSendToChannel = async () => {
+  const channel = client.channel('messaging', 'sample-app-channel-0');
+  await channel.watch();
+  const poll = await client.polls.createPoll({
+    allow_answers: true,
+    name: 'What is the best Framework?',
+    enforce_unique_vote: false,
+    options: [
+      { text: 'Option 1' },
+      { text: 'Option 2' },
+      { text: 'Option 3' },
+      { text: 'Option 4' },
+      { text: 'Option 5' },
+    ],
+  });
+  const message = await channel.sendMessage({ poll_id: poll.id });
+  console.log('Poll created and sent to channel:', poll.id, poll.state.getLatestValue().options);
+};
+
+const castPollVotes = async () => {
+  for (let i = 0; i < 96; i++) {
+    await client.castPollVote(
+      '25d2e42a-1c9d-4a1f-9844-385c49fdd0b1',
+      'eb3356ee-4e71-4cd3-a6f8-fe95d8055dc2',
+      {
+        option_id: 'e858b508-7099-4368-8832-66504f863ed8',
+      },
+      `tommaso-${i}`,
+    );
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+};
+
+connectUserAndCreateChannels();