Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 19:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

e2e: refactoring and making it work.

Browse source
This commit is contained in:
Ruben Talstra 2025-02-12 17:40:38 +01:00
parent 2a506df443
commit 88c32b9ec6
Failed to extract signature
8 changed files with 446 additions and 400 deletions
Download patch file Download diff file Expand all files Collapse all files

65
e2e/specs/nav.spec.ts
View file

@ -1,58 +1,61 @@
import { expect, test } from '@playwright/test';
import { acceptTermsIfPresent } from '../utils/acceptTermsIfPresent';
test.describe('Navigation suite', () => {
test('Navigation bar', async ({ page }) => {
await page.goto('http://localhost:3080/', { timeout: 5000 });
await acceptTermsIfPresent(page);
await page.getByTestId('nav-user').click();
const navSettings = await page.getByTestId('nav-user').isVisible();
expect(navSettings).toBeTruthy();
// Verify that the navigation user button is visible.
expect(await page.getByTestId('nav-user').isVisible()).toBeTruthy();
});
test('Settings modal', async ({ page }) => {
await page.goto('http://localhost:3080/', { timeout: 5000 });
// Wait for the landing page heading to ensure the page has fully rendered.
await page
.getByRole('heading', { name: 'How can I help you today?' })
.waitFor({ state: 'visible', timeout: 5000 });
// Wait for the nav-user element to be visible and add a short delay.
await page.waitForSelector('[data-testid="nav-user"]', { state: 'visible', timeout: 5000 });
await page.waitForTimeout(500);
// Open the nav-user popover.
await page.getByTestId('nav-user').click();
await page.getByText('Settings').click();
const modal = await page.getByRole('dialog', { name: 'Settings' }).isVisible();
expect(modal).toBeTruthy();
// Wait for the popover container (dialog) to appear.
const popover = page.locator('[data-dialog][role="listbox"]');
await popover.waitFor({ state: 'visible', timeout: 5000 });
const modalTitle = await page.getByRole('heading', { name: 'Settings' }).textContent();
expect(modalTitle?.length).toBeGreaterThan(0);
expect(modalTitle).toEqual('Settings');
const modalTabList = await page.getByRole('tablist', { name: 'Settings' }).isVisible();
expect(modalTabList).toBeTruthy();
const generalTabPanel = await page.getByRole('tabpanel', { name: 'General' }).isVisible();
expect(generalTabPanel).toBeTruthy();
const modalClearConvos = await page.getByRole('button', { name: 'Clear' }).isVisible();
expect(modalClearConvos).toBeTruthy();
// Within the popover, click on the Settings option using its accessible role.
const settingsOption = popover.getByRole('option', { name: 'Settings' });
await settingsOption.waitFor({ state: 'visible', timeout: 5000 });
await settingsOption.click();
// Verify that a theme selector exists.
const modalTheme = page.getByTestId('theme-selector');
expect(modalTheme).toBeTruthy();
expect(await modalTheme.count()).toBeGreaterThan(0);
// Helper function to change the theme.
async function changeMode(theme: string) {
// Ensure Element Visibility:
await page.waitForSelector('[data-testid="theme-selector"]');
await page.waitForSelector('[data-testid="theme-selector"]', { state: 'visible' });
await modalTheme.click();
await page.click(`[data-theme="${theme}"]`);
// Wait for the theme change
// Wait for the theme change to take effect.
await page.waitForTimeout(1000);
// Check if the HTML element has the theme class
const html = await page.$eval(
// Check that the <html> element has the corresponding theme class.
const hasTheme = await page.$eval(
'html',
(element, selectedTheme) => element.classList.contains(selectedTheme.toLowerCase()),
theme,
(el, theme) => el.classList.contains(theme.toLowerCase()),
theme
);
expect(html).toBeTruthy();
expect(hasTheme).toBeTruthy();
}
await changeMode('dark');
await changeMode('light');
});
});
});