test(electron): theme check (#2182)

apps/electron/layers/main/src/main-window.ts

@@ -8,6 +8,8 @@ import { isMacOS } from '../../utils';
 const IS_DEV: boolean =
   process.env.NODE_ENV === 'development' && !process.env.CI;
 
+const DEV_TOOL = process.env.DEV_TOOL === 'true';
+
 async function createWindow() {
   logger.info('create window');
   const mainWindowState = electronWindowState({
@@ -57,7 +59,7 @@ async function createWindow() {
 
     logger.info('main window is ready to show');
 
-    if (IS_DEV) {
+    if (DEV_TOOL) {
       browserWindow.webContents.openDevTools();
     }
   });

apps/electron/tests/basic.spec.ts

@@ -1,15 +1,33 @@
 import { resolve } from 'node:path';
 
-import { test } from '@affine-test/kit/playwright';
+import { test, testResultDir } from '@affine-test/kit/playwright';
+import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
+import type { ElectronApplication } from 'playwright';
 import { _electron as electron } from 'playwright';
 
-test('new page', async () => {
+let electronApp: ElectronApplication;
-  const electronApp = await electron.launch({
+let page: Page;
+
+test.beforeEach(async () => {
+  electronApp = await electron.launch({
     args: [resolve(__dirname, '..')],
     executablePath: resolve(__dirname, '../node_modules/.bin/electron'),
+    colorScheme: 'light',
   });
-  const page = await electronApp.firstWindow();
+  page = await electronApp.firstWindow();
+  // cleanup page data
+  await page.evaluate(() => localStorage.clear());
+});
+
+test.afterEach(async () => {
+  // cleanup page data
+  await page.evaluate(() => localStorage.clear());
+  await page.close();
+  await electronApp.close();
+});
+
+test('new page', async () => {
   await page.getByTestId('new-page-button').click({
     delay: 100,
   });
@@ -19,15 +37,34 @@ test('new page', async () => {
     () => globalThis.currentWorkspace.flavour
   );
   expect(flavour).toBe('local');
-  await electronApp.close();
+});
+
+test('app theme', async () => {
+  await page.waitForSelector('v-line');
+  const root = page.locator('html');
+  {
+    const themeMode = await root.evaluate(element =>
+      element.getAttribute('data-theme')
+    );
+    expect(themeMode).toBe('light');
+  }
+  await page.screenshot({
+    path: resolve(testResultDir, 'affine-light-theme-electron.png'),
+  });
+  await page.getByTestId('change-theme-dark').click();
+  await page.waitForTimeout(50);
+  {
+    const themeMode = await root.evaluate(element =>
+      element.getAttribute('data-theme')
+    );
+    expect(themeMode).toBe('dark');
+  }
+  await page.screenshot({
+    path: resolve(testResultDir, 'affine-dark-theme-electron.png'),
+  });
 });
 
 test('affine cloud disabled', async () => {
-  const electronApp = await electron.launch({
-    args: [resolve(__dirname, '..')],
-    executablePath: resolve(__dirname, '../node_modules/.bin/electron'),
-  });
-  const page = await electronApp.firstWindow();
   await page.getByTestId('new-page-button').click({
     delay: 100,
   });
@@ -37,5 +74,4 @@ test('affine cloud disabled', async () => {
   await page.getByTestId('disable-affine-cloud-modal').waitFor({
     state: 'visible',
   });
-  await electronApp.close();
 });

tests/kit/playwright.ts

@@ -1,10 +1,18 @@
+import { ok } from 'node:assert';
 import crypto from 'node:crypto';
 import fs from 'node:fs';
-import path from 'node:path';
+import path, { resolve } from 'node:path';
 import process from 'node:process';
 
 import { test as baseTest } from '@playwright/test';
 
+export const rootDir = resolve(__dirname, '..', '..');
+// assert that the rootDir is the root of the project
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+ok(require(resolve(rootDir, 'package.json')).name.toLowerCase() === 'affine');
+
+export const testResultDir = resolve(rootDir, 'test-results');
+
 const istanbulTempDir = process.env.ISTANBUL_TEMP_DIR
   ? path.resolve(process.env.ISTANBUL_TEMP_DIR)
   : path.join(process.cwd(), '.nyc_output');

tests/libs/utils.ts

@@ -1,6 +1,3 @@
-import { ok } from 'node:assert';
-import { resolve } from 'node:path';
-
 import type { PageMeta } from '@blocksuite/store';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
@@ -10,13 +7,6 @@ const user1 = require('@affine-test/fixtures/built-in-user1.json');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const user2 = require('@affine-test/fixtures/built-in-user2.json');
 
-export const rootDir = resolve(__dirname, '..', '..');
-// assert that the rootDir is the root of the project
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-ok(require(resolve(rootDir, 'package.json')).name.toLowerCase() === 'affine');
-
-export const testResultDir = resolve(rootDir, 'test-results');
-
 export async function getBuiltInUser() {
   return Promise.all([
     fetch('http://localhost:3000/api/user/token', {

tests/parallels/local-first-setting-page.spec.ts

@@ -1,12 +1,11 @@
 import { resolve } from 'node:path';
 
-import { test } from '@affine-test/kit/playwright';
+import { test, testResultDir } from '@affine-test/kit/playwright';
 import { expect } from '@playwright/test';
 
 import { openHomePage } from '../libs/load-page';
 import { waitMarkdownImported } from '../libs/page-logic';
 import { clickSideBarSettingButton } from '../libs/sidebar';
-import { testResultDir } from '../libs/utils';
 
 test('Should highlight the setting page menu when selected', async ({
   page,

tests/parallels/theme.spec.ts

@@ -1,13 +1,12 @@
 import { resolve } from 'node:path';
 
-import { test } from '@affine-test/kit/playwright';
+import { test, testResultDir } from '@affine-test/kit/playwright';
 import { expect } from '@playwright/test';
 
 import { openHomePage } from '../libs/load-page';
 import { waitMarkdownImported } from '../libs/page-logic';
-import { testResultDir } from '../libs/utils';
 
-// default could be anything according to the system
+// default could be anything, according to the system
 test('default white', async ({ browser }) => {
   const context = await browser.newContext({
     colorScheme: 'light',
@@ -20,15 +19,14 @@ test('default white', async ({ browser }) => {
     element.getAttribute('data-theme')
   );
   expect(themeMode).toBe('light');
-  const prev = await page.screenshot({
+  await page.screenshot({
     path: resolve(testResultDir, 'affine-light-theme.png'),
   });
   await page.getByTestId('change-theme-dark').click();
   await page.waitForTimeout(50);
-  const after = await page.screenshot({
+  await page.screenshot({
     path: resolve(testResultDir, 'affine-dark-theme.png'),
   });
-  expect(prev).not.toEqual(after);
 });
 
 // test('change theme to dark', async ({ page }) => {