Skip to content

Commit 303792e

Browse files
viktoravelinoviktoravelino
committed
fix(test): playground test
1 parent 138b37f commit 303792e

6 files changed

Lines changed: 95 additions & 180 deletions

File tree

‎src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/chat-sessions-dropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export function ChatSessionsDropdown({
3636
size="icon"
3737
className="h-8 w-8 rounded"
3838
aria-label="Chat sessions"
39+
data-testid="session-selector-trigger"
3940
>
4041
<ForwardedIconComponent name="ListRestart" className="h-4 w-4" />
4142
</Button>

‎src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-more-menu.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,11 @@ export function SessionMoreMenu({
105105
sideOffset={sideOffset}
106106
className={cn("p-0", contentClassName)}
107107
>
108-
<SelectItem value="rename" className="session-more-menu-item">
108+
<SelectItem
109+
value="rename"
110+
className="session-more-menu-item"
111+
data-testid="rename-session-option"
112+
>
109113
<div className="flex items-center">
110114
<ForwardedIconComponent
111115
name="SquarePen"
@@ -115,7 +119,11 @@ export function SessionMoreMenu({
115119
</div>
116120
</SelectItem>
117121
{showMessageLogs && (
118-
<SelectItem value="messageLogs" className="session-more-menu-item">
122+
<SelectItem
123+
value="messageLogs"
124+
className="session-more-menu-item"
125+
data-testid="message-logs-option"
126+
>
119127
<div className="flex items-center">
120128
<ForwardedIconComponent
121129
name="Scroll"

‎src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/session-rename.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { useEffect, useRef, useState } from "react";
1+
import type React from "react";
2+
import { useEffect, useRef, useState } from "react";
23
import { Input } from "@/components/ui/input";
34

45
interface SessionRenameProps {
@@ -57,6 +58,7 @@ export const SessionRename: React.FC<SessionRenameProps> = ({
5758

5859
return (
5960
<Input
61+
data-testid="session-rename-input"
6062
ref={inputRef}
6163
value={value}
6264
onChange={(e) => setValue(e.target.value)}

‎src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/user-message.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,7 @@ export const UserMessage = memo(
8989
};
9090

9191
const editedFlag = chat.edit ? (
92-
<div className="relative flex h-8 w-8 items-center justify-center overflow-hidden rounded border border-border text-2xl hover-border-input">
93-
(Edited)
94-
</div>
92+
<div className="text-sm text-muted-foreground">(Edited)</div>
9593
) : null;
9694

9795
const isEmoji = chat.properties?.icon?.match(

‎src/frontend/src/controllers/API/queries/messages/use-put-update-messages.ts‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { api } from "../../api";
77
import { getURL } from "../../helpers/constants";
88
import { UseRequestProcessor } from "../../services/request-processor";
99

10+
const MESSAGES_QUERY_KEY = "useGetMessagesQuery";
11+
1012
interface UpdateMessageParams {
1113
message: Partial<Message>;
1214
refetch?: boolean;
@@ -35,6 +37,7 @@ export const useUpdateMessage: useMutationFunctionType<
3537
...messages[messageIndex],
3638
...message,
3739
flow_id: flowId,
40+
edit: true,
3841
};
3942
sessionStorage.setItem(flowId, JSON.stringify(messages));
4043
} else {
@@ -51,11 +54,35 @@ export const useUpdateMessage: useMutationFunctionType<
5154
updateMessageApi,
5255
{
5356
...options,
54-
onSettled: (_, __, params, ___) => {
55-
//@ts-ignore
57+
onSettled: (_, __, variables, ___) => {
58+
const params = variables as unknown as UpdateMessageParams | undefined;
5659
if (params?.refetch && flowId) {
60+
const message = params.message;
61+
const sessionId = message.session_id;
62+
63+
// Update the session-specific cache directly so UI updates
64+
if (sessionId) {
65+
const sessionCacheKey = [
66+
MESSAGES_QUERY_KEY,
67+
{ id: flowId, session_id: sessionId },
68+
];
69+
queryClient.setQueryData(sessionCacheKey, (old: Message[] = []) => {
70+
const existingIndex = old.findIndex((m) => m.id === message.id);
71+
if (existingIndex !== -1) {
72+
// Update existing message with new text and mark as edited
73+
return old.map((m, idx) =>
74+
idx === existingIndex
75+
? { ...m, text: message.text, edit: true }
76+
: m,
77+
);
78+
}
79+
return old;
80+
});
81+
}
82+
83+
// Also refetch the main query for backend sync
5784
queryClient.refetchQueries({
58-
queryKey: ["useGetMessagesQuery", { id: flowId }],
85+
queryKey: [MESSAGES_QUERY_KEY, { id: flowId }],
5986
exact: true,
6087
});
6188
}

‎src/frontend/tests/core/features/playground.spec.ts‎

Lines changed: 50 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -84,203 +84,82 @@ test(
8484
await page.getByTestId("input-chat-playground").click();
8585
await page.getByTestId("input-chat-playground").fill("message 1");
8686
await page.keyboard.press("Enter");
87-
//check message
88-
await page.getByTestId("chat-message-User-message 1").click();
89-
await page
90-
.getByTestId("chat-message-AI-message 1")
91-
.getByText("message")
92-
.click();
93-
//check session
94-
await page.getByText("Default Session").first().click();
95-
await page.getByTestId("chat-message-User-message 1").click();
87+
await expect(page.getByTestId("chat-message-User-message 1")).toBeVisible();
88+
9689
//check edit message
9790
await page.getByTestId("chat-message-User-message 1").hover();
98-
await page
99-
.locator("div")
100-
.filter({ hasText: /^Usermessage 1$/ })
101-
.getByTestId("icon-Pen")
102-
.click();
103-
91+
await page.getByTestId("icon-Pen").first().click();
10492
await page.getByTestId("textarea").fill("edit_1");
10593
await page.getByTestId("save-button").click();
106-
await page.getByTestId("chat-message-User-edit_1").click();
107-
await page.getByTestId("chat-message-User-edit_1").hover();
94+
await expect(page.getByTestId("chat-message-User-edit_1")).toBeVisible();
95+
10896
// check cancel edit
109-
await page.getByTestId("sender_name_user").hover();
97+
await page.getByTestId("chat-message-User-edit_1").hover();
11098
await page.getByTestId("icon-Pen").first().click();
11199
await page.getByTestId("textarea").fill("cancel_edit");
112100
await page.getByTestId("cancel-button").click();
113-
await page.getByTestId("chat-message-User-edit_1").click();
114-
await page.getByTestId("chat-message-User-edit_1").hover();
101+
await expect(page.getByTestId("chat-message-User-edit_1")).toBeVisible();
102+
115103
//check edit bot message
116-
await page
117-
.getByTestId("chat-message-AI-message 1")
118-
.getByText("message")
119-
.click();
120104
await page.getByTestId("chat-message-AI-message 1").hover();
121105
await page.getByTestId("icon-Pen").last().click();
122-
123106
await page.getByTestId("textarea").fill("edit_bot_1");
124107
await page.getByTestId("save-button").click();
125-
await page.getByText("edit_bot_1").click();
108+
await expect(page.getByTestId("chat-message-AI-edit_bot_1")).toBeVisible();
109+
126110
// check cancel edit bot
127111
await page.getByTestId("chat-message-AI-edit_bot_1").hover();
128112
await page.getByTestId("icon-Pen").last().click();
129-
130113
await page.getByTestId("textarea").fill("edit_bot_cancel");
131114
await page.getByTestId("cancel-button").click();
132-
await page.getByText("edit_bot_1").click();
133-
await page.getByTestId("chat-message-AI-edit_bot_1").hover();
115+
await expect(page.getByTestId("chat-message-AI-edit_bot_1")).toBeVisible();
116+
134117
// check table messages view
135-
await page.getByRole("combobox").click();
136-
await page.getByLabel("Message logs").click();
137-
await page.getByText("Page 1 of 1", { exact: true }).click();
118+
await page.getByTestId("chat-header-more-menu").click();
119+
await page.getByTestId("message-logs-option").click();
120+
await expect(page.getByText("Page 1 of 1", { exact: true })).toBeVisible();
121+
await page.getByRole("button", { name: "Close" }).click();
122+
123+
// create new session
124+
await page.getByTestId("session-selector-trigger").click();
125+
await page.getByText("New Session").click();
126+
await page.keyboard.press("Escape");
127+
await expect(page.getByTitle("New Session 0")).toBeVisible();
128+
138129
// check rename session
139-
await page.mouse.move(0, 0);
140-
await page.getByTestId("session-selector").first().hover();
141-
await page
142-
.getByTestId("session-selector")
143-
.first()
144-
.getByTestId("icon-MoreHorizontal")
145-
.click();
146-
await page.getByLabel("Rename").click();
147-
await page
148-
.getByTestId("session-selector")
149-
.first()
150-
.getByRole("textbox")
151-
.fill("new name");
152-
await page.getByTestId("icon-Check").click();
153-
await page.waitForTimeout(500);
130+
await page.getByTestId("chat-header-more-menu").click();
131+
await page.getByTestId("rename-session-option").click();
132+
await page.getByTestId("session-rename-input").fill("my first session");
133+
await page.keyboard.press("Enter");
134+
await expect(
135+
page.getByTestId("session-selector").getByText("my first session"),
136+
).toBeVisible();
137+
138+
// check cancel rename (using Escape key)
139+
await page.getByTestId("chat-header-more-menu").click();
140+
await page.getByTestId("rename-session-option").click();
141+
await page.getByTestId("session-rename-input").fill("cancel name");
142+
await page.keyboard.press("Escape");
143+
await expect(
144+
page.getByTestId("session-selector").getByText("my first session"),
145+
).toBeVisible();
154146

155-
await page
156-
.getByTestId("session-selector")
157-
.getByText("new name")
158-
.first()
159-
.click();
160-
// check cancel rename
161-
await page.mouse.move(0, 0);
162-
await page.getByTestId("session-selector").first().hover();
163-
await page
164-
.getByTestId("session-selector")
165-
.first()
166-
.getByTestId("icon-MoreHorizontal")
167-
.click();
168-
await page.getByLabel("Rename").click();
169-
await page
170-
.getByTestId("session-selector")
171-
.first()
172-
.getByRole("textbox")
173-
.fill("cancel name");
174-
await page
175-
.getByTestId("session-selector")
176-
.first()
177-
.getByTestId("icon-X")
178-
.click();
179-
await page
180-
.getByTestId("session-selector")
181-
.getByText("new name")
182-
.first()
183-
.click();
184-
// check cancel rename blur
185-
await page.mouse.move(0, 0);
186-
await page.getByTestId("session-selector").first().hover();
187-
await page
188-
.getByTestId("session-selector")
189-
.first()
190-
.getByTestId("icon-MoreHorizontal")
191-
.click();
192-
await page.getByLabel("Rename").click();
193-
await page
194-
.getByTestId("session-selector")
195-
.first()
196-
.getByRole("textbox")
197-
.fill("cancel_blur");
198-
await page.getByText("PlaygroundChat").click();
199-
await page
200-
.getByTestId("session-selector")
201-
.getByText("new name")
202-
.first()
203-
.click();
204147
// check delete session
205-
await page.mouse.move(0, 0);
206-
await page.getByTestId("session-selector").first().hover();
207-
await page
208-
.getByTestId("session-selector")
209-
.first()
210-
.getByTestId("icon-MoreHorizontal")
211-
.click();
212-
await page.getByLabel("Delete").click();
213-
await page.getByTestId("new-chat").click();
214-
// check new session
148+
await page.getByTestId("chat-header-more-menu").click();
149+
await page.getByTestId("delete-session-option").click();
150+
await expect(page.getByTitle("Default Session")).toBeVisible();
151+
152+
//create new session
153+
await page.getByTestId("session-selector-trigger").click();
154+
await page.getByText("New Session", { exact: true }).click();
155+
await page.keyboard.press("Escape");
215156
await page.getByTestId("input-chat-playground").click();
216157
await page
217158
.getByTestId("input-chat-playground")
218159
.fill("session_after_delete");
219160
await page.keyboard.press("Enter");
220-
await page.getByTestId("chat-message-User-session_after_delete").click();
221-
await expect(page.getByTestId("session-selector").first()).toBeVisible();
222-
223-
await page.waitForTimeout(500);
224-
225-
// check helpful button
226-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
227-
await page.getByTestId("helpful-button").click();
228-
229-
await page.waitForTimeout(500);
230-
231-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
232-
await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
233-
timeout: 10000,
234-
});
235-
236-
await page.waitForTimeout(500);
237-
238-
await page.getByTestId("helpful-button").click();
239-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
240-
await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
241-
timeout: 10000,
242-
visible: false,
243-
});
244-
// check not helpful button
245-
await page.waitForTimeout(500);
246-
247-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
248-
await page.getByTestId("not-helpful-button").click();
249-
await page.waitForTimeout(500);
250-
251-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
252-
await expect(page.getByTestId("icon-ThumbDownIconCustom")).toBeVisible({
253-
timeout: 10000,
254-
});
255-
await page.getByTestId("not-helpful-button").click();
256-
await page.waitForTimeout(500);
257-
258-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
259-
await expect(page.getByTestId("icon-ThumbDownIconCustom")).toBeVisible({
260-
timeout: 10000,
261-
visible: false,
262-
});
263-
// check switch feedback
264-
await page.waitForTimeout(500);
265-
266-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
267-
await page.getByTestId("helpful-button").click();
268-
await page.waitForTimeout(500);
269-
270-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
271-
await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
272-
timeout: 10000,
273-
});
274-
await page.getByTestId("not-helpful-button").click();
275-
await page.waitForTimeout(500);
276-
277-
await page.getByTestId("chat-message-AI-session_after_delete").hover();
278-
await expect(page.getByTestId("icon-ThumbDownIconCustom")).toBeVisible({
279-
timeout: 10000,
280-
});
281-
await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
282-
timeout: 10000,
283-
visible: false,
284-
});
161+
await expect(
162+
page.getByTestId("chat-message-User-session_after_delete"),
163+
).toBeVisible();
285164
},
286165
);

0 commit comments

Comments
 (0)