epam-ai-conductor 0.3.0 → 0.3.2

package/dist/content/module-2/tests/CourseInfo.test.js

@@ -0,0 +1,125 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { CourseInfo } from "../../components/CourseInfo";
+import { formatCreationDate, getCourseDuration } from "../../helpers";
+import { MemoryRouter } from "react-router";
+
+const mockedCoursesList = [
+  {
+    id: "1",
+    title: "Course 1",
+    description: "Course 1 description",
+    creationDate: "2022-01-01",
+    duration: 60,
+    authors: [
+      "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+      "f762978b-61eb-4096-812b-ebde22838167",
+    ],
+  },
+  {
+    id: "2",
+    title: "Course 2",
+    description: "Course 2 description",
+    creationDate: "2022-02-01",
+    duration: 90,
+    authors: ["df32994e-b23d-497c-9e4d-84e4dc02882f"],
+  },
+];
+const authorsList = [
+  { id: "df32994e-b23d-497c-9e4d-84e4dc02882f", name: "name1" },
+  { id: "27cc3006-e93a-4748-8ca8-73d06aa93b6d", name: "name2" },
+  { id: "f762978b-61eb-4096-812b-ebde22838167", name: "name3" },
+];
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ courseId: "1" }),
+}));
+
+describe("CourseInfo", () => {
+  test("should render correct title (find correct course from coursesList based on courseId param use useParams hook)", () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const courseTitle = screen.getByRole("heading", { level: 1 });
+
+    expect(courseTitle.textContent).toBe("Course 1");
+  });
+
+  test("should render correct description", () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const courseDescription = screen.getByText("Course 1 description");
+
+    expect(courseDescription).toBeInTheDocument();
+  });
+
+  test("should render correct course duration (use getCourseDuration)", () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const courseDuration = screen.queryByText(getCourseDuration(60));
+
+    expect(courseDuration).toBeInTheDocument();
+  });
+
+  test("should render correct course creation date (use formatCreationDate)", () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const courseCreationDate = screen.getByText(
+      formatCreationDate(mockedCoursesList[0].creationDate)
+    );
+    expect(courseCreationDate).toBeInTheDocument();
+  });
+
+  test("should render correct course authors names (find a course in the coursesList and match data from course authors and authorsList prop)", () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const authorNames = screen
+      .getAllByRole("listitem")
+      .map((li) => li.textContent);
+
+    expect(authorNames).toEqual(["name2", "name3"]);
+  });
+
+  test('should render "BACK" button as a Link provided by react-router-dom', () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const backButton = screen.queryByText(/back/i);
+
+    expect(backButton.closest("a")).toBeInTheDocument();
+  });
+
+  test('should render "BACK" link to="/courses"', () => {
+    render(
+      <MemoryRouter>
+        <CourseInfo coursesList={mockedCoursesList} authorsList={authorsList} />
+      </MemoryRouter>
+    );
+
+    const backButton = screen.queryByText(/back/i);
+    expect(backButton.closest("a")).toHaveAttribute("href", "/courses");
+  });
+});

package/dist/content/module-2/tests/Courses.test.js

