@griddo/ax 1.71.0 → 1.72.2

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

@@ -0,0 +1,241 @@
+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, fireEvent, act } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import CategoryFilter, { ICategoryFilterProps } from "@ax/components/TableFilters/CategoryFilter";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const defaultProps = mock<ICategoryFilterProps>();
+
+describe("Category filter component rendering", () => {
+  it("should render category filter", async () => {
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = filterItemsMock;
+    defaultProps.value = "all";
+    defaultProps.structuredData = {
+      from: "profile",
+      indexable: true,
+      key: "profile",
+      showList: true,
+      source: "STORY_PROFILE",
+      title: "Profile",
+      type: "AsyncCheckGroup",
+    };
+    const data = {
+      data: [
+        { name: 1, title: "Mentor", value: 1 },
+        { name: 2, title: "Professor", value: 2 },
+        { name: 3, title: "Student", value: 3 },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <CategoryFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const categoryFilter = screen.getByTestId("floating-menu");
+    expect(categoryFilter).toBeTruthy();
+    expect(categoryFilter.textContent).toEqual("Profile");
+  });
+
+  it("should render the component with no options", async () => {
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = filterItemsMock;
+    defaultProps.value = "all";
+    defaultProps.structuredData = {
+      from: "profile",
+      indexable: true,
+      key: "profile",
+      showList: true,
+      source: "STORY_PROFILE",
+      title: "Profile",
+      type: "AsyncCheckGroup",
+    };
+    const data = {
+      data: [],
+      status: 500,
+      statusText: "Internal Server Error",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <CategoryFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const categoryFilterButton = screen.getByTestId("floating-menu-button");
+    expect(categoryFilterButton).toBeTruthy();
+    fireEvent.click(categoryFilterButton);
+    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("CategoryFilter events", () => {
+  it("should render check group on click floating menu button", async () => {
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = filterItemsMock;
+    defaultProps.value = "all";
+    defaultProps.structuredData = {
+      from: "profile",
+      indexable: true,
+      key: "profile",
+      showList: true,
+      source: "STORY_PROFILE",
+      title: "Profile",
+      type: "AsyncCheckGroup",
+    };
+    const data = {
+      data: [
+        { name: 1, title: "Mentor", value: 1 },
+        { name: 2, title: "Professor", value: 2 },
+        { name: 3, title: "Student", value: 3 },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <CategoryFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    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(4);
+  });
+
+  it("should check option on click", async () => {
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = filterItemsMock;
+    defaultProps.value = "all";
+    defaultProps.structuredData = {
+      from: "profile",
+      indexable: true,
+      key: "profile",
+      showList: true,
+      source: "STORY_PROFILE",
+      title: "Profile",
+      type: "AsyncCheckGroup",
+    };
+    const data = {
+      data: [
+        { name: 1, title: "Mentor", value: 1 },
+        { name: 2, title: "Professor", value: 2 },
+        { name: 3, title: "Student", value: 3 },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <CategoryFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    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(4);
+    fireEvent.change(checkFieldInputs[1], { target: { checked: true, value: "1" } });
+    expect(checkFieldInputs[1].checked).toBe(true);
+  });
+
+  it("should call filterItems action on change", async () => {
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+    defaultProps.filterItems = filterItemsMock;
+    defaultProps.value = "all";
+    defaultProps.structuredData = {
+      from: "profile",
+      indexable: true,
+      key: "profile",
+      showList: true,
+      source: "STORY_PROFILE",
+      title: "Profile",
+      type: "AsyncCheckGroup",
+    };
+    const data = {
+      data: [
+        { name: 1, title: "Mentor", value: 1 },
+        { name: 2, title: "Professor", value: 2 },
+        { name: 3, title: "Student", value: 3 },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <CategoryFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const typeFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(typeFilterButton).toBeTruthy();
+    fireEvent.click(typeFilterButton);
+    const checkFieldInputs = screen.queryAllByTestId("check-field-input");
+    fireEvent.click(checkFieldInputs[1]);
+    expect(filterItemsMock).toHaveBeenCalledTimes(1);
+    expect(filterItemsMock).toBeCalledWith("categories", "1");
+  });
+});

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

@@ -0,0 +1,131 @@
+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 CustomizeFilters, { ICustomizeFiltersProps } from "@ax/components/TableFilters/CustomizeFilters";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ICustomizeFiltersProps>();
+
+describe("CustomizeFilters component rendering", () => {
+  it("should render customize filter", () => {
+    defaultProps.columns = {
+      live: { title: "Live", show: true },
+      profile: { title: "Profile", show: true },
+      site: { title: "Site", show: true },
+      status: { title: "Status", show: true },
+      translation: { title: "Trans.", show: true },
+    };
+    defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CustomizeFilters {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const customizeFilters = screen.getByTestId("customize-filters-wrapper");
+    expect(customizeFilters).toBeTruthy();
+  });
+});
+
+describe("CustomizeFilters events", () => {
+  it("should render check group on click floating menu button", () => {
+    defaultProps.columns = {
+      live: { title: "Live", show: true },
+      profile: { title: "Profile", show: true },
+      site: { title: "Site", show: true },
+      status: { title: "Status", show: true },
+      translation: { title: "Trans.", show: true },
+    };
+    defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CustomizeFilters {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const customizeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(customizeFilterButton).toBeTruthy();
+    fireEvent.click(customizeFilterButton);
+    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(5);
+  });
+
+  it("should check option on click", () => {
+    defaultProps.columns = {
+      live: { title: "Live", show: true },
+      profile: { title: "Profile", show: true },
+      site: { title: "Site", show: true },
+      status: { title: "Status", show: true },
+      translation: { title: "Trans.", show: true },
+    };
+    defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    defaultProps.setColumns = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CustomizeFilters {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const customizeFilterButton = screen.getByTestId("floating-menu-button");
+    expect(customizeFilterButton).toBeTruthy();
+    fireEvent.click(customizeFilterButton);
+    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(5);
+    fireEvent.change(checkFieldInputs[0], { target: { checked: false, value: "site" } });
+    expect(checkFieldInputs[0].checked).toBe(false);
+  });
+
+  it("should call setColumns action on change", async () => {
+    defaultProps.columns = {
+      live: { title: "Live", show: true },
+      profile: { title: "Profile", show: true },
+      site: { title: "Site", show: true },
+      status: { title: "Status", show: true },
+      translation: { title: "Trans.", show: true },
+    };
+    defaultProps.value = ["site", "profile", "live", "status", "translation"];
+    const onChangeMock = jest.fn() as CalledWithMock<void, [newValue: any]> & ((newValue: any) => void);
+    defaultProps.setColumns = onChangeMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CustomizeFilters {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const customizeFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(customizeFilterButton).toBeTruthy();
+    fireEvent.click(customizeFilterButton);
+    const checkFieldInputs = screen.queryAllByTestId("check-field-input");
+    fireEvent.click(checkFieldInputs[0]);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toBeCalledWith({
+      live: { title: "Live", show: false },
+      profile: { title: "Profile", show: true },
+      site: { title: "Site", show: true },
+      status: { title: "Status", show: true },
+      translation: { title: "Trans.", show: true },
+    });
+  });
+});

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

@@ -0,0 +1,148 @@
+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 DateFilter, { IDateFilterProps } from "@ax/components/TableFilters/DateFilter";
+
+afterEach(cleanup);
+const defaultProps = mock<IDateFilterProps>();
+describe("DateFilter component rendering", () => {
+  it("should render date filter", () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dateFilter = screen.getByTestId("date-filter");
+    expect(dateFilter).toBeTruthy();
+    expect(dateFilter.textContent).toEqual("Date");
+  });
+
+  it("should render interactive arrow if not filter selected", () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const interactiveArrow = screen.getByTestId("date-filter-interactive-arrow");
+    expect(interactiveArrow).toBeTruthy();
+  });
+
+  it("should not render interactive arrow if filter selected", () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: true };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const interactiveArrow = screen.queryByTestId("date-filter-interactive-arrow");
+    expect(interactiveArrow).toBeFalsy();
+  });
+
+  it("should render FullArrowUp icon if is filtered by ascending date", () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: true, sortedByDate: true };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const arrowIcon = screen.getByTestId("icon-component");
+    expect(arrowIcon).toBeTruthy();
+  });
+});
+
+describe("DateFilter events", () => {
+  it("should render check group on click floating menu", () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dateFilterButton = screen.getByTestId("floating-menu-button");
+    expect(dateFilterButton).toBeTruthy();
+    fireEvent.click(dateFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0].textContent).toEqual("Most recent");
+    expect(listItems[1].textContent).toEqual("Oldest");
+  });
+
+  it("should call sortItems on click 'Most recent' option", async () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dateFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(dateFilterButton).toBeTruthy();
+    fireEvent.click(dateFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    fireEvent.click(listItems[0]);
+    expect(sortItemsMock).toHaveBeenCalledTimes(1);
+    const isAscending = false;
+    expect(sortItemsMock).toBeCalledWith("date", isAscending);
+  });
+
+  it("should call sortItems ascending on click 'Oldest' option", async () => {
+    const sortItemsMock = jest.fn();
+    defaultProps.sortedState = { isAscending: false, sortedByDate: false };
+    defaultProps.sortItems = sortItemsMock as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DateFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dateFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(dateFilterButton).toBeTruthy();
+    fireEvent.click(dateFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+    fireEvent.click(listItems[1]);
+    expect(sortItemsMock).toHaveBeenCalledTimes(1);
+    const isAscending = true;
+    expect(sortItemsMock).toBeCalledWith("date", isAscending);
+  });
+});