feat: pagination tests

ISSResearch · Mar 19, 2024 · b28a7c6 · b28a7c6
1 parent e2a3b7c
commit b28a7c6
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 11 deletions.
diff --git a/frontend-app/src/components/FilesValidate/component.test.js b/frontend-app/src/components/FilesValidate/component.test.js
@@ -19,7 +19,7 @@ test("files validate component base test", async () => {
     </MemoryRouter>
   );
 
-  global.Promise.allSettled = () => Promise.resolve([{value:{data:[]}}]);
+  global.Promise.allSettled = () => Promise.resolve([{value:{data:{data: []}}}]);
   global.URL.revokeObjectURL = () => "";
   fileApi.get.mockResolvedValue();
 
@@ -39,7 +39,12 @@ test("files validate component test", async () => {
     </MemoryRouter>
   );
 
-  global.Promise.allSettled = () => Promise.resolve([{value:{data:raw_files}}]);
+  var data = {
+    data: raw_files,
+    page: 1,
+    total_pages: 1
+  };
+  global.Promise.allSettled = () => Promise.resolve([{ value: { data: data } }]);
   global.URL.revokeObjectURL = () => "";
   fileApi.get.mockResolvedValue();
 

diff --git a/frontend-app/src/components/FilesValidate/index.jsx b/frontend-app/src/components/FilesValidate/index.jsx
@@ -52,6 +52,7 @@ export default function FilesValidation({ pathID, attributes, canValidate }) {
     };
   }
 
+  // TODO: refactor
   function handleChange(filterType, query) {
     var { card, attr, type, author, date, page } = getPageQuery();
     var preparedQuery = {

diff --git a/frontend-app/src/components/common/FileSelector/component.test.js b/frontend-app/src/components/common/FileSelector/component.test.js
@@ -1,4 +1,4 @@
-import { render, renderHook, screen, act } from '@testing-library/react';
+import { fireEvent, render, renderHook, screen, act } from '@testing-library/react';
 import FileSelector from '.';
 import { useFiles, useSwiper } from '../../../hooks';
 import { raw_files } from '../../../config/mock_data';
@@ -12,12 +12,36 @@ test("file selector component test", () => {
     swiperHook.current.setMax(raw_files.length);
   });
 
-  render(
-    <FileSelector
-      fileManager={filesHook.current}
-      sliderManager={swiperHook.current}
-    />
-  );
+  const change = (_, page) => {
+    act(() => swiperHook.current.setPagination((prev) => {
+      return {...prev, page};
+    }));
+  };
+  component = () => <FileSelector
+    fileManager={filesHook.current}
+    sliderManager={swiperHook.current}
+    onChange={change}
+  />;
+
+  const { container, rerender } = render(component());
 
   expect(screen.getAllByRole('heading')).toHaveLength(raw_files.length);
+  expect(container.querySelector(".iss__fileSelector__pagination")).toBeNull();
+  act(() => {
+    swiperHook.current.setPagination(
+      { page: 1, totalPages: 3 }
+    );
+  });
+
+  rerender(component());
+  expect(container.querySelector(".iss__fileSelector__pagination")).not.toBeNull();
+  expect(screen.getByRole("spinbutton").value).toBe("1");
+  expect(container.querySelectorAll(".nav--block")).toHaveLength(1);
+  fireEvent.blur(screen.getByRole("spinbutton"), {target: {value: "3"}});
+  expect(screen.getByRole("spinbutton").value).toBe("3");
+  expect(container.querySelectorAll(".nav--block")).toHaveLength(1);
+  rerender(component());
+  fireEvent.click(container.querySelector("svg"));
+  rerender(component());
+  expect(container.querySelectorAll(".nav--block")).toHaveLength(0);
 });
diff --git a/frontend-app/src/components/common/TableBodySet/component.test.js b/frontend-app/src/components/common/TableBodySet/component.test.js
@@ -56,10 +56,10 @@ function tester() {
         var arrow = getByTestId(row, 'table-row-icon');
         expect(arrow.parentNode.style._values["padding-left"])
           .toBe(`${24 + 12 * depth}px`);
-        expect(arrow[Object.keys(arrow)[1]].className).toBe('iss__stats__table--icon');
+        expect(arrow[Object.keys(arrow)[1]].className).toBe('iss__arrowIcon iss__stats__table--icon ');
         fireEvent.click(row);
 
-        expect(arrow[Object.keys(arrow)[1]].className).toBe('iss__stats__table--icon icon--flip');
+        expect(arrow[Object.keys(arrow)[1]].className).toBe('iss__arrowIcon iss__stats__table--icon icon--flip');
 
         testRows(el.children, depth+1);
       }

diff --git a/frontend-app/src/components/common/TableBodySet/index.jsx b/frontend-app/src/components/common/TableBodySet/index.jsx
@@ -47,6 +47,7 @@ export default function TableBodySet({ bodySet, countCallback, parent, depth })
               {
                 children &&
                 <Arrow
+                  data-testid='table-row-icon'
                   point={childWrap.includes(index) ? "top" : "bot"}
                   color={!childWrap.includes(index) && "black"}
                   classes={["iss__stats__table--icon", childWrap.includes(index) ? "icon--flip" : ""]}

diff --git a/frontend-app/src/components/ui/Arrow/component.test.js b/frontend-app/src/components/ui/Arrow/component.test.js
@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/react';
+import Arrow from ".";
+
+test("arrow component test", () => {
+  var triggered;
+
+  const { rerender, container } = render(<Arrow />);
+  const arrow = () => container.querySelector("svg");
+  expect(arrow().style.rotate).toBe("0deg");
+  expect(arrow().style.fill).toBe("#62abff");
+  expect(container.querySelector(".iss__arrowIcon.a.b")).toBeNull();
+
+  rerender(
+    <Arrow
+      color="red"
+      point="top"
+      classes={["a", "b"]}
+      onClick={() => triggered = true}
+    />
+  );
+  expect(arrow().style.rotate).toBe("180deg");
+  expect(arrow().style.fill).toBe("red");
+  expect(container.querySelector(".iss__arrowIcon.a.b")).not.toBeNull();
+  expect(triggered).toBeFalsy();
+
+  fireEvent.click(arrow());
+  expect(triggered).toBeTruthy();
+});