@@ -0,0 +1,106 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Courses } from "../../components/Courses/Courses";
+import { MemoryRouter } from "react-router";
+
+describe("Courses component", () => {
+  const mockedCoursesList = [
+    {
+      id: "1",
+      title: "Course 1",
+      description: "Course 1 description",
+      creationDate: "2022-01-01",
+      duration: 60,
+      authors: [
+        "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+        "f762978b-61eb-4096-812b-ebde22838167",
+      ],
+    },
+    {
+      id: "2",
+      title: "Course 2",
+      description: "Course 2 description",
+      creationDate: "2022-02-01",
+      duration: 90,
+      authors: ["df32994e-b23d-497c-9e4d-84e4dc02882f"],
+    },
+  ];
+  const authorsList = [
+    { id: "df32994e-b23d-497c-9e4d-84e4dc02882f", name: "name" },
+    { id: "27cc3006-e93a-4748-8ca8-73d06aa93b6d", name: "name" },
+    { id: "f762978b-61eb-4096-812b-ebde22838167", name: "name" },
+  ];
+  const onAddClick = jest.fn();
+
+  test('should render list of courses from coursesList prop with data-testid="courseCard"', () => {
+    render(
+      <MemoryRouter>
+        <Courses
+          coursesList={mockedCoursesList}
+          authorsList={authorsList}
+          onAddClick={onAddClick}
+          handleShowCourse={(id) => {}}
+        />
+      </MemoryRouter>
+    );
+
+    const courseElements = screen.getAllByTestId("courseCard");
+
+    expect(courseElements[0]).toBeInTheDocument();
+    expect(courseElements).toHaveLength(2);
+  });
+
+  test("should render 'ADD NEW COURSE' button", () => {
+    render(
+      <MemoryRouter>
+        <Courses
+          coursesList={mockedCoursesList}
+          authorsList={authorsList}
+          onAddClick={onAddClick}
+          handleShowCourse={(id) => {}}
+        />
+      </MemoryRouter>
+    );
+
+    const button = screen.getByText(/add new/i);
+
+    expect(button).toBeInTheDocument();
+  });
+
+  test("should render 'ADD NEW COURSE' button as a Link with provided by react-router-dom to='/courses/add'", () => {
+    render(
+      <MemoryRouter>
+        <Courses
+          coursesList={mockedCoursesList}
+          authorsList={authorsList}
+          onAddClick={onAddClick}
+          handleShowCourse={(id) => {}}
+        />
+      </MemoryRouter>
+    );
+
+    const link = screen.getByText(/add new/i).closest("a");
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "/courses/add");
+  });
+
+  test("should render EmptyCourseList component if no courses (with 'Your List Is Empty' text and button with data-testid='addCourse')", () => {
+    render(
+      <MemoryRouter>
+        <Courses
+          coursesList={[]}
+          authorsList={authorsList}
+          onAddClick={onAddClick}
+          handleShowCourse={(id) => {}}
+        />
+      </MemoryRouter>
+    );
+
+    const emptyText = screen.queryByText(/your list is empty/i);
+    const addButtonElement = screen.getByTestId("addCourse");
+
+    expect(emptyText).toBeInTheDocument();
+    expect(addButtonElement).toBeInTheDocument();
+  });
+});

package/dist/content/module-2/tests/CreateCourse.test.js

@@ -0,0 +1,117 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { CourseForm } from "../../components/CourseForm/CourseForm";
+import { MemoryRouter } from "react-router";
+
+describe("CourseForm", () => {
+  const mockAuthors = [
+    { id: "1", name: "Author 1" },
+    { id: "2", name: "Author 2" },
+  ];
+
+  const mockCourseForm = jest.fn();
+  const mockCreateAuthor = jest.fn();
+
+  beforeEach(() => {
+    mockCourseForm.mockClear();
+    mockCreateAuthor.mockClear();
+  });
+
+  it("should create a new course with the entered data in all field`s (createCourse prop should be called on createCourseButton click)", () => {
+    render(
+      <MemoryRouter>
+        <CourseForm
+          authorsList={mockAuthors}
+          createCourse={mockCourseForm}
+          createAuthor={mockCreateAuthor}
+        />
+      </MemoryRouter>
+    );
+
+    const titleInput = screen.getByTestId("titleInput");
+    const durationInput = screen.getByTestId("durationInput");
+    const descriptionTextArea = screen.getByTestId("descriptionTextArea");
+    const addAuthorButton = screen.getAllByTestId("addAuthor")[0];
+    const createCourseButton = screen.getByTestId("createCourseButton");
+
+    fireEvent.change(titleInput, { target: { value: "Course Title" } });
+    fireEvent.change(durationInput, { target: { value: "20" } });
+    fireEvent.click(addAuthorButton);
+    fireEvent.change(descriptionTextArea, {
+      target: { value: "Course Description" },
+    });
+
+    fireEvent.click(createCourseButton);
+
+    expect(mockCourseForm).toHaveBeenCalled();
+  });
+
+  it("should not create a new course with the empty data (createCourse prop should NOT be called on createCourseButton click)", () => {
+    render(
+      <MemoryRouter>
+        <CourseForm
+          authorsList={mockAuthors}
+          createCourse={mockCourseForm}
+          createAuthor={mockCreateAuthor}
+        />
+      </MemoryRouter>
+    );
+
+    const createCourseButton = screen.getByTestId("createCourseButton");
+
+    fireEvent.click(createCourseButton);
+
+    expect(mockCourseForm).not.toHaveBeenCalled();
+  });
+
+  it("should add an author to the course when CreateAuthor component creates a new author (createAuthor prop should be called on createAuthorButton click)", () => {
+    render(
+      <MemoryRouter>
+        <CourseForm
+          authorsList={mockAuthors}
+          createCourse={mockCourseForm}
+          createAuthor={mockCreateAuthor}
+        />
+      </MemoryRouter>
+    );
+
+    const createAuthorButton = screen.getByTestId("createAuthorButton");
+    const nameInput = screen.getByTestId("createAuthorInput");
+
+    fireEvent.change(nameInput, { target: { value: "John" } });
+
+    fireEvent.click(createAuthorButton);
+
+    expect(mockCreateAuthor).toHaveBeenCalled();
+  });
+
+  it('should render the course authors with data-testid="authorItem" in the course authors list', () => {
+    const mockCourseAuthors = ["1", "2"];
+    render(
+      <MemoryRouter>
+        <CourseForm
+          authorsList={mockAuthors}
+          createCourse={mockCourseForm}
+          createAuthor={mockCreateAuthor}
+        />
+      </MemoryRouter>
+    );
+
+    const courseAuthorItems = screen.getAllByTestId("authorItem");
+    expect(courseAuthorItems.length).toBe(mockCourseAuthors.length);
+  });
+  it('should display the "Authors list is empty" message when there are no authors is selected for the course', () => {
+    render(
+      <MemoryRouter>
+        <CourseForm
+          authorsList={[]}
+          createCourse={mockCourseForm}
+          createAuthor={mockCreateAuthor}
+        />
+      </MemoryRouter>
+    );
+    const emptyText = screen.queryByText(/list is empty/i);
+
+    expect(emptyText).toBeInTheDocument();
+  });
+});

