test: improve test practices based on review feedback

- Use screen.getByPlaceholderText() instead of direct container query - Add screen import from @testing-library/react - Remove unnecessary files and revert i18n changes
All-Hands-AI · Jan 10, 2025 · 262f056 · 262f056
1 parent edb4ed6
commit 262f056
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 141 deletions.
diff --git a/frontend/__tests__/utils/check-hardcoded-strings.test.tsx b/frontend/__tests__/utils/check-hardcoded-strings.test.tsx
@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { test, expect, describe, vi } from "vitest";
 import { InteractiveChatBox } from "#/components/features/chat/interactive-chat-box";
 import { ChatInput } from "#/components/features/chat/chat-input";
@@ -34,14 +34,7 @@ describe("Check for hardcoded English strings", () => {
   });
 
   test("ChatInput should use translation key for placeholder", () => {
-    const { container } = render(
-      <ChatInput
-        onSubmit={() => {}}
-      />
-    );
-
-    // The placeholder should be a translation key, not English text
-    const textarea = container.querySelector("textarea");
-    expect(textarea?.placeholder).toBe("SUGGESTIONS$WHAT_TO_BUILD");
+    render(<ChatInput onSubmit={() => {}} />);
+    screen.getByPlaceholderText("SUGGESTIONS$WHAT_TO_BUILD");
   });
 });
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
@@ -2,30 +2,12 @@ import i18n from "i18next";
 import Backend from "i18next-http-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
-import translations from "./translation.json";
-
-type TranslationValue = {
-  en: string;
-  ja?: string;
-  "zh-CN"?: string;
-  "zh-TW"?: string;
-  "ko-KR"?: string;
-  no?: string;
-  ar?: string;
-  de?: string;
-  fr?: string;
-  it?: string;
-  pt?: string;
-  es?: string;
-  tr?: string;
-};
 
 export const AvailableLanguages = [
   { label: "English", value: "en" },
   { label: "简体中文", value: "zh-CN" },
   { label: "繁體中文", value: "zh-TW" },
   { label: "한국어", value: "ko-KR" },
-  { label: "日本語", value: "ja" },
   { label: "Norsk", value: "no" },
   { label: "Arabic", value: "ar" },
   { label: "Deutsch", value: "de" },
@@ -43,119 +25,6 @@ i18n
   .init({
     fallbackLng: "en",
     debug: import.meta.env.NODE_ENV === "development",
-    lng:
-      typeof window !== "undefined"
-        ? localStorage.getItem("LANGUAGE") || "en"
-        : "en",
-    resources: {
-      en: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      ja: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).ja || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      "zh-CN": {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue)["zh-CN"] ||
-              (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      "zh-TW": {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue)["zh-TW"] ||
-              (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      "ko-KR": {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue)["ko-KR"] ||
-              (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      no: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).no || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      ar: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).ar || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      de: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).de || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      fr: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).fr || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      it: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).it || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      pt: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).pt || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      es: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).es || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-      tr: {
-        translation: Object.fromEntries(
-          Object.entries(translations).map(([key, value]) => [
-            key,
-            (value as TranslationValue).tr || (value as TranslationValue).en,
-          ]),
-        ),
-      },
-    },
   });
 
 export default i18n;