@griddo/ax 1.71.0 → 1.72.0

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

@@ -0,0 +1,317 @@
+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 SiteFilter, { ISiteFilterProps } from "@ax/components/TableFilters/SiteFilter";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+const defaultProps = mock<ISiteFilterProps>();
+
+describe("SiteFilter component rendering", () => {
+  it("should render site filter with label", async () => {
+    defaultProps.value = { order: "", filterSites: "noFilter" };
+    defaultProps.pointer = "filterSites";
+    defaultProps.center = true;
+    defaultProps.label = "Site";
+    defaultProps.selectAllOption = "noFilter";
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All",
+      },
+    ];
+    const filterItems = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItems;
+    const data = {
+      data: [
+        { value: 1, label: "Site 1" },
+        { value: 2, label: "Site 2" },
+        { value: 3, label: "Site 3" },
+        { value: 4, label: "Site 4" },
+        { value: 5, label: "Site 5" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <SiteFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const siteFilter = screen.getByTestId("floating-menu");
+    expect(siteFilter).toBeTruthy();
+    expect(siteFilter.textContent).toEqual("Site");
+  });
+
+  it("should render the component with no options", async () => {
+    defaultProps.value = { order: "", filterSites: "noFilter" };
+    defaultProps.pointer = "filterSites";
+    defaultProps.center = true;
+    defaultProps.label = "Site";
+    defaultProps.selectAllOption = "noFilter";
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "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)}>
+          <SiteFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const siteFilterButton = screen.getByTestId("floating-menu-button");
+    expect(siteFilterButton).toBeTruthy();
+    fireEvent.click(siteFilterButton);
+    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("SiteFilter events", () => {
+  it("should render check group on click", async () => {
+    defaultProps.value = { order: "", filterSites: "noFilter" };
+    defaultProps.pointer = "filterSites";
+    defaultProps.center = true;
+    defaultProps.label = "Site";
+    defaultProps.selectAllOption = "noFilter";
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All",
+      },
+    ];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { value: 1, label: "Site 1" },
+        { value: 2, label: "Site 2" },
+        { value: 3, label: "Site 3" },
+        { value: 4, label: "Site 4" },
+        { value: 5, label: "Site 5" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <SiteFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const siteFilterButton = screen.getByTestId("floating-menu-button");
+    expect(siteFilterButton).toBeTruthy();
+    fireEvent.click(siteFilterButton);
+    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(6);
+  });
+
+  it("should check option on click", async () => {
+    defaultProps.value = { order: "", filterSites: "noFilter" };
+    defaultProps.pointer = "filterSites";
+    defaultProps.center = true;
+    defaultProps.label = "Site";
+    defaultProps.selectAllOption = "noFilter";
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All",
+      },
+    ];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { value: 1, label: "Site 1" },
+        { value: 2, label: "Site 2" },
+        { value: 3, label: "Site 3" },
+        { value: 4, label: "Site 4" },
+        { value: 5, label: "Site 5" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <SiteFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const siteFilterButton = screen.getByTestId("floating-menu-button");
+    expect(siteFilterButton).toBeTruthy();
+    fireEvent.click(siteFilterButton);
+    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(6);
+    fireEvent.click(checkFieldInputs[1]);
+    expect(checkFieldInputs[1].checked).toBe(true);
+  });
+
+  it("should uncheck checked option on click", async () => {
+    defaultProps.value = { order: "", filterSites: "noFilter" };
+    defaultProps.pointer = "filterSites";
+    defaultProps.center = true;
+    defaultProps.label = "Site";
+    defaultProps.selectAllOption = "noFilter";
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All",
+      },
+    ];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { value: 1, label: "Site 1" },
+        { value: 2, label: "Site 2" },
+        { value: 3, label: "Site 3" },
+        { value: 4, label: "Site 4" },
+        { value: 5, label: "Site 5" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <SiteFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const siteFilterButton = screen.getByTestId("floating-menu-button");
+    expect(siteFilterButton).toBeTruthy();
+    fireEvent.click(siteFilterButton);
+    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(6);
+    fireEvent.click(checkFieldInputs[1]);
+    expect(checkFieldInputs[1].checked).toBe(true);
+    fireEvent.click(checkFieldInputs[1]);
+    expect(checkFieldInputs[1].checked).toBe(false);
+  });
+
+  it("should call filterItems action on change", async () => {
+    defaultProps.value = { order: "", filterSites: "noFilter" };
+    defaultProps.pointer = "filterSites";
+    defaultProps.center = true;
+    defaultProps.label = "Site";
+    defaultProps.selectAllOption = "noFilter";
+    defaultProps.filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All",
+      },
+    ];
+    const filterItemsMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]>;
+
+    defaultProps.filterItems = filterItemsMock;
+    const data = {
+      data: [
+        { value: 1, label: "Site 1" },
+        { value: 2, label: "Site 2" },
+        { value: 3, label: "Site 3" },
+        { value: 4, label: "Site 4" },
+        { value: 5, label: "Site 5" },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <SiteFilter {...defaultProps} />
+        </ThemeProvider>
+      );
+    });
+
+    const siteFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(siteFilterButton).toBeTruthy();
+    fireEvent.click(siteFilterButton);
+    const checkFieldInputs = screen.queryAllByTestId("check-field-input");
+    fireEvent.click(checkFieldInputs[1]);
+    expect(filterItemsMock).toHaveBeenCalledTimes(1);
+    expect(filterItemsMock).toBeCalledWith("filterSites", "1");
+  });
+});