package/dist/content/module-2/tests/Header.test.js

@@ -0,0 +1,45 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Header } from "../../components/Header/Header";
+import { MemoryRouter } from "react-router";
+
+describe("Header component", () => {
+  test("should render logo (<img /> tag)", () => {
+    render(
+      <MemoryRouter>
+        <Header />
+      </MemoryRouter>
+    );
+
+    const imageElement = screen.getByRole("img");
+
+    expect(imageElement).toBeInTheDocument();
+  });
+
+  test('should not render logout button without "token" in localStorage', () => {
+    render(
+      <MemoryRouter>
+        <Header />
+      </MemoryRouter>
+    );
+
+    const logoutButtonElement = screen.queryByText(/logout/i);
+
+    expect(logoutButtonElement).not.toBeInTheDocument();
+  });
+
+  test('should immediately remove "token" from localStorage on "LOGOUT" button click', () => {
+    localStorage.setItem("token", "token");
+    render(
+      <MemoryRouter>
+        <Header />
+      </MemoryRouter>
+    );
+
+    const logoutButtonElement = screen.queryByText(/logout/i);
+
+    fireEvent.click(logoutButtonElement);
+
+    expect(localStorage.getItem("token")).toBeFalsy();
+  });
+});

package/dist/content/module-2/tests/Input.test.js

