test(electron): add cloud test (#4184)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

tests/affine-desktop/e2e/basic.spec.ts

@@ -0,0 +1,190 @@
+import { platform } from 'node:os';
+
+import { test } from '@affine-test/kit/electron';
+import { clickSideBarSettingButton } from '@affine-test/kit/utils/sidebar';
+import { expect } from '@playwright/test';
+
+test('new page', async ({ page, workspace }) => {
+  await page.getByTestId('new-page-button').click({
+    delay: 100,
+  });
+  await page.waitForSelector('v-line');
+  const flavour = (await workspace.current()).flavour;
+  expect(flavour).toBe('local');
+});
+
+// macOS only
+if (platform() === 'darwin') {
+  test('app sidebar router forward/back', async ({ page }) => {
+    await page.getByTestId('help-island').click();
+    await page.getByTestId('easy-guide').click();
+    await page.getByTestId('onboarding-modal-next-button').click();
+    await page.getByTestId('onboarding-modal-close-button').click();
+    {
+      // create pages
+      await page.waitForTimeout(500);
+      await page.getByTestId('new-page-button').click({
+        delay: 100,
+      });
+      await page.waitForSelector('v-line');
+      await page.focus('.affine-doc-page-block-title');
+      await page.type('.affine-doc-page-block-title', 'test1', {
+        delay: 100,
+      });
+      await page.waitForTimeout(500);
+      await page.getByTestId('new-page-button').click({
+        delay: 100,
+      });
+      await page.waitForSelector('v-line');
+      await page.focus('.affine-doc-page-block-title');
+      await page.type('.affine-doc-page-block-title', 'test2', {
+        delay: 100,
+      });
+      await page.waitForTimeout(500);
+      await page.getByTestId('new-page-button').click({
+        delay: 100,
+      });
+      await page.waitForSelector('v-line');
+      await page.focus('.affine-doc-page-block-title');
+      await page.type('.affine-doc-page-block-title', 'test3', {
+        delay: 100,
+      });
+    }
+    {
+      const title = (await page
+        .locator('.affine-doc-page-block-title')
+        .textContent()) as string;
+      expect(title.trim()).toBe('test3');
+    }
+
+    await page.click('[data-testid="app-sidebar-arrow-button-back"]');
+    await page.waitForTimeout(1000);
+    await page.click('[data-testid="app-sidebar-arrow-button-back"]');
+    await page.waitForTimeout(1000);
+    {
+      const title = (await page
+        .locator('.affine-doc-page-block-title')
+        .textContent()) as string;
+      expect(title.trim()).toBe('test1');
+    }
+    await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
+    await page.waitForTimeout(1000);
+    await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
+    await page.waitForTimeout(1000);
+    {
+      const title = (await page
+        .locator('.affine-doc-page-block-title')
+        .textContent()) as string;
+      expect(title.trim()).toBe('test3');
+    }
+  });
+}
+
+test('clientBorder value should disable by default on window', async ({
+  page,
+}) => {
+  await clickSideBarSettingButton(page);
+  await page.waitForTimeout(1000);
+  const settingItem = page.locator(
+    '[data-testid="client-border-style-trigger"]'
+  );
+  expect(await settingItem.locator('input').inputValue()).toEqual(
+    process.platform === 'win32' ? 'off' : 'on'
+  );
+});
+
+test('app theme', async ({ page, electronApp }) => {
+  const root = page.locator('html');
+  {
+    const themeMode = await root.evaluate(element =>
+      element.getAttribute('data-theme')
+    );
+    expect(themeMode).toBe('light');
+
+    const theme = await electronApp.evaluate(({ nativeTheme }) => {
+      return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
+    });
+
+    expect(theme).toBe('light');
+  }
+
+  {
+    await page.getByTestId('settings-modal-trigger').click();
+    await page.getByTestId('appearance-panel-trigger').click();
+    await page.waitForTimeout(50);
+    await page.getByTestId('dark-theme-trigger').click();
+    const themeMode = await root.evaluate(element =>
+      element.getAttribute('data-theme')
+    );
+    expect(themeMode).toBe('dark');
+    const theme = await electronApp.evaluate(({ nativeTheme }) => {
+      return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
+    });
+    expect(theme).toBe('dark');
+  }
+});
+
+test('affine onboarding button', async ({ page }) => {
+  await page.getByTestId('help-island').click();
+  await page.getByTestId('easy-guide').click();
+  const onboardingModal = page.locator('[data-testid=onboarding-modal]');
+  expect(await onboardingModal.isVisible()).toEqual(true);
+  const switchVideo = page.locator(
+    '[data-testid=onboarding-modal-switch-video]'
+  );
+  expect(await switchVideo.isVisible()).toEqual(true);
+  await page.getByTestId('onboarding-modal-next-button').click();
+  const editingVideo = page.locator(
+    '[data-testid=onboarding-modal-editing-video]'
+  );
+  expect(await editingVideo.isVisible()).toEqual(true);
+  await page.getByTestId('onboarding-modal-close-button').click();
+
+  expect(await onboardingModal.isVisible()).toEqual(false);
+});
+
+test('windows only check', async ({ page }) => {
+  const windowOnlyUI = page.locator('[data-platform-target=win32]');
+  if (process.platform === 'win32') {
+    await expect(windowOnlyUI).toBeVisible();
+  } else {
+    await expect(windowOnlyUI).not.toBeVisible();
+  }
+});
+
+test('delete workspace', async ({ page }) => {
+  await page.getByTestId('current-workspace').click();
+  await page.getByTestId('new-workspace').click();
+  await page.getByTestId('create-workspace-input').type('Delete Me', {
+    delay: 100,
+  });
+  await page.getByTestId('create-workspace-create-button').click({
+    delay: 100,
+  });
+  await page.getByTestId('create-workspace-continue-button').click({
+    delay: 100,
+  });
+  await page.waitForTimeout(1000);
+  await clickSideBarSettingButton(page);
+  await page.getByTestId('current-workspace-label').click();
+  expect(await page.getByTestId('workspace-name-input').inputValue()).toBe(
+    'Delete Me'
+  );
+  const contentElement = await page.getByTestId('setting-modal-content');
+  const boundingBox = await contentElement.boundingBox();
+  if (!boundingBox) {
+    throw new Error('boundingBox is null');
+  }
+  await page.mouse.move(
+    boundingBox.x + boundingBox.width / 2,
+    boundingBox.y + boundingBox.height / 2
+  );
+  await page.mouse.wheel(0, 500);
+  await page.getByTestId('delete-workspace-button').click();
+  await page.getByTestId('delete-workspace-input').type('Delete Me');
+  await page.getByTestId('delete-workspace-confirm-button').click();
+  await page.waitForTimeout(1000);
+  expect(await page.getByTestId('workspace-name').textContent()).toBe(
+    'Demo Workspace'
+  );
+});

tests/affine-desktop/e2e/workspace.spec.ts

@@ -0,0 +1,117 @@
+import path from 'node:path';
+
+import { test } from '@affine-test/kit/electron';
+import { expect } from '@playwright/test';
+import fs from 'fs-extra';
+
+test('check workspace has a DB file', async ({ appInfo, workspace }) => {
+  const w = await workspace.current();
+  const dbPath = path.join(
+    appInfo.sessionData,
+    'workspaces',
+    w.id,
+    'storage.db'
+  );
+  // check if db file exists
+  expect(await fs.exists(dbPath)).toBe(true);
+});
+
+test.skip('move workspace db file', async ({ page, appInfo, workspace }) => {
+  const w = await workspace.current();
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await expect(page.getByTestId('setting-modal')).toBeVisible();
+
+  // goto workspace setting
+  await page.getByTestId('workspace-list-item').click();
+
+  const tmpPath = path.join(appInfo.sessionData, w.id + '-tmp-dir');
+
+  // move db file to tmp folder
+  await page.evaluate(tmpPath => {
+    window.apis?.dialog.setFakeDialogResult({
+      filePath: tmpPath,
+    });
+  }, tmpPath);
+
+  await page.getByTestId('move-folder').click();
+  // check if db file exists
+  await page.waitForSelector('text="Move folder success"');
+  expect(await fs.exists(tmpPath)).toBe(true);
+  // check if db file exists under tmpPath (a file ends with .affine)
+  const files = await fs.readdir(tmpPath);
+  expect(files.some(f => f.endsWith('.affine'))).toBe(true);
+});
+
+//TODO:fix test
+test.fixme('export then add', async ({ page, appInfo, workspace }) => {
+  const w = await workspace.current();
+
+  await page.focus('.affine-doc-page-block-title');
+  await page.fill('.affine-doc-page-block-title', 'test1');
+
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await expect(page.getByTestId('setting-modal')).toBeVisible();
+
+  const originalId = w.id;
+
+  const newWorkspaceName = 'new-test-name';
+
+  // goto workspace setting
+  await page.getByTestId('workspace-list-item').click();
+  const input = page.getByTestId('workspace-name-input');
+  await expect(input).toBeVisible();
+
+  // change workspace name
+  await input.fill(newWorkspaceName);
+  await page.getByTestId('save-workspace-name').click();
+  await page.waitForSelector('text="Update workspace name success"');
+
+  const tmpPath = path.join(appInfo.sessionData, w.id + '-tmp.db');
+
+  // export db file to tmp folder
+  await page.evaluate(tmpPath => {
+    window.apis?.dialog.setFakeDialogResult({
+      filePath: tmpPath,
+    });
+  }, tmpPath);
+
+  await page.getByTestId('export-affine-backup').click();
+  await page.waitForSelector('text="Export success"');
+  await page.waitForTimeout(1000);
+  expect(await fs.exists(tmpPath)).toBe(true);
+
+  await page.getByTestId('modal-close-button').click();
+
+  // add workspace
+  // we are reusing the same db file so that we don't need to maintain one
+  // in the codebase
+  await page.getByTestId('current-workspace').click();
+  await page.getByTestId('add-or-new-workspace').click();
+
+  await page.evaluate(tmpPath => {
+    window.apis?.dialog.setFakeDialogResult({
+      filePath: tmpPath,
+    });
+  }, tmpPath);
+
+  // load the db file
+  await page.getByTestId('add-workspace').click();
+
+  // should show "Added Successfully" dialog
+  await page.waitForSelector('text="Added Successfully"');
+  await page.getByTestId('create-workspace-continue-button').click();
+
+  // sleep for a while to wait for the workspace to be added :D
+  await page.waitForTimeout(2000);
+  const newWorkspace = await workspace.current();
+  expect(newWorkspace.id).not.toBe(originalId);
+  // check its name is correct
+  await expect(page.getByTestId('workspace-name')).toHaveText(newWorkspaceName);
+
+  // find button which has the title "test1"
+  const test1PageButton = await page.waitForSelector(`text="test1"`);
+  await test1PageButton.click();
+
+  const title = page.locator('[data-block-is-title] >> text="test1"');
+  await expect(title).toBeVisible();
+});

tests/affine-desktop/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@affine-test/affine-desktop",
+  "private": true,
+  "scripts": {
+    "e2e": "DEBUG=pw:browser yarn playwright test"
+  },
+  "devDependencies": {
+    "@affine-test/fixtures": "workspace:*",
+    "@affine-test/kit": "workspace:*",
+    "@playwright/test": "^1.37.1",
+    "@types/fs-extra": "^11.0.1",
+    "fs-extra": "^11.1.1"
+  },
+  "version": "0.9.0-canary.8"
+}

tests/affine-desktop/playwright.config.ts

@@ -0,0 +1,27 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+// import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './e2e',
+  fullyParallel: true,
+  timeout: process.env.CI ? 50_000 : 30_000,
+  use: {
+    viewport: { width: 1440, height: 800 },
+  },
+};
+
+if (process.env.CI) {
+  config.retries = 3;
+  config.workers = '50%';
+}
+
+export default config;

tests/affine-desktop/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "outDir": "lib"
+  },
+  "include": ["e2e"],
+  "references": [
+    {
+      "path": "../kit"
+    },
+    {
+      "path": "../fixtures"
+    }
+  ]
+}