epam-ai-conductor 0.1.0

package/dist/content/module-5/task/module-5_home-task_task.md

@@ -0,0 +1,154 @@
+---
+sidebar_position: 1
+sidebar_label: "TASK"
+title: "Module 5. React Tests"
+---
+
+This is the last part of the application.  
+In this assignment,
+you should continue to work on your project with a slight modification.  
+This module was designed to teach how to work with tests in React.
+
+## Prerequisite:
+
+You need to add a new script for your application and install `Jest` as devDependency module.
+
+1. Go to your project directory
+
+2. Add a command `npm run test:nowatch` to the **prepublish** script in the `package.json` file.
+
+Result in the package.json:
+
+```js
+"prepublish": "npm run eslint:fix && npm run test:nowatch"
+```
+
+Result in the app:  
+If some of your unit tests are failed you will not be able to commit your changes.
+
+3. Install `Jest`.
+
+:::info
+If Create React App was used to create the project, this step can be skipped as CRA ships with Jest.
+:::
+
+```http request
+npm i jest --save-dev
+```
+
+4. Create new folders and `.test.js` file with tests:
+
+```
+   src
+   |
+   |-- components
+   |   |-- Header
+   |   |    |__ tests
+   |   |    |   |__ header.test.js //file for tests
+   |   |    |
+   |   |    |__ ...
+   |   |
+   |   |
+   |   |-- Courses
+   |   |   |-- tests
+   |   |   |   |__ courses.test.js //file for tests
+   |   |   |
+   |   |   |__ components
+   |   |      |__ CourseCard
+   |   |      |   |__ tests
+   |   |      |   |   |__ courseCard.test.js //file for tests
+   |   |      |   |
+   |   |      |   |__ ...
+   |   |      |
+   |   |      |__ ...
+   |   |
+   |   |__ ...
+   |
+   |-- store
+   |   |-- tests
+   |   |   |__ reducer.test.js //file for tests
+   |   |
+   |   |__ ...
+   |
+   |__ // ...
+```
+
+5. Run your tests.
+
+```http request
+npm run test
+```
+
+:::info
+Use `.test.js` extension for files with tests
+:::
+
+:::caution
+When you run your tests (`npm run test`) they will crash because you
+have files with a `.test.js` extension without tests.  
+This problem will go away when you add tests to these files.
+![](./images/testError.jpg)
+:::
+
+## Criteria (20 points max)
+
+### Add test for **Header**:
+
+- [2 points] - **Header** should have logo and user's name.
+
+### Add tests for **CourseCard**:
+
+- [1 point] - **CourseCard** should display title.
+
+- [1 point] - **CourseCard** should display description.
+
+- [1 point] - **CourseCard** should display duration in the correct format.
+
+- [2 point] - **CourseCard** should display authors list.
+
+- [1 point] - **CourseCard** should display created date in the correct format.
+
+### Add tests for **Courses**:
+
+- [2 points] - **Courses** should display amount of CourseCard equal length of courses array.
+
+- [3 points] - **CourseForm** should be shown after a click on the "Add new course" button.
+
+### Add tests for **coursesReducer**:
+
+- [1 point] - **reducer** should return the initial state.
+
+- [1 point] - **reducer** should handle SAVE_COURSE and returns new state.
+
+### Script in the `package.json`:
+
+- [5 points] - pre-commit hook works correctly:
+  - There is no ability to commit changes if some of unit tests are failed.
+
+:::info
+To run all task run `npm run test:nowatch`
+:::
+
+### EXTRA TASK:
+
+### Add tests for **CourseForm** (update or create mode):
+
+:::note
+If you decided to do the extra task, YOU ARE A STAR ⭐  
+Don't forget to create appropriate folder and test file.
+
+By the way, it's the last task in this course. Thank you for coming to the end 😎
+
+:::
+
+- **CourseForm** should show authors lists (all and course authors).
+
+- **CourseForm** 'Create author' button click should call dispatch.
+
+- **CourseForm** 'Add author' button click should add an author to the course authors list.
+
+- **CourseForm** 'Delete author' button click should delete an author from the course list.
+
+:::info
+Find information about tests writing in the [INSTRUCTIONS](instruction).
+:::

package/dist/content/module-5/tests/App.test.tsx

