epam-ai-conductor 0.1.0

package/dist/content/content/module-3/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/content/module-3/tests/CreateAuthor.test.tsx

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { CreateAuthor } from "../components/CreateCourse/components/CreateAuthor/CreateAuthor";
+
+describe("CreateAuthor", () => {
+  it("should call onCreateAuthor when create button is clicked with valid name", () => {
+    const onCreateAuthorMock = jest.fn();
+    render(<CreateAuthor onCreateAuthor={onCreateAuthorMock} />);
+
+    const nameInput = screen.getByTestId(
+      "createAuthorInput"
+    ) as HTMLInputElement;
+    const createButton = screen.getByTestId("createAuthorButton");
+
+    // Enter a valid name in the input field
+    fireEvent.change(nameInput, { target: { value: "John" } });
+
+    // Click the create button
+    fireEvent.click(createButton);
+
+    // Assert that onCreateAuthor is called with the correct data
+    expect(onCreateAuthorMock).toHaveBeenCalledWith({
+      name: "John",
+      id: expect.any(String),
+    });
+
+    // Assert that the input field is cleared
+    expect(nameInput.value).toBe("");
+  });
+
+  it("should not call onCreateAuthor when create button is clicked with an empty name", () => {
+    const onCreateAuthorMock = jest.fn();
+    render(<CreateAuthor onCreateAuthor={onCreateAuthorMock} />);
+
+    const createButton = screen.getByTestId("createAuthorButton");
+
+    // Click the create button without entering a name
+
+    fireEvent.click(createButton);
+
+    // Assert that onCreateAuthor is not called
+    expect(onCreateAuthorMock).not.toHaveBeenCalled();
+  });
+});

package/dist/content/content/module-3/tests/CreateCourse.test.tsx

