feat: localize missing elements (#7485)

Co-authored-by: openhands <[email protected]>
Co-authored-by: sp.wack <[email protected]>
Co-authored-by: Robert Brennan <[email protected]>

Author: 4 people

frontend/__tests__/components/browser.test.tsx

@@ -57,6 +57,6 @@ describe("Browser", () => {
     });
 
     expect(screen.getByText("https://example.com")).toBeInTheDocument();
-    expect(screen.getByAltText(/browser screenshot/i)).toBeInTheDocument();
+    expect(screen.getByAltText("BROWSER$SCREENSHOT_ALT")).toBeInTheDocument();
   });
 });

frontend/__tests__/components/buttons/copy-to-clipboard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import { test, expect, describe, vi } from "vitest";
+import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipboard-button";
+
+// Mock react-i18next
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe("CopyToClipboardButton", () => {
+  test("should have localized aria-label", () => {
+    render(
+      <CopyToClipboardButton
+        isHidden={false}
+        isDisabled={false}
+        onClick={() => {}}
+        mode="copy"
+      />
+    );
+
+    const button = screen.getByTestId("copy-to-clipboard");
+    expect(button).toHaveAttribute("aria-label", "BUTTON$COPY");
+  });
+
+  test("should have localized aria-label when copied", () => {
+    render(
+      <CopyToClipboardButton
+        isHidden={false}
+        isDisabled={false}
+        onClick={() => {}}
+        mode="copied"
+      />
+    );
+
+    const button = screen.getByTestId("copy-to-clipboard");
+    expect(button).toHaveAttribute("aria-label", "BUTTON$COPIED");
+  });
+});

frontend/__tests__/components/chat/action-suggestions.test.tsx

@@ -19,6 +19,20 @@ vi.mock("#/context/auth-context", () => ({
   useAuth: vi.fn(),
 }));
 
