test: set up authentication

packages/e2e-react/.gitignore

@@ -26,3 +26,6 @@ dist-ssr
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.env
+.auth

packages/e2e-react/README.md

@@ -1 +1,15 @@
 # E2E EmbeddedChat setup
+1. Create an `.env` with your Rocket.Chat username and password
+```
+USERNAME=[your_username]
+PASSWORD=[your_password]
+```
+2. Make sure EmbeddedChat is running on `http://localhost:6006`
+3. Run E2E tests
+```
+yarn test
+```
+Or run tests in interactive UI
+```
+yarn test --ui
+```

packages/e2e-react/constants.ts

@@ -0,0 +1,3 @@
+export const TEST_USERNAME: string = 'tester';
+export const TEST_PASSWORD: string = 'tester';
+export const AUTH_FILE_PATH: string = '.auth/user.json';

packages/e2e-react/package.json

@@ -25,6 +25,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "dotenv": "^16.4.5",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

packages/e2e-react/playwright.config.ts

@@ -32,9 +32,11 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
+    { name: 'setup', testMatch: /.*\.setup\.ts/ },
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
+      dependencies: ['setup'],
     },
 
     // {

packages/e2e-react/tests/auth.setup.ts

@@ -0,0 +1,16 @@
+import { test as setup, expect } from '@playwright/test';
+import { AUTH_FILE_PATH, TEST_PASSWORD, TEST_USERNAME } from '../constants';
+
+setup('authenticate', async ({ page }) => {
+  await page.goto('/');
+
+  await page.getByTestId('join-button').click();
+
+  await page.getByTestId('login-email').fill(TEST_USERNAME);
+  await page.getByTestId('login-password').fill(TEST_PASSWORD);
+
+  await page.getByTestId('login-button').click();
+  await expect(page.getByTestId('join-button')).toBeHidden();
+
+  await page.context().storageState({ path: AUTH_FILE_PATH });
+});

packages/e2e-react/tests/example.spec.ts

@@ -1,18 +1,9 @@
 import { test, expect } from '@playwright/test';
 
-test('EmbeddedChat should render', async ({ page }) => {
-  await page.goto('/');
-  await expect(page.locator('.ec-embedded-chat')).toBeVisible();
-});
-
-test('EmbeddedChat has a title', async ({ page }) => {
+test.beforeEach('open page', async ({ page }) => {
   await page.goto('/');
-  await expect(page.locator('.ec-chat-header--channelDescription')).toHaveText('Login to chat');
 });
 
-test('EmbeddedChat has messages', async ({ page }) => {
-  await page.goto('/');
-
-  await page.waitForSelector('.ec-message');
-  expect(await page.locator('.ec-message').count()).toBeGreaterThan(0);
+test('EmbeddedChat should render', async ({ page }) => {
+  await expect(page.getByTestId('embedded-chat')).toBeVisible();
 });

packages/react/src/components/ChatInput/ChatInput.js

@@ -575,7 +575,11 @@ const ChatInput = ({ scrollToBottom }) => {
                 <Icon className={styles.chatInputIconCursor} name="send" />
               </ActionButton>
             ) : (
-              <Button onClick={onJoin} color="primary">
+              <Button
+                onClick={onJoin}
+                color="primary"
+                data-testid="join-button"
+              >
                 JOIN
               </Button>
             )}

packages/react/src/components/EmbeddedChat.js

@@ -224,6 +224,7 @@ const EmbeddedChat = ({
             onDragEnter={handleDragEnter}
             onDragLeave={handleDragLeave}
             onDrop={(e) => handleDragDrop(e)}
+            data-testid="embedded-chat"
           >
             {onDrag && <DropBoxOverlay />}
             {hideHeader ? null : (

packages/react/src/components/auth/LoginForm.js

@@ -119,6 +119,7 @@ export default function LoginForm() {
                 placeholder="[email protected]"
                 onKeyPress={handleKeyPress}
                 style={{ borderColor: usernameError ? 'red' : '' }}
+                data-testid="login-email"
               />
             </Box>
             {usernameError && (
@@ -136,6 +137,7 @@ export default function LoginForm() {
                 onChange={handleEditPassword}
                 onKeyPress={handleKeyPress}
                 style={{ borderColor: passwordError ? 'red' : '' }}
+                data-testid="login-password"
               />
               <Box
                 type="button"
@@ -165,6 +167,7 @@ export default function LoginForm() {
               style={{
                 margin: '10px',
               }}
+              data-testid="login-button"
             >
               Login
             </Button>

yarn.lock

@@ -14643,6 +14643,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:^16.4.5":
+  version: 16.4.5
+  resolution: "dotenv@npm:16.4.5"
+  checksum: 301a12c3d44fd49888b74eb9ccf9f07a1f5df43f489e7fcb89647a2edcd84c42d6bc349dc8df099cd18f07c35c7b04685c1a4f3e6a6a9e6b30f8d48c15b7f49c
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^7.0.0":
   version: 7.0.0
   resolution: "dotenv@npm:7.0.0"
@@ -14702,6 +14709,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^6.21.0
     "@typescript-eslint/parser": ^6.21.0
     "@vitejs/plugin-react": ^4.2.1
+    dotenv: ^16.4.5
     eslint: ^8.56.0
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.5