@griddo/ax 1.71.0 → 1.72.0

package/src/__tests__/components/TableFilters/LiveFilter/LiveFilter.test.tsx

@@ -0,0 +1,265 @@
+import * as React from "react";
+import axios from "axios";
+import { ThemeProvider } from "styled-components";
+import { CalledWithMock, mock } from "jest-mock-extended";
+import { render, screen, cleanup, act, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+
+import LiveFilter, { ILiveFilterProps } from "@ax/components/TableFilters/LiveFilter";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+const defaultProps = mock<ILiveFilterProps>();
+
+describe("LiveFilter component rendering", () => {
+  it("should render live filter", async () => {
+    defaultProps.isStructuredData = false;
+    defaultProps.value = "all";
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItems;
+    const data = {
+      data: [
+        { id: 1, title: "Offline", status: "offline" },
+        { id: 2, title: "Publication pending", status: "upload-pending" },
+        { id: 3, title: "Live", status: "active" },
+        { id: 4, title: "Offline pending", status: "offline-pending" },
+        { id: 5, title: "Live & modified", status: "modified" },
+        { id: 6, title: "Publication scheduled", status: "scheduled" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilter = screen.getByTestId("floating-menu");
+    expect(liveFilter).toBeTruthy();
+    expect(liveFilter.textContent).toEqual("Live");
+  });
+
+  it("should render the component with no options", async () => {
+    defaultProps.isStructuredData = false;
+    defaultProps.value = "all";
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItems;
+
+    const data = {
+      data: [],
+      status: 500,
+      statusText: "Internal Server Error",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilterButton = screen.getByTestId("floating-menu-button");
+    expect(liveFilterButton).toBeTruthy();
+    fireEvent.click(liveFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldInputs = screen.getAllByTestId<HTMLInputElement>("check-field-input");
+    expect(checkFieldInputs).toHaveLength(1);
+  });
+});
+
+describe("LiveFilter events", () => {
+  it("should render check group on click", async () => {
+    defaultProps.isStructuredData = false;
+    defaultProps.value = "all";
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { id: 1, title: "Offline", status: "offline" },
+        { id: 2, title: "Publication pending", status: "upload-pending" },
+        { id: 3, title: "Live", status: "active" },
+        { id: 4, title: "Offline pending", status: "offline-pending" },
+        { id: 5, title: "Live & modified", status: "modified" },
+        { id: 6, title: "Publication scheduled", status: "scheduled" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilterButton = screen.getByTestId("floating-menu-button");
+    expect(liveFilterButton).toBeTruthy();
+    fireEvent.click(liveFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldLabels = screen.getAllByTestId("check-field-label");
+    expect(checkFieldLabels).toHaveLength(7);
+  });
+
+  it("should check option on click", async () => {
+    defaultProps.isStructuredData = false;
+    defaultProps.value = "all";
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { id: 1, title: "Offline", status: "offline" },
+        { id: 2, title: "Publication pending", status: "upload-pending" },
+        { id: 3, title: "Live", status: "active" },
+        { id: 4, title: "Offline pending", status: "offline-pending" },
+        { id: 5, title: "Live & modified", status: "modified" },
+        { id: 6, title: "Publication scheduled", status: "scheduled" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilterButton = screen.getByTestId("floating-menu-button");
+    expect(liveFilterButton).toBeTruthy();
+    fireEvent.click(liveFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldInputs = screen.getAllByTestId<HTMLInputElement>("check-field-input");
+    expect(checkFieldInputs).toHaveLength(7);
+    fireEvent.click(checkFieldInputs[1]);
+    expect(checkFieldInputs[1].checked).toBe(true);
+  });
+
+  it("should uncheck selected option on click and select 'All' option", async () => {
+    defaultProps.isStructuredData = false;
+    defaultProps.value = "all";
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { id: 1, title: "Offline", status: "offline" },
+        { id: 2, title: "Publication pending", status: "upload-pending" },
+        { id: 3, title: "Live", status: "active" },
+        { id: 4, title: "Offline pending", status: "offline-pending" },
+        { id: 5, title: "Live & modified", status: "modified" },
+        { id: 6, title: "Publication scheduled", status: "scheduled" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilterButton = screen.getByTestId("floating-menu-button");
+    expect(liveFilterButton).toBeTruthy();
+    fireEvent.click(liveFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkGroupFieldGroup = screen.getByTestId("check-group-field-group");
+    expect(checkGroupFieldGroup).toBeTruthy();
+    const checkFieldInputs = screen.getAllByTestId<HTMLInputElement>("check-field-input");
+    expect(checkFieldInputs).toHaveLength(7);
+    fireEvent.click(checkFieldInputs[1]);
+    expect(checkFieldInputs[1].checked).toBe(true);
+    fireEvent.click(checkFieldInputs[1]);
+    expect(checkFieldInputs[1].checked).toBe(false);
+    expect(checkFieldInputs[0].checked).toBe(true);
+
+    expect(filterItemsMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("should call filterItems action on change", async () => {
+    defaultProps.isStructuredData = false;
+    defaultProps.value = "all";
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { id: 1, title: "Offline", status: "offline" },
+        { id: 2, title: "Publication pending", status: "upload-pending" },
+        { id: 3, title: "Live", status: "active" },
+        { id: 4, title: "Offline pending", status: "offline-pending" },
+        { id: 5, title: "Live & modified", status: "modified" },
+        { id: 6, title: "Publication scheduled", status: "scheduled" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <LiveFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const liveFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(liveFilterButton).toBeTruthy();
+    fireEvent.click(liveFilterButton);
+    const checkFieldInputs = screen.queryAllByTestId("check-field-input");
+    fireEvent.click(checkFieldInputs[1]);
+    expect(filterItemsMock).toHaveBeenCalledTimes(1);
+    expect(filterItemsMock).toBeCalledWith("liveStatus", "offline");
+  });
+});

package/src/__tests__/components/TableFilters/NameFilter/NameFilter.test.tsx

@@ -0,0 +1,197 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { CalledWithMock, mock } from "jest-mock-extended";
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+import { parseTheme } from "@ax/helpers";
+
+import globalTheme from "@ax/themes/theme.json";
+import NameFilter, { INameFilterProps } from "@ax/components/TableFilters/NameFilter";
+
+afterEach(cleanup);
+const defaultProps = mock<INameFilterProps>();
+describe("NameFilter component rendering", () => {
+  it("should render name filter", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.urlSorting = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const nameFilter = screen.getByTestId("name-filter-header");
+    expect(nameFilter).toBeTruthy();
+    expect(nameFilter.textContent).toEqual("Name");
+  });
+
+  it("should render URL on title if it is URL sorting", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: true, sortedByTitle: true };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.urlSorting = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const nameFilter = screen.getByTestId("name-filter-header");
+    expect(nameFilter).toBeTruthy();
+    expect(nameFilter.textContent).toEqual("Name & URL");
+  });
+
+  it("should render URL sorting option if it is URL sorting", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: true, sortedByTitle: true };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.urlSorting = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const nameFilterButton = screen.getByTestId("floating-menu-button");
+    expect(nameFilterButton).toBeTruthy();
+    fireEvent.click(nameFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(3);
+  });
+
+  it("should render interactive arrow if not filter selected", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false, sortedByTitle: false, sortedByURL: false };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.urlSorting = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const interactiveArrow = screen.getByTestId("name-filter-interactive-arrow");
+    expect(interactiveArrow).toBeTruthy();
+  });
+
+  it("should not render interactive arrow if not filter selected", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: false, sortedByTitle: true };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.urlSorting = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const interactiveArrow = screen.queryByTestId("name-filter-interactive-arrow");
+    expect(interactiveArrow).toBeFalsy();
+  });
+
+  it("should render FullArrowUp icon if is filtered by ascending name", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: true, sortedByTitle: true };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.urlSorting = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const arrowIcon = screen.getByTestId("icon-component");
+    expect(arrowIcon).toBeTruthy();
+  });
+});
+
+describe("NameFilter events", () => {
+  it("should render check group on click", () => {
+    const onClickMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const nameFilterButton = screen.getByTestId("floating-menu-button");
+    expect(nameFilterButton).toBeTruthy();
+    fireEvent.click(nameFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0].textContent).toEqual("Ascendent");
+    expect(listItems[1].textContent).toEqual("Descendent");
+  });
+
+  it("should call filterItems with isAscending on click 'Ascendent' option", async () => {
+    const onClickMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const nameFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(nameFilterButton).toBeTruthy();
+    fireEvent.click(nameFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+
+    fireEvent.click(listItems[0]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    const isAscending = true;
+    expect(onClickMock).toBeCalledWith("title", isAscending);
+  });
+
+  it("should call filterItems with isAscending false on click 'Descendent' option", async () => {
+    const onClickMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = onClickMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NameFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const nameFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(nameFilterButton).toBeTruthy();
+    fireEvent.click(nameFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+
+    fireEvent.click(listItems[1]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    const isAscending = false;
+    expect(onClickMock).toBeCalledWith("title", isAscending);
+  });
+});