feat: add reasoning tests (#856)

tests/pages/chat.ts

@@ -0,0 +1,186 @@
+import fs from 'fs';
+import path from 'path';
+import { chatModels } from '@/lib/ai/models';
+import { expect, Page } from '@playwright/test';
+
+export class ChatPage {
+  constructor(private page: Page) {}
+
+  public get sendButton() {
+    return this.page.getByTestId('send-button');
+  }
+
+  public get stopButton() {
+    return this.page.getByTestId('stop-button');
+  }
+
+  public get multimodalInput() {
+    return this.page.getByTestId('multimodal-input');
+  }
+
+  async createNewChat() {
+    await this.page.goto('/');
+  }
+
+  public getCurrentURL(): string {
+    return this.page.url();
+  }
+
+  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,
+    );
+  }
+
+  async isGenerationComplete() {
+    await expect(this.page.getByTestId('send-button')).toBeVisible();
+    await this.page.waitForTimeout(2000);
+  }
+
+  async hasChatIdInUrl() {
+    await expect(this.page).toHaveURL(
+      /^http:\/\/localhost:3000\/chat\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/,
+    );
+  }
+
+  async sendUserMessageFromSuggestion() {
+    await this.page
+      .getByRole('button', { name: 'What are the advantages of' })
+      .click();
+  }
+
+  async isElementVisible(elementId: string) {
+    await expect(this.page.getByTestId(elementId)).toBeVisible();
+  }
+
+  async isElementNotVisible(elementId: string) {
+    await expect(this.page.getByTestId(elementId)).not.toBeVisible();
+  }
+
+  async addImageAttachment() {
+    this.page.on('filechooser', async (fileChooser) => {
+      const filePath = path.join(
+        process.cwd(),
+        'public',
+        'images',
+        'mouth of the seine, monet.jpg',
+      );
+      const imageBuffer = fs.readFileSync(filePath);
+
+      await fileChooser.setFiles({
+        name: 'mouth of the seine, monet.jpg',
+        mimeType: 'image/jpeg',
+        buffer: imageBuffer,
+      });
+    });
+
+    await this.page.getByTestId('attachments-button').click();
+  }
+
+  public async getSelectedModel() {
+    const modelId = await this.page.getByTestId('model-selector').innerText();
+    return modelId;
+  }
+
+  public async chooseModelFromSelector(chatModelId: string) {
+    const chatModel = chatModels.find(
+      (chatModel) => chatModel.id === chatModelId,
+    );
+
+    if (!chatModel) {
+      throw new Error(`Model with id ${chatModelId} not found`);
+    }
+
+    await this.page.getByTestId('model-selector').click();
+    await this.page.getByTestId(`model-selector-item-${chatModelId}`).click();
+    expect(await this.getSelectedModel()).toBe(chatModel.name);
+  }
+
+  async getRecentAssistantMessage() {
+    const messageElements = await this.page
+      .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);
+
+    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 getRecentUserMessage() {
+    const messageElements = await this.page.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.page;
+
+    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 waitForMessageGeneration(timeout = 10000) {
+    await this.page.waitForFunction(
+      () => {
+        return document.querySelector('[data-testid="send-button"]') !== null;
+      },
+      { timeout },
+    );
+
+    await this.page.waitForTimeout(500);
+  }
+}