Merge pull request #1591 from GetStream/develop

v8.1.3

Author: MartinCupela

.env.example

@@ -7,3 +7,4 @@ 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"
+E2E_LONG_MESSAGE_LISTS_CHANNEL='navigate-long-message-lists'

.github/workflows/ci.yml

@@ -55,6 +55,15 @@ jobs:
           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
+          E2E_LONG_MESSAGE_LISTS_CHANNEL: navigate-long-message-lists
+
+      - name: 🎥 Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: E2E_Artifacts
+          path: ./test-results
+          retention-days: 1
 
   test:
     runs-on: ubuntu-latest

.gitignore

@@ -24,7 +24,10 @@ coverage
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 
+# playwright artifacts
+test-results
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)

.ladle/components.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 
 import "./styles.css";
 
-
+// https://ladle.dev/docs/providers
+// At the moment used to provide the styles from ./styles.css to all the stories
 export const Provider: GlobalProvider = ({ children }) => (
   <>
     {children}

.releaserc.json

@@ -8,7 +8,13 @@
     }
   ],
   "plugins": [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "angular",
+        "releaseRules": [{ "type": "chore", "scope": "deps", "release": "patch" }]
+      }
+    ],
     "@semantic-release/release-notes-generator",
     [
       "@semantic-release/changelog",

e2e/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../.eslintrc.json",
+  "rules": {
+    "jest/require-top-level-describe": "off",
+    "jest/no-done-callback": "off"
+  }
+}

e2e/add-message.test.ts

@@ -1,65 +1,123 @@
 /* eslint-disable jest/no-done-callback */
 /* eslint-disable jest/require-top-level-describe */
