test: add test case for upload image (#1250)

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -63,6 +63,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
             <Upload
               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
               fileChange={fileChange}
+              data-testid="upload-avatar"
             >
               <>
                 <div className="camera-icon">

apps/web/src/components/pure/create-workspace-modal/index.tsx

@@ -48,6 +48,7 @@ export const CreateWorkspaceModal = ({
             <ContentTitle>{t('New Workspace')}</ContentTitle>
             <p>{t('Workspace description')}</p>
             <Input
+              data-testid="create-workspace-input"
               onKeyDown={handleKeyDown}
               placeholder={t('Set a Workspace name')}
               maxLength={15}
@@ -63,6 +64,7 @@ export const CreateWorkspaceModal = ({
               }}
             />
             <Button
+              data-testid="create-workspace-button"
               disabled={!workspaceName}
               style={{
                 width: '260px',

apps/web/src/components/pure/file-upload/index.tsx

@@ -13,6 +13,7 @@ export const Upload: React.FC<UploadProps> = ({
   fileChange,
   accept,
   children,
+  ...props
 }) => {
   const { t } = useTranslation();
   const input_ref = useRef<HTMLInputElement>(null);
@@ -41,6 +42,7 @@ export const Upload: React.FC<UploadProps> = ({
         style={{ display: 'none' }}
         onChange={_handleInputChange}
         accept={accept}
+        {...props}
       />
     </UploadStyle>
   );

apps/web/src/components/pure/workspace-avatar/index.tsx

@@ -12,16 +12,17 @@ interface AvatarProps {
 }
 
 export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
-  function Avatar(props) {
+  function Avatar({ size: _size, avatar_url, style, name, ...props }) {
-    const size = props.size || 20;
+    const size = _size || 20;
     const sizeStr = size + 'px';
 
     return (
       <>
-        {props.avatar_url ? (
+        {avatar_url ? (
           <div
+            {...props}
             style={{
-              ...props.style,
+              ...style,
               width: sizeStr,
               height: sizeStr,
               color: '#fff',
@@ -34,7 +35,7 @@ export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
             <picture>
               <img
                 style={{ width: sizeStr, height: sizeStr }}
-                src={props.avatar_url}
+                src={avatar_url}
                 alt=""
                 referrerPolicy="no-referrer"
               />
@@ -42,14 +43,15 @@ export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
           </div>
         ) : (
           <div
+            {...props}
             style={{
-              ...props.style,
+              ...style,
               width: sizeStr,
               height: sizeStr,
               border: '1px solid #fff',
               color: '#fff',
               fontSize: Math.ceil(0.5 * size) + 'px',
-              background: stringToColour(props.name || 'AFFiNE'),
+              background: stringToColour(name || 'AFFiNE'),
               borderRadius: '50%',
               textAlign: 'center',
               lineHeight: size + 'px',
@@ -57,7 +59,7 @@ export const Avatar: React.FC<AvatarProps> = React.memo<AvatarProps>(
               verticalAlign: 'middle',
             }}
           >
-            {(props.name || 'AFFiNE').substring(0, 1)}
+            {(name || 'AFFiNE').substring(0, 1)}
           </div>
         )}
       </>
@@ -82,10 +84,12 @@ export const BlockSuiteWorkspaceAvatar: React.FC<BlockSuiteWorkspaceAvatar> = ({
   size = 20,
   workspace,
   style,
+  ...props
 }) => {
   const avatarURL = useWorkspaceBlobImage(workspace.meta.avatar, workspace);
   return (
     <Avatar
+      {...props}
       size={size}
       name={workspace.meta.name}
       avatar_url={avatarURL ?? ''}
@@ -110,5 +114,7 @@ export const WorkspaceAvatar: React.FC<WorkspaceUnitAvatarProps> = ({
       />
     );
   }
-  return <Avatar size={size} name="UNKNOWN" avatar_url="" style={style} />;
+  return (
+    <Avatar {...props} size={size} name="UNKNOWN" avatar_url="" style={style} />
+  );
 };

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -99,7 +99,7 @@ export const WorkspaceListModal = ({
               />
             );
           })}
-          <StyledCard onClick={onCreateWorkspace}>
+          <StyledCard data-testid="new-workspace" onClick={onCreateWorkspace}>
             <StyleWorkspaceAdd className="add-icon">
               <PlusIcon />
             </StyleWorkspaceAdd>

tests/local-first-avatar.spec.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+
+import { loadPage } from './libs/load-page';
+import { newPage } from './libs/page-logic';
+import { test } from './libs/playwright';
+
+loadPage();
+
+test.describe('Local first create page', () => {
+  test('should create a page with a local first avatar', async ({ page }) => {
+    await newPage(page);
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('new-workspace').click({ delay: 50 });
+    await page
+      .getByTestId('create-workspace-input')
+      .type('Test Workspace 1', { delay: 50 });
+    await page.getByTestId('create-workspace-button').click();
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('workspace-card').nth(1).click();
+    await page.getByText('Workspace Setting').click();
+    await page
+      .getByTestId('upload-avatar')
+      .setInputFiles('./tests/fixtures/smile.png');
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('workspace-card').nth(0).click();
+    await page.waitForTimeout(1000);
+    const text = await page.getByTestId('workspace-avatar').textContent();
+    // default avatar for default workspace
+    expect(text).toBe('U');
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('workspace-card').nth(1).click();
+    const blobUrl = await page
+      .getByTestId('workspace-avatar')
+      .locator('img')
+      .getAttribute('src');
+    // out user uploaded avatar
+    expect(blobUrl).toContain('blob:');
+  });
+});