794848d5e9* Added required ShadCN Components * Added required colors * Added required icons * Changed backend to not return beta tag * Added sidebar categories api call * Added required use-mobile hook * Refactored icons to allow sizing * Added type for sidebar category * Allowed no name on shortcut display * Added flow sidebar component that uses ShadCN sidebar * Added SidebarDraggableComponent with the new style * Replaced sidebar with current one on FlowPage * Added sidebar fixed footer with options to go to store and add custom component * Updated sidebar categories * Updated background color for sidebar * Changed size of Components title * Added color to PageComponent * Added required icons * added CustomComponent category and removed custom component from helpers * create hook useAddComponent * Use hook to add components both in PageComponent and flowSidebarComponent * Implement search * Implement searching and filtering by clicking on edge * Added check to see if store is present * Updated colors to match new color schema * Changed styling of filter component * Added Beta and Legacy badges * Implement Show Beta Components and Show Legacy Components * Fixed styling for sidebar config when collapsed * Refactored search to filter for tags * Refactor useeffect * Updated config button styling * Implemented keyboard navigation * Fixed filtering * Updated color of canvas * Implemented disclosure on sidebar settings and fetched bundles * Added temp sidebar bundles * Fixed badge styling * Added bundles to categories response in frontend * Added legacy to components * Added link to store instead of langflow.store * Added required data-testids * Fixed tests to use new data-testids and new sidebar disposition * Fix github star bug * Fixed tests that used the custom component * Changed test to test beta and legacy checkers * added a test for keyboard navigation on sidebar * Added a test to check component add by hover the plus button * [autofix.ci] apply automated fixes * updated sidebar switch change * Removed changes on Backend and used only Frontend constants for categories * merge fix * [autofix.ci] apply automated fixes * [autofix.ci] apply automated fixes (attempt 2/3) * 📝 (custom_component): Add CustomComponent class with input and output definitions 📝 (custom_component): Create CustomComponent class with display name, description, and documentation link 📝 (custom_component): Define input and output properties for CustomComponent class 📝 (custom_component): Implement build_output method in CustomComponent class 📝 (Ollama): Remove unnecessary whitespace in SvgOllama component * formatting * ♻️ (custom_component/__init__.py): refactor import statement to match the correct case of the file name for better consistency and readability * 🔧 (FlowPage/index.tsx): remove FlowToolbar component when view prop is false to improve UI consistency * 📝 (integration-side-bar.spec.ts): Comment out unnecessary code blocks related to API requests and modals to improve test readability and focus on the main test scenarios. * [autofix.ci] apply automated fixes * ✨ (flowSidebarComponent/index.tsx): add data-testid attribute to Sidebar component for testing purposes 🔧 (integration-side-bar.spec.ts): update test to use new data-testid attribute 'shad-sidebar' for Sidebar component to match changes in the codebase * ✨ (stop-building.spec.ts): refactor test case to use a more descriptive test element for clicking on the sidebar custom component button * format * 🐛 (AstraDB): Fix variable naming inconsistency for isDark to isdark in AstraDB component 🐛 (HCD): Fix variable naming inconsistency for isDark to isdark in HCD component 🐛 (index.tsx): Fix variable naming inconsistency for isDark to isdark in index.tsx files 📝 (flowSidebarComponent): Refactor search functionality to normalize search terms and improve metadata search 📝 (filterEdge-shard-1.spec.ts): Update test to check visibility of specific model specs in the sidebar * [autofix.ci] apply automated fixes * ✅ (decisionFlow.spec.ts): add a delay of 500ms to ensure proper timing in the test case execution * ✨ (decisionFlow.spec.ts): Update the X positions of elements in the flow to improve the visual representation and alignment of the elements. --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
test("user can search and add components using keyboard shortcuts", async ({
|
|
page,
|
|
}) => {
|
|
// Navigate to homepage and handle initial modal
|
|
await page.goto("/");
|
|
await page.waitForSelector('[data-testid="mainpage_title"]', {
|
|
timeout: 30000,
|
|
});
|
|
|
|
let modalCount = 0;
|
|
try {
|
|
const modalTitleElement = await page?.getByTestId("modal-title");
|
|
if (modalTitleElement) {
|
|
modalCount = await modalTitleElement.count();
|
|
}
|
|
} catch (error) {
|
|
modalCount = 0;
|
|
}
|
|
|
|
while (modalCount === 0) {
|
|
await page.getByText("New Project", { exact: true }).click();
|
|
await page.waitForTimeout(3000);
|
|
modalCount = await page.getByTestId("modal-title")?.count();
|
|
}
|
|
|
|
// Start with blank flow
|
|
await page.getByTestId("blank-flow").click();
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Press "/" to activate search
|
|
await page.keyboard.press("/");
|
|
await page.waitForTimeout(500);
|
|
|
|
// Verify search is focused and disclosures are closed when search is empty
|
|
await expect(page.getByTestId("sidebar-search-input")).toBeFocused();
|
|
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
|
|
|
|
// Type "chat" to search for chat components
|
|
await page.keyboard.type("chat");
|
|
await page.waitForTimeout(500);
|
|
|
|
// Verify disclosures open when search has content
|
|
await expect(page.getByTestId("inputsChat Input")).toBeVisible();
|
|
|
|
// Press Tab to focus first result
|
|
await page.keyboard.press("Tab");
|
|
await page.keyboard.press("Tab");
|
|
|
|
// Verify some expected chat-related components are visible
|
|
await expect(page.getByTestId("inputsChat Input")).toBeVisible();
|
|
await expect(page.getByTestId("outputsChat Output")).toBeVisible();
|
|
|
|
// Press Space to select the component
|
|
await page.keyboard.press("Space");
|
|
await page.waitForTimeout(500);
|
|
|
|
// Verify component was added to flow
|
|
const addedComponent = await page.locator(".react-flow__node").first();
|
|
await expect(addedComponent).toBeVisible();
|
|
|
|
// Clear search input and verify disclosures are closed
|
|
await page.getByTestId("sidebar-search-input").clear();
|
|
await page.waitForTimeout(500);
|
|
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
|
|
|
|
// Test Enter key selection
|
|
await page.keyboard.press("/");
|
|
await page.keyboard.type("prompt");
|
|
await page.waitForTimeout(500);
|
|
|
|
// Verify disclosures open with new search
|
|
await expect(page.getByTestId("promptsPrompt")).toBeVisible();
|
|
|
|
await page.keyboard.press("Tab");
|
|
await page.keyboard.press("Tab");
|
|
await page.keyboard.press("Enter");
|
|
await page.waitForTimeout(500);
|
|
|
|
// Verify second component was added
|
|
const nodeCount = await page.locator(".react-flow__node").count();
|
|
expect(nodeCount).toBe(2);
|
|
|
|
// Verify search is cleared and disclosures are closed after adding component
|
|
await page.keyboard.press("/");
|
|
await page.getByTestId("sidebar-search-input").clear();
|
|
await page.waitForTimeout(500);
|
|
await expect(page.getByTestId("sidebar-search-input")).toHaveValue("");
|
|
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
|
|
|
|
await expect(page.getByTestId("sidebar-search-input")).toBeFocused();
|
|
await page.keyboard.press("Escape");
|
|
await expect(page.getByTestId("sidebar-search-input")).not.toBeFocused();
|
|
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
|
|
});
|