@@ -0,0 +1,54 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import App from "../App";
+
+describe("App", () => {
+  test("renders Login component when token is not present", () => {
+    localStorage.removeItem("token");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+      </MemoryRouter>
+    );
+
+    expect(
+      screen.getByText(/If you don't have an account you can/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders Courses component when token is present", () => {
+    localStorage.setItem("token", "token");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+        </MemoryRouter>
+    );
+
+    const courseElements = screen.getAllByTestId("courseCard");
+
+    expect(courseElements[0]).toBeInTheDocument();
+  });
+
+  test("renders Registration component", () => {
+    render(
+      <MemoryRouter initialEntries={["/registration"]}>
+        <App />
+        </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText("name")).toBeInTheDocument();
+    expect(screen.getByLabelText("email")).toBeInTheDocument();
+    expect(screen.getByLabelText("password")).toBeInTheDocument();
+  });
+
+  test("renders course add component", () => {
+    render(
+      <MemoryRouter initialEntries={["/courses/add"]}>
+        <App />
+        </MemoryRouter>
+    );
+
+    expect(screen.getByTestId("titleInput")).toBeInTheDocument();
+  });
+});

package/dist/content/module-5/tests/CourseCard.test.tsx

@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { CourseCard } from "../components/Courses/components/CourseCard/CourseCard";
+
+describe('CourseCard component', () => {
+  const course = {
+    id: "1",
+    title: "Course Title",
+    description: "Course Description",
+    creationDate: "08/03/2021",
+    duration: 60,
+    authors: [
+      "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+      "f762978b-61eb-4096-812b-ebde22838167",
+    ],
+  };
+
+  test("Should contain title", () => {
+    render(<CourseCard course={course} />);
+
+    const titleElement = screen.getByText("Course Title");
+
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  test("Should contain description", () => {
+    render(<CourseCard course={course} />);
+    const descriptionElement = screen.getByText("Course Description");
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
+  test("Should contain duration", () => {
+    render(<CourseCard course={course} />);
+
+    const durationElement = screen.getByText(/01:00 hour/);
+
+    expect(durationElement).toBeInTheDocument();
+  });
+
+  test("Should contain date", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/08.03.2021/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+
+  test("Should contain authors list", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/Vasiliy Dobkin, Nicolas Kim/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+
+  test("Should contain authors list", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/Show course/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+})
+

package/dist/content/module-5/tests/Courses.test.tsx

@@ -0,0 +1,87 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Courses } from "../components/Courses/Courses";
+
+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 onAddClick = jest.fn();
+
+  test("Should render list of courses", () => {
+    render(<Courses courseList={mockedCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const courseElements = screen.getAllByTestId("courseCard");
+
+    expect(courseElements[0]).toBeInTheDocument();
+    expect(courseElements).toHaveLength(2);
+  });
+
+  test("Should render 'Add new course' button", () => {
+    render(<Courses courseList={mockedCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const button = screen.getByText(/Add new course/);
+
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Should render EmptyCourseList component if no courses", () => {
+    const mockedEmptyCoursesList: [] = [];
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const emptyContainerElement = screen.getByTestId("emptyContainer");
+    const addButtonElement = screen.getByTestId("addCourse");
+
+    expect(emptyContainerElement).toBeInTheDocument();
+    expect(addButtonElement).toBeInTheDocument();
+  });
+})
+
+describe('EmptyCourseList', () => {
+  const mockedEmptyCoursesList: [] = [];
+  const onAddClick = jest.fn();
+
+  test("Should render title", () => {
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const title = screen.getByText(/Your List Is Empty/);
+
+    expect(title).toBeInTheDocument();
+  });
+
+  test("Should render subtitle", () => {
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const subTitle = screen.getByText(/Please use/);
+
+    expect(subTitle).toBeInTheDocument();
+  });
+
+  test("Should render button", () => {
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const button = screen.getByText('ADD NEW COURSE');
+
+    expect(button).toBeInTheDocument();
+  });
+})
+
+

package/dist/content/module-5/tests/Header.test.tsx

@@ -0,0 +1,23 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Header } from "../components/Header/Header";
+
+describe('Header component', () => {
+  test("Should render logo", () => {
+    render(<Header />);
+
+    const imageElement = screen.getByRole("img");
+
+    expect(imageElement).toBeInTheDocument();
+  });
+
+  test("Should render logout button", () => {
+    render(<Header />);
+
+    const logoutButtonElement = screen.getByRole("button");
+
+    expect(logoutButtonElement).toBeInTheDocument();
+  });
+})
+
+