test: support test e2e with OctoBase (#1593)

Co-authored-by: DarkSky <darksky2048@gmail.com>

tests/fixtures/userA.json

@@ -0,0 +1,5 @@
+{
+  "name": "Alex Yang",
+  "email": "alex.yang@example.org",
+  "password": "123456"
+}

tests/fixtures/userB.json

@@ -0,0 +1,5 @@
+{
+  "name": "Boying Li",
+  "email": "boying.li@example.org",
+  "password": "654321"
+}

tests/libs/setting.ts

@@ -0,0 +1,5 @@
+import type { Page } from '@playwright/test';
+
+export async function clickCollaborationPanel(page: Page) {
+  await page.click('[data-tab-key="collaboration"]');
+}

tests/libs/sidebar.ts

@@ -1,5 +1,17 @@
 import type { Page } from '@playwright/test';
 
 export async function clickSideBarSettingButton(page: Page) {
-  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  return page.getByTestId('slider-bar-workspace-setting-button').click();
+}
+
+export async function clickSideBarAllPageButton(page: Page) {
+  return page.getByTestId('all-pages').click();
+}
+
+export async function clickSideBarCurrentWorkspaceBanner(page: Page) {
+  return page.getByTestId('current-workspace').click();
+}
+
+export async function clickNewPageButton(page: Page) {
+  return page.getByTestId('new-page-button').click();
 }

tests/libs/utils.ts

@@ -0,0 +1,84 @@
+import type { Page } from '@playwright/test';
+
+import userA from '../fixtures/userA.json';
+import userB from '../fixtures/userB.json';
+
+export async function createFakeUser() {
+  try {
+    const response = await Promise.all([
+      fetch('http://127.0.0.1:3000/api/user/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type: 'DebugLoginUser',
+          email: userA.email,
+          password: userA.password,
+        }),
+      }),
+      fetch('http://127.0.0.1:3000/api/user/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type: 'DebugLoginUser',
+          email: userB.email,
+          password: userB.password,
+        }),
+      }),
+    ]);
+    return Promise.all(
+      response.map(res => {
+        if (!res.ok) {
+          throw new Error('User not found');
+        }
+        return res.json();
+      })
+    );
+  } catch (e) {
+    const response = await Promise.all([
+      // Register user A
+      fetch('http://localhost:3000/api/user/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type: 'DebugCreateUser',
+          ...userA,
+        }),
+      }),
+      // Register user B
+      fetch('http://localhost:3000/api/user/token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type: 'DebugCreateUser',
+          ...userB,
+        }),
+      }),
+    ]);
+    return Promise.all(response.map(res => res.json()));
+  }
+}
+
+export async function loginUser(
+  page: Page,
+  token: {
+    refresh: string;
+    token: string;
+  }
+) {
+  await page.evaluate(async token => {
+    // @ts-ignore
+    globalThis.AFFINE_APIS.auth.setLogin(token);
+  }, token);
+}
+
+export async function openHomePage(page: Page) {
+  return page.goto('http://localhost:8080');
+}

tests/local-first-workspace-list.spec.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test';
 
 import { loadPage } from './libs/load-page';
 import { test } from './libs/playwright';
+import { clickSideBarAllPageButton } from './libs/sidebar';
 import { createWorkspace } from './libs/workspace-logic';
 loadPage();
 
