Skip to content

Commit

Permalink
test(electron): add test cases for electron tabs (#7635)
Browse files Browse the repository at this point in the history
  • Loading branch information
pengx17 committed Jul 29, 2024
1 parent 1efc1d0 commit 157cc97
Show file tree
Hide file tree
Showing 8 changed files with 215 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const WorkbenchTab = ({
return (
<div
key={workbench.id}
data-testid="workbench-tab"
data-active={tabActive}
data-pinned={workbench.pinned}
className={styles.tab}
Expand All @@ -93,6 +94,7 @@ const WorkbenchTab = ({
<Fragment key={view.id}>
<button
key={view.id}
data-testid="split-view-label"
className={styles.splitViewLabel}
data-active={activeViewIndex === viewIdx && tabActive}
onContextMenu={() => {
Expand Down Expand Up @@ -125,7 +127,11 @@ const WorkbenchTab = ({
})}
{!workbench.pinned && tabsLength > 1 ? (
<div className={styles.tabCloseButtonWrapper}>
<button className={styles.tabCloseButton} onClick={onCloseTab}>
<button
data-testid="close-tab-button"
className={styles.tabCloseButton}
onClick={onCloseTab}
>
<CloseIcon />
</button>
</div>
Expand Down Expand Up @@ -214,7 +220,7 @@ export const AppTabsHeader = ({
/>
);
})}
<IconButton onClick={onAddTab}>
<IconButton onClick={onAddTab} data-testid="add-tab-view-button">
<PlusIcon />
</IconButton>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const SplitViewMenuIndicator = memo(
<div
ref={ref}
data-active={active}
data-testid="split-view-indicator"
className={clsx(className, styles.indicator)}
onClick={onClick}
onMouseDown={onMouseDown}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -710,7 +710,7 @@ export class WebContentViewsManager {
view.webContents.on('did-finish-load', () => {
unsub = helperProcessManager.connectRenderer(view.webContents);
});
view.webContents.on('did-start-loading', () => {
view.webContents.on('will-navigate', () => {
// means the view is reloaded
this.appTabsUIReady$.next(
new Set([...this.appTabsUIReady$.value].filter(key => key !== viewId))
Expand Down
40 changes: 0 additions & 40 deletions tests/affine-desktop/e2e/basic.spec.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { test } from '@affine-test/kit/electron';
import {
clickNewPageButton,
createLinkedPage,
getBlockSuiteEditorTitle,
} from '@affine-test/kit/utils/page-logic';
import {
Expand Down Expand Up @@ -143,42 +142,3 @@ test('delete workspace', async ({ page }) => {
'Demo Workspace'
);
});

// temporary way to enable split view
async function enableSplitView(page: Page) {
await page.evaluate(() => {
const settingKey = 'affine-settings';
window.localStorage.setItem(
settingKey,
JSON.stringify({
clientBorder: false,
fullWidthLayout: false,
windowFrameStyle: 'frameless',
fontStyle: 'Serif',
dateFormat: 'MM/dd/YYYY',
startWeekOnMonday: false,
enableBlurBackground: true,
enableNoisyBackground: true,
autoCheckUpdate: true,
autoDownloadUpdate: true,
enableMultiView: true,
editorFlags: {},
})
);
});
await page.reload();
}

test('open split view', async ({ page }) => {
await enableSplitView(page);
await clickNewPageButton(page);
await page.waitForTimeout(500);
await page.keyboard.press('Enter');
await createLinkedPage(page, 'hi from another page');
await page
.locator('.affine-reference-title:has-text("hi from another page")')
.click({
modifiers: ['ControlOrMeta', 'Alt'],
});
await expect(page.locator('.doc-title-container')).toHaveCount(2);
});
2 changes: 1 addition & 1 deletion tests/affine-desktop/e2e/behavior.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import os from 'node:os';
import { test } from '@affine-test/kit/electron';
import { shouldCallIpcRendererHandler } from '@affine-test/kit/utils/ipc';

test.describe('behavior test', () => {
test.describe.skip('behavior test', () => {
if (os.platform() === 'darwin') {
test('system button should hidden correctly', async ({
page,
Expand Down
190 changes: 190 additions & 0 deletions tests/affine-desktop/e2e/tabs.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
import { test } from '@affine-test/kit/electron';
import {
clickNewPageButton,
createLinkedPage,
} from '@affine-test/kit/utils/page-logic';
import { expect, type Page } from '@playwright/test';

test('create new tab', async ({ views }) => {
let page = await views.getActive();

await page.getByTestId('add-tab-view-button').click();
await expect(page.getByTestId('workbench-tab')).toHaveCount(2);
// new tab title should be All docs
await expect(page.getByTestId('workbench-tab').nth(1)).toContainText(
'All docs'
);
page = await views.getActive();
// page content should be at all docs page
await expect(page.getByTestId('virtualized-page-list')).toContainText(
'All Docs'
);
});

test('can switch & close tab by clicking', async ({ page }) => {
await page.getByTestId('add-tab-view-button').click();

await expect(page.getByTestId('workbench-tab').nth(1)).toHaveAttribute(
'data-active',
'true'
);
// switch to the previous tab by clicking on it
await page.getByTestId('workbench-tab').nth(0).click();
await expect(page.getByTestId('workbench-tab').nth(0)).toHaveAttribute(
'data-active',
'true'
);

// switch to the next tab by clicking on it
await page.getByTestId('workbench-tab').nth(1).click();
await expect(page.getByTestId('workbench-tab').nth(1)).toHaveAttribute(
'data-active',
'true'
);

// close the current tab
await page
.getByTestId('workbench-tab')
.nth(1)
.getByTestId('close-tab-button')
.click();

// the first tab should be active
await expect(page.getByTestId('workbench-tab').nth(0)).toHaveAttribute(
'data-active',
'true'
);
});

test('can switch tab by CTRL+number', async ({ page }) => {
test.fixme(); // the shortcut can be only captured by the main process
await page.keyboard.down('ControlOrMeta+T');
await expect(page.getByTestId('workbench-tab')).toHaveCount(2);
await expect(page.getByTestId('workbench-tab').nth(1)).toHaveAttribute(
'data-active',
'true'
);
// switch to the previous tab by pressing CTRL+1
await page.locator('body').press('ControlOrMeta+1');
await expect(page.getByTestId('workbench-tab').nth(0)).toHaveAttribute(
'data-active',
'true'
);
// switch to the next tab by pressing CTRL+2
await page.locator('body').press('ControlOrMeta+2');
await expect(page.getByTestId('workbench-tab').nth(1)).toHaveAttribute(
'data-active',
'true'
);
});

test('Collapse Sidebar', async ({ page }) => {
await page
.locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
.click();
const sliderBarArea = page.getByTestId('app-sidebar');
await expect(sliderBarArea).not.toBeInViewport();
});

test('Expand Sidebar', async ({ page }) => {
await page
.locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
.click();
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).not.toBeInViewport();

await page
.locator('[data-testid=app-sidebar-arrow-button-expand][data-show=true]')
.click();
await expect(sliderBarArea).toBeInViewport();
});

test('tab title will change when navigating', async ({ page }) => {
await expect(page.getByTestId('workbench-tab')).toContainText(
'Write, Draw, Plan all at Once'
);

// create new page
await clickNewPageButton(page);
await expect(page.getByTestId('workbench-tab')).toContainText('Untitled');

// go to all page
await page.getByTestId('all-pages').click();
await expect(page.getByTestId('workbench-tab')).toContainText('All docs');

// go to today's journal
await page.getByTestId('slider-bar-journals-button').click();
await expect(page.locator('.doc-title-container')).toContainText('Today');
const dateString = await page
.locator('.doc-title-container > span:first-of-type')
.textContent();

if (dateString) {
await expect(page.getByTestId('workbench-tab')).toContainText(dateString);
}
});

// temporary way to enable split view
async function enableSplitView(page: Page) {
await page.evaluate(() => {
const settingKey = 'affine-settings';
window.localStorage.setItem(
settingKey,
JSON.stringify({
clientBorder: false,
fullWidthLayout: false,
windowFrameStyle: 'frameless',
fontStyle: 'Serif',
dateFormat: 'MM/dd/YYYY',
startWeekOnMonday: false,
enableBlurBackground: true,
enableNoisyBackground: true,
autoCheckUpdate: true,
autoDownloadUpdate: true,
enableMultiView: true,
editorFlags: {},
})
);
});
await page.reload();
}

test('open split view', async ({ page }) => {
await enableSplitView(page);
await clickNewPageButton(page);
await page.waitForTimeout(500);
await page.keyboard.press('Enter');
await createLinkedPage(page, 'hi from another page');
await page
.locator('.affine-reference-title:has-text("hi from another page")')
.click({
modifiers: ['ControlOrMeta', 'Alt'],
});
await expect(page.locator('.doc-title-container')).toHaveCount(2);

// check tab title
await expect(page.getByTestId('split-view-label')).toHaveCount(2);
await expect(page.getByTestId('split-view-label').nth(0)).toContainText(
'Untitled'
);
await expect(page.getByTestId('split-view-label').nth(1)).toContainText(
'hi from another page'
);

// the second split view should be active
await expect(page.getByTestId('split-view-label').nth(1)).toHaveAttribute(
'data-active',
'true'
);

// by clicking the first split view label, the first split view should be active
await page.getByTestId('split-view-label').nth(0).click();
await expect(page.getByTestId('split-view-label').nth(0)).toHaveAttribute(
'data-active',
'true'
);
await expect(page.getByTestId('split-view-indicator').nth(0)).toHaveAttribute(
'data-active',
'true'
);
});
17 changes: 12 additions & 5 deletions tests/kit/electron.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ export const test = base.extend<{
appData: string;
sessionData: string;
};
views: {
getActive: () => Promise<Page>;
};
router: {
goto: (path: RoutePath) => Promise<void>;
};
Expand Down Expand Up @@ -88,6 +91,15 @@ export const test = base.extend<{

await use(page as Page);
},
views: async ({ electronApp, page }, use) => {
void page; // makes sure page is a dependency
await use({
getActive: async () => {
const view = await getActivePage(electronApp.windows());
return view || page;
},
});
},
// eslint-disable-next-line no-empty-pattern
electronApp: async ({}, use) => {
try {
Expand Down Expand Up @@ -150,8 +162,3 @@ export const test = base.extend<{
await use(appInfo);
},
});

// eslint-disable-next-line no-empty-pattern
test.afterEach(({}, testInfo) => {
console.log('cleaning up for ' + testInfo);
});
2 changes: 2 additions & 0 deletions tests/kit/utils/ipc.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// TODO(@pengx17): remove

import type { affine } from '@affine/electron-api';
// Credit: https://github.com/spaceagetv/electron-playwright-helpers/blob/main/src/ipc_helpers.ts
import type { Page } from '@playwright/test';
Expand Down

0 comments on commit 157cc97

Please sign in to comment.