add tests (#536)

tests/change-page-mode.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Change page mode(Paper or Edgeless)', () => {
+  test('Switch to edgeless', async ({ page }) => {
+    const switcher = page.locator('[data-testid=editor-mode-switcher]');
+    const box = await switcher.boundingBox();
+    await expect(box?.x).not.toBeUndefined();
+
+    // mouse hover trigger animation for showing full switcher
+    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+
+    const edgelessButton = page.locator(
+      '[data-testid=editor-mode-switcher] [title=Edgeless]'
+    );
+    await edgelessButton.click();
+
+    // // mouse move to edgeless button
+    // await page.mouse.move(
+    //   (box?.x ?? 0) + (box?.width ?? 0) - 5,
+    //   (box?.y ?? 0) + 5
+    // );
+
+    // await page.waitForTimeout(1000);
+
+    // // click switcher
+    // await page.mouse.click(
+    //   (box?.x ?? 0) + (box?.width ?? 0) - 5,
+    //   (box?.y ?? 0) + 5
+    // );
+
+    const edgelessDom = page.locator('edgeless-page-block');
+
+    await expect(await edgelessDom.isVisible()).toBe(true);
+  });
+});

tests/contact-us.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect, type Page } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Open contact us', () => {
+  test('Click left-top corner Logo', async ({ page }) => {
+    const leftTopCorner = page.locator('[data-testid=left-top-corner-logo]');
+    await leftTopCorner.click();
+
+    const contactUsModal = page.locator(
+      '[data-testid=contact-us-modal-content]'
+    );
+    await expect(contactUsModal).toContainText('Join our community.');
+  });
+
+  test('Click right-bottom corner contact icon', async ({ page }) => {
+    const faqIcon = page.locator('[data-testid=faq-icon]');
+    const box = await faqIcon.boundingBox();
+    await expect(box?.x).not.toBeUndefined();
+    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+
+    const rightBottomContactUs = page.locator(
+      '[data-testid=right-bottom-contact-us-icon]'
+    );
+    await expect(await rightBottomContactUs.isVisible()).toEqual(true);
+
+    await rightBottomContactUs.click();
+
+    const contactUsModal = page.locator(
+      '[data-testid=contact-us-modal-content]'
+    );
+    await expect(contactUsModal).toContainText('Join our community.');
+  });
+});

tests/libs/load-page.ts

@@ -0,0 +1,9 @@
+import { test } from '@playwright/test';
+
+export function loadPage() {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3000');
+    // waiting for page loading end
+    await page.waitForTimeout(1000);
+  });
+}

tests/shortcuts.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Shortcuts Modal', () => {
+  test('Open shortcuts modal', async ({ page }) => {
+    const faqIcon = page.locator('[data-testid=faq-icon]');
+    const box = await faqIcon.boundingBox();
+    await expect(box?.x).not.toBeUndefined();
+    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+
+    const shortcutsIcon = page.locator('[data-testid=shortcuts-icon]');
+    await expect(await shortcutsIcon.isVisible()).toEqual(true);
+
+    await shortcutsIcon.click();
+
+    const shortcutsModal = page.locator('[data-testid=shortcuts-modal]');
+    await expect(shortcutsModal).toContainText('Keyboard Shortcuts');
+  });
+});

tests/theme.spec.ts

@@ -1,8 +1,7 @@
 import { test, expect, type Page } from '@playwright/test';
+import { loadPage } from './libs/load-page';
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3000');
-});
+loadPage();
 
 test.describe('Change Theme', () => {
   test('default white', async ({ page }) => {
@@ -28,7 +27,7 @@ test.describe('Change Theme', () => {
     await expect(box?.x).not.toBeUndefined();
     await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
 
-    await page.waitForTimeout(3000);
+    await page.waitForTimeout(1000);
 
     const darkButton = page.locator('[data-testid=change-theme-dark]');
     const darkButtonPositionTop = await darkButton.evaluate(