From 7f53145dba287fe6bfdb926f6d1e6e4969bf4159 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Wed, 22 May 2024 14:33:48 +0200 Subject: [PATCH 01/11] fix: setup components anew --- __mocks__/course.ts | 134 ++++++++++++++++++ __mocks__/provider/ReduxProvider.tsx | 11 ++ .../courses/CommunityNavigation.test.tsx | 28 ++++ .../sections/courses/MobileNav.test.tsx | 26 ++++ .../sections/courses/Navigation.test.tsx | 28 ++++ .../courses/Overview/Challenge.test.tsx | 35 +++++ .../courses/Overview/Description.test.tsx | 29 ++++ .../courses/Overview/Disclaimer.test.tsx | 34 +++++ .../courses/Overview/LearningModules.test.tsx | 40 ++++++ .../courses/Overview/Objectives.test.tsx | 33 +++++ .../courses/Overview/Prerequisite.test.tsx | 29 ++++ .../courses/Overview/Rewards.test.tsx | 30 ++++ .../courses/Overview/Trailer.test.tsx | 30 ++++ .../sections/courses/Overview/index.test.tsx | 29 ++++ .../sections/courses/PageNavigation.test.tsx | 29 ++++ .../sections/courses/Wrapper.test.tsx | 47 ++++++ 16 files changed, 592 insertions(+) create mode 100644 __mocks__/course.ts create mode 100644 __mocks__/provider/ReduxProvider.tsx create mode 100644 __tests__/components/sections/courses/CommunityNavigation.test.tsx create mode 100644 __tests__/components/sections/courses/MobileNav.test.tsx create mode 100644 __tests__/components/sections/courses/Navigation.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Challenge.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Description.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Disclaimer.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/LearningModules.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Objectives.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Prerequisite.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Rewards.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/Trailer.test.tsx create mode 100644 __tests__/components/sections/courses/Overview/index.test.tsx create mode 100644 __tests__/components/sections/courses/PageNavigation.test.tsx create mode 100644 __tests__/components/sections/courses/Wrapper.test.tsx diff --git a/__mocks__/course.ts b/__mocks__/course.ts new file mode 100644 index 00000000..d0d41f8f --- /dev/null +++ b/__mocks__/course.ts @@ -0,0 +1,134 @@ +import { Course, Format, LearningModule, Material } from "@/types/course"; +import { mockTrailer } from "./bounty"; + + +export const Introduction = { + text: "course intro", +}; + +export const mockCertificateData = { + narrative: "course certificate", + icon: "certificate icon", +}; + +export const Rubric = { + id: "id", + ref: "rubric references", + created_at: "Wednesday", + updated_at: "Thursday", + challenge: "Challenge", + text: "Challenge text", + type: "challenge type", + order: 89, + points: 90, + timestamp: 73, + typeSlug: "slug", +}; + +export const mockRatingCriteria = { + name: "rating criteria", + order: 4, + rubric: [Rubric], + maxPoints: 78, +}; + +enum MaterialType { + ADDITIONAL = "ADDITIONAL", + MARKDOWN = "MARKDOWN", + TEXT = "TEXT", + ARTICLE = "ARTICLE", + "EMBEDDED-VIDEO" = "EMBEDDED-VIDEO", +} +export const mockMaterial: Material = { + duration: 3, + subtitle: "material subtitle", + link: "material link", + description: "material description", + title: "material title", + type: MaterialType.ADDITIONAL, + list: [{ link: "Link 1" }], +}; + +export const InteractiveModule = { + ref: "interactive module ref", + title: "interactive module title", + text: "interative text", + closing: { + text: "closing", + title: "title", + }, + items: [ + { + text: "text", + title: "title", + options: { + text: "text", + isCorrect: true, + }, + question: { + title: "question title", + answers: ["answer 1", "answer 2"], + correct: 2, + }, + }, + ], +}; + +export const mockLearningModule: LearningModule = { + id: "learningModule id", + ref: "learning module reference", + created_at: new Date("2022-05-01T12:00:00Z"), + updated_at: new Date("2022-05-01T12:00:00Z"), + duration: 4, + description: "learning module description", + objectives: ["objective 1, objective 2"], + title: "learning module title", + community: "learning module community", + materials: [mockMaterial], + timestamp: 3, + order: 4, + course: "Learning module course", + interactiveModules: [InteractiveModule], +}; + +export const mockCourse: Course = { + id: "course", + ref: "course ref", + created_at: new Date("2022-05-01T12:00:00Z"), + updated_at: new Date("2022-05-01T12:00:00Z"), + duration: 3, + summary: "Course description", + level: 3, + name: "course name", + description: "Course description", + objectives: ["course description", "course objectives"], + locale: "English", + community: "community", + slug: "course description slug", + introduction: Introduction, + active: true, + certificateIcon: "certificate", + certificateData: mockCertificateData, + timestamp: 0, + learningModules: [mockLearningModule], + trailer: mockTrailer, + disclaimer: "Course", + items: ["item 1", "item 2"], + faq: [ + { + description: "faq description", + title: "faq title", + }, + ], + prerequisite: { + items: ["item 1", "item 2"], + hint: "prerequisite hint", + }, + translations: [] +}; + +export const mockFormat: Format = { + githubLink: true, + text: true, + disclaimer: true, +}; \ No newline at end of file diff --git a/__mocks__/provider/ReduxProvider.tsx b/__mocks__/provider/ReduxProvider.tsx new file mode 100644 index 00000000..c8d0b610 --- /dev/null +++ b/__mocks__/provider/ReduxProvider.tsx @@ -0,0 +1,11 @@ +import { wrapper } from "@/store"; +import { ReactNode } from "react"; +import { Provider } from "react-redux"; + +const ReduxProvider = ({ children }: { children: ReactNode }) => { + const { store } = wrapper.useWrappedStore(children); + + return <Provider store={store}>{children}</Provider>; +}; + +export default ReduxProvider; \ No newline at end of file diff --git a/__tests__/components/sections/courses/CommunityNavigation.test.tsx b/__tests__/components/sections/courses/CommunityNavigation.test.tsx new file mode 100644 index 00000000..46acbb59 --- /dev/null +++ b/__tests__/components/sections/courses/CommunityNavigation.test.tsx @@ -0,0 +1,28 @@ +import "@testing-library/jest-dom"; +import CommunityNavigation from "@/components/sections/courses/CommunityNavigation"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider"; +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderCommunityNavigation = () => { + render( + <ReduxProvider> + <CommunityNavigation /> + </ReduxProvider> + ); + return screen.getByTestId("community-navigation-show"); +} + +describe("CommunityNavigation", () => { + it("should render the Learning Modules", () => { + const communityNavigation = RenderCommunityNavigation(); + expect(communityNavigation).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/MobileNav.test.tsx b/__tests__/components/sections/courses/MobileNav.test.tsx new file mode 100644 index 00000000..106b75d4 --- /dev/null +++ b/__tests__/components/sections/courses/MobileNav.test.tsx @@ -0,0 +1,26 @@ +import "@testing-library/jest-dom"; +import MobileNav from "@/components/sections/courses/MobileNav"; +import { render, screen } from "@testing-library/react"; +import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider"; +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + +const RenderMobileNav = () => { + render( + <ReduxProvider> + <MobileNav /> + </ReduxProvider> + ); + return screen.getByTestId("mobile-nav-show"); +} + +describe("MobileNav", () => { + it("should render the Mobile Nav", () => { + const mobileNav = RenderMobileNav(); + expect(mobileNav).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx new file mode 100644 index 00000000..dcc14689 --- /dev/null +++ b/__tests__/components/sections/courses/Navigation.test.tsx @@ -0,0 +1,28 @@ +import "@testing-library/jest-dom"; +import Navigation from "@/components/sections/courses/Navigation"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider"; +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderNavigation = () => { + render( + <ReduxProvider> + <Navigation /> + </ReduxProvider> + ); + return screen.getByTestId("navigation-show"); +} + +describe("LearningModules", () => { + it("should render the Learning Modules", () => { + const navigation = RenderNavigation(); + expect(navigation).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Challenge.test.tsx b/__tests__/components/sections/courses/Overview/Challenge.test.tsx new file mode 100644 index 00000000..10042a69 --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Challenge.test.tsx @@ -0,0 +1,35 @@ +import "@testing-library/jest-dom"; +import Challenge from "@/components/sections/courses/overview/Challenge"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderChallenge = () => { + render( + <ReduxProvider> + <Challenge /> + </ReduxProvider> + ); + return screen.getByTestId("challenge-show"); +} + +describe("Challenge", () => { + it("should render the Challenge", () => { + const challenge = RenderChallenge(); + expect(challenge).toBeInTheDocument(); + }); + + it("should show", () => { + RenderChallenge(); + const challengeDescription = screen.getByTestId("challenge-description"); + expect(challengeDescription).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Description.test.tsx b/__tests__/components/sections/courses/Overview/Description.test.tsx new file mode 100644 index 00000000..7a6d2643 --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Description.test.tsx @@ -0,0 +1,29 @@ +import "@testing-library/jest-dom"; +import { render, screen } from "@testing-library/react"; +import Description from "@/components/sections/courses/overview/Description"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + +const RenderDescription = () => { + render( + <ReduxProvider> + <Description /> + </ReduxProvider> + ); + return screen.getByTestId("description-show"); +} + +describe("Description", () => { + it("should render the Description", () => { + const description = RenderDescription(); + expect(description).toBeInTheDocument(); + }); + +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx new file mode 100644 index 00000000..c3779955 --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx @@ -0,0 +1,34 @@ +import "@testing-library/jest-dom"; +import Disclaimer from "@/components/sections/courses/overview/Disclaimer"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderDisclaimer = () => { + render( + <ReduxProvider> + <Disclaimer /> + </ReduxProvider> + ); + return screen.getByTestId("disclaimer-show"); +} + +describe("Disclaimer", () => { + it("should render the Disclaimer", () => { + const disclaimerComponent = RenderDisclaimer(); + expect(disclaimerComponent).toBeInTheDocument(); + }); + + it("should show disclaimer HTML", () => { + RenderDisclaimer(); + const courseDisclaimer = screen.getByTestId("disclaimer"); + expect(courseDisclaimer).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx new file mode 100644 index 00000000..9c5d1de4 --- /dev/null +++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx @@ -0,0 +1,40 @@ +import "@testing-library/jest-dom"; +import LearningModules from "@/components/sections/courses/overview/LearningModules"; +// import LearningModulesCard from "@/components/cards/Learning"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../../../../__mocks__/course;"; +// import { learningModule } from "../../__mocks__/learningModule.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + +// const learningModulesProps = { +// course: course, + +// } + +const RenderLearningModules = () => { + render( + <ReduxProvider> + <LearningModules/> + </ReduxProvider> + ); + return screen.getByTestId("-show"); +} + +describe("LearningModules", () => { + it("should render the Learning Modules", () => { + const learningModules = RenderLearningModules(); + expect(learningModules).toBeInTheDocument(); + }); + + it("should show Learning Modules List", () => { + const learningModulesCard = screen.getByTestId("learning-modules-card"); + expect(learningModulesCard).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Objectives.test.tsx b/__tests__/components/sections/courses/Overview/Objectives.test.tsx new file mode 100644 index 00000000..5e2824e3 --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Objectives.test.tsx @@ -0,0 +1,33 @@ +import "@testing-library/jest-dom"; +import Objectives from "@/components/sections/courses/overview/Objectives"; +import { render, screen } from "@testing-library/react"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderObjectives = () => { + render( + <ReduxProvider> + <Objectives/> + </ReduxProvider> + ); + return screen.getByTestId("objectives-show"); +} + +describe("Objectives", () => { + it("should render the Objectives", () => { + const objectives = RenderObjectives(); + expect(objectives).toBeInTheDocument(); + }); + + it("should show Objective List", () => { + const objectivesList = screen.getByTestId("objectives-list-show"); + expect(objectivesList).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx new file mode 100644 index 00000000..05a80e0b --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx @@ -0,0 +1,29 @@ +import "@testing-library/jest-dom"; +import Prerequisite from "@/components/sections/courses/overview/Prerequisite"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderPrerequisite = () => { + render( + <ReduxProvider> + <Prerequisite /> + </ReduxProvider> + ); + return screen.getByTestId("prerequisite-show"); +} + +describe("Prerequisite", () => { + it("should render the Prerequisite", () => { + const prerequisite = RenderPrerequisite(); + expect(prerequisite).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx new file mode 100644 index 00000000..e97a690c --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx @@ -0,0 +1,30 @@ + +import "@testing-library/jest-dom"; +import Rewards from "@/components/sections/courses/overview/Rewards"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderRewards = () => { + render( + <ReduxProvider> + <Rewards /> + </ReduxProvider> + ); + return screen.getByTestId("rewards-show"); +} + +describe("Rewards", () => { + it("should render the Rewards", () => { + const rewards = RenderRewards(); + expect(rewards).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx new file mode 100644 index 00000000..4343cd4a --- /dev/null +++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx @@ -0,0 +1,30 @@ + +import "@testing-library/jest-dom"; +import Trailer from "@/components/sections/courses/overview/Trailer"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderTrailer = () => { + render( + <ReduxProvider> + <Trailer /> + </ReduxProvider> + ); + return screen.getByTestId("trailer-show"); +} + +describe("Trailer", () => { + it("should render the Trailer", () => { + const trailer = RenderTrailer(); + expect(trailer).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx new file mode 100644 index 00000000..b83178ab --- /dev/null +++ b/__tests__/components/sections/courses/Overview/index.test.tsx @@ -0,0 +1,29 @@ +import "@testing-library/jest-dom"; +import AllComponents from "@/components/sections/courses/overview/index"; +import { render, screen } from "@testing-library/react"; +// import { course } from "../../__mocks__/course.ts"; +import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + }), +})); + + +const RenderAllComponents = () => { + render( + <ReduxProvider> + <AllComponents /> + </ReduxProvider> + ); + return screen.getByTestId("all-components-show"); +} + +describe("All Components", () => { + it("should render all the components from the index component", () => { + const allComponents = RenderAllComponents(); + expect(allComponents).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/__tests__/components/sections/courses/PageNavigation.test.tsx b/__tests__/components/sections/courses/PageNavigation.test.tsx new file mode 100644 index 00000000..46c10f60 --- /dev/null +++ b/__tests__/components/sections/courses/PageNavigation.test.tsx @@ -0,0 +1,29 @@ +import "@testing-library/jest-dom"; +import PageNavigation from "@/components/sections/courses/PageNavigation"; +import { screen } from "@testing-library/react"; +import { renderWithRedux } from "../../../../__mocks__/renderWithRedux"; + +jest.mock("next/router", () => ({ + useRouter: () => ({ + push: jest.fn(), + isFallback: false, + events: { + on: jest.fn(), + off: jest.fn(), + emit: jest.fn(), + }, + }), +})); + + + + +describe("PageNavigation", () => { + it("should render the Page Navigation", () => { + + renderWithRedux( <PageNavigation /> ); + + const pageNavigation = screen.getByTestId("pageNavId"); + expect(pageNavigation).toBeInTheDocument(); + }); +}); diff --git a/__tests__/components/sections/courses/Wrapper.test.tsx b/__tests__/components/sections/courses/Wrapper.test.tsx new file mode 100644 index 00000000..1e5c0458 --- /dev/null +++ b/__tests__/components/sections/courses/Wrapper.test.tsx @@ -0,0 +1,47 @@ +import "@testing-library/jest-dom"; +import Wrapper from "@/components/sections/courses/Wrapper"; +import Navigation from "@/components/sections/courses/Navigation"; +import MobileNav from "@/components/sections/courses/MobileNav"; +import CommunityNavigation from "@/components/sections/courses/CommunityNavigation"; +import { render, screen } from "@testing-library/react"; +// import { renderWithRedux } from "../../../../__mocks__/renderWithRedux"; + + +describe("Wrapper", () => { + + it("should render the Wrapper", () => { + // eslint-disable-next-line react/no-children-prop + render( <Wrapper children={undefined} />); + const wrapper = screen.getByTestId("wrapperId"); + expect(wrapper).toBeInTheDocument(); + expect(screen.getByPlaceholderText("wrapperSectionId")).toBeInTheDocument(); + }); + + + it("Should render Navigation component", () => { + render(<Navigation />); + const navigation = screen.getByTestId("NavId"); + expect(navigation).toBeInTheDocument(); + }); + + + it("Should render Navigation component", () => { + render(<MobileNav />); + const inputElement = screen.getByPlaceholderText("showTopBorder"); + expect(inputElement).toBeInTheDocument(); + const mobileNav = screen.getByText("MobileNavId"); + expect(mobileNav).toBeInTheDocument(); + }); + + + it("Should render Navigation component", () => { + render(<CommunityNavigation />); + const inputElement = screen.getByPlaceholderText("paths"); + expect(inputElement).toBeInTheDocument(); + const communityNav = screen.getByTestId("communityNavId"); + expect(communityNav).toBeInTheDocument(); + }); + +}); + + From 1872d1f61f3973ea48e5fdead898bcb70e907334 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 14:04:30 +0200 Subject: [PATCH 02/11] fix: description component test --- __mocks__/bounty.ts | 11 ++++ .../courses/CommunityNavigation.test.tsx | 19 +++++- .../sections/courses/MobileNav.test.tsx | 16 +++++ .../sections/courses/Navigation.test.tsx | 2 +- .../courses/Overview/Challenge.test.tsx | 43 ++++++-------- .../courses/Overview/LearningModules.test.tsx | 45 ++++++-------- .../sections/courses/PageNavigation.test.tsx | 59 ++++++++++++++++++- .../sections/courses/Wrapper.test.tsx | 1 - .../sections/courses/CommunityNavigation.tsx | 8 ++- .../sections/courses/PageNavigation.tsx | 6 +- src/components/sections/courses/Wrapper.tsx | 8 +-- .../sections/courses/overview/Challenge.tsx | 4 +- .../courses/overview/LearningModules.tsx | 4 +- 13 files changed, 155 insertions(+), 71 deletions(-) create mode 100644 __mocks__/bounty.ts diff --git a/__mocks__/bounty.ts b/__mocks__/bounty.ts new file mode 100644 index 00000000..782d9535 --- /dev/null +++ b/__mocks__/bounty.ts @@ -0,0 +1,11 @@ +export const mockTrailer = { + summary: "trailer summary", + description: "trailer descriptio", + video: "trailer video", + duration: 4, + info: { + items: ["item 1", "item 2"], + title: "info title", + }, + }; + \ No newline at end of file diff --git a/__tests__/components/sections/courses/CommunityNavigation.test.tsx b/__tests__/components/sections/courses/CommunityNavigation.test.tsx index 46acbb59..827bb8e8 100644 --- a/__tests__/components/sections/courses/CommunityNavigation.test.tsx +++ b/__tests__/components/sections/courses/CommunityNavigation.test.tsx @@ -1,8 +1,11 @@ import "@testing-library/jest-dom"; import CommunityNavigation from "@/components/sections/courses/CommunityNavigation"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; +import ChevronRightIcon from "@/icons/chevron-right.svg"; import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider"; +import Link from "next/link"; + + jest.mock("next/router", () => ({ useRouter: () => ({ push: jest.fn(), @@ -17,7 +20,7 @@ const RenderCommunityNavigation = () => { <CommunityNavigation /> </ReduxProvider> ); - return screen.getByTestId("community-navigation-show"); + return screen.getByTestId("communityNavigationShow"); } describe("CommunityNavigation", () => { @@ -25,4 +28,16 @@ describe("CommunityNavigation", () => { const communityNavigation = RenderCommunityNavigation(); expect(communityNavigation).toBeInTheDocument(); }); +}); + +it("should render the Chevron Right Icon", () => { + render( <ChevronRightIcon /> ); + const communityNavigationChevIcon = screen.getByTestId("communityNavId"); + expect(communityNavigationChevIcon).toBeInTheDocument(); +}); + +it("should render the Link", () => { + render( <Link href={""} >link</Link> ); + const communityNavigationLink = screen.getByTestId("communityNavLink"); + expect(communityNavigationLink).toBeInTheDocument(); }); \ No newline at end of file diff --git a/__tests__/components/sections/courses/MobileNav.test.tsx b/__tests__/components/sections/courses/MobileNav.test.tsx index 106b75d4..2876a487 100644 --- a/__tests__/components/sections/courses/MobileNav.test.tsx +++ b/__tests__/components/sections/courses/MobileNav.test.tsx @@ -2,6 +2,10 @@ import "@testing-library/jest-dom"; import MobileNav from "@/components/sections/courses/MobileNav"; import { render, screen } from "@testing-library/react"; import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider"; +import ChevronBottomIcon from "@/icons/chevron-bottom.svg"; +import Navigation from "@/components/sections/courses/Navigation"; + + jest.mock("next/router", () => ({ useRouter: () => ({ push: jest.fn(), @@ -23,4 +27,16 @@ describe("MobileNav", () => { const mobileNav = RenderMobileNav(); expect(mobileNav).toBeInTheDocument(); }); +}); + +it("should render the Chevron Bottom Icon Component", () => { + render( <ChevronBottomIcon /> ); + const mobileNavChevIcon = screen.getByTestId("mobileNavChevIconId"); + expect(mobileNavChevIcon).toBeInTheDocument(); +}); + +it("should render the Component", () => { + render( <Navigation /> ); + const mobileNavNav = screen.getByTestId("navId"); + expect(mobileNavNav).toBeInTheDocument(); }); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx index dcc14689..cf8ab8d2 100644 --- a/__tests__/components/sections/courses/Navigation.test.tsx +++ b/__tests__/components/sections/courses/Navigation.test.tsx @@ -21,7 +21,7 @@ const RenderNavigation = () => { } describe("LearningModules", () => { - it("should render the Learning Modules", () => { + it("should render the Navidation component", () => { const navigation = RenderNavigation(); expect(navigation).toBeInTheDocument(); }); diff --git a/__tests__/components/sections/courses/Overview/Challenge.test.tsx b/__tests__/components/sections/courses/Overview/Challenge.test.tsx index 10042a69..27c89e12 100644 --- a/__tests__/components/sections/courses/Overview/Challenge.test.tsx +++ b/__tests__/components/sections/courses/Overview/Challenge.test.tsx @@ -1,35 +1,30 @@ import "@testing-library/jest-dom"; import Challenge from "@/components/sections/courses/overview/Challenge"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; - -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); - - -const RenderChallenge = () => { - render( - <ReduxProvider> - <Challenge /> - </ReduxProvider> - ); - return screen.getByTestId("challenge-show"); -} +import { mockCourse } from "../../../../../__mocks__/course"; + + describe("Challenge", () => { it("should render the Challenge", () => { - const challenge = RenderChallenge(); + render(<Challenge />); + const challenge = screen.getByTestId("challengeDescriptionId");; expect(challenge).toBeInTheDocument(); }); - it("should show", () => { - RenderChallenge(); - const challengeDescription = screen.getByTestId("challenge-description"); + it("should show content", () => { + const challengeDescription = screen.getByTestId("challengeDescription"); expect(challengeDescription).toBeInTheDocument(); }); -}); \ No newline at end of file + + it("should show text content", () => { + const challengeText = screen.getByTestId("challengeDescription"); + expect(challengeText).toBeInTheDocument(); + expect(challengeText).toBe( mockCourse.challenge?.description); + }); + + + +}); + + diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx index 9c5d1de4..ee06b637 100644 --- a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx +++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx @@ -1,40 +1,31 @@ import "@testing-library/jest-dom"; import LearningModules from "@/components/sections/courses/overview/LearningModules"; -// import LearningModulesCard from "@/components/cards/Learning"; +import LearningModulesCard from "@/components/cards/Learning"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../../../../__mocks__/course;"; -// import { learningModule } from "../../__mocks__/learningModule.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; +import { mockCourse } from "../../../../../__mocks__/course"; +import { LearningModule } from "@/types/course"; -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); - -// const learningModulesProps = { -// course: course, - -// } - -const RenderLearningModules = () => { - render( - <ReduxProvider> - <LearningModules/> - </ReduxProvider> - ); - return screen.getByTestId("-show"); +interface LearningModuleProps { + key: number; + learningModule: LearningModule[]; } +const RenderLearningModule = (props?: LearningModuleProps) => { + render(<LearningModulesCard {...props} key={1} learningModule={[mockCourse.learningModules]}/>); + return screen.getByTestId("learningModulesCardId"); +}; + describe("LearningModules", () => { it("should render the Learning Modules", () => { - const learningModules = RenderLearningModules(); + render(<LearningModules />); + const learningModules = screen.getByTestId("learningModulesId"); expect(learningModules).toBeInTheDocument(); + expect(learningModules).toHaveTextContent("0"); }); it("should show Learning Modules List", () => { - const learningModulesCard = screen.getByTestId("learning-modules-card"); - expect(learningModulesCard).toBeInTheDocument(); + const learningModulesCard = RenderLearningModule(); + expect(learningModulesCard).toBeInTheDocument(); + }); -}); \ No newline at end of file +}); diff --git a/__tests__/components/sections/courses/PageNavigation.test.tsx b/__tests__/components/sections/courses/PageNavigation.test.tsx index 46c10f60..5b6f2e62 100644 --- a/__tests__/components/sections/courses/PageNavigation.test.tsx +++ b/__tests__/components/sections/courses/PageNavigation.test.tsx @@ -2,6 +2,8 @@ import "@testing-library/jest-dom"; import PageNavigation from "@/components/sections/courses/PageNavigation"; import { screen } from "@testing-library/react"; import { renderWithRedux } from "../../../../__mocks__/renderWithRedux"; +import ArrowButton from "@/components/ui/button/Arrow"; +import Link from "next/link"; jest.mock("next/router", () => ({ useRouter: () => ({ @@ -16,14 +18,67 @@ jest.mock("next/router", () => ({ })); +const arrowButtonProps = { + customStyle: {}, + minWidthClass: "", + className: "", + children: "Arrow button", +}; + + +const linkPrev = "/" + +const linkNext = "/" + +const RenderArrowButton = (props = arrowButtonProps) => { + const { customStyle, minWidthClass, className } = + props; + + renderWithRedux( + <ArrowButton + customStyle={customStyle} + minWidthClass={minWidthClass} + className={className} + + > + {props.children} + </ArrowButton> + ); + + return screen.getByText(arrowButtonProps.children); +}; describe("PageNavigation", () => { - it("should render the Page Navigation", () => { + it("Should render the arrow button", () => { + const arrowButton = RenderArrowButton(); + expect(arrowButton).toBeInTheDocument(); + }); + + it("should render the Page Navigation", () => { renderWithRedux( <PageNavigation /> ); - const pageNavigation = screen.getByTestId("pageNavId"); expect(pageNavigation).toBeInTheDocument(); }); + + + it("should render page nav link with previous link", () => { + renderWithRedux(<Link href={linkNext}/>); + const pageNavLink = screen.getByTestId("pageNavLinkId"); + expect(pageNavLink).toBeInTheDocument(); + expect(pageNavLink).toHaveAttribute("href", "/"); + }); + + + it("should render page nav link with next link", () => { + renderWithRedux(<Link href={linkPrev}/>); + const pageNavLink = screen.getByTestId("pageNavLinkId"); + expect(pageNavLink).toBeInTheDocument(); + expect(pageNavLink).toHaveAttribute("href", "/"); + }); + + + + }); diff --git a/__tests__/components/sections/courses/Wrapper.test.tsx b/__tests__/components/sections/courses/Wrapper.test.tsx index 1e5c0458..8669d618 100644 --- a/__tests__/components/sections/courses/Wrapper.test.tsx +++ b/__tests__/components/sections/courses/Wrapper.test.tsx @@ -4,7 +4,6 @@ import Navigation from "@/components/sections/courses/Navigation"; import MobileNav from "@/components/sections/courses/MobileNav"; import CommunityNavigation from "@/components/sections/courses/CommunityNavigation"; import { render, screen } from "@testing-library/react"; -// import { renderWithRedux } from "../../../../__mocks__/renderWithRedux"; describe("Wrapper", () => { diff --git a/src/components/sections/courses/CommunityNavigation.tsx b/src/components/sections/courses/CommunityNavigation.tsx index 357c1218..3870d408 100644 --- a/src/components/sections/courses/CommunityNavigation.tsx +++ b/src/components/sections/courses/CommunityNavigation.tsx @@ -15,15 +15,15 @@ export default function CommunityNavigation({ paths }: { paths?: string[] }): Re const path = useMemo(() => (community ? `/communities/${community.slug}` : ""), [community]); return community ? ( - <div> + <div data-testid="communityNavigationShow"> <div className="relative flex items-center py-4 pt-4 text-sm border-b-2 md:pt-7 lg:border-0"> - <div className="leading-none text-gray-500"> + <div className="leading-none text-gray-500" data-testid="communityNavLink"> <Link href={path}>{community.name}</Link> </div> {paths?.map((path, index) => ( <Fragment key={`path-${index}`}> <div className="px-0.5"> - <ChevronRightIcon viewBox="0 0 20 20" className="w-3 h-3" /> + <ChevronRightIcon viewBox="0 0 20 20" className="w-3 h-3" data-testid="communityNavId"/> </div> <div className="font-medium leading-none">{path}</div> </Fragment> @@ -34,3 +34,5 @@ export default function CommunityNavigation({ paths }: { paths?: string[] }): Re <></> ); } + + diff --git a/src/components/sections/courses/PageNavigation.tsx b/src/components/sections/courses/PageNavigation.tsx index d95c049d..f26eff28 100644 --- a/src/components/sections/courses/PageNavigation.tsx +++ b/src/components/sections/courses/PageNavigation.tsx @@ -106,16 +106,16 @@ export default function PageNavigation(): ReactElement { if (show) return ( <Section> - <div className={classNames("text-center justify-center space-x-10 pt-3", { flex: prevUrl, "w-full sm:flex": !prevUrl })}> + <div data-testid="pageNavId" className={classNames("text-center justify-center space-x-10 pt-3", { flex: prevUrl, "w-full sm:flex": !prevUrl })}> {prevUrl && ( - <Link href={prevUrl}> + <Link href={prevUrl} data-testId="pageNavLinkId"> <ArrowButton customStyle={buttonStyle} direction="left" minWidthClass="null"> {t("nav.page.prev")} </ArrowButton> </Link> )} {nextUrl && ( - <Link href={nextUrl}> + <Link href={nextUrl} data-testId="pageNavLinkId"> <ArrowButton className={classNames({ "text-.5xl py-4.5 pl-6 pr-5.5": !prevUrl, diff --git a/src/components/sections/courses/Wrapper.tsx b/src/components/sections/courses/Wrapper.tsx index 7953dd94..afd0934c 100644 --- a/src/components/sections/courses/Wrapper.tsx +++ b/src/components/sections/courses/Wrapper.tsx @@ -26,15 +26,15 @@ interface WrapperProps { */ export default function Wrapper({ children, paths }: WrapperProps): ReactElement { return ( - <Section type="default"> + <Section type="default" data-testid="wrapperId"> <div className="h-auto lg:flex"> - <div className="sticky top-0 self-start hidden w-1/4 py-3 lg:block pr-9 lg:py-14"> + <div className="sticky top-0 self-start hidden w-1/4 py-3 lg:block pr-9 lg:py-14" data-testid="NavId"> <Navigation /> </div> - <div className="w-full pt-6 lg:hidden"> + <div className="w-full pt-6 lg:hidden" data-testid="MobileNavId"> <MobileNav showTopBorder /> </div> - <div className="w-full lg:w-3/4"> + <div className="w-full lg:w-3/4" data-testid="communityNavId"> <CommunityNavigation paths={paths} /> {children} </div> diff --git a/src/components/sections/courses/overview/Challenge.tsx b/src/components/sections/courses/overview/Challenge.tsx index d9a3ee44..8a513b77 100644 --- a/src/components/sections/courses/overview/Challenge.tsx +++ b/src/components/sections/courses/overview/Challenge.tsx @@ -15,8 +15,8 @@ export default function Challenge(): ReactElement { const { t } = useTranslation(); return course && course.challenge ? ( - <Section title={t("communities.overview.challenge")}> - <span className="block mt-3 text-base font-normal md:text-lg">{course.challenge.description}</span> + <Section data-testid="challengeDescriptionId" title={t("communities.overview.challenge")}> + <span data-testid="challengeDescription" className="block mt-3 text-base font-normal md:text-lg">{course.challenge.description}</span> </Section> ) : ( <></> diff --git a/src/components/sections/courses/overview/LearningModules.tsx b/src/components/sections/courses/overview/LearningModules.tsx index 19d51446..bdbbf532 100644 --- a/src/components/sections/courses/overview/LearningModules.tsx +++ b/src/components/sections/courses/overview/LearningModules.tsx @@ -18,7 +18,7 @@ export default function LearningModules(): ReactElement { return ( <> {course ? ( - <Section> + <Section data-testid="learningModulesId"> <div className="grid flex-wrap grid-cols-1 gap-5 sm:grid-cols-2"> <div className="flex flex-col w-full mt-0 mr-4 md:pt-4"> <h4 className="font-medium inline-block text-.5xl">{t("communities.overview.learning-modules")}</h4> @@ -26,7 +26,7 @@ export default function LearningModules(): ReactElement { </div> {course.learningModules && course.learningModules.map((learningModule, index) => { - return <LearningModuleCard key={`module-${index}`} learningModule={learningModule} />; + return <LearningModuleCard data-testid="learningModulesCardId" key={`module-${index}`} learningModule={learningModule} />; })} </div> </Section> From 25124255ddae4d0bf04737889bb40d3d56ef1a01 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 14:10:06 +0200 Subject: [PATCH 03/11] fix: description component test --- .../courses/Overview/Description.test.tsx | 28 ++++--------------- .../sections/courses/overview/Description.tsx | 2 +- 2 files changed, 6 insertions(+), 24 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/Description.test.tsx b/__tests__/components/sections/courses/Overview/Description.test.tsx index 7a6d2643..64d2d905 100644 --- a/__tests__/components/sections/courses/Overview/Description.test.tsx +++ b/__tests__/components/sections/courses/Overview/Description.test.tsx @@ -1,29 +1,11 @@ import "@testing-library/jest-dom"; import { render, screen } from "@testing-library/react"; import Description from "@/components/sections/courses/overview/Description"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); -const RenderDescription = () => { - render( - <ReduxProvider> - <Description /> - </ReduxProvider> - ); - return screen.getByTestId("description-show"); -} +it("should render the Description", () => { + render( <Description />); + const description = screen.getByTestId("descriptionId");; + expect(description).toBeInTheDocument(); +}); -describe("Description", () => { - it("should render the Description", () => { - const description = RenderDescription(); - expect(description).toBeInTheDocument(); - }); - -}); \ No newline at end of file diff --git a/src/components/sections/courses/overview/Description.tsx b/src/components/sections/courses/overview/Description.tsx index 751dcb1c..5cd63519 100644 --- a/src/components/sections/courses/overview/Description.tsx +++ b/src/components/sections/courses/overview/Description.tsx @@ -16,7 +16,7 @@ export default function Description(): ReactElement { const course = useSelector((state) => state.courses.current); return course ? ( - <div className="px-0 py-2 pb-8 mb-0 text-lg leading-snug border-b-2 pt-9 md:hidden tracking-onepercent md:border-b-0"> + <div data-testid="descriptionId" className="px-0 py-2 pb-8 mb-0 text-lg leading-snug border-b-2 pt-9 md:hidden tracking-onepercent md:border-b-0"> {htmlTagsCleanup(course.description || course.summary || "")} </div> ) : ( From 99c1b43fdffa2ca97ae86b62b77e15258ff50f99 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 14:19:36 +0200 Subject: [PATCH 04/11] fix: disclaimer component test --- .../courses/Overview/Disclaimer.test.tsx | 25 +++---------------- .../sections/courses/overview/Disclaimer.tsx | 4 +-- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx index c3779955..5d65e171 100644 --- a/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx +++ b/__tests__/components/sections/courses/Overview/Disclaimer.test.tsx @@ -1,34 +1,15 @@ import "@testing-library/jest-dom"; import Disclaimer from "@/components/sections/courses/overview/Disclaimer"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); -const RenderDisclaimer = () => { - render( - <ReduxProvider> - <Disclaimer /> - </ReduxProvider> - ); - return screen.getByTestId("disclaimer-show"); -} - -describe("Disclaimer", () => { it("should render the Disclaimer", () => { - const disclaimerComponent = RenderDisclaimer(); + render( <Disclaimer />); + const disclaimerComponent = screen.getByTestId("disclaimerId");; expect(disclaimerComponent).toBeInTheDocument(); }); it("should show disclaimer HTML", () => { - RenderDisclaimer(); - const courseDisclaimer = screen.getByTestId("disclaimer"); + const courseDisclaimer = screen.getByTestId("disclaimerSpanId"); expect(courseDisclaimer).toBeInTheDocument(); }); -}); \ No newline at end of file diff --git a/src/components/sections/courses/overview/Disclaimer.tsx b/src/components/sections/courses/overview/Disclaimer.tsx index e712dfbd..8b772048 100644 --- a/src/components/sections/courses/overview/Disclaimer.tsx +++ b/src/components/sections/courses/overview/Disclaimer.tsx @@ -18,10 +18,10 @@ export default function Disclaimer(): ReactElement { if (course && !course.disclaimer) return <></>; return ( - <Section className="!pb-12 !pt-0"> + <Section data-testid="disclaimerId" className="!pb-12 !pt-0"> <Hint> <strong>{t("communities.overview.info.disclaimer.title")}: </strong> - <span dangerouslySetInnerHTML={{ __html: course?.disclaimer as string }} /> + <span data-testid="disclaimerSpanId" dangerouslySetInnerHTML={{ __html: course?.disclaimer as string }} /> </Hint> </Section> ); From 7f2cd8abca22b5737b107e7886b97d699a08b4a8 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 14:48:23 +0200 Subject: [PATCH 05/11] fix: index component test --- .../sections/courses/Overview/index.test.tsx | 86 ++++++++++++++----- .../sections/courses/overview/index.tsx | 16 ++-- 2 files changed, 72 insertions(+), 30 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx index b83178ab..6427a8e2 100644 --- a/__tests__/components/sections/courses/Overview/index.test.tsx +++ b/__tests__/components/sections/courses/Overview/index.test.tsx @@ -1,29 +1,71 @@ import "@testing-library/jest-dom"; import AllComponents from "@/components/sections/courses/overview/index"; +import RewardsSection from "@/components/sections/courses/overview/index"; +import ObjectivesSection from "@/components/sections/courses/overview/index"; +import PrerequisiteSection from "@/components/sections/courses/overview/index"; +import DisclaimerSection from "@/components/sections/courses/overview/index"; +import TrailerSection from "@/components/sections/courses/overview/index"; +import LearningModulesSection from "@/components/sections/courses/overview/index"; +import ChallengeSection from "@/components/sections/courses/overview/index"; +import PageNavigation from "@/components/sections/courses/overview/index"; + import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; - -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); - - -const RenderAllComponents = () => { - render( - <ReduxProvider> - <AllComponents /> - </ReduxProvider> - ); - return screen.getByTestId("all-components-show"); -} + + +it("should render the Disclaimer", () => { + render( <AllComponents />); + const disclaimerComponent = screen.getByTestId("disclaimerId"); + expect(disclaimerComponent).toBeInTheDocument(); +}); describe("All Components", () => { - it("should render all the components from the index component", () => { - const allComponents = RenderAllComponents(); - expect(allComponents).toBeInTheDocument(); + + it("should render RewardsSection in the index component", () => { + render( <RewardsSection />); + const rewardsSection = screen.getByTestId("rewardsSectionId"); + expect(rewardsSection).toBeInTheDocument(); + }); + + + it("should render ObjectivesSection in the index component", () => { + render( <ObjectivesSection />); + const objectivesSection = screen.getByTestId("objectivesSectionId"); + expect(objectivesSection).toBeInTheDocument(); + }); + + it("should render PrerequisiteSection in the index component", () => { + render( <PrerequisiteSection />); + const prerequisiteSection = screen.getByTestId("prerequisiteSectionId"); + expect(prerequisiteSection).toBeInTheDocument(); + }); + + it("should render DisclaimerSection in the index component", () => { + render( <DisclaimerSection />); + const disclaimerSection = screen.getByTestId("disclaimerSectionId"); + expect(disclaimerSection).toBeInTheDocument(); + }); + + it("should render TrailerSection in the index component", () => { + render( <TrailerSection />); + const trailerSection = screen.getByTestId("trailerSectionId"); + expect(trailerSection).toBeInTheDocument(); + }); + + it("should render LearningModulesSection in the index component", () => { + render( <LearningModulesSection />); + const learningModulesSection = screen.getByTestId(""); + expect(learningModulesSection ).toBeInTheDocument(); + }); + + it("should render ChallengeSection in the index component", () => { + render( <ChallengeSection />); + const challengeSection = screen.getByTestId("challengeSectionId"); + expect(challengeSection).toBeInTheDocument(); + }); + + it("should render PageNavigation in the index component", () => { + render( <PageNavigation />); + const pageNavigation = screen.getByTestId("pageNavigationId"); + expect(pageNavigation).toBeInTheDocument(); }); }); \ No newline at end of file diff --git a/src/components/sections/courses/overview/index.tsx b/src/components/sections/courses/overview/index.tsx index 5a5a71cc..58b0f95b 100644 --- a/src/components/sections/courses/overview/index.tsx +++ b/src/components/sections/courses/overview/index.tsx @@ -24,14 +24,14 @@ export default function Overview(): ReactElement { return ( <div className="flex flex-col divide-y divide-solid divide-gray-200 lg:py-5 text-gray-700"> <Header title={course.name} description={course.description} /> - <RewardsSection /> - <ObjectivesSection /> - <PrerequisiteSection /> - <DisclaimerSection /> - <TrailerSection /> - <LearningModulesSection /> - <ChallengeSection /> - <PageNavigation /> + <RewardsSection data-testid=""/> + <ObjectivesSection data-testid=""/> + <PrerequisiteSection data-testid=""/> + <DisclaimerSection data-testid="disclaimerSectionId"/> + <TrailerSection data-testid="trailerSectionId"/> + <LearningModulesSection data-testid="learningModulesSection" /> + <ChallengeSection data-testid="challengeSectionId"/> + <PageNavigation data-testid="pageNavigationId"/> </div> ); } From 8d2a60f73db66902ea4ccac70cc08c225b3e7aa4 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 15:01:42 +0200 Subject: [PATCH 06/11] fix: index component test --- .../sections/courses/Navigation.test.tsx | 20 ++--------- .../sections/courses/Overview/index.test.tsx | 33 ++++++++++++++++--- .../sections/courses/overview/index.tsx | 2 +- 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/__tests__/components/sections/courses/Navigation.test.tsx b/__tests__/components/sections/courses/Navigation.test.tsx index cf8ab8d2..3223f409 100644 --- a/__tests__/components/sections/courses/Navigation.test.tsx +++ b/__tests__/components/sections/courses/Navigation.test.tsx @@ -1,28 +1,12 @@ import "@testing-library/jest-dom"; import Navigation from "@/components/sections/courses/Navigation"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../__mocks__/provider/ReduxProvider"; -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); -const RenderNavigation = () => { - render( - <ReduxProvider> - <Navigation /> - </ReduxProvider> - ); - return screen.getByTestId("navigation-show"); -} - describe("LearningModules", () => { it("should render the Navidation component", () => { - const navigation = RenderNavigation(); + render( <Navigation />); + const navigation = screen.getByTestId("navigation-show"); expect(navigation).toBeInTheDocument(); }); }); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx index 6427a8e2..25e92014 100644 --- a/__tests__/components/sections/courses/Overview/index.test.tsx +++ b/__tests__/components/sections/courses/Overview/index.test.tsx @@ -8,18 +8,41 @@ import TrailerSection from "@/components/sections/courses/overview/index"; import LearningModulesSection from "@/components/sections/courses/overview/index"; import ChallengeSection from "@/components/sections/courses/overview/index"; import PageNavigation from "@/components/sections/courses/overview/index"; +import Header from "@/components/sections/courses/overview/index"; + +import { mockCourse } from "../../../../../__mocks__/course"; import { render, screen } from "@testing-library/react"; -it("should render the Disclaimer", () => { - render( <AllComponents />); - const disclaimerComponent = screen.getByTestId("disclaimerId"); - expect(disclaimerComponent).toBeInTheDocument(); -}); +interface HeaderProps { + title: "string"; + description: "string"; +} + +const RenderHeader = (props?: HeaderProps) => { + render(<Header {...props} title={[mockCourse.name]} description={[mockCourse.description]}/>); + return screen.getByTestId("headerId"); +}; + describe("All Components", () => { + it("should render the Disclaimer", () => { + render( <AllComponents />); + const disclaimerComponent = screen.getByTestId("disclaimerId"); + expect(disclaimerComponent).toBeInTheDocument(); + }); + + + it("should render Header with title and description", () => { + const headerContent = RenderHeader(); + expect(headerContent).toBeInTheDocument(); + expect(headerContent).toBeInTheDocument(); + + + }); + it("should render RewardsSection in the index component", () => { render( <RewardsSection />); const rewardsSection = screen.getByTestId("rewardsSectionId"); diff --git a/src/components/sections/courses/overview/index.tsx b/src/components/sections/courses/overview/index.tsx index 58b0f95b..d2e9f3f1 100644 --- a/src/components/sections/courses/overview/index.tsx +++ b/src/components/sections/courses/overview/index.tsx @@ -23,7 +23,7 @@ export default function Overview(): ReactElement { if (!course) return <></>; return ( <div className="flex flex-col divide-y divide-solid divide-gray-200 lg:py-5 text-gray-700"> - <Header title={course.name} description={course.description} /> + <Header data-testid="headerId" title={course.name} description={course.description} /> <RewardsSection data-testid=""/> <ObjectivesSection data-testid=""/> <PrerequisiteSection data-testid=""/> From e5eaabf2d91c83ae196cc63960776b6d35ec4b67 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 15:31:57 +0200 Subject: [PATCH 07/11] fix: prerequisite component test --- .../courses/Overview/LearningModules.test.tsx | 1 - .../courses/Overview/Objectives.test.tsx | 31 +++++++++---------- .../courses/Overview/Prerequisite.test.tsx | 30 +++++++++++------- .../sections/courses/Overview/index.test.tsx | 3 -- .../sections/courses/overview/Objectives.tsx | 4 +-- .../courses/overview/Prerequisite.tsx | 4 +-- 6 files changed, 37 insertions(+), 36 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx index ee06b637..e7343719 100644 --- a/__tests__/components/sections/courses/Overview/LearningModules.test.tsx +++ b/__tests__/components/sections/courses/Overview/LearningModules.test.tsx @@ -26,6 +26,5 @@ describe("LearningModules", () => { it("should show Learning Modules List", () => { const learningModulesCard = RenderLearningModule(); expect(learningModulesCard).toBeInTheDocument(); - }); }); diff --git a/__tests__/components/sections/courses/Overview/Objectives.test.tsx b/__tests__/components/sections/courses/Overview/Objectives.test.tsx index 5e2824e3..f68b33cf 100644 --- a/__tests__/components/sections/courses/Overview/Objectives.test.tsx +++ b/__tests__/components/sections/courses/Overview/Objectives.test.tsx @@ -1,33 +1,30 @@ import "@testing-library/jest-dom"; import Objectives from "@/components/sections/courses/overview/Objectives"; +import ObjectiveList from "@/components/sections/courses/overview/Objectives"; import { render, screen } from "@testing-library/react"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; +import { mockCourse } from "../../../../../__mocks__/course"; -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); +interface ObjectiveListProps { + objectives: []; +} -const RenderObjectives = () => { - render( - <ReduxProvider> - <Objectives/> - </ReduxProvider> - ); - return screen.getByTestId("objectives-show"); -} +const RenderObjectiveList = (props?: ObjectiveListProps) => { + render(<ObjectiveList {...props} objectives={mockCourse.objectives}/>); + return screen.getByTestId("objectivesListShow"); +}; + describe("Objectives", () => { + it("should render the Objectives", () => { - const objectives = RenderObjectives(); + render(<Objectives/>) + const objectives = screen.getByTestId("objectivesShow"); expect(objectives).toBeInTheDocument(); }); it("should show Objective List", () => { - const objectivesList = screen.getByTestId("objectives-list-show"); + const objectivesList = RenderObjectiveList(); expect(objectivesList).toBeInTheDocument(); }); }); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx index 05a80e0b..67cfa43e 100644 --- a/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx +++ b/__tests__/components/sections/courses/Overview/Prerequisite.test.tsx @@ -1,8 +1,8 @@ import "@testing-library/jest-dom"; import Prerequisite from "@/components/sections/courses/overview/Prerequisite"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; +import { mockCourse } from "../../../../../__mocks__/course"; +import ObjectiveList from "@/components/list/Objectives"; jest.mock("next/router", () => ({ useRouter: () => ({ @@ -11,19 +11,27 @@ jest.mock("next/router", () => ({ }), })); - -const RenderPrerequisite = () => { - render( - <ReduxProvider> - <Prerequisite /> - </ReduxProvider> - ); - return screen.getByTestId("prerequisite-show"); +interface ObjectiveListProps { + objectives: []; } + +const RenderObjectiveList = (props?: ObjectiveListProps) => { + render(<ObjectiveList {...props} objectives={mockCourse.prerequisite.items}/>); + return screen.getByTestId("objectivesListShow"); +}; + describe("Prerequisite", () => { it("should render the Prerequisite", () => { - const prerequisite = RenderPrerequisite(); + render( <Prerequisite />) + const prerequisite = screen.getByTestId("prerequisiteId"); expect(prerequisite).toBeInTheDocument(); }); + + it("should render the ObjectiveList", () => { + const objectiveList = RenderObjectiveList(); + expect(objectiveList).toBeInTheDocument(); + }); + + }); \ No newline at end of file diff --git a/__tests__/components/sections/courses/Overview/index.test.tsx b/__tests__/components/sections/courses/Overview/index.test.tsx index 25e92014..0c662127 100644 --- a/__tests__/components/sections/courses/Overview/index.test.tsx +++ b/__tests__/components/sections/courses/Overview/index.test.tsx @@ -38,9 +38,6 @@ describe("All Components", () => { it("should render Header with title and description", () => { const headerContent = RenderHeader(); expect(headerContent).toBeInTheDocument(); - expect(headerContent).toBeInTheDocument(); - - }); it("should render RewardsSection in the index component", () => { diff --git a/src/components/sections/courses/overview/Objectives.tsx b/src/components/sections/courses/overview/Objectives.tsx index e1404600..ab310099 100644 --- a/src/components/sections/courses/overview/Objectives.tsx +++ b/src/components/sections/courses/overview/Objectives.tsx @@ -17,8 +17,8 @@ export default function Objectives(): ReactElement { const course = useSelector((state) => state.courses.current); return course ? ( - <Section title={t("communities.overview.objective.title")} subtitle={t("communities.overview.objective.subtitle")}> - <ObjectiveList objectives={course.objectives} /> + <Section data-testid="objectivesShow" title={t("communities.overview.objective.title")} subtitle={t("communities.overview.objective.subtitle")}> + <ObjectiveList data-testid="objectiveListShow" objectives={course.objectives} /> </Section> ) : ( <></> diff --git a/src/components/sections/courses/overview/Prerequisite.tsx b/src/components/sections/courses/overview/Prerequisite.tsx index 198c0ca5..84d418fc 100644 --- a/src/components/sections/courses/overview/Prerequisite.tsx +++ b/src/components/sections/courses/overview/Prerequisite.tsx @@ -18,9 +18,9 @@ export default function Prerequisite(): ReactElement { if (course && !course.prerequisite) return <></>; return ( - <Section title={t("communities.overview.info.prerequisite.title")} subtitle={t("communities.overview.info.prerequisite.subtitle")}> + <Section data-testid="prerequisiteId" title={t("communities.overview.info.prerequisite.title")} subtitle={t("communities.overview.info.prerequisite.subtitle")}> <div className="mb-5"> - <ObjectiveList objectives={course?.prerequisite.items} /> + <ObjectiveList data-testid="objectivesListShow" objectives={course?.prerequisite.items} /> </div> {course?.prerequisite.hint && ( <Hint> From a6fc86f6683a0857bbeb89e3155935acd8d29107 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 15:43:50 +0200 Subject: [PATCH 08/11] fix: trailer component test --- .../courses/Overview/Trailer.test.tsx | 67 +++++++++++++------ .../sections/courses/overview/Trailer.tsx | 10 +-- 2 files changed, 53 insertions(+), 24 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx index 4343cd4a..8bb0516f 100644 --- a/__tests__/components/sections/courses/Overview/Trailer.test.tsx +++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx @@ -2,29 +2,58 @@ import "@testing-library/jest-dom"; import Trailer from "@/components/sections/courses/overview/Trailer"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; - -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); - - -const RenderTrailer = () => { - render( - <ReduxProvider> - <Trailer /> - </ReduxProvider> - ); - return screen.getByTestId("trailer-show"); +import { mockCourse } from "../../../../../__mocks__/course"; +import ObjectiveList from "@/components/sections/courses/overview/Trailer"; +import Video from "@/components/sections/courses/overview/Trailer"; +import Duration from "@/components/sections/courses/overview/Trailer"; + + + +interface ObjectiveListProps { + objectives: []; } + +const RenderObjectiveList = (props?: ObjectiveListProps) => { + render(<ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/>); + return screen.getByTestId("objectivesListShow"); +}; + + describe("Trailer", () => { it("should render the Trailer", () => { - const trailer = RenderTrailer(); + render(<Trailer />) + const trailer = screen.getByTestId("trailerId"); expect(trailer).toBeInTheDocument(); }); + + it("should render the Video", () => { + render(<Video />) + const trailerVideo = screen.getByTestId("trailerVideoId"); + expect(trailerVideo).toBeInTheDocument(); + }); + + it("should render the Duration", () => { + render(<Duration />) + const trailerDuration = screen.getByTestId("trailerDurationId"); + expect(trailerDuration).toBeInTheDocument(); + }); + + it("should render the Video Summary", () => { + const trailerVideoSummary = screen.getByTestId("trailerVideoSummary"); + expect(trailerVideoSummary).toBeInTheDocument(); + expect(trailerVideoSummary).toBe(mockCourse.trailer.description); + }); + + it("should render the Objective List", () => { + const objectiveList = RenderObjectiveList(); + expect(objectiveList).toBeInTheDocument(); + }); + + it("should render course trailer description", () => { + const trailerText = screen.getByTestId("trailerTextId"); + expect(trailerText).toBeInTheDocument(); + expect(trailerText).toBe(mockCourse.trailer.description); + }); + }); \ No newline at end of file diff --git a/src/components/sections/courses/overview/Trailer.tsx b/src/components/sections/courses/overview/Trailer.tsx index 39bd1484..35602902 100644 --- a/src/components/sections/courses/overview/Trailer.tsx +++ b/src/components/sections/courses/overview/Trailer.tsx @@ -20,13 +20,13 @@ export default function Trailer(): ReactElement { return ( <> {course && course.trailer && course.trailer.video ? ( - <Section title={t("communities.overview.trailer")}> - <Duration text={t("communities.overview.trailer.video")} value={course.trailer.duration} /> - <div className="block text-lg mt-3 mb-4.5">{course.trailer.summary}</div> - <Video className="-mx-0 md:w-full md:mx-auto" url={course.trailer.video} /> + <Section data-testid="trailerId" title={t("communities.overview.trailer")}> + <Duration data-testid="trailerDurationId" text={t("communities.overview.trailer.video")} value={course.trailer.duration} /> + <div data-testid="trailerVideoSummary" className="block text-lg mt-3 mb-4.5">{course.trailer.summary}</div> + <Video data-testid="trailerVideoId" className="-mx-0 md:w-full md:mx-auto" url={course.trailer.video} /> {course.trailer.description && ( - <div + <div data-testid="trailerTextId" dangerouslySetInnerHTML={{ __html: course.trailer.description, }} From 92146a50dfceed31c15f04888d7ea38b5a8b05f5 Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Tue, 11 Jun 2024 15:55:00 +0200 Subject: [PATCH 09/11] fix: reward component test --- .../courses/Overview/Rewards.test.tsx | 44 ++++++++++--------- .../sections/courses/overview/Rewards.tsx | 4 +- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx index e97a690c..5be3d8b5 100644 --- a/__tests__/components/sections/courses/Overview/Rewards.test.tsx +++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx @@ -2,29 +2,33 @@ import "@testing-library/jest-dom"; import Rewards from "@/components/sections/courses/overview/Rewards"; import { render, screen } from "@testing-library/react"; -// import { course } from "../../__mocks__/course.ts"; -import ReduxProvider from "../../../../../__mocks__/provider/ReduxProvider"; - -jest.mock("next/router", () => ({ - useRouter: () => ({ - push: jest.fn(), - isFallback: false, - }), -})); - - -const RenderRewards = () => { - render( - <ReduxProvider> - <Rewards /> - </ReduxProvider> - ); - return screen.getByTestId("rewards-show"); +import Reward from "@/components/sections/courses/overview/Rewards"; + + + + +interface RewardProps { + objectives: []; } + +const RewardComponnent = (props?: RewardProps) => { + render(<Reward {...props} key={2} reward={""} size="" category=""/>); + return screen.getByTestId("rewardId"); +}; + + + describe("Rewards", () => { - it("should render the Rewards", () => { - const rewards = RenderRewards(); + it("should render the Rewards component", () => { + render( <Rewards />) + const rewards = screen.getByTestId("rewardsId"); expect(rewards).toBeInTheDocument(); }); + + it("should render the Reward component", () => { + const reward = RewardComponnent(); + expect(reward).toBeInTheDocument(); + }); + }); \ No newline at end of file diff --git a/src/components/sections/courses/overview/Rewards.tsx b/src/components/sections/courses/overview/Rewards.tsx index 1254ce80..18ddfe6f 100644 --- a/src/components/sections/courses/overview/Rewards.tsx +++ b/src/components/sections/courses/overview/Rewards.tsx @@ -19,10 +19,10 @@ export default function Rewards(): ReactElement { return ( <> {course && course.challenge ? ( - <Section title={t("communities.overview.reward.title")} subtitle={t("communities.overview.reward.subtitle")}> + <Section data-testid="rewardsId" title={t("communities.overview.reward.title")} subtitle={t("communities.overview.reward.subtitle")}> <div className="grid grid-cols-2 pt-4 lg:grid-cols-3"> {course.challenge.rewards.map((reward: RewardType, i: number) => { - return <Reward key={`reward-${i}`} reward={reward} size="medium" category={reward.type.toLowerCase()} />; + return <Reward data-testid="rewardId" key={`reward-${i}`} reward={reward} size="medium" category={reward.type.toLowerCase()} />; })} </div> </Section> From 6cf72640e7e664cf48041bcfdcda1efbf13385fe Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Mon, 17 Jun 2024 12:46:01 +0200 Subject: [PATCH 10/11] fix: reward component test --- .../sections/courses/Overview/Rewards.test.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/Rewards.test.tsx b/__tests__/components/sections/courses/Overview/Rewards.test.tsx index 5be3d8b5..afdf88c7 100644 --- a/__tests__/components/sections/courses/Overview/Rewards.test.tsx +++ b/__tests__/components/sections/courses/Overview/Rewards.test.tsx @@ -3,17 +3,23 @@ import "@testing-library/jest-dom"; import Rewards from "@/components/sections/courses/overview/Rewards"; import { render, screen } from "@testing-library/react"; import Reward from "@/components/sections/courses/overview/Rewards"; +import { mockCourse } from "../../../../../__mocks__/course"; +import { RewardType } from "@/components/cards/Bounty"; +interface RewardProps { + reward: RewardType, + i: number; +} -interface RewardProps { - objectives: []; +const rewardList = (props?: RewardProps) => { + mockCourse.challenge?.rewards.forEach(reward => <Reward {...props} key={2} reward={reward} size="medium" category="category"/>) } -const RewardComponnent = (props?: RewardProps) => { - render(<Reward {...props} key={2} reward={""} size="" category=""/>); +const RewardComponnent = () => { + render({rewardList}); return screen.getByTestId("rewardId"); }; From 3ccb28e55ba103c227e8b7197467849d0da25ebe Mon Sep 17 00:00:00 2001 From: gabrielaacha <gabriela.gabriela.acha.acha@gmail.com> Date: Mon, 17 Jun 2024 12:57:19 +0200 Subject: [PATCH 11/11] fix: trailer component test --- .../components/sections/courses/Overview/Trailer.test.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/__tests__/components/sections/courses/Overview/Trailer.test.tsx b/__tests__/components/sections/courses/Overview/Trailer.test.tsx index 8bb0516f..4cc8f940 100644 --- a/__tests__/components/sections/courses/Overview/Trailer.test.tsx +++ b/__tests__/components/sections/courses/Overview/Trailer.test.tsx @@ -13,9 +13,13 @@ interface ObjectiveListProps { objectives: []; } +const objectiveList = (props?: ObjectiveListProps) => { + return <ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/> +} + -const RenderObjectiveList = (props?: ObjectiveListProps) => { - render(<ObjectiveList {...props} objectives={mockCourse.trailer?.info?.items}/>); +const RenderObjectiveList = () => { + render({objectiveList}); return screen.getByTestId("objectivesListShow"); };