package/src/__tests__/components/TableFilters/StatusFilter/StatusFilter.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 StatusFilter, { IStatusFilterProps } from "@ax/components/TableFilters/StatusFilter";
+
+afterEach(cleanup);
+const defaultProps = mock<IStatusFilterProps>();
+describe("StatusFilter component rendering", () => {
+  it("should render date 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.isStructuredData = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const statusFilter = screen.getByTestId("status-filter-header");
+    expect(statusFilter).toBeTruthy();
+    expect(statusFilter.textContent).toEqual("Status");
+  });
+
+  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.isStructuredData = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const interactiveArrow = screen.queryByTestId("status-filter-interactive-arrow");
+    expect(interactiveArrow).toBeTruthy();
+  });
+
+  it("should render FullArrowUp icon if is filtered by most recent", () => {
+    const onClickMock = jest.fn() as CalledWithMock<any, [orderPointer: string, isAscendent: boolean]> &
+      ((orderPointer: string, isAscendent: boolean) => any);
+    defaultProps.sortedState = { isAscending: false, sortedByDate: true, sortedByTitle: false, sortedByURL: false };
+    defaultProps.sortItems = onClickMock;
+    defaultProps.isStructuredData = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const arrowIcon = screen.getByTestId("icon-component");
+    expect(arrowIcon).toBeTruthy();
+  });
+});
+
+describe("StatusFilter 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)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const statusFilterButton = screen.getByTestId("floating-menu-button");
+    expect(statusFilterButton).toBeTruthy();
+    fireEvent.click(statusFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+  });
+
+  it("should call sortItems function with 'modified, true' as param when it's not structured data and is ascending", 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)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const statusFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(statusFilterButton).toBeTruthy();
+    fireEvent.click(statusFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0].textContent).toEqual("Most recent");
+    expect(listItems[1].textContent).toEqual("Oldest");
+
+    fireEvent.click(listItems[1]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    const isAscending = true;
+    expect(onClickMock).toBeCalledWith("modified", isAscending);
+  });
+
+  it("should call sortItems function with 'date, true' as param when it's not structured data and is asceding", 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);
+    defaultProps.isStructuredData = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const statusFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(statusFilterButton).toBeTruthy();
+    fireEvent.click(statusFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0].textContent).toEqual("Most recent");
+    expect(listItems[1].textContent).toEqual("Oldest");
+
+    fireEvent.click(listItems[1]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    expect(onClickMock).toBeCalledWith("date", true);
+  });
+
+  it("should call sortItems function with 'modified, false' as param when it's not structured data and is not ascending", 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);
+    defaultProps.isStructuredData = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const statusFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(statusFilterButton).toBeTruthy();
+    fireEvent.click(statusFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0].textContent).toEqual("Most recent");
+    expect(listItems[1].textContent).toEqual("Oldest");
+
+    fireEvent.click(listItems[0]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    const isAscending = false;
+    expect(onClickMock).toBeCalledWith("modified", isAscending);
+  });
+
+  it("should call sortItems function with 'date, false' as param when it's not structured data and is not asceding", 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);
+    defaultProps.isStructuredData = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <StatusFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const statusFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(statusFilterButton).toBeTruthy();
+    fireEvent.click(statusFilterButton);
+    const listItems = screen.getAllByTestId("list-item");
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0].textContent).toEqual("Most recent");
+    expect(listItems[1].textContent).toEqual("Oldest");
+
+    fireEvent.click(listItems[0]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    expect(onClickMock).toBeCalledWith("date", false);
+  });
+});

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

