Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-21 21:50:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Chat.jsx): Improve Message Creation UX by Eliminating Screen Flicker (#577)

Browse source 
* fix(Chat.jsx): conversation no longer navigates upon message creation, which would cause re-render/flicker

* chore(.gitignore): ignore storageState.json in all directories
chore(storageState.json): delete e2e/storageState.json file

* test(e2e): fix old tests with new playwright setup & add helper script for codegen

* fix(Conversation.jsx): add data-testid attribute to <a> element
test(messages.spec.js): add test for expected navigation after receiving message
test(messages.spec.js): add test for page navigations

* chore(Plugin.jsx): import Spinner from '~/components' instead of '../svg/Spinner'
chore(index.jsx): import Spinner from '~/components' instead of '../svg/Spinner'
chore(Spinner.jsx): change classProp prop to className prop in Spinner component
feat(index.ts): export Spinner component from './Spinner'
This commit is contained in:
Danny Avila 2023-07-03 16:00:04 -04:00 • committed by GitHub
parent 6b843429c5
commit 88683b9cc5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 108 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

7
e2e/specs/landing.spec.js
View file

@ -9,8 +9,7 @@ test.describe('Landing suite', () => {
expect(pageTitle.length).toBeGreaterThan(0);
});
test('Create Conversation', async () => {
const page = await myBrowser.newPage();
test('Create Conversation', async ({ page }) => {
await page.goto('http://localhost:3080/');
async function getItems() {
@ -37,9 +36,9 @@ test.describe('Landing suite', () => {
await page.locator('form').getByRole('button').nth(1).click();
// Wait for the message to be sent
await page.waitForTimeout(15000);
await page.waitForTimeout(3500);
let afterAdding = (await getItems()).length;
expect(afterAdding).toBeGreaterThan(beforeAdding);
expect(afterAdding).toBeGreaterThanOrEqual(beforeAdding);
});
});

31
e2e/specs/messages.spec.js
View file

@ -1,15 +1,22 @@
import { expect, test } from '@playwright/test';
const basePath = 'http://localhost:3080/chat/';
const initialUrl = `${basePath}new`;
const endpoints = ['google', 'openAI', 'azureOpenAI', 'bingAI', 'chatGPTBrowser', 'gptPlugins'];
function isUUID(uuid) {
let regex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
return regex.test(uuid);
}
test.describe.only('Messaging suite', () => {
test.describe('Messaging suite', () => {
test('textbox should be focused after receiving message', async ({page}) => {
test('textbox should be focused after receiving message & test expected navigation', async ({page}) => {
test.setTimeout(120000);
const message = 'hi';
const endpoint = endpoints[1];
const initialUrl = 'http://localhost:3080/chat/new';
await page.goto('http://localhost:3080/chat/new');
await page.goto(initialUrl);
await page.locator('#new-conversation-menu').click();
await page.locator(`#${endpoint}`).click();
await page.locator('form').getByRole('textbox').click();
@ -33,8 +40,26 @@ test.describe.only('Messaging suite', () => {
return document.activeElement === document.querySelector('[data-testid="text-input"]');
});
expect(isTextboxFocused).toBeTruthy();
const currentUrl = page.url();
expect(currentUrl).toBe(initialUrl);
//cleanup the conversation
await page.getByRole('navigation').getByRole('button').nth(1).click();
expect(page.url()).toBe(initialUrl);
await page.getByTestId('convo-item').nth(1).click();
const finalUrl = page.url();
const conversationId = finalUrl.split(basePath).pop();
expect(isUUID(conversationId)).toBeTruthy();
});
// in this spec as we are testing post-message navigation, we are not testing the message response
test('Page navigations', async ({ page }) => {
await page.goto(initialUrl);
await page.getByTestId('convo-item').nth(1).click();
const currentUrl = page.url();
const conversationId = currentUrl.split(basePath).pop();
expect(isUUID(conversationId)).toBeTruthy();
await page.getByText('New chat', { exact: true }).click();
expect(page.url()).toBe(initialUrl);
});
});

14
e2e/specs/nav.spec.js
View file

@ -1,16 +1,7 @@
import { expect, test } from '@playwright/test';
test.describe('Navigation suite', () => {
let myBrowser;
test.beforeEach(async ({ browser }) => {
myBrowser = await browser.newContext({
storageState: 'e2e/auth.json',
});
});
test('Navigation bar', async () => {
const page = await myBrowser.newPage();
test('Navigation bar', async ({ page }) => {
await page.goto('http://localhost:3080/');
await page.locator('[id="headlessui-menu-button-\\:r0\\:"]').click();
@ -18,8 +9,7 @@ test.describe('Navigation suite', () => {
expect(navBar).toBeTruthy();
});
test('Settings modal', async () => {
const page = await myBrowser.newPage();
test('Settings modal', async ({ page }) => {
await page.goto('http://localhost:3080/');
await page.locator('[id="headlessui-menu-button-\\:r0\\:"]').click();
await page.getByText('Settings').click();

11
e2e/specs/popup.spec.js
View file

@ -1,16 +1,7 @@
import { expect, test } from '@playwright/test';
test.describe('Endpoints Presets suite', () => {
let myBrowser;
test.beforeEach(async ({ browser }) => {
myBrowser = await browser.newContext({
storageState: 'e2e/auth.json',
});
});
test('Endpoints Suite', async () => {
const page = await myBrowser.newPage();
test('Endpoints Suite', async ({ page }) => {
await page.goto('http://localhost:3080/');
await page.getByRole('button', { name: 'New Topic' }).click();

1
e2e/storageState.json
View file

@ -1 +0,0 @@
{}