Changed click on input type date

package.json

@@ -49,7 +49,7 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/__tests__/UITests/candidateFilterUI.test.js

@@ -0,0 +1,79 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import { mockState } from "../../mockState";
+import ColorModeProvider from "../../context/ColorModeContext";
+import CandidateFilters from "../../components/Candidates/CandidateFilters";
+
+describe("Add ad modals ui tests", () => {
+  const props = {
+    open: true,
+    handleClose: jest.fn(),
+    pageSize: 3,
+    currentPage: 1,
+    isTableView: false,
+    technologies: [
+      {
+        technologyId: 1,
+        name: ".NET",
+        technologyType: "Backend",
+        isChecked: true,
+      },
+    ],
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <CandidateFilters {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+
+  beforeEach(() => {
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should check checkbox", async () => {
+    const { container } = render(cont);
+
+    const a = container.getElementsByClassName(
+      "ad-filters-technologies-checkboxes-checkbox"
+    )[0];
+
+    waitFor(() => {
+      fireEvent.click(a);
+      expect(a).toBeDefined();
+    });
+  });
+
+  it("Should click type of employment button", async () => {
+    const { container } = render(cont);
+    const btn = container.getElementsByClassName("type-of-employment-btn");
+
+    waitFor(() => {
+      fireEvent.click(btn[1]);
+      expect(btn).toBeDefined();
+    });
+  });
+
+  it("Should change ending date", async () => {
+    render(cont);
+    const input = screen.getByTestId("filter-date-container-ending-date");
+
+    waitFor(() => {
+      fireEvent.change(input, { target: { value: "2024-05-24" } });
+      expect(input).toBeDefined();
+    });
+  });
+});

src/__tests__/UITests/patternsPageUI.test.js

@@ -95,4 +95,35 @@ describe("PatternsPage render tests", () => {
       container.getElementsByClassName("pattern-card-parent").length
     ).toBeGreaterThan(0);
   });
+
+  it("Should submit filters handler", async () => {
+    const { container } = render(cont);
+    fireEvent.click(
+      container.getElementsByClassName("custom-filter-button")[0]
+    );
+    waitFor(() => {
+      fireEvent.click(
+        container.getElementsByClassName("pattern-filters-checkbox")[0]
+      );
+
+      fireEvent.change(
+        container.getElementsByClassName(
+          "custom-drawer-sub-card-content-input-1"
+        )[0],
+        { target: { value: "2024-05-05" } }
+      );
+
+      fireEvent.change(
+        container.getElementsByClassName(
+          "custom-drawer-sub-card-content-input-2"
+        )[0],
+        { target: { value: "2025-05-05" } }
+      );
+
+      const searchBtn = screen.getByTestId("custom-drawer-submit-search");
+
+      fireEvent.click(searchBtn);
+      expect(searchBtn).toBeDefined();
+    });
+  });
 });

src/assets/styles/components/_ads.scss

@@ -771,11 +771,30 @@ h3 {
 }
 
 .add-ad-modal-stage-sub-card {
+  border: none;
+  box-sizing: border-box;
+  outline: 0;
+  position: relative;
+  width: 100%;
+
   display: flex;
   flex-direction: column;
   margin-bottom: 9px;
 }
 
+.add-ad-modal-stage-sub-card input[type="date"]::-webkit-calendar-picker-indicator {
+  background: transparent;
+  bottom: 0;
+  color: transparent;
+  cursor: pointer;
+  height: auto;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+}
+
 .add-ad-modal-stage-sub-card-third {
   display: flex;
   flex-direction: column;

src/assets/styles/components/_candidatesPage.scss

@@ -142,11 +142,30 @@
 }
 
 .filter-date-container {
+  border: none;
+  box-sizing: border-box;
+  outline: 0;
+  position: relative;
+  width: 100%;
+
   display: flex;
   flex-direction: column;
   margin-top: 10px;
 }
 
+.filter-date-container input[type="date"]::-webkit-calendar-picker-indicator {
+  background: transparent;
+  bottom: 0;
+  color: transparent;
+  cursor: pointer;
+  height: auto;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+}
+
 .filter-date-container input {
   border: 1px solid gray;
   border-radius: 4px;
@@ -185,7 +204,7 @@
   top: 100px;
   right: 9px;
   z-index: 1000;
-  &.smaller{
+  &.smaller {
     min-width: 250px !important;
   }
 }

src/components/Candidates/CandidateFilters.js

@@ -215,6 +215,7 @@ const CandidateFilters = ({
                     <Checkbox
                       checked={technology.isChecked}
                       name={technology.name}
+                      className="ad-filters-technologies-checkboxes-checkbox"
                       onChange={handleTechologiesChange}
                     />
                   }
@@ -234,8 +235,8 @@ const CandidateFilters = ({
                 key={index}
                 className={
                   type.isChecked === false
-                    ? "c-btn c-btn--primary-outlined"
-                    : "c-btn c-btn--primary"
+                    ? "c-btn c-btn--primary-outlined type-of-employment-btn"
+                    : "c-btn c-btn--primary type-of-employment-btn"
                 }
                 onClick={() => handleChangeTypeOfEmployment(type.name)}
               >
@@ -262,6 +263,7 @@ const CandidateFilters = ({
               <input
                 type="date"
                 id="start"
+                data-testid="filter-date-container-ending-date"
                 max={formatDateInput(new Date())}
                 value={endingDate}
                 onChange={handleChangeEndingDate}

src/components/Patterns/PatternFilters.js

@@ -15,6 +15,8 @@ const PatternFilters = ({
   const [toDate, setToDate] = useState("");
   const dispatch = useDispatch();
 
+  console.log("OVDE",selectionLevelFilter)
+
   const submitFiltersHandler = (e) => {
     e.preventDefault();
 
@@ -125,6 +127,7 @@ const PatternFilters = ({
           <div className="custom-drawer-submit">
             <button
               className="c-btn c-btn--primary"
+              data-testid="custom-drawer-submit-search"
               disabled={!hasSelectedFilters()}
             >
               Pretrazi