@logora/debate 0.1.0 → 0.2.0

package/src/components/list/paginated_list/PaginatedList.test.jsx

@@ -1,1335 +0,0 @@
-import React from "react";
-import { render, screen, act } from "@testing-library/react";
-import { IntlProvider } from "react-intl";
-import { BrowserRouter } from "react-router-dom";
-import {
-  dataProvider,
-  DataProviderContext,
-} from "@logora/debate/data/data_provider";
-import { ResponsiveProvider } from "@logora/debate/hooks/use_responsive";
-import { ListProvider, useList } from "@logora/debate/list/list_provider";
-import { PaginatedList } from "./PaginatedList";
-import StandardErrorBoundary from "@logora/debate/error/standard_error_boundary";
-import userEvent from "@testing-library/user-event";
-import { IconProvider } from "@logora/debate/icons/icon_provider";
-
-import * as regularIcons from "@logora/debate/icons/regular_icons";
-import { faker } from "@faker-js/faker";
-
-const createElement = () => {
-  return {
-    id: faker.string.numeric(6),
-    name: faker.music.songName(),
-  };
-};
-
-const httpClient = {
-  get: () =>
-    Promise.resolve({
-      status: 200,
-      data: {
-        success: true,
-        data: Array.from({ length: 3 }, createElement),
-      },
-    }),
-};
-
-const ListItem = (props) => {
-  return <p>{props.item.name}</p>;
-};
-
-const data = dataProvider(httpClient, "https://mock.example.api");
-
-const DefaultList = () => {
-  return (
-    <BrowserRouter>
-      <IntlProvider locale="en">
-        <ListProvider>
-          <IconProvider library={regularIcons}>
-            <ResponsiveProvider>
-              <DataProviderContext.Provider value={{ dataProvider: data }}>
-                <PaginatedList
-                  currentListId={"itemList"}
-                  resource={"items"}
-                  sort={"-created_at"}
-                  resourcePropName={"item"}
-                  perPage={10}
-                  withPagination={false}
-                  countless={true}
-                  display="column"
-                  perPageParam={"porut"}
-                >
-                  <ListItem />
-                </PaginatedList>
-              </DataProviderContext.Provider>
-            </ResponsiveProvider>
-          </IconProvider>
-        </ListProvider>
-      </IntlProvider>
-    </BrowserRouter>
-  );
-};
-
-describe("PaginatedList", () => {
-  let mock;
-
-  beforeEach(() => {
-    mock = vi.spyOn(httpClient, "get");
-  });
-
-  afterEach(() => {
-    mock.mockRestore();
-    mock.mockClear();
-  });
-
-  it("should render a basic list with correct content", async () => {
-    await act(async () => {
-      render(<DefaultList />);
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-  });
-
-  it("should show the specific loader component passed as props ", async () => {
-    render(
-      <BrowserRouter>
-        <IntlProvider locale="en">
-          <ListProvider>
-            <IconProvider library={regularIcons}>
-              <ResponsiveProvider>
-                <DataProviderContext.Provider value={{ dataProvider: data }}>
-                  <PaginatedList
-                    currentListId={"itemList"}
-                    resource={"items"}
-                    sort={"-created_at"}
-                    resourcePropName={"item"}
-                    perPage={1}
-                    withPagination
-                    display="column"
-                    numberElements={3}
-                    loadingComponent={<p>Loading...</p>}
-                  >
-                    <ListItem />
-                  </PaginatedList>
-                </DataProviderContext.Provider>
-              </ResponsiveProvider>
-            </IconProvider>
-          </ListProvider>
-        </IntlProvider>
-      </BrowserRouter>
-    );
-
-    await act(async () => {
-      expect(screen.getAllByText("Loading...")).toBeTruthy();
-    });
-  });
-
-  it("should trow an error when data loading fails ", async () => {
-    mock.mockImplementation(() =>
-      Promise.reject({
-        status: 500,
-        data: {},
-      })
-    );
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <StandardErrorBoundary>
-            <IntlProvider locale="en">
-              <ListProvider>
-                <IconProvider library={regularIcons}>
-                  <ResponsiveProvider>
-                    <DataProviderContext.Provider
-                      value={{ dataProvider: data }}
-                    >
-                      <PaginatedList
-                        currentListId={"itemList"}
-                        resource={"items"}
-                        sort={"-created_at"}
-                        resourcePropName={"item"}
-                        perPage={1}
-                        withPagination
-                        display="column"
-                        numberElements={3}
-                        loadingComponent={<p>Loading...</p>}
-                      >
-                        <ListItem />
-                      </PaginatedList>
-                    </DataProviderContext.Provider>
-                  </ResponsiveProvider>
-                </IconProvider>
-              </ListProvider>
-            </IntlProvider>
-          </StandardErrorBoundary>
-        </BrowserRouter>
-      );
-    });
-
-    expect(screen.getByText("Error when loading content.")).toBeTruthy();
-  });
-
-  it("should render a fallback message when no data is retrieved", async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      data: {
-        success: true,
-        data: [],
-      },
-    });
-
-    await act(async () => {
-      render(<DefaultList />);
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.queryAllByTestId("list-item")).toHaveLength(0);
-    expect(screen.queryByText("No items for now.")).toBeTruthy();
-  });
-
-  it("should render a list with a pagination button", async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      data: {
-        success: true,
-        data: Array.from({ length: 1 }, createElement),
-      },
-    });
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      sort={"-created_at"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      numberElements={3}
-                      display="column"
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.getAllByTestId("list-item")).toHaveLength(1);
-    expect(screen.getByText("See more")).toBeTruthy();
-  });
-
-  it("should render a list with a search bar", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      sort={"-created_at"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      numberElements={3}
-                      searchBar
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-    expect(screen.getByText("Search")).toBeTruthy();
-  });
-
-  it("should render a list with a title", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      sort={"-created_at"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      numberElements={3}
-                      title={"My title"}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-    expect(screen.getByText("My title")).toBeTruthy();
-  });
-
-  it("should render a list with a sort select", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      sort={"-created_at"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-    expect(screen.queryByText("recent")).toBeTruthy();
-  });
-
-  it("should render an empty list with a component passed as props", async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      data: {
-        success: true,
-        data: [],
-      },
-    });
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      sort={"-created_at"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      emptyListComponent={<p>Empty list</p>}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenCalled();
-    expect(screen.queryByText("Empty list")).toBeTruthy();
-    expect(screen.queryByText("Aucun élément pour le moment.")).toBeFalsy();
-  });
-
-  it("should call api on sort select click", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-
-    const dropdownFirstOption = screen.getByText(/recent/i);
-    expect(screen.queryByText(/oldest/i)).toBeNull();
-
-    await userEvent.click(dropdownFirstOption);
-
-    const oldestSortButton = screen.getByText(/oldest/i);
-    expect(oldestSortButton).toBeTruthy();
-    await userEvent.click(oldestSortButton);
-  });
-
-  it("should call api on pagination click", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      numberElements={10}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenLastCalledWith(
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(mock).toHaveBeenCalledTimes(1);
-
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-    const paginationButton = screen.getByText(/See more/i);
-    expect(paginationButton).toBeTruthy();
-
-    await userEvent.click(paginationButton);
-    expect(mock).toHaveBeenCalled();
-    expect(screen.getAllByTestId("list-item")).toHaveLength(6);
-  });
-
-  it("should call api correctly after pagination and sort click", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      numberElements={10}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "-oldest",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenLastCalledWith(
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(mock).toHaveBeenCalledTimes(1);
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-
-    const paginationButton = screen.getByText(/See more/i);
-    expect(paginationButton).toBeTruthy();
-    await userEvent.click(paginationButton);
-
-    expect(mock).toHaveBeenLastCalledWith(
-      "https://mock.example.api/items?page=2&per_page=1&sort=-created_at&api_key="
-    );
-    expect(mock).toHaveBeenCalledTimes(2);
-    expect(screen.getAllByTestId("list-item")).toHaveLength(6);
-
-    const dropdownFirstOption = screen.getByText(/recent/i);
-    expect(screen.queryByText(/oldest/i)).toBeNull();
-
-    await userEvent.click(dropdownFirstOption);
-
-    const oldestSortButton = screen.getByText(/oldest/i);
-    expect(oldestSortButton).toBeTruthy();
-    await userEvent.click(oldestSortButton);
-
-    expect(mock).toHaveBeenLastCalledWith(
-      "https://mock.example.api/items?page=1&per_page=1&sort=-oldest&api_key="
-    );
-    expect(mock).toHaveBeenCalledTimes(3);
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-  });
-
-  it("should call api with query params if passed as props", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      query={"test"}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&query=test&api_key="
-    );
-  });
-
-  it("should call api when using searchbar", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      searchBar
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-
-    const searchInput = screen.getByTestId("input_search_query");
-    await userEvent.click(searchInput);
-
-    expect(screen.getByText(/Search/i)).toBeTruthy();
-    await userEvent.keyboard("test");
-    await userEvent.keyboard("[Enter]");
-    expect(mock).toHaveBeenCalled();
-  });
-
-  it("should call onElementClick when clicking list item", async () => {
-    const callback = vi.fn();
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      onElementClick={callback}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    const firstElm = screen.queryAllByTestId("list-item")[0];
-    expect(firstElm).toBeTruthy();
-
-    const secondElm = screen.queryAllByTestId("list-item")[1];
-    expect(secondElm).toBeTruthy();
-
-    await userEvent.click(firstElm);
-    expect(callback).toHaveBeenCalled();
-
-    await userEvent.click(secondElm);
-    expect(callback).toHaveBeenCalled();
-  });
-
-  it("should render emptyText prop if no emptyListComponent is passed", async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      data: {
-        success: true,
-        data: [],
-      },
-    });
-
-    const callback = vi.fn();
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      onElementClick={callback}
-                      emptyText={"Empty text"}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    const emptyText = screen.getByText(/Empty text/i);
-    expect(emptyText).toBeTruthy();
-  });
-
-  it("should call api with countless prop if passed", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      countless={true}
-                      display="column"
-                      numberElements={3}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&countless=true&api_key="
-    );
-  });
-
-  it("should render unique elements", async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      data: {
-        success: true,
-        data: [
-          { id: 1, name: "First item" },
-          { id: 1, name: "First item" },
-          { id: 3, name: "Third item" },
-        ],
-      },
-    });
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(screen.queryAllByText("First item").length).toEqual(1);
-    expect(screen.getByText("First item")).toBeTruthy();
-    expect(screen.queryByText("Second item")).toBeFalsy();
-    expect(screen.getByText("Third item")).toBeTruthy();
-  });
-
-  it("should call api with first sortOption from props (getInitSort func)", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      sortOptions={[
-                        {
-                          name: "test",
-                          value: "-test",
-                          type: "sort",
-                          text: "test",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-test&api_key="
-    );
-  });
-
-  it('should call onUpdateTotal func if passed as prop and headers["total"] is present', async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      headers: {
-        total: 3,
-      },
-      data: {
-        success: true,
-        data: [
-          { id: 1, name: "First item" },
-          { id: 2, name: "Second item" },
-          { id: 3, name: "Third item" },
-        ],
-      },
-    });
-
-    const callback = vi.fn();
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      onUpdateTotal={callback}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(callback).toHaveBeenNthCalledWith(1, 3);
-  });
-
-  it("should call api with first sortOptions filter type from props (getInitFilters func)", async () => {
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      sortOptions={[
-                        {
-                          name: "popular",
-                          value: "true",
-                          type: "filter",
-                          textKey: "info.sort_by_popular",
-                        },
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          textKey: "info.sort_by_newest",
-                        },
-                        {
-                          name: "old",
-                          value: "+created_at",
-                          textKey: "info.sort_by_oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&popular=true&api_key="
-    );
-  });
-
-  it("should use transformData filter func if passed as prop", async () => {
-    mock.mockResolvedValue({
-      status: 200,
-      headers: {
-        total: 3,
-      },
-      data: {
-        success: true,
-        data: [
-          { id: 1, name: "First item" },
-          { id: 2, name: "Second item" },
-          { id: 3, name: "Third item" },
-        ],
-      },
-    });
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      transformData={(elm) => elm.id !== 1}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(screen.queryByText("First item")).toBeFalsy();
-    expect(screen.getByText("Second item")).toBeTruthy();
-    expect(screen.getByText("Third item")).toBeTruthy();
-  });
-
-  it("should call onElementsLoad if passed as props", async () => {
-    const callback = vi.fn();
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      withPagination
-                      display="column"
-                      numberElements={3}
-                      onElementsLoad={callback}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenNthCalledWith(
-      1,
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(callback).toHaveBeenCalled();
-  });
-
-  it("should add elements through useList hook", async () => {
-    const myElements = Array.from({ length: 4 }, createElement);
-
-    const AddElementsComponent = () => {
-      const list = useList();
-
-      const handleAdd = () => {
-        list.add("itemList", myElements);
-      };
-
-      return <button onClick={handleAdd}>Add elements</button>;
-    };
-
-    const callback = vi.fn();
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ResponsiveProvider>
-              <DataProviderContext.Provider value={{ dataProvider: data }}>
-                <IconProvider library={regularIcons}>
-                  <ListProvider>
-                    <AddElementsComponent />
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      sort={"-created_at"}
-                      resourcePropName={"item"}
-                      perPage={10}
-                      withPagination={false}
-                      countless={true}
-                      display="column"
-                      onElementsLoad={callback}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </ListProvider>
-                </IconProvider>
-              </DataProviderContext.Provider>
-            </ResponsiveProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-
-    const addButton = screen.getByText("Add elements");
-    expect(addButton).toBeTruthy();
-
-    await act(async () => {
-      await userEvent.click(addButton);
-    });
-
-    expect(screen.getAllByTestId("list-item")).toHaveLength(7);
-  });
-
-  it("should use callback if passed on pagination click", async () => {
-    const callback = vi.fn();
-
-    await act(async () => {
-      render(
-        <BrowserRouter>
-          <IntlProvider locale="en">
-            <ListProvider>
-              <IconProvider library={regularIcons}>
-                <ResponsiveProvider>
-                  <DataProviderContext.Provider value={{ dataProvider: data }}>
-                    <PaginatedList
-                      currentListId={"itemList"}
-                      resource={"items"}
-                      resourcePropName={"item"}
-                      perPage={1}
-                      display="column"
-                      numberElements={10}
-                      onLoadNewPage={callback}
-                      sortOptions={[
-                        {
-                          name: "recent",
-                          value: "-created_at",
-                          type: "sort",
-                          text: "recent",
-                        },
-                        {
-                          name: "old",
-                          type: "sort",
-                          value: "+created_at",
-                          text: "oldest",
-                        },
-                      ]}
-                    >
-                      <ListItem />
-                    </PaginatedList>
-                  </DataProviderContext.Provider>
-                </ResponsiveProvider>
-              </IconProvider>
-            </ListProvider>
-          </IntlProvider>
-        </BrowserRouter>
-      );
-    });
-
-    expect(mock).toHaveBeenLastCalledWith(
-      "https://mock.example.api/items?page=1&per_page=1&sort=-created_at&api_key="
-    );
-    expect(mock).toHaveBeenCalledTimes(1);
-
-    expect(screen.getAllByTestId("list-item")).toHaveLength(3);
-    const paginationButton = screen.getByText(/See more/i);
-    expect(paginationButton).toBeTruthy();
-
-    await userEvent.click(paginationButton);
-    expect(callback).toHaveBeenCalled();
-  });
-});