-import { expect, Page, test } from '@playwright/test';
-
-function getPreview(page: Page) {
-  return page.locator('*data-testid=channel-preview-button >> text=add-message');
-}
-
-test.describe('add a message', () => {
-  test.beforeEach(async ({ baseURL, page }) => {
-    await page.goto(`${baseURL}/?story=connected-user--user1`);
-    await page.waitForSelector('[data-storyloaded]');
-    // Select correct channel
-    const preview = getPreview(page);
-    await preview.click();
+import selectors from './user/selectors';
+import { test } from './user/test';
+
+const CHANNEL_NAME = 'add-message' as const;
+const ADDED_MESSAGE_MAIN_LIST = 'Hello world!' as const;
+const ADDED_MESSAGE_THREAD = 'Hello world back!' as const;
+
+test.describe('add text message', () => {
+
+  test.beforeEach(async ({controller, user}) => {
+    await controller.openStory('add-message--user1', selectors.channelPreviewButton);
+    await user.clicks.ChannelPreview.text(CHANNEL_NAME);
   });
 
-  test('message list should clear', async ({ page }) => {
-    await page.click('data-testid=truncate');
-    const list = page.locator('.str-chat__list');
-    await expect(list).toBeEmpty();
+  test('message list and preview button should be clear', async ({controller, user}) => {
+    await controller.clearChannel()
+    await user.sees.MessageList.empty();
+    await user.sees.ChannelPreview(CHANNEL_NAME).empty();
   });
 
-  test('channel list preview should be cleared', async ({ page }) => {
-    const preview = getPreview(page);
-    await expect(preview).toContainText('Nothing yet...');
+  test('message list should update for current user', async ({controller, user}) => {
+    await controller.sendMessage();
+
+    await user.sees.MessageList.not.empty();
+    await user.sees.MessageList.contains.nthMessage(ADDED_MESSAGE_MAIN_LIST);
+    await user.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_MAIN_LIST);
   });
+});
 
-  test('message list should update for current user', async ({ page }) => {
-    await page.click('data-testid=add-message');
-    const list = page.locator('.str-chat__list');
-    await expect(list).not.toBeEmpty();
-    const newMessage = page.locator('.str-chat__message').first();
-    await expect(newMessage).toContainText('Hello world!');
+test.describe('receive a message', () => {
+
+  test.beforeEach(async ({controller, user}) => {
+    await controller.openStory('add-message--user1', selectors.channelPreviewButton);
+
+    await user.clicks.ChannelPreview.text(CHANNEL_NAME);
+
+    await controller.sendMessage();
+
+    await controller.openStory('add-message--user2', selectors.channelPreviewButton);
   });
 
-  test('channel list should update for current user', async ({ page }) => {
-    const preview = getPreview(page);
-    await expect(preview).toContainText('Hello world!');
+  test('channel list should update for channel members and show unread', async ({user}) => {
+    await user.sees.ChannelPreview(CHANNEL_NAME).not.read();
+    await user.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_MAIN_LIST);
+  });
+
+  test('message list should update for different users on the channel', async ({user, page}) => {
+    await Promise.all([
+      page.waitForResponse((r) => r.url().includes('/read') && r.ok()),
+      user.clicks.ChannelPreview.text(CHANNEL_NAME)
+    ]);
+    await user.sees.MessageList.not.empty();
+    await user.sees.ChannelPreview(CHANNEL_NAME).read();
+    await user.sees.MessageList.contains.nthMessage(ADDED_MESSAGE_MAIN_LIST);
   });
 });
 
-test.describe('receive a message', () => {
-  test.beforeEach(async ({ baseURL, page }) => {
-    await page.goto(`${baseURL}/?story=connected-user--user2`);
-    await page.waitForSelector('[data-storyloaded]');
+
+test.describe('reply to a message', () => {
+  test.beforeEach(async ({controller, user}) => {
+    await controller.openStory('add-message--user1', selectors.channelPreviewButton);
+    await user.clicks.ChannelPreview.text(CHANNEL_NAME);
+  });
+
+  test.afterEach(async ({user}) => {
+    await user.clicks.Thread.close();
+  })
+
+  test('thread with no replies contains only parent message', async ({controller, user}) => {
+    await controller.clearChannel();
+    await controller.sendMessage();
+    await user.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST);
+    await user.sees.Thread.empty();
+  });
+
+  test('reply to a message should appear at the bottom of the thread and in channel preview', async ({ user}) => {
+    await user.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST);
+    await user.submits.MessageInput.reply(ADDED_MESSAGE_THREAD);
+    await user.sees.Thread.not.empty();
+    await user.sees.Thread.inViewport.nthMessage(ADDED_MESSAGE_THREAD, -1);
+    // todo: channel preview does not reflect new messages from thread
+    // await user.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_THREAD);
   });
+})
 
-  test('channel list should update for channel members and show unread', async ({ page }) => {
-    const preview = getPreview(page);
-    await expect(preview).toHaveClass(/str-chat__channel-preview-messenger--unread/);
-    await expect(preview).toContainText('Hello world!');
+test.describe('receive the reply', () => {
+  test.beforeEach(async ({controller, user: user1, page}) => {
+    await controller.openStory('add-message--user1', selectors.channelPreviewButton);
+    await user1.clicks.ChannelPreview.text(CHANNEL_NAME);
+    await controller.clearChannel();
+    await controller.sendMessage();
+    await user1.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST);
+    await Promise.all([
+      page.waitForResponse((r) => r.url().includes('/message') && r.ok()),
+      user1.submits.MessageInput.reply(ADDED_MESSAGE_THREAD)
+    ])
+    await controller.openStory('add-message--user2', selectors.channelPreviewButton);
   });
 
-  test('message list should update for different users on the channel', async ({ page }) => {
-    const preview = getPreview(page);
-    await preview.click();
-    await expect(preview).not.toHaveClass(/str-chat__channel-preview-messenger--unread/);
+  // todo: channel preview does not reflect new messages from thread
+  // test('for the other user channel preview displays correct last message showed unread', async ({user: user2}) => {
+  //   await user2.sees.ChannelPreview(CHANNEL_NAME).not.read();
+  //   await user2.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_THREAD);
+  // });
+
+  test('the other user sees that reply to a message appeared at the bottom of the thread and in channel preview', async ({user: user2, page}) => {
+    await Promise.all([
+      page.waitForResponse((r) => r.url().includes('/read') && r.ok()),
+      user2.clicks.ChannelPreview.text(CHANNEL_NAME)
+    ]);
+
+    await Promise.all([
+      page.waitForResponse((r) => r.url().includes('/replies') && r.ok()),
+      user2.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST),
+    ]);
 
-    const list = page.locator('.str-chat__list');
-    await expect(list).not.toBeEmpty();
-    const newMessage = page.locator('.str-chat__message').first();
-    await expect(newMessage).toContainText('Hello world!');
+    await user2.sees.Thread.not.empty();
+    await user2.sees.ChannelPreview(CHANNEL_NAME).read();
+    await user2.sees.Thread.inViewport.nthMessage(ADDED_MESSAGE_THREAD, -1);
   });
 });

e2e/autocomplete-mention.test.ts

@@ -1,18 +1,22 @@
 /* eslint-disable jest/no-done-callback */
 /* eslint-disable jest/require-top-level-describe */
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import {test} from './user/test';
+import { getMessageInput } from './user/components/MessageInput';
+import selectors from './user/selectors';
+
+const MENTION_TRIGGER = '@';
 
 test.describe('autocomplete a mention', () => {
-  test('should fill in textarea with username', async ({ baseURL, page }) => {
-    await page.goto(`${baseURL}/?story=hello--basic-setup`);
-    await page.waitForSelector('[data-storyloaded]');
-    await page.fill('data-testid=message-input', '@');
-    const button = await page.locator(
-      'button.rta__entity >> :nth-match(span.str-chat__user-item--name, 1)',
-    );
-    button.click();
-    const textContent = await button.textContent();
+  test('should fill in textarea with username', async ({ controller, user, page }) => {
+    await controller.openStory('hello--basic-setup', selectors.messageInput );
+
+    await user.typesTo.MessageInput.text(MENTION_TRIGGER);
+
+    const autocompleteSuggestionItem = await user.clicks.AutocompleteSuggestionItem.nth(1)
+    const textContent = await autocompleteSuggestionItem.textContent();
 
-    await expect(page.locator('data-testid=message-input')).toContainText(`@${textContent}`);
+    await expect(getMessageInput(page)).toContainText(`${MENTION_TRIGGER}${textContent}`);
   });
-});
+})

e2e/fixtures.mjs

@@ -11,10 +11,35 @@ dotenv.config({ path: `.env.local` });
     E2E_APP_KEY,
     E2E_APP_SECRET,
     E2E_JUMP_TO_MESSAGE_CHANNEL,
+    E2E_LONG_MESSAGE_LISTS_CHANNEL,
     E2E_TEST_USER_1,
     E2E_TEST_USER_2,
   } = process.env;
 
+  async function generateMessages(start, stop, channel, parent_id) {
+    const count = stop - start;
+    let messageToQuote;
+    const messageResponses = [];
+    for (let i = start; i < stop; i++) {
+      if (process.stdout.clearLine && process.stdout.cursorTo) {
+        printProgress((i-start) / count);
+      }
+
+      const res = await channel.sendMessage({
+        text: `Message ${i}`,
+        user: { id: i % 2 ? E2E_TEST_USER_1 : E2E_TEST_USER_2 },
+        ...(i === (start + 140) ? { quoted_message_id: messageToQuote.message.id } : {}),
+        ...(parent_id ? { parent_id } : {}),
+      });
+
+      if (i === (start + 20)) {
+        messageToQuote = res;
+      }
+      messageResponses.push(res);
+    }
+    return messageResponses;
+  }
+
   const chat = StreamChat.getInstance(E2E_APP_KEY, E2E_APP_SECRET);
 
   // Users
@@ -32,22 +57,27 @@ dotenv.config({ path: `.env.local` });
     });
     await channel.create();
     await channel.truncate();
-    let messageToQuote;
-    for (let i = 0; i < MESSAGES_COUNT; i++) {
-      if (process.stdout.clearLine && process.stdout.cursorTo) {
-        printProgress(i / MESSAGES_COUNT);
-      }
 
-      const res = await channel.sendMessage({
-        text: `Message ${i}`,
-        user: { id: i % 2 ? E2E_TEST_USER_1 : E2E_TEST_USER_2 },
-        ...(i === 140 ? { quoted_message_id: messageToQuote.message.id } : {}),
-      });
+    await generateMessages(0, MESSAGES_COUNT, channel);
+
+    process.stdout.write('\n');
+  }
+
+  // 'navigate-long-message-lists` channel
+  {
+    console.log(`Creating and populating channel '${E2E_LONG_MESSAGE_LISTS_CHANNEL}'...`);
+    const channel = chat.channel('messaging', E2E_LONG_MESSAGE_LISTS_CHANNEL, {
+      created_by_id: E2E_TEST_USER_1,
+      members: [E2E_TEST_USER_1, E2E_TEST_USER_2],
+      name: E2E_LONG_MESSAGE_LISTS_CHANNEL,
+    });
+    await channel.create();
+    await channel.truncate();
+
+    const messages = await generateMessages(0, 150, channel);
+    await generateMessages(150, 300, channel, messages.slice(-1)[0].message.id)
+
 
-      if (i === 20) {
-        messageToQuote = res;
-      }
-    }
     process.stdout.write('\n');
   }
 
@@ -79,7 +109,7 @@ dotenv.config({ path: `.env.local` });
       await channel.truncate();
     }
   }
-})();
+})().catch(e => console.error(e));
 
 const printProgress = (progress) => {
   process.stdout.clearLine();