mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-07-19 19:30:05 +00:00
66e217fea7
## Summary: This commit adds infinite scroll pagination to the chat completions and responses tables. ## Test Plan: 1. Run unit tests: npm run test 2. Manual testing: Navigate to chat completions/responses pages 3. Verify infinite scroll triggers when approaching bottom 4. Added playwright tests: npm run test:e2e
61 lines
2 KiB
TypeScript
61 lines
2 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
test.describe("LogsTable Scroll and Progressive Loading", () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Navigate to the chat completions page
|
|
await page.goto("/logs/chat-completions");
|
|
|
|
// Wait for initial data to load
|
|
await page.waitForSelector("table tbody tr", { timeout: 10000 });
|
|
});
|
|
|
|
test("should progressively load more data to fill tall viewports", async ({
|
|
page,
|
|
}) => {
|
|
// Set a tall viewport (1400px height)
|
|
await page.setViewportSize({ width: 1200, height: 1400 });
|
|
|
|
// Wait for the table to be visible
|
|
await page.waitForSelector("table");
|
|
|
|
// Wait a bit for progressive loading to potentially trigger
|
|
await page.waitForTimeout(3000);
|
|
|
|
// Count the number of rows loaded
|
|
const rowCount = await page.locator("table tbody tr").count();
|
|
|
|
// With a 1400px viewport, we should have more than the default 20 rows
|
|
// Assuming each row is ~50px, we should fit at least 25-30 rows
|
|
expect(rowCount).toBeGreaterThan(20);
|
|
});
|
|
|
|
test("should trigger infinite scroll when scrolling near bottom", async ({
|
|
page,
|
|
}) => {
|
|
// Set a medium viewport
|
|
await page.setViewportSize({ width: 1200, height: 800 });
|
|
|
|
// Wait for initial load
|
|
await page.waitForSelector("table tbody tr");
|
|
|
|
// Get initial row count
|
|
const initialRowCount = await page.locator("table tbody tr").count();
|
|
|
|
// Find the scrollable container
|
|
const scrollContainer = page.locator("div.overflow-auto").first();
|
|
|
|
// Scroll to near the bottom
|
|
await scrollContainer.evaluate((element) => {
|
|
element.scrollTop = element.scrollHeight - element.clientHeight - 100;
|
|
});
|
|
|
|
// Wait for loading indicator or new data
|
|
await page.waitForTimeout(2000);
|
|
|
|
// Check if more rows were loaded
|
|
const newRowCount = await page.locator("table tbody tr").count();
|
|
|
|
// We should have more rows after scrolling
|
|
expect(newRowCount).toBeGreaterThan(initialRowCount);
|
|
});
|
|
});
|