feat: add artifact tests (#859)

tests/pages/artifact.ts

@@ -0,0 +1,108 @@
+import { expect, Page } from '@playwright/test';
+
+export class ArtifactPage {
+  constructor(private page: Page) {}
+
+  public get artifact() {
+    return this.page.getByTestId('artifact');
+  }
+
+  public get sendButton() {
+    return this.artifact.getByTestId('send-button');
+  }
+
+  public get stopButton() {
+    return this.page.getByTestId('stop-button');
+  }
+
+  public get multimodalInput() {
+    return this.page.getByTestId('multimodal-input');
+  }
+
+  async isGenerationComplete() {
+    const response = await this.page.waitForResponse((response) =>
+      response.url().includes('/api/chat'),
+    );
+
+    await response.finished();
+  }
+
+  async sendUserMessage(message: string) {
+    await this.artifact.getByTestId('multimodal-input').click();
+    await this.artifact.getByTestId('multimodal-input').fill(message);
+    await this.artifact.getByTestId('send-button').click();
+  }
+
+  async getRecentAssistantMessage() {
+    const messageElements = await this.artifact
+      .getByTestId('message-assistant')
+      .all();
+    const lastMessageElement = messageElements[messageElements.length - 1];
+
+    const content = await lastMessageElement
+      .getByTestId('message-content')
+      .innerText()
+      .catch(() => null);
+
+    const reasoningElement = await lastMessageElement
+      .getByTestId('message-reasoning')
+      .isVisible()
+      .then(async (visible) =>
+        visible
+          ? await lastMessageElement
+              .getByTestId('message-reasoning')
+              .innerText()
+          : null,
+      )
+      .catch(() => null);
+
+    return {
+      element: lastMessageElement,
+      content,
+      reasoning: reasoningElement,
+      async toggleReasoningVisibility() {
+        await lastMessageElement
+          .getByTestId('message-reasoning-toggle')
+          .click();
+      },
+    };
+  }
+
+  async getRecentUserMessage() {
+    const messageElements = await this.artifact
+      .getByTestId('message-user')
+      .all();
+    const lastMessageElement = messageElements[messageElements.length - 1];
+
+    const content = await lastMessageElement.innerText();
+
+    const hasAttachments = await lastMessageElement
+      .getByTestId('message-attachments')
+      .isVisible()
+      .catch(() => false);
+
+    const attachments = hasAttachments
+      ? await lastMessageElement.getByTestId('message-attachments').all()
+      : [];
+
+    const page = this.artifact;
+
+    return {
+      element: lastMessageElement,
+      content,
+      attachments,
+      async edit(newMessage: string) {
+        await page.getByTestId('message-edit').click();
+        await page.getByTestId('message-editor').fill(newMessage);
+        await page.getByTestId('message-editor-send-button').click();
+        await expect(
+          page.getByTestId('message-editor-send-button'),
+        ).not.toBeVisible();
+      },
+    };
+  }
+
+  async closeArtifact() {
+    return this.page.getByTestId('artifact-close-button').click();
+  }
+}

tests/pages/chat.ts

@@ -27,18 +27,25 @@ export class ChatPage {
   }
 
   async sendUserMessage(message: string) {
-    await this.page.getByTestId('multimodal-input').click();
-    await this.page.getByTestId('multimodal-input').fill(message);
-    await this.page.getByTestId('send-button').click();
-    await this.page.getByTestId('message-user').isVisible();
-    expect(await this.page.getByTestId('message-user').innerText()).toContain(
-      message,
-    );
+    await this.multimodalInput.click();
+    await this.multimodalInput.fill(message);
+    await this.sendButton.click();
   }
 
   async isGenerationComplete() {
-    await expect(this.page.getByTestId('send-button')).toBeVisible();
-    await this.page.waitForTimeout(2000);
+    const response = await this.page.waitForResponse((response) =>
+      response.url().includes('/api/chat'),
+    );
+
+    await response.finished();
+  }
+
+  async isVoteComplete() {
+    const response = await this.page.waitForResponse((response) =>
+      response.url().includes('/api/vote'),
+    );
+
+    await response.finished();
   }
 
   async hasChatIdInUrl() {
@@ -123,21 +130,21 @@ export class ChatPage {
       )
       .catch(() => null);
 
-    const page = this.page;
-
     return {
       element: lastMessageElement,
       content,
       reasoning: reasoningElement,
-      async waitForGenerationComplete() {
-        await expect(page.getByTestId('send-button')).toBeVisible();
-        await page.waitForTimeout(2000);
-      },
       async toggleReasoningVisibility() {
         await lastMessageElement
           .getByTestId('message-reasoning-toggle')
           .click();
       },
+      async upvote() {
+        await lastMessageElement.getByTestId('message-upvote').click();
+      },
+      async downvote() {
+        await lastMessageElement.getByTestId('message-downvote').click();
+      },
     };
   }