From 38405ae6877baf73d49c6bab217b416cdf5af34c Mon Sep 17 00:00:00 2001 From: mhenriette Date: Wed, 3 Jul 2024 09:43:01 +0200 Subject: [PATCH 1/4] feat: test translation box --- .../components/cards/TranslationBox.test.tsx | 50 +++++++++++++++++++ src/components/cards/TranslationBox.tsx | 1 + 2 files changed, 51 insertions(+) create mode 100644 __tests__/components/cards/TranslationBox.test.tsx diff --git a/__tests__/components/cards/TranslationBox.test.tsx b/__tests__/components/cards/TranslationBox.test.tsx new file mode 100644 index 000000000..0026f23d8 --- /dev/null +++ b/__tests__/components/cards/TranslationBox.test.tsx @@ -0,0 +1,50 @@ +import "@testing-library/jest-dom"; +import { screen } from "@testing-library/react"; +import TranslationBox from "@/components/cards/TranslationBox"; +import { renderWithRedux } from "../../../__mocks__/renderWithRedux"; +// import { Translate } from "@/utilities/Translate"; + +jest.mock("next/router", () => ({ + useRouter() { + return { + route: "/", + pathname: "", + query: "", + locale: "", + }; + }, +})); + +jest.mock("react-i18next", () => ({ + useTranslation: () => ({ + t: (key: string) => key, + }), +})); + +jest.mock("../../../src/utilities/Translate", () => ({ + Translate: jest.fn(), +})); + +// jest.mock('../../../src/components/cards/TranslationBox', ()=>{ +// getLocaleName: jest.fn(()=>'English') +// }) + +// // const getLocaleNameMock = jest.fn(()=>{ +// // 'English' +// // ) + +describe("TranslationBOX", () => { + it("should render the componet", () => { + renderWithRedux(); + expect(screen.getByText("test text")).toBeInTheDocument(); + }); + +// it("should show loading state during translation", async () => { +// renderWithRedux(); +// fireEvent.click(await screen.findByText(/^ui.translated/)); +// expect(Translate).toHaveBeenCalled(); +// expect(screen.getByText("Translating...")).toBeInTheDocument(); +// }); + + +}); diff --git a/src/components/cards/TranslationBox.tsx b/src/components/cards/TranslationBox.tsx index 1d31df2bc..3d0518c56 100755 --- a/src/components/cards/TranslationBox.tsx +++ b/src/components/cards/TranslationBox.tsx @@ -128,6 +128,7 @@ export default function TranslationBox({ text, defaultLocale, disabled, textCont }, [translated]); const translatable = currentLocale !== defaultLocale && !disabled && getLocaleName(defaultLocale); + console.log({description} , getLocaleName(currentLocale)) return (
{currentText ? ( From b860d631ae963b22173a5ab575e33990eb2967da Mon Sep 17 00:00:00 2001 From: mhenriette Date: Wed, 3 Jul 2024 17:37:16 +0200 Subject: [PATCH 2/4] feat: add translation test --- .../components/cards/TranslationBox.test.tsx | 48 ++++++++++++------- src/components/cards/TranslationBox.tsx | 4 +- 2 files changed, 32 insertions(+), 20 deletions(-) diff --git a/__tests__/components/cards/TranslationBox.test.tsx b/__tests__/components/cards/TranslationBox.test.tsx index 0026f23d8..eac818ff8 100644 --- a/__tests__/components/cards/TranslationBox.test.tsx +++ b/__tests__/components/cards/TranslationBox.test.tsx @@ -1,8 +1,8 @@ import "@testing-library/jest-dom"; -import { screen } from "@testing-library/react"; +import { fireEvent, screen, waitFor } from "@testing-library/react"; import TranslationBox from "@/components/cards/TranslationBox"; import { renderWithRedux } from "../../../__mocks__/renderWithRedux"; -// import { Translate } from "@/utilities/Translate"; +import { Translate } from "@/utilities/Translate"; jest.mock("next/router", () => ({ useRouter() { @@ -10,7 +10,7 @@ jest.mock("next/router", () => ({ route: "/", pathname: "", query: "", - locale: "", + locale: "hr", }; }, })); @@ -25,26 +25,40 @@ jest.mock("../../../src/utilities/Translate", () => ({ Translate: jest.fn(), })); -// jest.mock('../../../src/components/cards/TranslationBox', ()=>{ -// getLocaleName: jest.fn(()=>'English') -// }) - -// // const getLocaleNameMock = jest.fn(()=>{ -// // 'English' -// // ) - describe("TranslationBOX", () => { + const mockTranslate = Translate as jest.Mock; it("should render the componet", () => { renderWithRedux(); expect(screen.getByText("test text")).toBeInTheDocument(); }); -// it("should show loading state during translation", async () => { -// renderWithRedux(); -// fireEvent.click(await screen.findByText(/^ui.translated/)); -// expect(Translate).toHaveBeenCalled(); -// expect(screen.getByText("Translating...")).toBeInTheDocument(); -// }); + it("should show loading state during translation", async () => { + renderWithRedux(); + + fireEvent.click(await screen.findByRole("button", { name: "Click me" })); + expect(Translate).toHaveBeenCalled(); + expect(screen.getByText("Translating...")).toBeInTheDocument(); + }); + it("Should translate the text when translate button is clicked", async () => { + mockTranslate.mockResolvedValue('Translated Text'); + renderWithRedux(); + expect(screen.getByText("test text")).toBeInTheDocument(); + fireEvent.click(await screen.findByRole("button", { name: "Click me" })); + expect(screen.getByText("Translating...")).toBeInTheDocument(); + await waitFor(()=> expect(screen.queryByText("Translating...")).toBe(null)) + expect(Translate).toHaveBeenCalled(); + expect(screen.getByText("Translated Text")).toBeInTheDocument(); + + }); + it("Should revert the text back to its original language when revert is clicked", async () => { + mockTranslate.mockResolvedValueOnce("Hallo"); + renderWithRedux(); + fireEvent.click(await screen.findByText((content) => content.includes("ui.translate"))); + expect(mockTranslate).toHaveBeenCalled(); + expect(screen.getByText("Hallo")).toBeInTheDocument(); + fireEvent.click(await screen.findByText((content) => content.startsWith("ui.translation.action.original"))); + expect(screen.getByText("Hello")).toBeInTheDocument(); + }); }); diff --git a/src/components/cards/TranslationBox.tsx b/src/components/cards/TranslationBox.tsx index 3d0518c56..dbabaa110 100755 --- a/src/components/cards/TranslationBox.tsx +++ b/src/components/cards/TranslationBox.tsx @@ -94,7 +94,6 @@ export default function TranslationBox({ text, defaultLocale, disabled, textCont newLocale: currentLocale, text, }); - setCurrentText(translatedText); setLocale(currentLocale); } catch (e) { @@ -128,7 +127,6 @@ export default function TranslationBox({ text, defaultLocale, disabled, textCont }, [translated]); const translatable = currentLocale !== defaultLocale && !disabled && getLocaleName(defaultLocale); - console.log({description} , getLocaleName(currentLocale)) return (
{currentText ? ( @@ -146,7 +144,7 @@ export default function TranslationBox({ text, defaultLocale, disabled, textCont ) : (
- + {description} {getLocaleName(currentLocale)}
From 17d91715f86c4871303e2e59fe1feb77584b95af Mon Sep 17 00:00:00 2001 From: mhenriette Date: Fri, 5 Jul 2024 09:46:33 +0200 Subject: [PATCH 3/4] refactor: comment the failing work in progress test --- .../components/cards/TranslationBox.test.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/__tests__/components/cards/TranslationBox.test.tsx b/__tests__/components/cards/TranslationBox.test.tsx index eac818ff8..4b8110159 100644 --- a/__tests__/components/cards/TranslationBox.test.tsx +++ b/__tests__/components/cards/TranslationBox.test.tsx @@ -52,13 +52,13 @@ describe("TranslationBOX", () => { }); - it("Should revert the text back to its original language when revert is clicked", async () => { - mockTranslate.mockResolvedValueOnce("Hallo"); - renderWithRedux(); - fireEvent.click(await screen.findByText((content) => content.includes("ui.translate"))); - expect(mockTranslate).toHaveBeenCalled(); - expect(screen.getByText("Hallo")).toBeInTheDocument(); - fireEvent.click(await screen.findByText((content) => content.startsWith("ui.translation.action.original"))); - expect(screen.getByText("Hello")).toBeInTheDocument(); - }); + // it("Should revert the text back to its original language when revert is clicked", async () => { + // mockTranslate.mockResolvedValueOnce("Hallo"); + // renderWithRedux(); + // fireEvent.click(await screen.findByText((content) => content.includes("ui.translate"))); + // expect(mockTranslate).toHaveBeenCalled(); + // expect(screen.getByText("Hallo")).toBeInTheDocument(); + // fireEvent.click(await screen.findByText((content) => content.startsWith("ui.translation.action.original"))); + // expect(screen.getByText("Hello")).toBeInTheDocument(); + // }); }); From 98a293b7a2e7ed9cb014cc4f693532d7cc19d257 Mon Sep 17 00:00:00 2001 From: mhenriette Date: Tue, 27 Aug 2024 10:01:45 +0200 Subject: [PATCH 4/4] feat: add more translation box tests --- .../components/cards/TranslationBox.test.tsx | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/__tests__/components/cards/TranslationBox.test.tsx b/__tests__/components/cards/TranslationBox.test.tsx index 4b8110159..c7d8d733f 100644 --- a/__tests__/components/cards/TranslationBox.test.tsx +++ b/__tests__/components/cards/TranslationBox.test.tsx @@ -25,6 +25,10 @@ jest.mock("../../../src/utilities/Translate", () => ({ Translate: jest.fn(), })); +beforeEach(() => { + jest.clearAllMocks(); +}); + describe("TranslationBOX", () => { const mockTranslate = Translate as jest.Mock; it("should render the componet", () => { @@ -34,7 +38,6 @@ describe("TranslationBOX", () => { it("should show loading state during translation", async () => { renderWithRedux(); - fireEvent.click(await screen.findByRole("button", { name: "Click me" })); expect(Translate).toHaveBeenCalled(); expect(screen.getByText("Translating...")).toBeInTheDocument(); @@ -51,14 +54,24 @@ describe("TranslationBOX", () => { expect(screen.getByText("Translated Text")).toBeInTheDocument(); }); + it("should automatically translate when currentLocale is different from defaultLocale", async () => { + mockTranslate.mockResolvedValue("Translated Text"); + renderWithRedux(); + await waitFor(() => expect(Translate).toHaveBeenCalled()); + expect(screen.getByText("Translated Text")).toBeInTheDocument(); + }); + it("should not show translation options when disabled prop is true", () => { + renderWithRedux(); + expect(screen.queryByText("ui.translate")).not.toBeInTheDocument(); + }); + + it("should revert the text back to its original language when revert is clicked", async () => { + mockTranslate.mockResolvedValue("Hallo"); + renderWithRedux(); + + await waitFor(() => expect(screen.getByText("Hallo")).toBeInTheDocument()); - // it("Should revert the text back to its original language when revert is clicked", async () => { - // mockTranslate.mockResolvedValueOnce("Hallo"); - // renderWithRedux(); - // fireEvent.click(await screen.findByText((content) => content.includes("ui.translate"))); - // expect(mockTranslate).toHaveBeenCalled(); - // expect(screen.getByText("Hallo")).toBeInTheDocument(); - // fireEvent.click(await screen.findByText((content) => content.startsWith("ui.translation.action.original"))); - // expect(screen.getByText("Hello")).toBeInTheDocument(); - // }); + fireEvent.click(screen.getByText("ui.translation.action.original English")); + expect(screen.getByText("Hello")).toBeInTheDocument(); + }); });