@@ -32,8 +33,7 @@ test.describe('Local first workspace list', () => {
     //check page list length
     const closeWorkspaceModal = page.getByTestId('close-workspace-modal');
     await closeWorkspaceModal.click();
-    const allPageButton = page.getByTestId('all-pages');
-    await allPageButton.click();
+    await clickSideBarAllPageButton(page);
     await page.waitForTimeout(1000);
     const pageList = page.locator('[data-testid=page-list-item]');
     const result = await pageList.count();

tests/local-first-workspace.spec.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test';
 
 import { loadPage } from './libs/load-page';
 import { test } from './libs/playwright';
+import { clickSideBarCurrentWorkspaceBanner } from './libs/sidebar';
 
 loadPage();
 
@@ -20,7 +21,7 @@ test.describe('Local first default workspace', () => {
 });
 test.describe('Language switch', () => {
   test('Open language switch menu', async ({ page }) => {
-    await page.getByTestId('current-workspace').click();
+    await clickSideBarCurrentWorkspaceBanner(page);
     const languageMenuButton = page.getByTestId('language-menu-button');
     await expect(languageMenuButton).toBeVisible();
     const actual = await languageMenuButton.innerText();

tests/login.spec.ts

@@ -1,35 +0,0 @@
-import { loadPage } from './libs/load-page';
-import { test } from './libs/playwright';
-
-loadPage();
-
-test.describe('Login Flow', () => {
-  test.skip('Open login modal by click current workspace', async ({ page }) => {
-    await page.getByTestId('current-workspace').click();
-    await page.waitForTimeout(800);
-    // why don't we use waitForSelector, It seems that waitForSelector not stable?
-    await page.getByTestId('open-login-modal').click();
-    await page.waitForTimeout(800);
-    await page
-      .getByRole('heading', { name: 'Currently not logged in' })
-      .click();
-  });
-  // not stable
-  // test.skip('Open google firebase page', async ({ page }) => {
-  //   await page.getByTestId('current-workspace').click();
-  //   await page.waitForTimeout(800);
-  //   // why don't we use waitForSelector, It seems that waitForSelector not stable?
-  //   await page.getByTestId('open-login-modal').click();
-  //   await page.waitForTimeout(800);
-  //   const [firebasePage] = await Promise.all([
-  //     page.waitForEvent('popup'),
-  //     page
-  //       .getByRole('button', {
-  //         name: 'Google Continue with Google Set up an AFFiNE account to sync data',
-  //       })
-  //       .click(),
-  //   ]);
-
-  //   expect(firebasePage.url()).toContain('.firebaseapp.com/__/auth/handler');
-  // });
-});

tests/parallels/affine-workspace.spec.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+
+import userA from '../fixtures/userA.json';
+import { test } from '../libs/playwright';
+import { clickCollaborationPanel } from '../libs/setting';
+import {
+  clickNewPageButton,
+  clickSideBarAllPageButton,
+  clickSideBarCurrentWorkspaceBanner,
+  clickSideBarSettingButton,
+} from '../libs/sidebar';
+import { createFakeUser, loginUser, openHomePage } from '../libs/utils';
+import { createWorkspace } from '../libs/workspace-logic';
+
+test.describe('affine workspace', () => {
+  test('should login with user A', async ({ page }) => {
+    await openHomePage(page);
+    const [a] = await createFakeUser();
+    await loginUser(page, a);
+    await clickSideBarCurrentWorkspaceBanner(page);
+    const footer = page.locator('[data-testid="workspace-list-modal-footer"]');
+    expect(await footer.getByText(userA.name).isVisible()).toBe(true);
+    expect(await footer.getByText(userA.email).isVisible()).toBe(true);
+  });
+
+  // fixme: skip this because of duplicated creation of workspace may cause error
+  test.skip('should enable affine workspace successfully', async ({ page }) => {
+    await openHomePage(page);
+    const [a] = await createFakeUser();
+    await loginUser(page, a);
+    await createWorkspace({ name: 'test1' }, page);
+    await page.waitForTimeout(50);
+    await clickSideBarSettingButton(page);
+    await page.waitForTimeout(50);
+    await clickCollaborationPanel(page);
+    await page.getByTestId('local-workspace-enable-cloud-button').click();
+    await page.getByTestId('confirm-enable-cloud-button').click();
+    await page.waitForSelector("[data-testid='member-length']", {
+      timeout: 10000,
+    });
+    await clickSideBarAllPageButton(page);
+    await clickNewPageButton(page);
+    await page.locator('[data-block-is-title="true"]').type('Hello, world!', {
+      delay: 50,
+    });
+  });
+});