This is an automated email from the ASF dual-hosted git repository. github-merge-queue[bot] pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/texera.git
commit 58e5b43a54184c249f2d04a51fb73aef779b49c3 Author: yangzhang75 <[email protected]> AuthorDate: Sat Jun 13 11:53:18 2026 -0700 test(frontend): add unit tests for ReActStepDetailModalComponent (#5612) <!-- Thanks for sending a pull request (PR)! Here are some tips for you: 1. If this is your first time, please read our contributor guidelines: [Contributing to Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md) 2. Ensure you have added or run the appropriate tests for your PR 3. If the PR is work in progress, mark it a draft on GitHub. 4. Please write your PR title to summarize what this PR proposes, we are following Conventional Commits style for PR titles as well. 5. Be sure to keep the PR description updated to reflect all changes. --> ### What changes were proposed in this PR? <!-- Please clarify what changes you are proposing. The purpose of this section is to outline the changes. Here are some tips for you: 1. If you propose a new API, clarify the use case for a new API. 2. If you fix a bug, you can clarify why it is a bug. 3. If it is a refactoring, clarify what has been changed. 3. It would be helpful to include a before-and-after comparison using screenshots or GIFs. 4. Please consider writing useful notes for better and faster reviews. --> Adds unit tests for ReActStepDetailModalComponent, which previously had no spec. Covers the pure display helpers: closeModal, formatResult/formatJson, getToolResult, operator-access lookups, message role colors, getTextFromMessage, getToolCallSummaries, function-call formatting (incl. long-value truncation), and getToolResultFullItems/getToolResultItems (tool-name resolution, token count, trimmed flag). ### Any related issues, documentation, discussions? <!-- Please use this section to link other resources if not mentioned already. 1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves #1234` or `Closes #1234`. If it is only related, simply mention the issue number. 2. If there is design documentation, please add the link. 3. If there is a discussion in the mailing list, please add the link. --> Closes #5468 ### How was this PR tested? <!-- If tests were added, say they were added here. Or simply mention that if the PR is tested with existing test cases. Make sure to include/update test cases that check the changes thoroughly including negative and positive cases if possible. If it was tested in a way different from regular unit tests, please clarify how you tested step by step, ideally copy and paste-able, so that other reviewers can test and check, and descendants can verify in the future. If tests were not added, please describe why they were not added and/or why it was difficult to add. --> New spec run via ng test (Vitest): 22 tests pass. eslint and prettier checks clean. ### Was this PR authored or co-authored using generative AI tooling? <!-- If generative AI tooling has been used in the process of authoring this PR, please include the phrase: 'Generated-by: ' followed by the name of the tool and its version. If no, write 'No'. Please refer to the [ASF Generative Tooling Guidance](https://www.apache.org/legal/generative-tooling.html) for details. --> Generated-by: Claude Code (Claude Opus 4.8) --- .../react-step-detail-modal.component.spec.ts | 230 +++++++++++++++++++++ 1 file changed, 230 insertions(+) diff --git a/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.spec.ts b/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.spec.ts new file mode 100644 index 0000000000..1d6024ab56 --- /dev/null +++ b/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.spec.ts @@ -0,0 +1,230 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ReActStepDetailModalComponent } from "./react-step-detail-modal.component"; + +describe("ReActStepDetailModalComponent", () => { + let component: ReActStepDetailModalComponent; + + beforeEach(() => { + // The component has no injected dependencies and its display helpers are + // pure, so it can be exercised directly. + component = new ReActStepDetailModalComponent(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + describe("closeModal", () => { + it("hides the modal and emits the new visibility", () => { + component.visible = true; + const emitted: boolean[] = []; + component.visibleChange.subscribe(v => emitted.push(v)); + + component.closeModal(); + + expect(component.visible).toBe(false); + expect(emitted).toEqual([false]); + }); + }); + + describe("formatResult / formatJson", () => { + it("returns a string result unchanged", () => { + expect(component.formatResult("plain\ntext")).toBe("plain\ntext"); + }); + + it("pretty-prints an object result", () => { + expect(component.formatResult({ a: 1 })).toBe(JSON.stringify({ a: 1 }, null, 2)); + }); + + it("formatJson always pretty-prints", () => { + expect(component.formatJson({ a: 1 })).toBe(JSON.stringify({ a: 1 }, null, 2)); + }); + }); + + describe("getToolResult", () => { + it("returns null when there are no tool results", () => { + expect(component.getToolResult({} as any, 0)).toBeNull(); + }); + + it("returns null when the index is out of range", () => { + expect(component.getToolResult({ toolResults: [{ output: "x" }] } as any, 5)).toBeNull(); + }); + + it("prefers output, then result, then the raw entry", () => { + const step = { + toolResults: [{ output: "o" }, { result: "r" }, { foo: "bar" }], + } as any; + expect(component.getToolResult(step, 0)).toBe("o"); + expect(component.getToolResult(step, 1)).toBe("r"); + expect(component.getToolResult(step, 2)).toEqual({ foo: "bar" }); + }); + }); + + describe("getToolOperatorAccess / hasOperatorAccess", () => { + it("returns null when the step has no operator access", () => { + expect(component.getToolOperatorAccess({} as any, 0)).toBeNull(); + expect(component.hasOperatorAccess({} as any)).toBe(false); + }); + + it("returns the access entry for a tool-call index", () => { + const access = { viewedOperatorIds: ["v"], addedOperatorIds: [], modifiedOperatorIds: [] }; + const step = { operatorAccess: new Map([[0, access]]) } as any; + expect(component.getToolOperatorAccess(step, 0)).toBe(access); + expect(component.getToolOperatorAccess(step, 1)).toBeNull(); + expect(component.hasOperatorAccess(step)).toBe(true); + }); + + it("reports no access for an empty map", () => { + expect(component.hasOperatorAccess({ operatorAccess: new Map() } as any)).toBe(false); + }); + }); + + describe("getMessageRoleColor", () => { + it("maps known roles and falls back to default", () => { + expect(component.getMessageRoleColor("user")).toBe("blue"); + expect(component.getMessageRoleColor("assistant")).toBe("orange"); + expect(component.getMessageRoleColor("tool")).toBe("green"); + expect(component.getMessageRoleColor("system")).toBe("default"); + }); + }); + + describe("getTextFromMessage", () => { + it("returns empty string when there is no content", () => { + expect(component.getTextFromMessage(null)).toBe(""); + expect(component.getTextFromMessage({})).toBe(""); + }); + + it("returns string content directly", () => { + expect(component.getTextFromMessage({ content: "hello" })).toBe("hello"); + }); + + it("joins the text parts of array content", () => { + const msg = { + content: [ + { type: "text", text: "line1" }, + { type: "tool-call", toolName: "x" }, + { type: "text", text: "line2" }, + ], + }; + expect(component.getTextFromMessage(msg)).toBe("line1\nline2"); + }); + }); + + describe("getToolCallSummaries", () => { + it("returns an empty array for non-array content", () => { + expect(component.getToolCallSummaries({ content: "x" })).toEqual([]); + }); + + it("summarizes tool-call parts and defaults the operatorId", () => { + const msg = { + content: [ + { type: "tool-call", toolName: "addOperator", args: { operatorId: "op1", k: "v" } }, + { type: "tool-call", toolName: "noOp", input: {} }, + { type: "text", text: "ignored" }, + ], + }; + expect(component.getToolCallSummaries(msg)).toEqual([ + { toolName: "addOperator", operatorId: "op1", fullArgs: { operatorId: "op1", k: "v" } }, + { toolName: "noOp", operatorId: "", fullArgs: {} }, + ]); + }); + }); + + describe("getToolCallStrings (function-call formatting)", () => { + it("renders tool calls as toolName(key=value, ...)", () => { + const msg = { + content: [{ type: "tool-call", toolName: "filter", args: { col: "age", n: 5 } }], + }; + expect(component.getToolCallStrings(msg)).toEqual(['filter(col="age", n=5)']); + }); + + it("truncates long string and non-string argument values", () => { + const longString = "a".repeat(80); + const longArray = Array.from({ length: 40 }, (_, i) => i); + const msg = { + content: [{ type: "tool-call", toolName: "t", args: { s: longString, arr: longArray } }], + }; + const [rendered] = component.getToolCallStrings(msg); + expect(rendered).toContain(`s="${"a".repeat(60)}..."`); + expect(rendered).toContain(`arr=${JSON.stringify(longArray).substring(0, 60)}...`); + }); + }); + + describe("getToolResultFullItems / getToolResultItems", () => { + function toolMessage(): any { + return { + content: [ + { type: "tool-result", toolCallId: "tc1", result: "short result" }, + { type: "tool-result", toolCallId: "tc2", output: { rows: 3 } }, + { type: "tool-result", toolCallId: "tc3", content: "after context compaction" }, + ], + }; + } + + beforeEach(() => { + // inputMessages provides the toolCallId -> toolName map. + component.step = { + inputMessages: [ + { + role: "assistant", + content: [ + { type: "tool-call", toolCallId: "tc1", toolName: "addOperator" }, + { type: "tool-call", toolCallId: "tc2", toolName: "executeOperator" }, + ], + }, + ], + } as any; + }); + + it("returns [] for non-array content", () => { + expect(component.getToolResultFullItems({ content: "x" })).toEqual([]); + expect(component.getToolResultItems({ content: "x" })).toEqual([]); + }); + + it("resolves tool names, content, token count and the trimmed flag", () => { + const items = component.getToolResultFullItems(toolMessage()); + + // tc1: mapped name, raw string content, ~len/4 tokens, not trimmed + expect(items[0]).toEqual({ + toolName: "addOperator", + resultContent: "short result", + tokenCount: Math.ceil("short result".length / 4), + isTrimmed: false, + }); + // tc2: object output is pretty-printed + expect(items[1].toolName).toBe("executeOperator"); + expect(items[1].resultContent).toBe(JSON.stringify({ rows: 3 }, null, 2)); + // tc3: unmapped id falls back to the toolCallId; "context compaction" => trimmed + expect(items[2].toolName).toBe("tc3"); + expect(items[2].isTrimmed).toBe(true); + }); + + it("getToolResultItems returns name, token count and trimmed flag", () => { + const items = component.getToolResultItems(toolMessage()); + expect(items[0]).toEqual({ + toolName: "addOperator", + tokenCount: Math.ceil("short result".length / 4), + isTrimmed: false, + }); + expect(items[2].isTrimmed).toBe(true); + }); + }); +});
