test: React frameworks compatibility automation

.github/workflows/ci.yml

@@ -24,10 +24,13 @@ jobs:
         run: yarn types --noEmit
 
   e2e:
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     name: End-to-end tests
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
 
       - name: 💾 Cache Dependencies
         uses: actions/cache@v3
@@ -38,10 +41,22 @@ jobs:
       - name: 🔨 Install Dependencies
         run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
 
+      - name: 💾 Cache Playwright browsers
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}${{ runner.arch }}-playwright-browsers
+
+      - name: Install Playwright browsers if not cached
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install chromium webkit firefox
+
+      - name: Install Playwright system dependencies (always)
+        run: npx playwright install-deps
+
       - name: ⚗️ End-to-end tests
         run: |
-          npx playwright install
-          npx playwright install-deps
           yarn e2e-fixtures
           # running with --browser=all causes failures
           yarn e2e --browser=chromium
@@ -99,3 +114,45 @@ jobs:
 
       - name: 🧪 Validate CommonJS bundle with ${{ matrix.node }}
         run: yarn validate-cjs
+  test-frameworks:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        framework: ["next", "remix", "vite"]
+    name: Test with framework ${{ matrix.framework }}
+    env:
+      STREAM_API_KEY: ${{ secrets.E2E_APP_KEY }}
+      USER_ID: test-user-1
+      USER_TOKEN: ${{ secrets.E2E_TEST_USER_1_TOKEN }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: actions/cache@v3
+        id: node-modules-cache
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('./yarn.lock') }}
+
+      - name: Install packages
+        run: yarn install --frozen-lockfile --ignore-engines
+
+      - uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}${{ runner.arch }}-playwright-browsers
+
+      - name: Install Playwright browsers if not cached
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install chromium webkit firefox
+
+      - name: Install Playwright system dependencies (always)
+        run: npx playwright install-deps
+
+      - name: Pack package (stream-chat-react.tgz)
+        working-directory: ./test-react-frameworks
+        run: ./pack-package.sh
+
+      - name: Run ${{ matrix.framework }}.sh test
+        working-directory: ./test-react-frameworks/${{ matrix.framework }}
+        run: ./${{ matrix.framework }}.sh

jest.config.js

@@ -12,7 +12,13 @@ module.exports = {
   },
   preset: 'ts-jest',
   setupFiles: ['core-js'],
