implements Pedro's tests

cypress/e2e/searchbar.cy.ts

@@ -0,0 +1,26 @@
+describe("Searchbar", () => {
+  beforeEach(() => {
+    cy.visit("/login");
+    cy.get("label").contains("Email").click().type("[email protected]");
+    cy.get("label").contains("Password").click().type("cypress");
+    cy.get("button").contains("Log in").click();
+    cy.wait(10000);
+  });
+  it("Expands searchbar", () => {
+    cy.get('[data-testid="search-box"]').should("have.class", "w-10");
+    cy.get('[data-testid="search-icon"]').click();
+    cy.get('[data-testid="search-box"]').should("have.class", "w-64");
+  });
+
+  // Pedro Alonso Moreno A01174050 - Test #1/1
+  it("Searches for a user", () => {
+    cy.get('[data-testid="search-icon"]').click();
+    const comboboxInput = cy.get('[data-testid="combobox-input"]');
+    comboboxInput.should("have.focus");
+    comboboxInput.type("cypress");
+    cy.wait(8000);
+    cy.get('[data-testid="option-cypress prueba"]').should("exist");
+    cy.get('[data-testid="option-cypress prueba"]').click();
+    cy.url().should("include", "/profile");
+  });
+});

test/DragUser.test.tsx

@@ -0,0 +1,47 @@
+import DraggableUser from "@/components/modals/DraggableUser";
+import { screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { customDndProvider } from "./mock-utils/mockUtils";
+
+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",
+  },
+];
+
+vi.mock("react", () => {
+  return {
+    useState: vi.fn(() => [false, vi.fn()]),
+    useEffect: vi.fn(),
+  };
+});
+
+describe("Should render SprintSurveyStepTwo", () => {
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #9/10
+  it("Should render dragUser", () => {
+    customDndProvider(<DraggableUser user={users[0]} times={2} />, vi.fn());
+    const draggableUser = screen.getByTestId("draggable-1");
+    expect(draggableUser).toBeInTheDocument();
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #10/10
+  it("Should not render dragUser", () => {
+    customDndProvider(<DraggableUser user={users[0]} />, vi.fn());
+    const draggableUser = screen.getByTestId(`draggable-${users[0].userId}`);
+    expect(
+      within(draggableUser).queryByTestId(`user-${users[0].userId}-times`),
+    ).not.toBeInTheDocument();
+  });
+});

test/RulerStepOne.test.tsx

@@ -0,0 +1,119 @@
+import RulerStepOne from "@/components/modals/ruler/RulerStepOne";
+import { Emotion, RulerSurveyAnswer } from "@/types/types";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Mock, describe, expect, it, vi } from "vitest";
+
+const randomEmotion = {
+  row: Math.floor(Math.random() * 12),
+  col: Math.floor(Math.random() * 12),
+};
+
+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";
+};
+
+let setMockEmotion: Mock, nextStepMock: Mock, rulerEmotion: RulerSurveyAnswer;
+
+describe("RulerSurvey Component Test", () => {
+  beforeEach(() => {
+    setMockEmotion = vi.fn();
+    nextStepMock = vi.fn();
+    rulerEmotion = {
+      userId: "prueba",
+      emotion: {
+        name: "",
+        pleasantness: 2,
+        description: "",
+        energy: 2,
+        id: 1,
+      },
+      comment: "",
+    };
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #1/10
+  it("Should render step one", () => {
+    render(
+      <RulerStepOne
+        setEmotion={setMockEmotion}
+        rulerSurveyAnswer={rulerEmotion}
+        nextStep={nextStepMock}
+      />,
+    );
+
+    expect(screen.getByTestId("ruler-step-one")).toBeInTheDocument();
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #2/10
+  it("Should get an emotion", () => {
+    render(
+      <RulerStepOne
+        setEmotion={setMockEmotion}
+        rulerSurveyAnswer={rulerEmotion}
+        nextStep={nextStepMock}
+      />,
+    );
+
+    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");
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #3/10
+  it("Should have the right color", () => {
+    render(
+      <RulerStepOne
+        setEmotion={setMockEmotion}
+        rulerSurveyAnswer={rulerEmotion}
+        nextStep={nextStepMock}
+      />,
+    );
+    const emotion = screen.getByTitle(
+      `emotion-${rulerEmotion.emotion?.energy}-${rulerEmotion.emotion?.pleasantness}`,
+    );
+    expect(emotion).toHaveClass(
+      emotionBgColor(rulerEmotion.emotion as Emotion),
+    );
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #4/10
+  it("Should set an emotion", () => {
+    render(
+      <RulerStepOne
+        setEmotion={setMockEmotion}
+        rulerSurveyAnswer={rulerEmotion}
+        nextStep={nextStepMock}
+      />,
+    );
+    const emotion = screen.getByTestId(
+      `emotion-${randomEmotion.row}-${randomEmotion.col}`,
+    );
+    fireEvent.click(emotion);
+    expect(setMockEmotion).toHaveBeenCalledTimes(1);
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #5/10
+  it("Should go to the next step", async () => {
+    render(
+      <RulerStepOne
+        setEmotion={setMockEmotion}
+        rulerSurveyAnswer={rulerEmotion}
+        nextStep={nextStepMock}
+      />,
+    );
+    const emotion = screen.getByTestId(
+      `emotion-${randomEmotion.row}-${randomEmotion.col}`,
+    );
+    fireEvent.click(emotion);
+    await vi.waitUntil(() => nextStepMock.mock.calls.length > 0);
+    expect(setMockEmotion).toHaveBeenCalledTimes(1);
+  });
+});

test/RulerStepTwo.test.tsx

@@ -0,0 +1,70 @@
+import RulerStepTwo from "@/components/modals/ruler/RulerStepTwo";
+import { RulerSurveyAnswer } from "@/types/types";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Mock, describe, expect, it, vi } from "vitest";
+
+let rulerEmotion: RulerSurveyAnswer;
+let mockClose: Mock, mockPreviousStep: Mock, mockSetComment: Mock;
+describe("RulerSurvey Component Test", () => {
+  beforeEach(() => {
+    rulerEmotion = {
+      userId: "prueba",
+      emotion: {
+        name: "",
+        pleasantness: 2,
+        description: "",
+        energy: 2,
+        id: 1,
+      },
+      comment: "",
+    };
+    mockClose = vi.fn();
+    mockPreviousStep = vi.fn();
+    mockSetComment = vi.fn();
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #6/10
+  it("Should render step two", () => {
+    render(
+      <RulerStepTwo
+        rulerSurveyAnswer={rulerEmotion}
+        onClose={mockClose}
+        previousStep={mockPreviousStep}
+        setComment={mockSetComment}
+      />,
+    );
+    expect(screen.getByTestId("ruler-step-two")).toBeInTheDocument();
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #7/10
+  it("Should set a comment", () => {
+    render(
+      <RulerStepTwo
+        rulerSurveyAnswer={rulerEmotion}
+        onClose={mockClose}
+        previousStep={mockPreviousStep}
+        setComment={mockSetComment}
+      />,
+    );
+    const comment = screen.getByLabelText(
+      "Why did you feel this way? (Optional)",
+    );
+    fireEvent.change(comment, { target: { value: "test" } });
+    expect(mockSetComment).toHaveBeenCalledTimes(1);
+  });
+
+  // Pedro Alonso Moreno Salcedo A01741437 - Test #8/10
+  it("Should go back", () => {
+    render(
+      <RulerStepTwo
+        rulerSurveyAnswer={rulerEmotion}
+        onClose={mockClose}
+        previousStep={mockPreviousStep}
+        setComment={mockSetComment}
+      />,
+    );
+    const backButton = screen.getByText("Go back");
+    fireEvent.click(backButton);
+    expect(mockPreviousStep).toHaveBeenCalledTimes(1);
+  });
+});

test/mock-utils/mockUtils.tsx

@@ -0,0 +1,31 @@
+import { DndContext, pointerWithin } from "@dnd-kit/core";
+import { RenderOptions, render } from "@testing-library/react";
+import React, { ReactElement } from "react";
+
+const DndProvider = ({
+  children,
+  onDragEndMock,
+}: {
+  children: React.ReactNode;
+  onDragEndMock: () => void;
+}) => {
+  return (
+    <DndContext onDragEnd={onDragEndMock} collisionDetection={pointerWithin}>
+      {children}
+    </DndContext>
+  );
+};
+
+export const customDndProvider = (
+  ui: ReactElement,
+  onDragEndMock: () => void,
+  options?: Omit<RenderOptions, "wrapper">,
+) =>
+  render(ui, {
+    wrapper: (props) => (
+      <DndProvider {...props} onDragEndMock={onDragEndMock} />
+    ),
+    ...options,
+  });
+
+export * from "@testing-library/react";