diff --git a/test/Badge.test.tsx b/test/Badge.test.tsx index 4f3d787..4505b10 100644 --- a/test/Badge.test.tsx +++ b/test/Badge.test.tsx @@ -2,13 +2,18 @@ import { describe, expect, it } from "vitest"; import { screen, render } from "@testing-library/react"; import Badge from "../components/Badge"; -describe("Badge Component Test", () => { - it("Should be rendered on the screen", () => { +// Tests to know if The Badge component exist in user profile +describe("Traits Badge Component Test", () => { + // Felipe de Jesús González Acosta A01275536 - Test #9/10 + // Test know if the component renders itself correctly + it("Should be rendered on the profile screen", () => { render(); expect(screen.getByTestId("badge-component")).toBeInTheDocument(); }); - it("Should render the text prop", () => { - render(); - expect(screen.getByText("Hello World")).toBeInTheDocument(); + // Felipe de Jesús González Acosta A01275536 - Test #10/10 + // Test know if the component renders the text correctly + it("Should render the text prop in badge", () => { + render(); + expect(screen.getByText("Trait 1")).toBeInTheDocument(); }); }); diff --git a/test/RulerSurvey.test.tsx b/test/RulerSurvey.test.tsx index 66b46bb..678bace 100644 --- a/test/RulerSurvey.test.tsx +++ b/test/RulerSurvey.test.tsx @@ -1,109 +1,55 @@ -import RulerStepOne from "@/components/modals/ruler/RulerStepOne"; -import RulerStepTwo from "@/components/modals/ruler/RulerStepTwo"; -import { Emotion, RulerSurveyAnswer } from "@/types/types"; -import { fireEvent, render, screen } from "@testing-library/react"; +import RulerSurvey from "@/components/modals/ruler/RulerSurvey"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { render, screen } from "@testing-library/react"; import { Mock, describe, expect, it, vi } from "vitest"; +// Mock user test +vi.mock("@/services/user", () => { + return { + getUserId: vi.fn().mockResolvedValue("prueba"), + }; +}); + +// Mock ruler survey +vi.mock("@/services/rulerSurvey", () => { + return { + submitRulerSurveyAnswer: vi.fn(), + }; +}); -const randomEmotion = { - row: Math.floor(Math.random() * 12), - col: Math.floor(Math.random() * 12), -}; +// Mock next navigation +vi.mock("next/navigation", () => { + return { + useRouter: vi.fn().mockReturnValue({ + refresh: vi.fn(), + }), + }; +}); + +const mockSet = vi.fn(); + +vi.mock("", () => { + return { + setState: mockSet, + }; +}); -const emotionBgColor = (emotion: Emotion) => { - if (emotion.pleasantness < 0 && emotion.energy < 0) return "bg-blue-400"; - else if (emotion.pleasantness < 0 && emotion.energy > 0) return "bg-red-400"; - else if (emotion.pleasantness > 0 && emotion.energy < 0) - return "bg-green-400"; - else return "bg-yellow-400"; -}; +const queryClient = new QueryClient(); +let mockClose: Mock; -let setMockEmotion: Mock, nextStepMock: Mock, rulerEmotion: RulerSurveyAnswer; -let mockClose: Mock, mockPreviousStep: Mock, mockSetComment: Mock; +// Test for Ruler Survey describe("RulerSurvey Component Test", () => { beforeEach(() => { - setMockEmotion = vi.fn(); - nextStepMock = vi.fn(); - rulerEmotion = { - userId: "prueba", - emotion: { - name: "", - pleasantness: 2, - description: "", - energy: 2, - id: 1, - }, - comment: "", - }; mockClose = vi.fn(); - mockPreviousStep = vi.fn(); - mockSetComment = vi.fn(); - }); - it("Should render step one", () => { - render( - , - ); - - expect(screen.getByTestId("ruler-step-one")).toBeInTheDocument(); - }); - it("Should get an emotion", () => { - render( - , - ); - - const emotion = screen.getByTestId( - `emotion-${randomEmotion.row}-${randomEmotion.col}`, - ); - fireEvent.mouseEnter(emotion); - expect(emotion).toHaveClass("scale-150"); - fireEvent.mouseLeave(emotion); - expect(emotion).not.toHaveClass("scale-150"); - }); - it("Should have the right color", () => { - render( - , - ); - const emotion = screen.getByTitle( - `emotion-${rulerEmotion.emotion?.energy}-${rulerEmotion.emotion?.pleasantness}`, - ); - expect(emotion).toHaveClass( - emotionBgColor(rulerEmotion.emotion as Emotion), - ); - }); - it("Should set an emotion", () => { - render( - , - ); - const emotion = screen.getByTestId( - `emotion-${randomEmotion.row}-${randomEmotion.col}`, - ); - fireEvent.click(emotion); - expect(setMockEmotion).toHaveBeenCalledTimes(1); }); - it("Should render step two", () => { + // Felipe de Jesús González Acosta A01275536 - Test #3/10 + // Verify that the ruler component renders itself + it("Should render the survey", () => { render( - , + + + , ); - expect(screen.getByTestId("ruler-step-two")).toBeInTheDocument(); + const rulerSurvey = screen.getByTestId("ruler-survey"); + expect(rulerSurvey).toBeInTheDocument(); }); }); diff --git a/test/SprintSurveyStepOne.test.tsx b/test/SprintSurveyStepOne.test.tsx new file mode 100644 index 0000000..1149d0c --- /dev/null +++ b/test/SprintSurveyStepOne.test.tsx @@ -0,0 +1,84 @@ +import SprintStepOne from "@/components/modals/SprintStepOne"; +import { Questions, SprintSurveyAnswer } from "@/types/types"; +import { fireEvent, render, screen, within } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; + +// Mock existing questions +const mockQuestions: Questions[] = [ + { + id: 1, + description: "Test Question 1", + type: "SPRINT_QUESTION", + }, + { + id: 2, + description: "Test Question 2", + type: "SPRINT_QUESTION", + }, +]; + +const setSprintSurveyAnswer = vi.fn(); +// Mochk a sprint survey answer +const mockSprintAnswer: SprintSurveyAnswer = { + userId: "1", + sprintSurveyId: 2, + projectAnswers: [], + coworkersAnswers: [], + commentId: 0, + coworkersComments: [], +}; + +// Start the tests for the first part of the sprint survey +describe("SprintSurveyStepOne", () => { + // Felipe de Jesús González Acosta A01275536 - Test #4/10 + // Test know if the component renders itself + it("should render", () => { + render( + , + ); + + const sprinStepOne = screen.getByTestId("sprint-step-one"); + expect(sprinStepOne).toBeInTheDocument(); + }); + + // Felipe de Jesús González Acosta A01275536 - Test #5/10 + // Test know if the component renders the sliders of the questions + it("should render sliders", () => { + render( + , + ); + + const sliders = screen.getAllByTestId(/slider-/); + expect(sliders).toHaveLength(mockQuestions.length); + sliders.forEach((slider, index) => { + expect(slider).toHaveTextContent(mockQuestions[index].description); + }); + }); + + // Felipe de Jesús González Acosta A01275536 - Test #6/10 + // Test know if the sliders execute their onChange function to declare the answer value + it("should trigger onChange", () => { + render( + , + ); + mockQuestions.forEach((question) => { + const slider = screen.getByTestId(`slider-${question.id}`); + fireEvent.change(within(slider).getByTestId("input-slider"), { + target: { value: 2 }, + }); + }); + expect(setSprintSurveyAnswer).toHaveBeenCalledTimes(mockQuestions.length); + }); +}); diff --git a/test/SprintSurveyStepTwo.test.tsx b/test/SprintSurveyStepTwo.test.tsx new file mode 100644 index 0000000..e66cb42 --- /dev/null +++ b/test/SprintSurveyStepTwo.test.tsx @@ -0,0 +1,100 @@ +import SelectableDragUsers from "@/components/modals/SelectableDragUsers"; +import SprintStepTwo from "@/components/modals/SprintStepTwo"; +import { Questions, SurveyCoworker, SurveyStepTwoAnswer } from "@/types/types"; +import { render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; + +// Mock some questions +const mockQuestions: Questions[] = [ + { + id: 1, + description: "Test Question 1", + type: "SPRINT_QUESTION", + }, + { + id: 2, + description: "Test Question 2", + type: "SPRINT_QUESTION", + }, +]; + +// Mock the front end library needed +vi.mock("@dnd-kit/core", () => { + return { + useDraggable: vi.fn(() => ({ + attributes: {}, + transform: { x: 0, y: 0 }, + setNodeRef: vi.fn(), + listeners: {}, + isDragging: false, + })), + useDroppable: vi.fn(() => ({ + isOver: false, + })), + DndContext: vi.fn(({ children }) => children), + pointerWithin: vi.fn(() => true), + }; +}); + +const mockSetSprintSurveyStepTwoAnswer = vi.fn(); +const mockSprintStepTwo: SurveyStepTwoAnswer = mockQuestions.reduce( + (acc, question) => { + acc[question.id] = Array(10) + .fill([]) + .map(() => []); + return acc; + }, + {} as SurveyStepTwoAnswer, +); + +// Mock users +const users = [ + { + userId: "1", + name: "Test User", + photoUrl: "https://test.com", + }, + { + userId: "2", + name: "Test User 2", + photoUrl: "https://test.com", + }, + { + userId: "3", + name: "Test User 3", + photoUrl: "https://test.com", + }, +]; + +// Mock react framework +vi.mock("react", () => { + return { + useState: vi.fn((initial) => [initial, mockSetSprintSurveyStepTwoAnswer]), + useEffect: vi.fn(), + }; +}); + +// Tests for the second part of the Sprint Survey +describe("Should render SprintSurveyStepTwo", () => { + // Felipe de Jesús González Acosta A01275536 - Test #7/10 + // Test that the component of the survey renders itself + it("Should render SprintSurveyStepTwo", () => { + render( + , + ); + const sprintStepTwo = screen.getByTestId("sprint-step-two"); + expect(sprintStepTwo).toBeInTheDocument(); + }); + // Felipe de Jesús González Acosta A01275536 - Test #8/10 + // Test that the users exist of the survey renders itself + it("Should render SelectableDragUsers, and all users", () => { + render(); + const selectableDragUsers = screen.getByTestId("selectable-drag-users"); + expect(selectableDragUsers).toBeInTheDocument(); + }); +});