feat: add tests (#843)
This commit is contained in:
Jeremy
GitHub
parent
95a2af2535
commit
9dd9a9898c
35 changed files with 1063 additions and 191 deletions
77
tests/auth.test.ts
Normal file
77
tests/auth.test.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { generateId } from 'ai';
|
||||
import { getUnixTime } from 'date-fns';
|
||||
import { test, expect, Page } from '@playwright/test';
|
||||
|
||||
test.use({ storageState: { cookies: [], origins: [] } });
|
||||
|
||||
const testEmail = `test-${getUnixTime(new Date())}@playwright.com`;
|
||||
const testPassword = generateId(16);
|
||||
|
||||
class AuthPage {
|
||||
constructor(private page: Page) {}
|
||||
|
||||
async gotoLogin() {
|
||||
await this.page.goto('/login');
|
||||
await expect(this.page.getByRole('heading')).toContainText('Sign In');
|
||||
}
|
||||
|
||||
async gotoRegister() {
|
||||
await this.page.goto('/register');
|
||||
await expect(this.page.getByRole('heading')).toContainText('Sign Up');
|
||||
}
|
||||
|
||||
async register(email: string, password: string) {
|
||||
await this.gotoRegister();
|
||||
await this.page.getByPlaceholder('user@acme.com').click();
|
||||
await this.page.getByPlaceholder('user@acme.com').fill(email);
|
||||
await this.page.getByLabel('Password').click();
|
||||
await this.page.getByLabel('Password').fill(password);
|
||||
await this.page.getByRole('button', { name: 'Sign Up' }).click();
|
||||
}
|
||||
|
||||
async login(email: string, password: string) {
|
||||
await this.gotoLogin();
|
||||
await this.page.getByPlaceholder('user@acme.com').click();
|
||||
await this.page.getByPlaceholder('user@acme.com').fill(email);
|
||||
await this.page.getByLabel('Password').click();
|
||||
await this.page.getByLabel('Password').fill(password);
|
||||
await this.page.getByRole('button', { name: 'Sign In' }).click();
|
||||
}
|
||||
|
||||
async expectToastToContain(text: string) {
|
||||
await expect(this.page.getByTestId('toast')).toContainText(text);
|
||||
}
|
||||
}
|
||||
|
||||
test.describe
|
||||
.serial('authentication', () => {
|
||||
let authPage: AuthPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
authPage = new AuthPage(page);
|
||||
});
|
||||
|
||||
test('redirect to login page when unauthenticated', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await expect(page.getByRole('heading')).toContainText('Sign In');
|
||||
});
|
||||
|
||||
test('register a test account', async ({ page }) => {
|
||||
await authPage.register(testEmail, testPassword);
|
||||
await expect(page).toHaveURL('/');
|
||||
await authPage.expectToastToContain('Account created successfully!');
|
||||
});
|
||||
|
||||
test('register test account with existing email', async () => {
|
||||
await authPage.register(testEmail, testPassword);
|
||||
await authPage.expectToastToContain('Account already exists!');
|
||||
});
|
||||
|
||||
test('log into account', async ({ page }) => {
|
||||
await authPage.login(testEmail, testPassword);
|
||||
|
||||
await page.waitForURL('/');
|
||||
await expect(page).toHaveURL('/');
|
||||
await expect(page.getByPlaceholder('Send a message...')).toBeVisible();
|
||||
});
|
||||
});
|
||||
194
tests/chat.test.ts
Normal file
194
tests/chat.test.ts
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { test, expect, Page } from '@playwright/test';
|
||||
|
||||
class ChatPage {
|
||||
constructor(private page: Page) {}
|
||||
|
||||
async goto() {
|
||||
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-0').isVisible();
|
||||
expect(await this.page.getByTestId('message-user-0').innerText()).toContain(
|
||||
message,
|
||||
);
|
||||
}
|
||||
|
||||
async getAssistantResponse() {
|
||||
return this.page.getByTestId('message-assistant-1').innerText();
|
||||
}
|
||||
|
||||
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 editAndResendUserMessage(message: string) {
|
||||
await this.page.getByTestId('edit-user-0').click();
|
||||
await this.page.getByTestId('message-editor').fill(message);
|
||||
await this.page.getByTestId('message-editor-send-button').click();
|
||||
await this.page.getByTestId('message-user-0').isVisible();
|
||||
await expect(
|
||||
this.page.getByTestId('message-editor-send-button'),
|
||||
).not.toBeVisible();
|
||||
expect(await this.page.getByTestId('message-user-0').innerText()).toContain(
|
||||
message,
|
||||
);
|
||||
}
|
||||
|
||||
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 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');
|
||||
}
|
||||
}
|
||||
|
||||
test.describe('chat activity', () => {
|
||||
let chatPage: ChatPage;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
chatPage = new ChatPage(page);
|
||||
await chatPage.goto();
|
||||
});
|
||||
|
||||
test('send a user message and receive response', async () => {
|
||||
await chatPage.sendUserMessage('why is grass green?');
|
||||
await chatPage.isGenerationComplete();
|
||||
expect(await chatPage.getAssistantResponse()).toContain(
|
||||
"it's just green duh!",
|
||||
);
|
||||
});
|
||||
|
||||
test('redirect to /chat/:id after submitting message', async () => {
|
||||
await chatPage.sendUserMessage('why is grass green?');
|
||||
await chatPage.isGenerationComplete();
|
||||
expect(await chatPage.getAssistantResponse()).toContain(
|
||||
"it's just green duh!",
|
||||
);
|
||||
await chatPage.hasChatIdInUrl();
|
||||
});
|
||||
|
||||
test('send a user message from suggestion', async () => {
|
||||
await chatPage.sendUserMessageFromSuggestion();
|
||||
await chatPage.isGenerationComplete();
|
||||
expect(await chatPage.getAssistantResponse()).toContain(
|
||||
'with next.js you can ship fast!',
|
||||
);
|
||||
});
|
||||
|
||||
test('toggle between send/stop button based on activity', async () => {
|
||||
await expect(chatPage.sendButton).toBeVisible();
|
||||
await expect(chatPage.sendButton).toBeDisabled();
|
||||
|
||||
await chatPage.sendUserMessage('why is grass green?');
|
||||
|
||||
await expect(chatPage.sendButton).not.toBeVisible();
|
||||
await expect(chatPage.stopButton).toBeVisible();
|
||||
|
||||
await chatPage.isGenerationComplete();
|
||||
|
||||
await expect(chatPage.stopButton).not.toBeVisible();
|
||||
await expect(chatPage.sendButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('stop generation during submission', async () => {
|
||||
await chatPage.sendUserMessage('why is grass green?');
|
||||
await chatPage.stopButton.click();
|
||||
await expect(chatPage.sendButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('edit user message and resubmit', async () => {
|
||||
await chatPage.sendUserMessage('why is grass green?');
|
||||
await chatPage.isGenerationComplete();
|
||||
|
||||
expect(await chatPage.getAssistantResponse()).toContain(
|
||||
"it's just green duh!",
|
||||
);
|
||||
|
||||
await chatPage.editAndResendUserMessage('why is the sky blue?');
|
||||
await chatPage.isGenerationComplete();
|
||||
|
||||
expect(await chatPage.getAssistantResponse()).toContain(
|
||||
"it's just blue duh!",
|
||||
);
|
||||
});
|
||||
|
||||
test('hide suggested actions after sending message', async () => {
|
||||
await chatPage.isElementVisible('suggested-actions');
|
||||
await chatPage.sendUserMessageFromSuggestion();
|
||||
await chatPage.isElementNotVisible('suggested-actions');
|
||||
});
|
||||
|
||||
test('handle file upload and send image attachment with message', async () => {
|
||||
await chatPage.addImageAttachment();
|
||||
|
||||
await chatPage.isElementVisible('attachments-preview');
|
||||
await chatPage.isElementVisible('input-attachment-loader');
|
||||
await chatPage.isElementNotVisible('input-attachment-loader');
|
||||
|
||||
await chatPage.sendUserMessage('who painted this?');
|
||||
await chatPage.isElementVisible('message-attachments-0');
|
||||
|
||||
await chatPage.isGenerationComplete();
|
||||
|
||||
await chatPage.isElementVisible('message-assistant-1');
|
||||
expect(await chatPage.getAssistantResponse()).toContain(
|
||||
'this painting is by monet!',
|
||||
);
|
||||
});
|
||||
});
|
||||
24
tests/global.setup.ts
Normal file
24
tests/global.setup.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import path from 'path';
|
||||
import { generateId } from 'ai';
|
||||
import { getUnixTime } from 'date-fns';
|
||||
import { expect, test as setup } from '@playwright/test';
|
||||
|
||||
const authFile = path.join(__dirname, '../playwright/.auth/user.json');
|
||||
|
||||
setup('authenticate', async ({ page }) => {
|
||||
const testEmail = `test-${getUnixTime(new Date())}@playwright.com`;
|
||||
const testPassword = generateId(16);
|
||||
|
||||
await page.goto('http://localhost:3000/register');
|
||||
await page.getByPlaceholder('user@acme.com').click();
|
||||
await page.getByPlaceholder('user@acme.com').fill(testEmail);
|
||||
await page.getByLabel('Password').click();
|
||||
await page.getByLabel('Password').fill(testPassword);
|
||||
await page.getByRole('button', { name: 'Sign Up' }).click();
|
||||
|
||||
await expect(page.getByTestId('toast')).toContainText(
|
||||
'Account created successfully!',
|
||||
);
|
||||
|
||||
await page.context().storageState({ path: authFile });
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue