jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: add notifications UI and add integration test (#5286)

Browse source 
✨ (appHeaderComponent/index.tsx): Refactor AppHeader component to use AlertDropdown for notifications and improve user interaction with notifications tab
✅ (notifications.spec.ts): Add end-to-end test for user interaction with notifications tab in the frontend application
This commit is contained in:
Cristhian Zanforlin Lousa 2024-12-16 11:30:01 -03:00 • committed by GitHub
commit 0bdf317fe0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 92 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/frontend/src/components/core/appHeaderComponent/index.tsx
View file

@ -101,31 +101,34 @@ export default function AppHeader(): JSX.Element {
side="bottom"
styleClasses="z-10"
>
<Button
ref={notificationRef}
variant="ghost"
className={`relative ${activeState === "notifications" ? "bg-accent text-accent-foreground" : ""}`}
onClick={() =>
setActiveState((prev) =>
prev === "notifications" ? null : "notifications",
)
}
>
<span
className={
notificationCenter
? `absolute left-[31px] top-[10px] h-1 w-1 rounded-full bg-destructive`
: "hidden"
<AlertDropdown onClose={() => setActiveState(null)}>
<Button
ref={notificationRef}
variant="ghost"
className={`relative ${activeState === "notifications" ? "bg-accent text-accent-foreground" : ""}`}
onClick={() =>
setActiveState((prev) =>
prev === "notifications" ? null : "notifications",
)
}
/>
<ForwardedIconComponent
name="Bell"
className="side-bar-button-size h-[18px] w-[18px]"
/>
<span className="hidden whitespace-nowrap 2xl:inline">
Notifications
</span>
</Button>
data-testid="notification_button"
>
<span
className={
notificationCenter
? `absolute left-[31px] top-[10px] h-1 w-1 rounded-full bg-destructive`
: "hidden"
}
/>
<ForwardedIconComponent
name="Bell"
className="side-bar-button-size h-[18px] w-[18px]"
/>
<span className="hidden whitespace-nowrap 2xl:inline">
Notifications
</span>
</Button>
</AlertDropdown>
</ShadTooltip>
</AlertDropdown>
{!ENABLE_DATASTAX_LANGFLOW && (

65
src/frontend/tests/extended/features/notifications.spec.ts Normal file
View file

@ -0,0 +1,65 @@
import { expect, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
test(
"User should be able to interact notifications tab",
{ tag: ["@release"] },
async ({ page }) => {
await awaitBootstrapTest(page);
await page.getByTestId("blank-flow").click();
await page.waitForSelector('[data-testid="disclosure-inputs"]', {
timeout: 3000,
state: "visible",
});
await page.getByTestId("disclosure-inputs").click();
await page.waitForSelector('[data-testid="inputsChat Input"]', {
timeout: 3000,
state: "visible",
});
await page
.getByTestId("inputsChat Input")
.hover()
.then(async () => {
await page.getByTestId("add-component-button-chat-input").click();
await page.getByTestId("button_run_chat input").click();
});
await page.waitForSelector("text=built successfully", { timeout: 30000 });
await page.getByText("built successfully").last().click({
timeout: 15000,
});
await page.getByTestId("notification_button").click();
// Add explicit waits before checking visibility
await page.waitForSelector('[data-testid="icon-Trash2"]', {
timeout: 3000,
state: "visible",
});
await page.waitForSelector("text=Running components", {
timeout: 30000,
state: "visible",
});
// Then check visibility
const notificationsText = page
.getByText("Notifications", { exact: true })
.last();
await expect(notificationsText).toBeVisible();
const trashIcon = page.getByTestId("icon-Trash2").last();
await expect(trashIcon).toBeVisible();
const runningComponentsText = page
.getByText("Running components", { exact: true })
.last();
await expect(runningComponentsText).toBeVisible();
const builtSuccessfullyText = page
.getByText("Chat Input built successfully", { exact: true })
.last();
await expect(builtSuccessfullyText).toBeVisible();
},
);