@@ -0,0 +1,42 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { Input } from "../../common/Input";
+
+describe("Input component", () => {
+  const placeholderTextMock = "Enter a value";
+
+  test("should render input with provided labelText prop value", () => {
+    render(
+      <Input labelText="Test Input" placeholderText={placeholderTextMock} />
+    );
+
+    const inputElement = screen.getByLabelText("Test Input");
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  test("should render input with provided placeholderText prop value", () => {
+    const { getByPlaceholderText } = render(
+      <Input labelText="Test Input" placeholderText={placeholderTextMock} />
+    );
+
+    expect(getByPlaceholderText(placeholderTextMock)).toBeInTheDocument();
+  });
+
+  test("should call provided callback for onChange event", () => {
+    const handleChange = jest.fn();
+
+    render(
+      <Input
+        labelText="Test Input"
+        onChange={handleChange}
+        placeholderText={placeholderTextMock}
+      />
+    );
+
+    const inputElement = screen.getByLabelText("Test Input");
+    fireEvent.change(inputElement, { target: { value: "Hello" } });
+
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(inputElement.value).toBe("Hello");
+  });
+});

package/dist/content/module-2/tests/Login.test.js

@@ -0,0 +1,128 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { Login } from "../../components/Login/Login";
+import * as services from "../../services";
+
+beforeEach(() => {
+  jest.spyOn(services, "login").mockImplementation(
+    jest.fn(() =>
+      Promise.resolve({
+        successful: true,
+        result: "token123",
+        user: {
+          name: "John Doe",
+        },
+      })
+    )
+  );
+
+  jest.spyOn(global, "fetch").mockImplementation(
+    jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            result: "token",
+            user: {
+              name: "John Doe",
+            },
+          }),
+      })
+    )
+  );
+});
+
+describe("Login", () => {
+  test("should render login form with 2 inputs, registration info text and link", () => {
+    render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByText(/email/i)).toBeInTheDocument();
+    expect(screen.queryByText(/password/i)).toBeInTheDocument();
+    expect(screen.queryByText(/an account you/i)).toBeInTheDocument();
+    expect(screen.getByRole("link")).toBeInTheDocument();
+  });
+
+  test("should submits login form calls login service with entered email and password", async () => {
+    render(
+      <MemoryRouter>
+        <Login setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/email/i).querySelector("input"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.queryByText(/password/i).querySelector("input"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(services.login).toHaveBeenCalledWith({
+      email: "test@example.com",
+      password: "password123",
+    });
+    await waitFor(() => expect(localStorage.getItem("token")).toBe("token123"));
+  });
+
+  test('should set "token" to localstorage after login submit', async () => {
+    render(
+      <MemoryRouter>
+        <Login setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/email/i).querySelector("input"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.queryByText(/password/i).querySelector("input"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(services.login).toHaveBeenCalledWith({
+      email: "test@example.com",
+      password: "password123",
+    });
+    await waitFor(() => expect(localStorage.getItem("token")).toBe("token123"));
+  });
+
+  test('should render the "Password is required" validation message and NOT call login service', async () => {
+    render(
+      <MemoryRouter>
+        <Login setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/email/i).querySelector("input"), {
+      target: { value: "test@example.com" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(screen.queryByText(/password is required/i)).toBeInTheDocument();
+    expect(services.login).not.toHaveBeenCalled();
+  });
+  test('should render the "Email is required" validation message and NOT call login service', async () => {
+    render(
+      <MemoryRouter>
+        <Login setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/password/i).querySelector("input"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(screen.queryByText(/email is required/i)).toBeInTheDocument();
+    expect(services.login).not.toHaveBeenCalled();
+  });
+});

package/dist/content/module-2/tests/Registration.test.js

@@ -0,0 +1,119 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { Registration } from "../../components/Registration/Registration";
+import * as services from "../../services";
+
+const mockedUsedNavigate = jest.fn();
+
+beforeEach(() => {
+  jest
+    .spyOn(services, "createUser")
+    .mockImplementation(jest.fn(() => Promise.resolve()));
+
+  jest.spyOn(global, "fetch").mockImplementation(
+    jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(),
+      })
+    )
+  );
+
+  jest.mock("react-router-dom", () => ({
+    ...jest.requireActual("react-router-dom"),
+    useNavigate: () => mockedUsedNavigate,
+  }));
+});
+
+describe("Registration", () => {
+  test("should render the registration form with 3 inputs, login info text and link", () => {
+    render(
+      <MemoryRouter>
+        <Registration />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByText(/name/i)).toBeInTheDocument();
+    expect(screen.queryByText(/email/i)).toBeInTheDocument();
+    expect(screen.queryByText(/password/i)).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toBeInTheDocument();
+  });
+
+  test('should submit the registration form, call the "createUser" service with the entered name, email and password', async () => {
+    render(
+      <MemoryRouter>
+        <Registration />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/name/i).querySelector("input"), {
+      target: { value: "John Doe" },
+    });
+    fireEvent.change(screen.queryByText(/email/i).querySelector("input"), {
+      target: { value: "john.doe@example.com" },
+    });
+    fireEvent.change(screen.queryByText(/password/i).querySelector("input"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(services.createUser).toHaveBeenCalledTimes(1);
+    await expect(services.createUser).toHaveBeenCalledWith({
+      name: "John Doe",
+      email: "john.doe@example.com",
+      password: "password123",
+    });
+  });
+
+  test('should render the "Password is required" validation message and NOT call registration service', async () => {
+    render(
+      <MemoryRouter>
+        <Registration setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/email/i).querySelector("input"), {
+      target: { value: "test@example.com" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(screen.queryByText(/password is required/i)).toBeInTheDocument();
+    expect(services.createUser).not.toHaveBeenCalled();
+  });
+  test('should render the "Email is required" validation message and NOT call registration service', async () => {
+    render(
+      <MemoryRouter>
+        <Registration setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/password/i).querySelector("input"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(screen.queryByText(/email is required/i)).toBeInTheDocument();
+    expect(services.createUser).not.toHaveBeenCalled();
+  });
+  test('should render the "Name is required" validation message and NOT call registration service', async () => {
+    render(
+      <MemoryRouter>
+        <Registration setName={jest.fn()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.queryByText(/password/i).querySelector("input"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(screen.queryByText(/name is required/i)).toBeInTheDocument();
+    expect(services.createUser).not.toHaveBeenCalled();
+  });
+});

package/dist/content/module-2/tests/helpers.test.js

@@ -0,0 +1,13 @@
+import { formatCreationDate, getCourseDuration } from "../../helpers";
+
+test("formatCreationDate function returns formatted date", () => {
+  const date = "2022/01/01";
+  const formattedDate = formatCreationDate(date);
+  expect(formattedDate).toBe("2022.01.01");
+});
+
+test("getCourseDuration function returns formatted duration", () => {
+  expect(getCourseDuration(60)).toBe("01:00 hour");
+  expect(getCourseDuration(90)).toBe("01:30 hour");
+  expect(getCourseDuration(120)).toBe("02:00 hours");
+});