add apply cancellation test

Author: RomneyDa

core/edit/recursiveStream.ts

@@ -68,7 +68,6 @@ export async function* recursiveStream(
     });
 
     for await (const chunk of generator) {
-      console.log(chunk);
       yield chunk;
       const rendered = renderChatMessage(chunk);
       buffer += rendered;

gui/src/components/mainInput/Lump/LumpToolbar/GeneratingIndicator.tsx

@@ -2,11 +2,13 @@ import { AnimatedEllipsis } from "../../..";
 
 export function GeneratingIndicator({
   text = "Generating",
+  testId,
 }: {
   text?: string;
+  testId?: string;
 }) {
   return (
-    <div className="text-description-muted text-xs">
+    <div className="text-description-muted text-xs" data-testid={testId}>
       <span>{text}</span>
       <AnimatedEllipsis />
     </div>

gui/src/components/mainInput/Lump/LumpToolbar/IsApplyingToolbar.tsx

@@ -13,15 +13,16 @@ export const IsApplyingToolbar = () => {
 
   return (
     <Container>
-      <GeneratingIndicator text="Applying" />
+      <GeneratingIndicator text="Applying" testId={"notch-applying-text"} />
       <StopButton
+        data-testid="notch-applying-cancel-button"
         className="text-description"
         onClick={() => {
           // Note that this will NOT stop generation but once apply is cancelled will show the Generating/cancel option
           // Apply is prioritized because it can be more catastrophic
           // Intentional to be more WYSIWYG for now
           // Keyboard shortcut is handled in chat
-          dispatch(cancelStream());
+          void dispatch(cancelStream());
           ideMessenger.post("rejectDiff", {});
         }}
       >

gui/src/pages/gui/Chat.test.tsx

@@ -106,4 +106,56 @@ describe("Chat page test", () => {
       ).not.toBeInTheDocument();
     });
   });
+
+  it("should show apply cancellation", async () => {
+    const { ideMessenger } = await renderWithProviders(<Chat />);
+
+    // Spy on the request method of ideMessenger
+    const messengerPostSpy = vi.spyOn(ideMessenger, "post");
+
+    for (let i = 0; i < 5; i++) {
+      ideMessenger.mockMessageToWebview("updateApplyState", {
+        status: "streaming",
+        streamId: `12345`,
+      });
+    }
+
+    // Wait for applying toolbar to appear
+    await waitFor(() => {
+      const cancelApplyButton = screen.getByTestId(
+        "notch-applying-cancel-button",
+      );
+      const applyingText = screen.getByTestId("notch-applying-text");
+
+      expect(cancelApplyButton).toBeInTheDocument();
+      expect(applyingText).toBeInTheDocument();
+    });
+
+    const cancelApplyButton = screen.getByTestId(
+      "notch-applying-cancel-button",
+    );
+    cancelApplyButton.click();
+
+    // Verify that rejectDiff message has been posted to ideMessenger
+    expect(messengerPostSpy).toHaveBeenCalledWith("rejectDiff", {});
+
+    // Now simulate the IDE sending back a message that the apply state is closed
+    ideMessenger.mockMessageToWebview("updateApplyState", {
+      status: "closed",
+      streamId: "12345",
+    });
+
+    await waitFor(() => {
+      const cancelApplyButton = screen.queryByTestId(
+        "notch-applying-cancel-button",
+      );
+      const applyingText = screen.queryByTestId("notch-applying-text");
+
+      expect(cancelApplyButton).not.toBeInTheDocument();
+      expect(applyingText).not.toBeInTheDocument();
+    });
+
+    // Cleanup spy
+    messengerPostSpy.mockRestore();
+  });
 });