-  testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__', '/e2e/'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/examples/',
+    '__snapshots__',
+    '/e2e/',
+    '/test-react-frameworks/',
+  ],
   testRegex: [
     /**
      * If you want to test single file, mention it here

test-react-frameworks/.gitignore

@@ -0,0 +1,4 @@
+stream-chat-react.tgz
+next/test-next-app
+remix/test-remix-app
+vite/test-vite-app

test-react-frameworks/next/next-page.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+
+import { NextPage } from 'next';
+import React, { useEffect, useState } from 'react';
+
+import { StreamChat } from 'stream-chat';
+import {
+  Channel,
+  ChannelHeader,
+  ChannelList,
+  Chat,
+  MessageInput,
+  MessageList,
+  Thread,
+  Window,
+} from 'stream-chat-react';
+
+const Home: NextPage = ({ apiKey, userId, userToken }) => {
+  const [client, setClient] = useState<StreamChat | null>(null);
+
+  const filters: ChannelFilters = { members: { $in: [userId] }, type: 'messaging' };
+  const options: ChannelOptions = { limit: 10, presence: true, state: true };
+  const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
+
+  useEffect(() => {
+    const chatClient = StreamChat.getInstance(apiKey);
+
+    chatClient.connectUser({ id: userId }, userToken).then(() => setClient(chatClient));
+  }, []);
+
+  if (client === null) {
+    return <div>Loading</div>;
+  }
+
+  return (
+    <Chat client={client}>
+      <ChannelList filters={filters} options={options} sort={sort} />
+      <Channel>
+        <Window>
+          <ChannelHeader />
+          <MessageList />
+          <MessageInput focus />
+        </Window>
+        <Thread />
+      </Channel>
+    </Chat>
+  );
+};
+
+Home.getInitialProps = () => {
+  const apiKey = process.env.NEXT_STREAM_API_KEY;
+  const userId = process.env.NEXT_USER_ID;
+  const userToken = process.env.NEXT_USER_TOKEN;
+
+  return { apiKey, userId, userToken };
+};
+
+export default Home;

test-react-frameworks/next/next.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+FOLDER_NAME="test-next-app"
+PACKAGE_PATH="../../stream-chat-react.tgz"
+
+rm -rf $FOLDER_NAME
+
+yarn create next-app --typescript $FOLDER_NAME --no-eslint
+
+# Apply a hello-world chat page to the project. 
+cp ./next-page.tsx $FOLDER_NAME/pages/index.tsx
+
+# install the lib...
+yarn --cwd ./$FOLDER_NAME add --dev $PACKAGE_PATH stream-chat
+
+echo NEXT_USER_ID=$USER_ID >> $FOLDER_NAME/.env.local
+echo NEXT_USER_TOKEN=$USER_TOKEN >> $FOLDER_NAME/.env.local
+echo NEXT_STREAM_API_KEY=$STREAM_API_KEY >> $FOLDER_NAME/.env.local
+
+# and build - $? should be 0
+yarn --cwd ./test-next-app build --no-lint
+
+npx playwright test --config ./playwright.config.ts ./next.test.ts

test-react-frameworks/next/next.test.ts

@@ -0,0 +1,19 @@
+/* eslint-disable jest/require-top-level-describe */
+/* eslint-disable jest/no-done-callback */
+
+import { expect, test } from '@playwright/test';
+
+test.describe('Next', () => {
+  test('MessageList rendered', async ({ page }) => {
+    page.on('console', (message) => console.log('NEXT_LOGS: ', message.text()));
+
+    await Promise.all([
+      page.waitForSelector('#__next'),
+      page.waitForLoadState('networkidle'),
+      page.goto('/'),
+    ]);
+
+    const list = page.locator('.str-chat__list');
+    await expect(list).toBeVisible();
+  });
+});

test-react-frameworks/next/playwright.config.ts

@@ -0,0 +1,16 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+export default {
+  timeout: 15 * 1000,
+  use: {
+    baseURL: 'http://localhost:3000',
+    browserName: 'chromium',
+    headless: true,
+  },
+  webServer: {
+    command: 'yarn --cwd ./test-next-app dev',
+    port: 3000,
+    reuseExistingServer: !process.env.CI,
+    timeout: 15 * 1000,
+  },
+} as PlaywrightTestConfig;

test-react-frameworks/pack-package.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+# pack stream-chat-react. Linking causes issues with React.
+FILE_NAME="stream-chat-react.tgz"
+rm -rf ./$FILE_NAME
+yarn pack --cwd "../" -f $FILE_NAME

test-react-frameworks/remix/playwright.config.ts

@@ -0,0 +1,16 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+export default {
+  timeout: 15 * 1000,
+  use: {
+    baseURL: 'http://localhost:3000',
+    browserName: 'chromium',
+    headless: true,
+  },
+  webServer: {
+    command: 'yarn --cwd ./test-remix-app start',
+    port: 3000,
+    reuseExistingServer: !process.env.CI,
+    timeout: 30 * 1000,
+  },
+} as PlaywrightTestConfig;

test-react-frameworks/remix/remix-index-route.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+
+import { json, LinksFunction } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import React from 'react';
+
+import { StreamChat } from 'stream-chat';
+import {
+  Channel,
+  ChannelHeader,
+  ChannelList,
+  Chat,
+  MessageInput,
+  MessageList,
+  Thread,
+  Window,
+} from 'stream-chat-react';
+
+// eslint-disable-next-line require-await
+export async function loader() {
+  return json({
+    apiKey: process.env.REMIX_STREAM_API_KEY,
+    userId: process.env.REMIX_USER_ID,
+    userToken: process.env.REMIX_USER_TOKEN,
+  });
+}
+
+import stream from 'stream-chat-react/dist/css/index.css';
+
+export const links: LinksFunction = () => [{ href: stream, rel: 'stylesheet' }];
+
+export default function Index() {
+  const { apiKey, userId, userToken } = useLoaderData();
+
+  const filters: ChannelFilters = { members: { $in: [userId] }, type: 'messaging' };
+  const options: ChannelOptions = { limit: 10, presence: true, state: true };
+  const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
+
+  const [client, setClient] = React.useState<StreamChat | null>(null);
+
+  React.useEffect(() => {
+    const chatClient = StreamChat.getInstance(apiKey);
+
+    chatClient.connectUser({ id: userId }, userToken).then(() => setClient(chatClient));
+  }, []);
+
+  if (client === null) {
+    return <div>Loading</div>;
+  }
+
+  return (
+    <Chat client={client}>
+      <ChannelList filters={filters} options={options} sort={sort} />
+      <Channel>
+        <Window>
+          <ChannelHeader />
+          <MessageList />
+          <MessageInput focus />
+        </Window>
+        <Thread />
+      </Channel>
+    </Chat>
+  );
+}

test-react-frameworks/remix/remix.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+FOLDER_NAME="test-remix-app"
+PACKAGE_PATH="../../stream-chat-react.tgz"
+
+rm -rf $FOLDER_NAME
+
+yes | yarn create remix --template remix-run/indie-stack $FOLDER_NAME
+
+# Apply a hello-world chat page to the project. 
+cp ./remix-index-route.tsx $FOLDER_NAME/app/routes/index.tsx
+
+# install the lib...
+yarn --cwd ./$FOLDER_NAME add --dev $PACKAGE_PATH stream-chat
+
+echo REMIX_USER_ID=$USER_ID >> $FOLDER_NAME/.env
+echo REMIX_USER_TOKEN=$USER_TOKEN >> $FOLDER_NAME/.env
+echo REMIX_STREAM_API_KEY=$STREAM_API_KEY >> $FOLDER_NAME/.env
+
+# and build - $? should be 0
+yarn --cwd ./$FOLDER_NAME build
+
+npx playwright test --config ./playwright.config.ts ./remix.test.ts

test-react-frameworks/remix/remix.test.ts

@@ -0,0 +1,19 @@
+/* eslint-disable jest/require-top-level-describe */
+/* eslint-disable jest/no-done-callback */
+
+import { expect, test } from '@playwright/test';
+
+test.describe('Remix', () => {
+  test('MessageList rendered', async ({ page }) => {
+    page.on('console', (message) => console.log('REMIX_LOGS: ', message.text()));
+
+    await Promise.all([
+      page.waitForSelector('.h-full'),
+      page.waitForLoadState('networkidle'),
+      page.goto('/'),
+    ]);
+
+    const list = page.locator('.str-chat__list');
+    await expect(list).toBeVisible();
+  });
+});