@@ -0,0 +1,122 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { CreateCourse } from "../components/CreateCourse/CreateCourse";
+
+describe("CreateCourse", () => {
+  const mockAuthors = [
+    { id: "1", name: "Author 1" },
+    { id: "2", name: "Author 2" },
+  ];
+
+  const mockCreateCourse = jest.fn();
+  const mockCreateAuthor = jest.fn();
+
+  beforeEach(() => {
+    mockCreateCourse.mockClear();
+    mockCreateAuthor.mockClear();
+  });
+
+  it("should create a new course with the entered data", () => {
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const titleInput = screen.getByTestId("titleInput");
+    const durationInput = screen.getByTestId("durationInput");
+    const descriptionTextArea = screen.getByTestId("descriptionTextArea");
+    const createCourseButton = screen.getByTestId("createCourseButton");
+
+    // Enter the course title
+    fireEvent.change(titleInput, { target: { value: "Course Title" } });
+    fireEvent.change(durationInput, { target: { value: "20" } });
+
+    // Enter the course description
+    fireEvent.change(descriptionTextArea, {
+      target: { value: "Course Description" },
+    });
+
+    // Click the create course button
+    fireEvent.click(createCourseButton);
+
+    // Assert that createCourse is called with the correct data
+    expect(mockCreateCourse).toHaveBeenCalledWith({
+      id: expect.any(String),
+      title: "Course Title",
+      description: "Course Description",
+      creationDate: "",
+      duration: 20,
+      authors: [],
+    });
+  });
+
+  it("should not create a new course with the empty data", () => {
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const createCourseButton = screen.getByTestId("createCourseButton");
+
+    // Click the create course button
+    fireEvent.click(createCourseButton);
+
+    // Assert that createCourse is called with the correct data
+    expect(mockCreateCourse).not.toHaveBeenCalled();
+  });
+
+  it("should add an author to the course when CreateAuthor component creates a new author", () => {
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const createAuthorButton = screen.getByTestId("createAuthorButton");
+    const nameInput = screen.getByTestId(
+      "createAuthorInput"
+    ) as HTMLInputElement;
+
+    fireEvent.change(nameInput, { target: { value: "John" } });
+
+    fireEvent.click(createAuthorButton);
+
+    expect(mockCreateAuthor).toHaveBeenCalled();
+  });
+
+  it("should display the course authors in the course", () => {
+    const mockCourseAuthors = ["1", "2"];
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const courseAuthorItems = screen.getAllByTestId("authorItem");
+    expect(courseAuthorItems.length).toBe(mockCourseAuthors.length);
+  });
+  it("should display the empty authors list message when there are no authors", () => {
+    render(
+      <CreateCourse
+        authorsList={[]}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+    const emptyText = screen.getByTestId("emptyText");
+
+    // Assert that the empty text is displayed
+    expect(emptyText).toBeInTheDocument();
+    expect(emptyText.textContent).toBe("Authors list is empty");
+  });
+});

package/dist/content/content/module-3/theory/module-3_redux-hooks.md

@@ -0,0 +1,194 @@
+---
+sidebar_position: 3
+sidebar_label: 'Redux Hooks'
+title: 'Redux Hooks'
+---
+
+As a React, Redux also has hooks.  
+In this topic, we will look at the hooks that are used more often and that will be needed to do your homework.
+
+## useSelector()
+
+```js
+const result: any = useSelector(selector: Function, equalityFn?: Function);
+```
+
+Allows you to extract data from the Redux store state, using a selector function.
+
+:::info
+The selector function should be [pure](https://en.wikipedia.org/wiki/Pure_function) as it might be executed multiple times and at arbitrary moments. A pure function ensures consistent output and no side effects, maintaining the stability of the application.
+:::
+
+The *selector* is called with the entire Redux store state as its sole argument. The selector runs whenever the function component renders. However, if its reference has not changed since the previous render, the hook returns a cached result without re-running the selector.
+
+`useSelector()` subscribes to the Redux store and executes your selector whenever an action is dispatched.
+
+Some specifics of `useSelector` work:
+
+⭐ The selector can return any value as a result. The return value of the selector will be used as the return value of the `useSelector()` hook.
+
+⭐ When an action is dispatched, `useSelector()` performs a reference comparison between the previous selector result value and the current result value. If the values are different, the component is forced to re-render. However, if the values are the same, the component does not re-render.
+
+⭐ `useSelector()` uses strict `===` reference equality checks by default.
+
+⭐ You can use `useSelector()` multiple times within a single function component. Each invocation of `useSelector()` creates a separate subscription to the Redux store.
+
+### `useSelector` Example
+
+Basic usage:
+
+```jsx
+import { useSelector } from 'react-redux';
+
+export const CounterComponent = () => {
+  const counter = useSelector((state) => state.counter);
+  
+  return <div>{counter}</div>
+}
+```
+Using props via closure to determine what to extract:
+```jsx
+import { useSelector } from 'react-redux';
+
+export const TodoListItem = (props) => {
+  const todo = useSelector((state) => state.todos[props.id]);
+  
+  return <div>{todo.text}</div>
+}
+```
+
+:::tip
+It's a good practice to create a separate callback function and pass it to `useSelector()` to improve code readability and maintainability.
+```jsx
+// selectors.js
+export const getCounter = state => state.counter;
+
+// CounterComponent.jsx
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import { getCounter } from './selectors';
+
+export const CounterComponent = () => {
+  const counter = useSelector(getCounter) //you don't need to call callback
+  return <div>{counter}</div>
+}
+```
+:::
+
+## useDispatch()
+
+```js
+const dispatch = useDispatch()
+```
+
+This hook provides a reference to the `dispatch` function from the Redux store, allowing you to dispatch actions when needed.
+
+In the previous topic, you learned that updating the store requires the use of `actions`. Now, let's see how we can achieve this using `dispatch`.
+
+### `useDispatch` Example
+
+```jsx
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+export const CounterComponent = ({ value }) => {
+  const dispatch = useDispatch(); // create an instance
+
+  return (
+    <div>
+      <span>{value}</span>
+      <button onClick={() => dispatch({ type: 'INCREMENT_COUNTER' })}>
+        Increment counter
+      </button>
+    </div>
+  )
+}
+```
+Upon clicking the button, we call `dispatch` with the action 'INCREMENT_COUNTER'. 
+This action triggers the appropriate condition in the reducer, which then updates the store state accordingly.
+
+Let's make some modification, to make our call more readable
+
+1. Create a separate file for actions
+
+```js
+// actions.js
+
+export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
+
+export const incrementCounerAction = () => ({type: INCREMENT_COUNTER});
+```
+
+2. Use `incrementCouner` in our `CounterComponent`
+```jsx
+// CounterComponent.jsx
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { incrementCounerAction } from './actions';
+
+export const CounterComponent = ({ value }) => {
+  const dispatch = useDispatch() // create an instance
+
+  return (
+    <div>
+      <span>{value}</span>
+      <button onClick={() => dispatch(incrementCounerAction())}>
+        Increment counter
+      </button>
+    </div>
+  )
+}
+```
+
+Let's not stop and add usage of `useSelector` &#128512
+
+```jsx
+// CounterComponent.jsx
+
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {incrementCounerAction} from './actions';
+
+export const CounterComponent = () => { // remove the prop, we don't need it here
+  const value = useSelector(state => state.counter); // now we take value from the store
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <span>{value}</span>
+      <button onClick={() => dispatch(incrementCounerAction())}>
+        Increment counter
+      </button>
+    </div>
+  )
+}
+```
+
+As a result after every button click:
+1. `dispatch` will be called with action `{type: INCREMENT_COUNTER}`.
+2. The reducer will update the state with the new value of `counter`.
+3. `useSelector` will return new `counter` value.
+4. After the store is updated, the component will be re-rendered, and the new counter value will be displayed on the page.
+
+:::tip
+If you need to pass the `payload` to the action, you can do it like this:  
+```js
+export const incrementCounerAction = (payload) => ({type: INCREMENT_COUNTER, payload});
+```
+:::
+
+## Materials
+1. [React Redux. Hooks (Documentation)](https://react-redux.js.org/api/hooks)
+
+
+
+
+
+
+  
+
+