refactor: streamline imports and improve eslint configuration; enhance CI/CD workflow

Author: Ali-Sdg90

.eslintrc.json

@@ -27,7 +27,7 @@
     "rules": {
         "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
         "no-console": "off",
-        "quotes": ["error", "double"],
+        "quotes": ["error", "double", { "allowTemplateLiterals": true }],
         "semi": ["error", "always"],
         "react/react-in-jsx-scope": "off",
         "react/prop-types": "off",

.github/workflows/ci.yml

@@ -44,8 +44,8 @@ jobs:
       - name: Prettier check
         run: npm run format:check
 
-      #   - name: ESLint
-      #     run: npm run lint
+      - name: ESLint
+        run: npm run lint
 
       - name: Run tests (no watch) with coverage + summary
         run: |

.husky/pre-commit

@@ -1,3 +1,3 @@
-# npm run lint
 npm run format:check
+npm run lint
 npm test

package.json

@@ -16,7 +16,7 @@
     "lint:fix": "eslint src --ext .js,.jsx --format stylish --fix",
     "act": "act --env-file .env.act --quiet",
     "prepare": "husky",
-    "check": "npm run format:check && npm run test"
+    "check": "npm run format:check && npm run lint && npm run test"
   },
   "repository": {
     "type": "git",

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ConfigProvider, theme } from "antd";
 import Footer from "./components/Footer";
 import CSCalendar from "./components/CSCalendar";

src/__tests__/App.test.jsx

@@ -29,23 +29,31 @@ jest.mock("../components/CSCalendar", () => {
     const React = require("react");
     return function MockCSCalendar(props) {
         mockCsCalendar(props);
+
+        const { setAnnouncementData } = props;
+
         React.useEffect(() => {
-            props.setAnnouncementData({
+            setAnnouncementData({
                 startWeekDate: "2025/01/13",
                 endWeekDate: "2025/01/20",
                 firstEventDate: "2025/01/15",
                 secondEventDate: "2025/01/19",
                 firstEvent: "First",
                 secondEvent: "Second",
             });
-        }, [props.setAnnouncementData]);
+        }, [setAnnouncementData]);
+
         return <div data-testid="calendar" />;
     };
 });
 
-jest.mock("../components/Footer", () => () => (
-    <div data-testid="footer">footer</div>
-));
+jest.mock("../components/Footer", () => {
+    const MockFooter = () => <div data-testid="footer">footer</div>;
+
+    MockFooter.displayName = "MockFooter";
+
+    return MockFooter;
+});
 
 jest.mock("../components/FloatButtonSection", () => {
     return function MockFloatButtonSection({ setIsModalOpen }) {

src/__tests__/components/AnnouncementModule.test.jsx

@@ -37,7 +37,7 @@ jest.mock("antd", () => {
                 <textarea value={value} onChange={onChange} {...props} />
             ),
         },
-        Spin: ({ size, className }) => (
+        Spin: ({ _size, className }) => (
             <div data-testid="spinner" className={className}></div>
         ),
         Flex: ({ children, ...props }) => (
@@ -80,7 +80,7 @@ describe("AnnouncementModule", () => {
             <AnnouncementModule {...defaultProps} isModalOpen={false} />
         );
         expect(
-            container.querySelector('[data-testid="modal"]')
+            container.querySelector(`[data-testid="modal"]`)
         ).not.toBeInTheDocument();
     });
 
@@ -384,7 +384,6 @@ describe("AnnouncementModule", () => {
             />
         );
 
-        const buttons = screen.getAllByRole("button");
         const copyButton = screen.getByText("کپی پیام");
         const backButton = screen.getByText("بازگشت");
 

src/__tests__/components/CSCalendar.test.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import dayjs from "dayjs";
 import moment from "jalali-moment";
@@ -22,9 +22,13 @@ jest.mock("../../components/EventPopup", () => {
     };
 });
 
-jest.mock("../../components/CalendarIntro", () => () => (
-    <div data-testid="calendar-intro" />
-));
+jest.mock("../../components/CalendarIntro", () => {
+    const MockCalendarIntro = () => <div data-testid="calendar-intro" />;
+
+    MockCalendarIntro.displayName = "MockCalendarIntro";
+
+    return MockCalendarIntro;
+});
 
 jest.mock("antd", () => {
     const React = require("react");
@@ -45,10 +49,14 @@ jest.mock("antd", () => {
             {children}
         </select>
     );
-    Select.Option = ({ value, children }) => (
+    const SelectOption = ({ value, children }) => (
         <option value={value}>{children}</option>
     );
 
+    SelectOption.displayName = "Select.Option";
+
+    Select.Option = SelectOption;
+
     const Tag = ({ children, className, color }) => (
         <div className={className} data-color={color}>
             {children}

src/__tests__/components/EventPopup.test.jsx

@@ -103,10 +103,10 @@ describe("EventPopup", () => {
         expect(screen.getByText("تاریخ شمسی")).toBeInTheDocument();
         expect(screen.getByText("تاریخ میلادی")).toBeInTheDocument();
         expect(container.querySelector(".event-popup__link--primary")).toBe(
-            container.querySelector('a[href="https://example.com/session"]')
+            container.querySelector(`a[href="https://example.com/session"]`)
         );
         expect(
-            container.querySelector('a[href="https://example.com/resource"]')
+            container.querySelector(`a[href="https://example.com/resource"]`)
         ).toBeInTheDocument();
 
         const dot = container.querySelector(".event-popup__color-dot");
@@ -220,21 +220,4 @@ describe("EventPopup", () => {
         fireEvent.mouseDown(document.body);
         expect(onClose).toHaveBeenCalled();
     });
-
-    it("falls back to event title when full name is missing", () => {
-        mockCalendarCreator.mockClear();
-        const event = { ...baseEvent, fullName: undefined };
-        const { getByText } = renderPopup({
-            visible: true,
-            anchorRect,
-            date: dayjs("2025-01-14"),
-            event,
-            onClose: jest.fn(),
-        });
-
-        expect(screen.getAllByText(event.title).length).toBeGreaterThan(0);
-        expect(mockCalendarCreator).toHaveBeenCalledWith(
-            expect.objectContaining({ eventText: event.title })
-        );
-    });
 });

src/__tests__/components/FloatButtonSection.test.jsx

@@ -208,7 +208,7 @@ describe("FloatButtonSection", () => {
 
     it("should handle theme toggle with transition", () => {
         const setIsModalOpen = jest.fn();
-        const { getAllByTestId, container } = render(
+        const { getAllByTestId } = render(
             <FloatButtonSection setIsModalOpen={setIsModalOpen} />
         );
         const buttons = getAllByTestId("float-button");