From 7f53145dba287fe6bfdb926f6d1e6e4969bf4159 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 000000000..d0d41f8f0 --- /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 000000000..c8d0b6107 --- /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 {children}; +}; + +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 000000000..46acbb599 --- /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( + + + + ); + 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 000000000..106b75d4b --- /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( + + + + ); + 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 000000000..dcc146892 --- /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( + + + + ); + 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 000000000..10042a694 --- /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( + + + + ); + 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 000000000..7a6d26437 --- /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( + + + + ); + 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 000000000..c37799551 --- /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( + + + + ); + 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 000000000..9c5d1de4c --- /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( + + + + ); + 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 000000000..5e2824e31 --- /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( + + + + ); + 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 000000000..05a80e0bd --- /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( + + + + ); + 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 000000000..e97a690c5 --- /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( + + + + ); + 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 000000000..4343cd4a9 --- /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( + + + + ); + 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 000000000..b83178ab5 --- /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( + + + + ); + 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 000000000..46c10f601 --- /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( ); + + 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 000000000..1e5c04586 --- /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( ); + const wrapper = screen.getByTestId("wrapperId"); + expect(wrapper).toBeInTheDocument(); + expect(screen.getByPlaceholderText("wrapperSectionId")).toBeInTheDocument(); + }); + + + it("Should render Navigation component", () => { + render(); + const navigation = screen.getByTestId("NavId"); + expect(navigation).toBeInTheDocument(); + }); + + + it("Should render Navigation component", () => { + render(); + const inputElement = screen.getByPlaceholderText("showTopBorder"); + expect(inputElement).toBeInTheDocument(); + const mobileNav = screen.getByText("MobileNavId"); + expect(mobileNav).toBeInTheDocument(); + }); + + + it("Should render Navigation component", () => { + render(); + 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 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 000000000..782d9535f --- /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 46acbb599..827bb8e8e 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 = () => { ); - 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( ); + const communityNavigationChevIcon = screen.getByTestId("communityNavId"); + expect(communityNavigationChevIcon).toBeInTheDocument(); +}); + +it("should render the Link", () => { + render( 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 106b75d4b..2876a487e 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( ); + const mobileNavChevIcon = screen.getByTestId("mobileNavChevIconId"); + expect(mobileNavChevIcon).toBeInTheDocument(); +}); + +it("should render the Component", () => { + render( ); + 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 dcc146892..cf8ab8d25 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 10042a694..27c89e12c 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( - - - - ); - return screen.getByTestId("challenge-show"); -} +import { mockCourse } from "../../../../../__mocks__/course"; + + describe("Challenge", () => { it("should render the Challenge", () => { - const challenge = RenderChallenge(); + render(); + 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 9c5d1de4c..ee06b637f 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( - - - - ); - return screen.getByTestId("-show"); +interface LearningModuleProps { + key: number; + learningModule: LearningModule[]; } +const RenderLearningModule = (props?: LearningModuleProps) => { + render(); + return screen.getByTestId("learningModulesCardId"); +}; + describe("LearningModules", () => { it("should render the Learning Modules", () => { - const learningModules = RenderLearningModules(); + render(); + 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 46c10f601..5b6f2e622 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( + + {props.children} + + ); + + 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( ); - const pageNavigation = screen.getByTestId("pageNavId"); expect(pageNavigation).toBeInTheDocument(); }); + + + it("should render page nav link with previous link", () => { + renderWithRedux(); + const pageNavLink = screen.getByTestId("pageNavLinkId"); + expect(pageNavLink).toBeInTheDocument(); + expect(pageNavLink).toHaveAttribute("href", "/"); + }); + + + it("should render page nav link with next link", () => { + renderWithRedux(); + 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 1e5c04586..8669d618e 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 357c1218e..3870d408d 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 ? ( -
+
-
+
{community.name}
{paths?.map((path, index) => (
- +
{path}
 @@ -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 d95c049d8..f26eff28a 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 (
-
+
{prevUrl && ( - + {t("nav.page.prev")} )} {nextUrl && ( - + +
-
+
-
+
-
+
{children}
diff --git a/src/components/sections/courses/overview/Challenge.tsx b/src/components/sections/courses/overview/Challenge.tsx index d9a3ee44f..8a513b775 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 ? ( -
- {course.challenge.description} +
+ {course.challenge.description}
) : ( <> diff --git a/src/components/sections/courses/overview/LearningModules.tsx b/src/components/sections/courses/overview/LearningModules.tsx index 19d514463..bdbbf532c 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 ? ( -
+

{t("communities.overview.learning-modules")}

@@ -26,7 +26,7 @@ export default function LearningModules(): ReactElement {
{course.learningModules && course.learningModules.map((learningModule, index) => { - return ; + return ; })}
From 25124255ddae4d0bf04737889bb40d3d56ef1a01 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 7a6d26437..64d2d9054 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( - - - - ); - return screen.getByTestId("description-show"); -} +it("should render the Description", () => { + render( ); + 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 751dcb1c0..5cd63519a 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 ? ( -
+
{htmlTagsCleanup(course.description || course.summary || "")}
) : ( From 99c1b43fdffa2ca97ae86b62b77e15258ff50f99 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 c37799551..5d65e171f 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( - - - - ); - return screen.getByTestId("disclaimer-show"); -} - -describe("Disclaimer", () => { it("should render the Disclaimer", () => { - const disclaimerComponent = RenderDisclaimer(); + render( ); + 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 e712dfbd3..8b7720482 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 ( -
+
{t("communities.overview.info.disclaimer.title")}: - +
); From 7f2cd8abca22b5737b107e7886b97d699a08b4a8 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 b83178ab5..6427a8e2b 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( - - - - ); - return screen.getByTestId("all-components-show"); -} + + +it("should render the Disclaimer", () => { + render( ); + 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( ); + const rewardsSection = screen.getByTestId("rewardsSectionId"); + expect(rewardsSection).toBeInTheDocument(); + }); + + + it("should render ObjectivesSection in the index component", () => { + render( ); + const objectivesSection = screen.getByTestId("objectivesSectionId"); + expect(objectivesSection).toBeInTheDocument(); + }); + + it("should render PrerequisiteSection in the index component", () => { + render( ); + const prerequisiteSection = screen.getByTestId("prerequisiteSectionId"); + expect(prerequisiteSection).toBeInTheDocument(); + }); + + it("should render DisclaimerSection in the index component", () => { + render( ); + const disclaimerSection = screen.getByTestId("disclaimerSectionId"); + expect(disclaimerSection).toBeInTheDocument(); + }); + + it("should render TrailerSection in the index component", () => { + render( ); + const trailerSection = screen.getByTestId("trailerSectionId"); + expect(trailerSection).toBeInTheDocument(); + }); + + it("should render LearningModulesSection in the index component", () => { + render( ); + const learningModulesSection = screen.getByTestId(""); + expect(learningModulesSection ).toBeInTheDocument(); + }); + + it("should render ChallengeSection in the index component", () => { + render( ); + const challengeSection = screen.getByTestId("challengeSectionId"); + expect(challengeSection).toBeInTheDocument(); + }); + + it("should render PageNavigation in the index component", () => { + render( ); + 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 5a5a71cc5..58b0f95ba 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 (
- - - - - - - - + + + + + + + +
); } From 8d2a60f73db66902ea4ccac70cc08c225b3e7aa4 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 cf8ab8d25..3223f4091 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( - - - - ); - return screen.getByTestId("navigation-show"); -} - describe("LearningModules", () => { it("should render the Navidation component", () => { - const navigation = RenderNavigation(); + render( ); + 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 6427a8e2b..25e920144 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( ); - const disclaimerComponent = screen.getByTestId("disclaimerId"); - expect(disclaimerComponent).toBeInTheDocument(); -}); +interface HeaderProps { + title: "string"; + description: "string"; +} + +const RenderHeader = (props?: HeaderProps) => { + render(
); + return screen.getByTestId("headerId"); +}; + describe("All Components", () => { + it("should render the Disclaimer", () => { + render( ); + 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( ); const rewardsSection = screen.getByTestId("rewardsSectionId"); diff --git a/src/components/sections/courses/overview/index.tsx b/src/components/sections/courses/overview/index.tsx index 58b0f95ba..d2e9f3f1a 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 (
-
+
From e5eaabf2d91c83ae196cc63960776b6d35ec4b67 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 ee06b637f..e73437190 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 5e2824e31..f68b33cf5 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( - - - - ); - return screen.getByTestId("objectives-show"); -} +const RenderObjectiveList = (props?: ObjectiveListProps) => { + render(); + return screen.getByTestId("objectivesListShow"); +}; + describe("Objectives", () => { + it("should render the Objectives", () => { - const objectives = RenderObjectives(); + render() + 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 05a80e0bd..67cfa43ec 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( - - - - ); - return screen.getByTestId("prerequisite-show"); +interface ObjectiveListProps { + objectives: []; } + +const RenderObjectiveList = (props?: ObjectiveListProps) => { + render(); + return screen.getByTestId("objectivesListShow"); +}; + describe("Prerequisite", () => { it("should render the Prerequisite", () => { - const prerequisite = RenderPrerequisite(); + render( ) + 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 25e920144..0c662127c 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 e1404600b..ab310099d 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 ? ( -
- +
+
) : ( <> diff --git a/src/components/sections/courses/overview/Prerequisite.tsx b/src/components/sections/courses/overview/Prerequisite.tsx index 198c0ca51..84d418fce 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 ( -
+
- +
{course?.prerequisite.hint && ( From a6fc86f6683a0857bbeb89e3155935acd8d29107 Mon Sep 17 00:00:00 2001 From: gabrielaacha 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 4343cd4a9..8bb0516f3 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( - - - - ); - 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(); + return screen.getByTestId("objectivesListShow"); +}; + + describe("Trailer", () => { it("should render the Trailer", () => { - const trailer = RenderTrailer(); + render() + const trailer = screen.getByTestId("trailerId"); expect(trailer).toBeInTheDocument(); }); + + it("should render the Video", () => { + render(