test: add open login modal test

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

@@ -11,7 +11,7 @@ interface LoginModalProps {
 
 export const LoginModal = ({ open, onClose }: LoginModalProps) => {
   return (
-    <Modal open={open} onClose={onClose}>
+    <Modal open={open} onClose={onClose} data-testid="login-modal">
       <ModalWrapper width={620} height={334}>
         <Header>
           <ModalCloseButton

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/LoginItem.tsx

@@ -9,7 +9,10 @@ import {
 export const LoginItem = () => {
   const { triggerLoginModal } = useModal();
   return (
-    <LoginItemWrapper onClick={() => triggerLoginModal()}>
+    <LoginItemWrapper
+      onClick={() => triggerLoginModal()}
+      data-testid="open-login-modal"
+    >
       <WorkspaceItemAvatar alt="AFFiNE" src={''}>
         A
       </WorkspaceItemAvatar>

tests/contact-us.spec.ts

@@ -5,10 +5,10 @@ loadPage();
 
 test.describe('Open contact us', () => {
   test('Click about us', async ({ page }) => {
-    page.waitForTimeout(1000);
+    // page.waitForTimeout(1000);
     const currentWorkspace = page.getByTestId('current-workspace');
     await currentWorkspace.click();
-
+    page.waitForTimeout(1000);
     await page
       .getByRole('tooltip', {
         name: 'A AFFiNE Log in to sync with affine About AFFiNE',

tests/login.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect, type Page } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Login Flow', () => {
+  test('Open Login Modal', async ({ page }) => {
+    await page.getByTestId('current-workspace').click();
+    await page.waitForTimeout(800);
+    // why don't we use waitForSelector, It seems that waitForSelector not stable?
+    await page.getByTestId('open-login-modal').click();
+    await page.waitForTimeout(800);
+    await page
+      .getByRole('heading', { name: 'Currently not logged in' })
+      .click();
+  });
+});