+// Mock react-i18next
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        "ACTION$PUSH_TO_BRANCH": "Push to Branch",
+        "ACTION$PUSH_CREATE_PR": "Push & Create PR",
+        "ACTION$PUSH_CHANGES_TO_PR": "Push Changes to PR"
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
 describe("ActionSuggestions", () => {
   // Setup mocks for each test
   beforeEach(() => {

frontend/__tests__/components/features/conversation-panel/conversation-card.test.tsx

@@ -15,6 +15,31 @@ import { formatTimeDelta } from "#/utils/format-time-delta";
 import { ConversationCard } from "#/components/features/conversation-panel/conversation-card";
 import { clickOnEditButton } from "./utils";
 
+// We'll use the actual i18next implementation but override the translation function
+import { I18nextProvider } from "react-i18next";
+import i18n from "i18next";
+
+// Mock the t function to return our custom translations
+vi.mock("react-i18next", async () => {
+  const actual = await vi.importActual("react-i18next");
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => {
+        const translations: Record<string, string> = {
+          "CONVERSATION$CREATED": "Created",
+          "CONVERSATION$AGO": "ago",
+          "CONVERSATION$UPDATED": "Updated"
+        };
+        return translations[key] || key;
+      },
+      i18n: {
+        changeLanguage: () => new Promise(() => {}),
+      },
+    }),
+  };
+});
+
 describe("ConversationCard", () => {
   const onClick = vi.fn();
   const onDelete = vi.fn();
@@ -47,12 +72,18 @@ describe("ConversationCard", () => {
         lastUpdatedAt="2021-10-01T12:00:00Z"
       />,
     );
-    const expectedDate = `${formatTimeDelta(new Date("2021-10-01T12:00:00Z"))} ago`;
 
     const card = screen.getByTestId("conversation-card");
 
     within(card).getByText("Conversation 1");
-    within(card).getByText(expectedDate);
+    
+    // Just check that the card contains the expected text content
+    expect(card).toHaveTextContent("Created");
+    expect(card).toHaveTextContent("ago");
+    
+    // Use a regex to match the time part since it might have whitespace
+    const timeRegex = new RegExp(formatTimeDelta(new Date("2021-10-01T12:00:00Z")));
+    expect(card).toHaveTextContent(timeRegex);
   });
 
   it("should render the selectedRepository if available", () => {
@@ -341,7 +372,7 @@ describe("ConversationCard", () => {
     await user.click(displayCostButton);
 
     // Verify if metrics modal is displayed by checking for the modal content
-    expect(screen.getByText("Metrics Information")).toBeInTheDocument();
+    expect(screen.getByTestId("metrics-modal")).toBeInTheDocument();
   });
 
   it("should not display the edit or delete options if the handler is not provided", async () => {

frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx

@@ -135,10 +135,10 @@ describe("ConversationPanel", () => {
     await user.click(deleteButton);
 
     // Cancel the deletion
-    const cancelButton = screen.getByText("Cancel");
+    const cancelButton = screen.getByRole("button", { name: /cancel/i });
     await user.click(cancelButton);
 
-    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /cancel/i })).not.toBeInTheDocument();
 
     // Ensure the conversation is not deleted
     cards = await screen.findAllByTestId("conversation-card");
@@ -172,10 +172,10 @@ describe("ConversationPanel", () => {
     await user.click(deleteButton);
 
     // Confirm the deletion
-    const confirmButton = screen.getByText("Confirm");
+    const confirmButton = screen.getByRole("button", { name: /confirm/i });
     await user.click(confirmButton);
 
-    expect(screen.queryByText("Confirm")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /confirm/i })).not.toBeInTheDocument();
 
     // Wait for the cards to update with a longer timeout
     await waitFor(() => {
@@ -239,10 +239,10 @@ describe("ConversationPanel", () => {
     await user.click(deleteButton);
 
     // Confirm the deletion
-    const confirmButton = screen.getByText("Confirm");
+    const confirmButton = screen.getByRole("button", { name: /confirm/i });
     await user.click(confirmButton);
 
-    expect(screen.queryByText("Confirm")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /confirm/i })).not.toBeInTheDocument();
 
     // Wait for the cards to update
     await waitFor(() => {

frontend/__tests__/components/features/payment/payment-form.test.tsx

@@ -63,7 +63,7 @@ describe("PaymentForm", () => {
     const topUpInput = await screen.findByTestId("top-up-input");
     await user.type(topUpInput, "50.12");
 
-    const topUpButton = screen.getByText("Add credit");
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
     await user.click(topUpButton);
 
     expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50.12);
@@ -76,7 +76,7 @@ describe("PaymentForm", () => {
     const topUpInput = await screen.findByTestId("top-up-input");
     await user.type(topUpInput, "50.125456");
 
-    const topUpButton = screen.getByText("Add credit");
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
     await user.click(topUpButton);
 
     expect(createCheckoutSessionSpy).toHaveBeenCalledWith(50.13);
@@ -86,7 +86,7 @@ describe("PaymentForm", () => {
     const user = userEvent.setup();
     renderPaymentForm();
 
-    const topUpButton = screen.getByText("Add credit");
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
     expect(topUpButton).toBeDisabled();
 
     const topUpInput = await screen.findByTestId("top-up-input");
@@ -102,7 +102,7 @@ describe("PaymentForm", () => {
     const topUpInput = await screen.findByTestId("top-up-input");
     await user.type(topUpInput, "50.12");
 
-    const topUpButton = screen.getByText("Add credit");
+    const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
     await user.click(topUpButton);
 
     expect(topUpButton).toBeDisabled();
@@ -116,7 +116,7 @@ describe("PaymentForm", () => {
       const topUpInput = await screen.findByTestId("top-up-input");
       await user.type(topUpInput, "-50.12");
 
-      const topUpButton = screen.getByText("Add credit");
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
       expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
@@ -129,7 +129,7 @@ describe("PaymentForm", () => {
       const topUpInput = await screen.findByTestId("top-up-input");
       await user.type(topUpInput, "     ");
 
-      const topUpButton = screen.getByText("Add credit");
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
       expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
@@ -142,7 +142,7 @@ describe("PaymentForm", () => {
       const topUpInput = await screen.findByTestId("top-up-input");
       await user.type(topUpInput, "abc");
 
-      const topUpButton = screen.getByText("Add credit");
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
       expect(createCheckoutSessionSpy).not.toHaveBeenCalled();
@@ -155,7 +155,7 @@ describe("PaymentForm", () => {
       const topUpInput = await screen.findByTestId("top-up-input");
       await user.type(topUpInput, "9"); // test assumes the minimum is 10
 
-      const topUpButton = screen.getByText("Add credit");
+      const topUpButton = screen.getByText("PAYMENT$ADD_CREDIT");
       await user.click(topUpButton);
 
       expect(createCheckoutSessionSpy).not.toHaveBeenCalled();

frontend/__tests__/components/features/waitlist-modal.test.tsx

@@ -24,7 +24,7 @@ describe("WaitlistModal", () => {
     const user = userEvent.setup();
     render(<WaitlistModal ghTokenIsSet={false} githubAuthUrl={null} />);
     const checkbox = screen.getByRole("checkbox");
-    const button = screen.getByRole("button", { name: "Connect to GitHub" });
+    const button = screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" });
 
     expect(button).toBeDisabled();
 
@@ -45,7 +45,7 @@ describe("WaitlistModal", () => {
     const checkbox = screen.getByRole("checkbox");
     await user.click(checkbox);
 
-    const button = screen.getByRole("button", { name: "Connect to GitHub" });
+    const button = screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" });
     await user.click(button);
 
     expect(handleCaptureConsentSpy).toHaveBeenCalledWith(true);

frontend/__tests__/components/user-avatar.test.tsx

@@ -36,7 +36,7 @@ describe("UserAvatar", () => {
       />,
     );
 
-    expect(screen.getByAltText("user avatar")).toBeInTheDocument();
+    expect(screen.getByAltText("AVATAR$ALT_TEXT")).toBeInTheDocument();
     expect(
       screen.queryByLabelText("USER$AVATAR_PLACEHOLDER"),
     ).not.toBeInTheDocument();
@@ -63,6 +63,6 @@ describe("UserAvatar", () => {
       />,
     );
     expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
-    expect(screen.queryByAltText("user avatar")).not.toBeInTheDocument();
+    expect(screen.queryByAltText("AVATAR$ALT_TEXT")).not.toBeInTheDocument();
   });
 });

frontend/__tests__/routes/settings-with-payment.test.tsx

@@ -88,6 +88,6 @@ describe("Settings Billing", () => {
     await user.click(credits);
 
     const billingSection = await screen.findByTestId("billing-settings");
-    within(billingSection).getByText("Manage Credits");
+    within(billingSection).getByText("PAYMENT$MANAGE_CREDITS");
   });
 });