@@ -0,0 +1,157 @@
+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 TranslationsFilter, { ITranslationsFilterProps } from "@ax/components/TableFilters/TranslationsFilter";
+
+afterEach(cleanup);
+const defaultProps = mock<ITranslationsFilterProps>();
+describe("TranslationsFilter component rendering", () => {
+  it("should render name filter", () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const translationFilter = screen.getByTestId("translation-filter-header");
+    expect(translationFilter).toBeTruthy();
+    expect(translationFilter.textContent).toEqual("Trans.");
+  });
+
+  it("should render icon's wrapper", () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const interactiveArrow = screen.getByTestId("translation-filter-icons-wrapper");
+    expect(interactiveArrow).toBeTruthy();
+  });
+
+  it("should render options", async () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const translationFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(translationFilterButton).toBeTruthy();
+    fireEvent.click(translationFilterButton);
+    const checksFieldLabels = screen.getAllByTestId("check-field-label");
+
+    expect(checksFieldLabels).toHaveLength(2);
+    expect(checksFieldLabels[0].textContent).toEqual("All");
+    expect(checksFieldLabels[1].textContent).toEqual("Not translated content");
+  });
+});
+
+describe("TranslationsFilter events", () => {
+  it("should render check group on click", () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const translationFilterButton = screen.getByTestId("floating-menu-button");
+    expect(translationFilterButton).toBeTruthy();
+    fireEvent.click(translationFilterButton);
+    const floatingMenu = screen.getByTestId("floating-menu");
+    expect(floatingMenu).toBeTruthy();
+    const checkInputs = screen.getAllByTestId("check-field-input");
+    expect(checkInputs).toHaveLength(2);
+  });
+
+  it("should call filterItems with 'all' on click 'All' option", async () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const translationFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(translationFilterButton).toBeTruthy();
+    fireEvent.click(translationFilterButton);
+    const checksFieldInputs = screen.getAllByTestId("check-field-input");
+
+    fireEvent.click(checksFieldInputs[0]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    expect(onClickMock).toBeCalledWith("translated", "all");
+  });
+
+  it("should call filterItems with 'no' on click 'Not translated content' option", async () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const translationFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(translationFilterButton).toBeTruthy();
+    fireEvent.click(translationFilterButton);
+    const checksFieldInputs = screen.getAllByTestId("check-field-input");
+
+    fireEvent.click(checksFieldInputs[1]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    expect(onClickMock).toBeCalledWith("translated", "no");
+  });
+
+  it("should close floating menu when option is checked", async () => {
+    const onClickMock = jest.fn() as CalledWithMock<void, [pointer: string, filter: string]> &
+      ((pointer: string, filter: string) => void);
+    defaultProps.value = "all";
+    defaultProps.filterItems = onClickMock;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <TranslationsFilter {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const translationFilterButton = screen.getByTestId("floating-menu-button");
+
+    expect(translationFilterButton).toBeTruthy();
+    fireEvent.click(translationFilterButton);
+    const checksFieldInputs = screen.getAllByTestId("check-field-input");
+    fireEvent.click(checksFieldInputs[1]);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+    const checksWrapper = screen.queryByTestId("translation-filter-checks-wrapper");
+    expect(checksWrapper).toBeFalsy();
+  });
+});