Merge branch 'develop' into feature/SC-196-setup-CI-pipeline

Software/smart-charger/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

Software/smart-charger/jest.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/src/tests/setupTests.js"],
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/src/tests/fileMock.js",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+};

Software/smart-charger/package.json

@@ -10,7 +10,12 @@
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "serve": "vite preview",
-    "test": "vite test"
+    "test": "jest --config jest.config.cjs"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    }
   },
   "dependencies": {
     "leaflet": "^1.9.4",
@@ -23,13 +28,20 @@
     "styled-components": "^6.1.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "sass": "^1.69.5",
     "vite": "^4.4.5"
   }

Software/smart-charger/src/components/Button/Button.jsx

@@ -3,9 +3,15 @@ import PropTypes from "prop-types";
 import { Button as ButtonWrapper } from "./ButtonStyles";
 
 const Button = ({ onClick, buttonText, isSecondary, isDisabled }) => {
+  const handleClick = () => {
+    if (!isDisabled && onClick) {
+      onClick();
+    }
+  };
+
   return (
     <ButtonWrapper
-      onClick={onClick}
+      onClick={handleClick}
       issecondary={isSecondary ? "true" : "false"}
       disabled={isDisabled}
     >

Software/smart-charger/src/components/Search/Search.jsx

@@ -48,9 +48,17 @@ const Search = ({ placeholder, search, showCancel, onCancel }) => {
           onKeyDown={handleKeyPress}
         />
         {showCancel ? (
-          <SearchBarIcon src={SearchCancelIcon} onClick={handleCancel} />
+          <SearchBarIcon
+            src={SearchCancelIcon}
+            onClick={handleCancel}
+            alt="Cancel icon"
+          />
         ) : (
-          <SearchBarIcon src={SearchIcon} onClick={handleSearch} />
+          <SearchBarIcon
+            src={SearchIcon}
+            onClick={handleSearch}
+            alt="Search icon"
+          />
         )}
       </SearchWrapper>
     </>

Software/smart-charger/src/tests/ComponentTests/Button.test.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import Button from "../../components/Button/Button";
+
+const mockOnClick = jest.fn();
+const mockButtonText = "Click me";
+
+describe("Button Component", () => {
+  it("renders without crashing", () => {
+    const { container } = render(<Button />);
+    expect(container.firstChild).toBeDefined();
+  });
+
+  it("renders button text correctly", () => {
+    const buttonText = "Click me";
+    const { getByText } = render(<Button buttonText={buttonText} />);
+    expect(getByText(buttonText)).toBeInTheDocument();
+  });
+
+  it("calls onClick prop when button is clicked", () => {
+    const onClickMock = jest.fn();
+    const { getByText } = render(
+      <Button onClick={onClickMock} buttonText="Click me" />
+    );
+    fireEvent.click(getByText("Click me"));
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it("applies secondary style when isSecondary is true", () => {
+    const { container } = render(<Button isSecondary={true} />);
+    expect(container.firstChild).toHaveAttribute("issecondary", "true");
+  });
+
+  it("does not apply secondary style when isSecondary is false", () => {
+    const { container } = render(<Button isSecondary={false} />);
+    expect(container.firstChild).toHaveAttribute("issecondary", "false");
+  });
+
+  it("disables the button when isDisabled is true", () => {
+    const { getByText } = render(
+      <Button isDisabled={true} buttonText="Click me" />
+    );
+    expect(getByText("Click me")).toBeDisabled();
+  });
+
+  it("does not disable the button when isDisabled is false", () => {
+    const { getByText } = render(
+      <Button isDisabled={false} buttonText="Click me" />
+    );
+    expect(getByText("Click me")).not.toBeDisabled();
+  });
+
+  it("does not call onClick function when the button is disabled", () => {
+    render(
+      <Button
+        onClick={mockOnClick}
+        buttonText={mockButtonText}
+        isDisabled={true}
+      />
+    );
+
+    const button = screen.getByText(mockButtonText);
+    expect(button).toBeDisabled();
+    fireEvent.click(button);
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+
+  it("calls onClick function when the button is not disabled", () => {
+    render(
+      <Button
+        onClick={mockOnClick}
+        buttonText={mockButtonText}
+        isDisabled={false}
+      />
+    );
+
+    const button = screen.getByText(mockButtonText);
+    expect(button).not.toBeDisabled();
+    fireEvent.click(button);
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

Software/smart-charger/src/tests/ComponentTests/MonthPicker.test.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import MonthPicker from "../../components/MonthPicker/MonthPicker";
+
+describe("MonthPicker", () => {
+  const mockMonth = "January";
+  const mockClickPrev = jest.fn();
+  const mockClickNext = jest.fn();
+
+  it("renders MonthPicker component correctly", () => {
+    render(
+      <MonthPicker
+        month={mockMonth}
+        clickPrev={mockClickPrev}
+        clickNext={mockClickNext}
+        enableNext={true}
+      />
+    );
+
+    expect(screen.getByText(mockMonth)).toBeInTheDocument();
+    expect(screen.getByText("<")).toBeInTheDocument();
+    expect(screen.getByText(">")).toBeInTheDocument();
+  });
+
+  it("calls clickPrev function when the previous button is clicked", () => {
+    render(
+      <MonthPicker
+        month={mockMonth}
+        clickPrev={mockClickPrev}
+        clickNext={mockClickNext}
+        enableNext={true}
+      />
+    );
+
+    const prevButton = screen.getByText("<");
+    fireEvent.click(prevButton);
+
+    expect(mockClickPrev).toHaveBeenCalled();
+  });
+
+  it("calls clickNext function when the next button is clicked and is not disabled", () => {
+    render(
+      <MonthPicker
+        month={mockMonth}
+        clickPrev={mockClickPrev}
+        clickNext={mockClickNext}
+        enableNext={true}
+      />
+    );
+
+    const nextButton = screen.getByText(">");
+    fireEvent.click(nextButton);
+
+    expect(mockClickNext).toHaveBeenCalled();
+  });
+});

Software/smart-charger/src/tests/ComponentTests/Pagination.test.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import Pagination from "../../components/Pagination/Pagination";
+
+describe("Pagination", () => {
+  const mockFirstCall = jest.fn();
+  const mockPrevCall = jest.fn();
+  const mockNextCall = jest.fn();
+  const mockLastCall = jest.fn();
+  const mockSelectChange = jest.fn();
+
+  const renderComponent = (withSelect = false) => {
+    render(
+      <Pagination
+        firstCall={mockFirstCall}
+        prevCall={mockPrevCall}
+        currentPage={1}
+        pages={10}
+        nextCall={mockNextCall}
+        lastCall={mockLastCall}
+        withSelect={withSelect}
+        onSelectChange={mockSelectChange}
+      />
+    );
+  };
+
+  it("renders Pagination component without select correctly", () => {
+    renderComponent();
+
+    expect(screen.getByText("1/10")).toBeInTheDocument();
+    expect(screen.getByText("<<<")).toBeInTheDocument();
+    expect(screen.getByText("<")).toBeInTheDocument();
+    expect(screen.getByText(">")).toBeInTheDocument();
+    expect(screen.getByText(">>>")).toBeInTheDocument();
+  });
+
+  it("renders Pagination component with select correctly", () => {
+    renderComponent(true);
+
+    expect(screen.getByText("1/10")).toBeInTheDocument();
+    expect(screen.getByText("<<<")).toBeInTheDocument();
+    expect(screen.getByText("<")).toBeInTheDocument();
+    expect(screen.getByText(">")).toBeInTheDocument();
+    expect(screen.getByText(">>>")).toBeInTheDocument();
+
+    expect(screen.getByText("10")).toBeInTheDocument();
+    expect(screen.getByText("25")).toBeInTheDocument();
+    expect(screen.getByText("50")).toBeInTheDocument();
+    expect(screen.getByText("75")).toBeInTheDocument();
+    expect(screen.getByText("100")).toBeInTheDocument();
+  });
+
+  it("calls firstCall function when the '<<<' button is clicked", () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByText("<<<"));
+
+    expect(mockFirstCall).toHaveBeenCalled();
+  });
+
+  it("calls prevCall function when the '<' button is clicked", () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByText("<"));
+
+    expect(mockPrevCall).toHaveBeenCalled();
+  });
+
+  it("calls nextCall function when the '>' button is clicked", () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByText(">"));
+
+    expect(mockNextCall).toHaveBeenCalled();
+  });
+
+  it("calls lastCall function when the '>>>' button is clicked", () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByText(">>>"));
+
+    expect(mockLastCall).toHaveBeenCalled();
+  });
+});

Software/smart-charger/src/tests/ComponentTests/PopupWindow.test.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import PopupWindow from "../../components/PopupWindow/PopupWindow";
+
+describe("PopupWindow", () => {
+  const mockTitle = "Popup Title";
+  const mockText = "Popup Text";
+  const mockChildren = <div>Popup Children</div>;
+  const mockOnClose = jest.fn();
+
+  it("renders PopupWindow component correctly", () => {
+    render(
+      <PopupWindow title={mockTitle} text={mockText} onClose={mockOnClose}>
+        {mockChildren}
+      </PopupWindow>
+    );
+
+    expect(screen.getByText(mockTitle)).toBeInTheDocument();
+    expect(screen.getByText(mockText)).toBeInTheDocument();
+    expect(screen.getByText("Popup Children")).toBeInTheDocument();
+  });
+
+  it("does not call onClose function when children inside PopupWindowContent are clicked", () => {
+    render(
+      <PopupWindow title={mockTitle} text={mockText} onClose={mockOnClose}>
+        {mockChildren}
+      </PopupWindow>
+    );
+
+    const children = screen.getByText("Popup Children");
+    fireEvent.click(children);
+
+    expect(mockOnClose).not.toHaveBeenCalled();
+  });
+
+  it("renders PopupWindowContent when title or text are provided", () => {
+    render(
+      <PopupWindow text={mockText} onClose={mockOnClose}>
+        {mockChildren}
+      </PopupWindow>
+    );
+
+    const content = screen.getByText("Popup Children");
+    expect(content).toBeInTheDocument();
+  });
+});