fix: update stream-chat-js to version 6.5.0 containing the markRead fix, add E2E tests (#1514)

* fix: add lastRead argument to the countUnread method

* chore: upgrade package @ladle/react

* test: update fixtures.mjs and .env.example to accept additional channels

* refactor: rename .js files with JSX to .jsx

* test: added mark read test, moved ConnectedUser component

* ci: added additional channels variable

* refactor: remove unnecessary delay from test

* fix: revert Channel lastRead fix

* chore: update stream-chat-js package

* chore: update `stream-chat` peer dependency

* test: remove channel name from the URL regular expression

* ci: update checkout and cache to v3

* ci: add --ignore-scripts to yarn install

* test: fix race conditions

Author: arnautov-anton

.env.example

@@ -6,3 +6,4 @@ E2E_TEST_USER_2='test-user-2'
 E2E_TEST_USER_2_TOKEN='test-user-2-jwt'
 E2E_JUMP_TO_MESSAGE_CHANNEL='jump-to-message'
 E2E_ADD_MESSAGE_CHANNEL='add-message'
+E2E_ADDITIONAL_CHANNELS="mr-channel-1,mr-channel-2"

.github/workflows/ci.yml

@@ -25,16 +25,16 @@ jobs:
     runs-on: ubuntu-latest
     name: End-to-end tests
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: 💾 Cache Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ./node_modules
           key: ${{ runner.os }}-${{ matrix.node }}-modules-${{ hashFiles('**/yarn.lock') }}
 
       - name: 🔨 Install Dependencies & Build
-        run: yarn install --frozen-lockfile --ignore-engines
+        run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
 
       - name: ⚗️ End-to-end tests
         run: |
@@ -54,6 +54,7 @@ jobs:
           E2E_APP_SECRET: ${{ secrets.E2E_APP_SECRET }}
           E2E_TEST_USER_1_TOKEN: ${{ secrets.E2E_TEST_USER_1_TOKEN }}
           E2E_TEST_USER_2_TOKEN: ${{ secrets.E2E_TEST_USER_2_TOKEN }}
+          E2E_ADDITIONAL_CHANNELS: mr-channel-1, mr-channel-2
 
   test:
     runs-on: ubuntu-latest

e2e/fixtures.mjs

@@ -7,6 +7,7 @@ dotenv.config({ path: `.env.local` });
 (async () => {
   const {
     E2E_ADD_MESSAGE_CHANNEL,
+    E2E_ADDITIONAL_CHANNELS = '',
     E2E_APP_KEY,
     E2E_APP_SECRET,
     E2E_JUMP_TO_MESSAGE_CHANNEL,
@@ -27,6 +28,7 @@ dotenv.config({ path: `.env.local` });
     const channel = chat.channel('messaging', E2E_JUMP_TO_MESSAGE_CHANNEL, {
       created_by_id: E2E_TEST_USER_1,
       members: [E2E_TEST_USER_1, E2E_TEST_USER_2],
+      name: E2E_JUMP_TO_MESSAGE_CHANNEL,
     });
     await channel.create();
     await channel.truncate();
@@ -60,6 +62,23 @@ dotenv.config({ path: `.env.local` });
     await channel.create();
     await channel.truncate();
   }
+
+  // Create additional channels from .env
+  {
+    const additionalChannels = E2E_ADDITIONAL_CHANNELS.replace(/\s+/g, '').split(',');
+
+    for (const additionalChannel of additionalChannels) {
+      if (!additionalChannel || !additionalChannel.length) continue;
+      console.log(`Creating additional channel '${additionalChannel}'...`);
+      const channel = chat.channel('messaging', additionalChannel, {
+        created_by_id: E2E_TEST_USER_1,
+        members: [E2E_TEST_USER_1, E2E_TEST_USER_2],
+        name: additionalChannel,
+      });
+      await channel.create();
+      await channel.truncate();
+    }
+  }
 })();
 
 const printProgress = (progress) => {

e2e/mark-read.test.ts

@@ -0,0 +1,111 @@
+/* eslint-disable jest/no-done-callback */
+/* eslint-disable jest/require-top-level-describe */
+import { expect, test } from '@playwright/test';
+
+test.describe('mark read', () => {
+  test.beforeEach(async ({ baseURL, page }) => {
+    await page.goto(`${baseURL}/?story=mark-read--user1`, { waitUntil: 'networkidle' });
+
+    // wait for page load
+    await page.waitForSelector('data-testid=unread-count');
+
+    const channelListItems = page.locator('.str-chat__channel-list-messenger__main > div');
+
+    const listCount = await channelListItems.count();
+
+    for (let i = 1; i <= listCount; ++i) {
+      // select channel
+      await Promise.all([
+        page.waitForSelector(`.str-chat__main-panel >> text=mr-channel-${i}`),
+        page.click(`data-testid=channel-mr-channel-${i}`),
+      ]);
+
+      // truncate messages
+      await Promise.all([
+        page.waitForResponse((r) => r.url().includes('/truncate') && r.ok()),
+        page.click('data-testid=truncate'),
+      ]);
+
+      // add message to channel
+      await Promise.all([
+        page.waitForResponse((r) => r.url().includes('/message') && r.ok()),
+        page.click('data-testid=add-message'),
+      ]);
+    }
+
+    await page.goto(`${baseURL}/?story=mark-read--user2`, { waitUntil: 'networkidle' });
+    // wait for page load
+    await page.waitForSelector('data-testid=unread-count');
+  });
+
+  test('unread count in "mr-channel-1" channel is 1', async ({ page }) => {
+    const unreadCountSpan = page.locator(
+      'data-testid=channel-mr-channel-1 >> data-testid=unread-count',
+    );
+
+    await expect(unreadCountSpan).toHaveText('1');
+  });
+
+  test('unread count changes to 0 after setting "mr-channel-1" channel as active', async ({
+    page,
+  }) => {
+    await Promise.all([
+      page.waitForSelector('.str-chat__main-panel >> text=mr-channel-1'),
+      page.click('data-testid=channel-mr-channel-1'),
+    ]);
+
+    const unreadCountSpan = page.locator(
+      'data-testid=channel-mr-channel-1 >> data-testid=unread-count',
+    );
+
+    await expect(unreadCountSpan).toHaveText('0');
+  });
+
+  test('unread count stays 0 after switching channels', async ({ page }) => {
+    await Promise.all([
+      page.waitForSelector('.str-chat__main-panel >> text=mr-channel-1'),
+      page.click('data-testid=channel-mr-channel-1'),
+    ]);
+
+    await Promise.all([
+      page.waitForSelector('.str-chat__main-panel >> text=mr-channel-2'),
+      page.click('data-testid=channel-mr-channel-2'),
+    ]);
+
+    const unreadCountSpan1 = page.locator(
+      'data-testid=channel-mr-channel-1 >> data-testid=unread-count',
+    );
+
+    const unreadCountSpan2 = page.locator(
+      'data-testid=channel-mr-channel-2 >> data-testid=unread-count',
+    );
+
+    await expect(unreadCountSpan1).toHaveText('0');
+    await expect(unreadCountSpan2).toHaveText('0');
+  });
+
+  test('unread count stays 0 after switching channels and reloading page', async ({ page }) => {
+    await Promise.all([
+      page.waitForSelector('.str-chat__main-panel >> text=mr-channel-1'),
+      page.click('data-testid=channel-mr-channel-1'),
+    ]);
+
+    // click on channel-2 and await response
+    await Promise.all([
+      page.waitForResponse((r) => r.url().includes('/mr-channel-2/read') && r.ok()),
+      page.click('data-testid=channel-mr-channel-2'),
+    ]);
+
+    // reload the page
+    await Promise.all([
+      page.waitForSelector('data-testid=unread-count'),
+      page.reload({ waitUntil: 'networkidle' }),
+    ]);
+
+    const unreadCountSpan = page.locator(
+      'data-testid=channel-mr-channel-2 >> data-testid=unread-count',
+    );
+
+    await expect(unreadCountSpan).toHaveText('0');
+  });
+});

package.json

@@ -16,6 +16,7 @@
   "sideEffects": [
     "*.css"
   ],
+  "source": "src/index.tsx",
   "jsdelivr": "./dist/browser.full-bundle.min.js",
   "keywords": [
     "chat",
@@ -60,7 +61,7 @@
   "peerDependencies": {
     "react": "^17.0.0 || ^16.8.0",
     "react-dom": "^17.0.0 || ^16.8.0",
-    "stream-chat": "^6.4.0"
+    "stream-chat": "^6.5.0"
   },
   "files": [
     "dist",
@@ -79,7 +80,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@ladle/react": "^0.8.5",
+    "@ladle/react": "^0.11.0",
     "@playwright/test": "^1.20.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-image": "^2.1.1",
@@ -163,7 +164,7 @@
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.2",
     "semantic-release-cli": "^5.4.4",
-    "stream-chat": "6.4.0",
+    "stream-chat": "^6.5.0",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",

src/components/AutoCompleteTextarea/Item.js renamed to src/components/AutoCompleteTextarea/Item.jsx

@@ -418,14 +418,11 @@ const ChannelInner = <
   }, [channel.cid, doMarkReadRequest]);
 
   useEffect(() => {
-    if (state.thread && state.messages?.length) {
-      for (let i = state.messages.length - 1; i >= 0; i -= 1) {
-        if (state.messages[i].id === state.thread.id) {
-          dispatch({ message: state.messages[i], type: 'setThread' });
-          break;
-        }
-      }
-    }
+    if (!state.thread) return;
+
+    const message = state.messages?.find((m) => m.id === state.thread?.id);
+
+    if (message) dispatch({ message, type: 'setThread' });
   }, [state.messages, state.thread]);
 
   /** MESSAGE */

src/components/AutoCompleteTextarea/List.js renamed to src/components/AutoCompleteTextarea/List.jsx

@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import '@stream-io/stream-chat-css/dist/css/index.css';
-import React, { useEffect, useState } from 'react';
-import { ChannelSort, Event, StreamChat } from 'stream-chat';
+import React from 'react';
+import { ChannelSort, StreamChat } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
   ChannelList,
-  Chat,
   MessageList,
   useChannelStateContext,
   Window,
 } from '../index';
-import { apiKey, StreamChatGenerics } from './utils';
+import { apiKey, ConnectedUser, ConnectedUserProps, StreamChatGenerics } from './utils';
 
 const channelId = import.meta.env.E2E_ADD_MESSAGE_CHANNEL;
 if (!channelId || typeof channelId !== 'string') {
@@ -45,48 +44,18 @@ const sort: ChannelSort = { last_updated: 1 };
 
 const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
 
-// wait for disconnect to happen since there's only one shared
-// client and two separate Chat components using it to prevent crashes
-let sharedPromise = Promise.resolve();
-
-const ConnectedUser = ({ token, userId }: { token: string; userId: string }) => {
-  const [connected, setConnected] = useState(false);
-
-  useEffect(() => {
-    sharedPromise.then(() => chatClient.connectUser({ id: userId }, token));
-
-    const handleConnectionChange = ({ online = false }: Event) => {
-      setConnected(online);
-    };
-
-    chatClient.on('connection.changed', handleConnectionChange);
-
-    return () => {
-      chatClient.off('connection.changed', handleConnectionChange);
-      sharedPromise = chatClient.disconnectUser();
-    };
-  }, []);
-
-  if (!connected) {
-    return <p>Connecting {userId}...</p>;
-  }
-
-  return (
-    <>
-      <h3>User: {userId}</h3>
-      <Chat client={chatClient}>
-        <ChannelList filters={{ members: { $in: [userId] } }} sort={sort} />
-        <Channel>
-          <Window>
-            <ChannelHeader />
-            <MessageList />
-            <Controls />
-          </Window>
-        </Channel>
-      </Chat>
-    </>
-  );
-};
+const WrappedConnectedUser = ({ token, userId }: Omit<ConnectedUserProps, 'children'>) => (
+  <ConnectedUser client={chatClient} token={token} userId={userId}>
+    <ChannelList filters={{ members: { $in: [userId] } }} sort={sort} />
+    <Channel>
+      <Window>
+        <ChannelHeader />
+        <MessageList />
+        <Controls />
+      </Window>
+    </Channel>
+  </ConnectedUser>
+);
 
 export const User1 = () => {
   const userId = import.meta.env.E2E_TEST_USER_1;
@@ -97,7 +66,7 @@ export const User1 = () => {
   if (!token || typeof token !== 'string') {
     throw new Error('expected TEST_USER_1_TOKEN');
   }
-  return <ConnectedUser token={token} userId={userId} />;
+  return <WrappedConnectedUser token={token} userId={userId} />;
 };
 
 export const User2 = () => {
@@ -109,5 +78,5 @@ export const User2 = () => {
   if (!token || typeof token !== 'string') {
     throw new Error('expected TEST_USER_2_TOKEN');
   }
-  return <ConnectedUser token={token} userId={userId} />;
+  return <WrappedConnectedUser token={token} userId={userId} />;
 };