add tests (#536)

packages/app/src/components/Header/index.tsx

@@ -117,6 +117,7 @@ export const Header = () => {
       />
       <StyledHeader hasWarning={showWarning}>
         <StyledLogo
+          data-testid="left-top-corner-logo"
           onClick={() => {
             contactModalHandler(true);
           }}

packages/app/src/components/contact-modal/index.tsx

@@ -76,7 +76,7 @@ type TransitionsModalProps = {
 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
   return (
     <Modal open={open} onClose={onClose}>
-      <StyledModalWrapper>
+      <StyledModalWrapper data-testid="contact-us-modal-content">
         <StyledModalHeader>
           <StyledModalHeaderLeft>
             <StyledLogo src={logo.src} alt="" />

packages/app/src/components/editor-mode-switch/index.tsx

@@ -51,7 +51,7 @@ const AnimateRadioItem = ({
     </StyledIcon>
   );
   return (
-    <StyledRadioItem active={active} status={status} {...props}>
+    <StyledRadioItem title={label} active={active} status={status} {...props}>
       {isLeft ? icon : null}
       <StyledLabel shrink={status !== 'stretch'} isLeft={isLeft}>
         {label}
@@ -95,7 +95,11 @@ export const EditorModeSwitch = ({
   }, [isHover, mode]);
 
   return (
-    <StyledAnimateRadioContainer shrink={!isHover} style={style}>
+    <StyledAnimateRadioContainer
+      data-testid="editor-mode-switcher"
+      shrink={!isHover}
+      style={style}
+    >
       <AnimateRadioItem
         isLeft={true}
         label="Paper"

packages/app/src/components/faq/index.tsx

@@ -34,6 +34,7 @@ export const FAQ = () => {
           <StyledFAQWrapper>
             <Tooltip content="Contact Us" placement="left-end">
               <StyledIconWrapper
+                data-testid="right-bottom-contact-us-icon"
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
@@ -45,6 +46,7 @@ export const FAQ = () => {
             </Tooltip>
             <Tooltip content="Keyboard Shortcuts" placement="left-end">
               <StyledIconWrapper
+                data-testid="shortcuts-icon"
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
@@ -58,7 +60,10 @@ export const FAQ = () => {
         </Grow>
 
         <div style={{ position: 'relative' }}>
-          <StyledIconWrapper isEdgelessDark={isEdgelessDark}>
+          <StyledIconWrapper
+            data-testid="faq-icon"
+            isEdgelessDark={isEdgelessDark}
+          >
             <HelpIcon />
           </StyledIconWrapper>
           <StyledTransformIcon in={showContent}>

packages/app/src/components/shortcuts-modal/index.tsx

@@ -34,7 +34,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
     : windowsKeyboardShortcuts;
   return createPortal(
     <Slide direction="left" in={open} mountOnEnter unmountOnExit>
-      <StyledShortcutsModal>
+      <StyledShortcutsModal data-testid="shortcuts-modal">
         <>
           <StyledModalHeader>
             <StyledTitle>

playwright.config.ts

@@ -31,6 +31,7 @@ const config: PlaywrightTestConfig = {
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'list',
+  // reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

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 }) => {
+loadPage();
-  await page.goto('http://localhost:3000');
-});
 
 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(