test(Next): update next.sh script and index page, add end-to-end test

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 
 import { NextPage } from 'next';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { StreamChat } from 'stream-chat';
 import {
@@ -15,33 +15,44 @@ import {
   Window,
 } from 'stream-chat-react';
 
-const apiKey = process.env.STREAM_API_KEY;
-const userId = process.env.USER_ID;
-const userToken = process.env.USER_TOKEN;
-
-if (!apiKey || !userId || !userToken)
-  throw new Error('Missing either STREAM_API_KEY, USER_ID or USER_TOKEN');
-
-const options = { limit: 10, presence: true, state: true };
-
-const chatClient = StreamChat.getInstance(apiKey);
-
-if (typeof window !== 'undefined') {
-  chatClient.connectUser({ id: userId }, userToken);
-}
-
-const Home: NextPage = () => (
-  <Chat client={chatClient}>
-    <ChannelList options={options} />
-    <Channel>
-      <Window>
-        <ChannelHeader />
-        <MessageList />
-        <MessageInput focus />
-      </Window>
-      <Thread />
-    </Channel>
-  </Chat>
-);
+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

@@ -1,14 +1,23 @@
 #!/bin/bash
 
-rm -rf test-next-app
+FOLDER_NAME="test-next-app"
+PACKAGE_PATH="../../stream-chat-react.tgz"
 
-yarn create next-app --typescript test-next-app
+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 test-next-app/pages/index.tsx
+cp ./next-page.tsx $FOLDER_NAME/pages/index.tsx
 
 # install the lib...
-yarn --cwd ./test-next-app add --dev ../../stream-chat-react.tgz
+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
+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('#root'),
+      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;