@griddo/ax 1.69.9 → 1.72.1

package/config/jest/componentsMock.js

@@ -1501,30 +1501,4 @@ module.exports = {
       },
     },
   },
-  parseTheme: (theme) => {
-    const color = "#000";
-    const gradient = "#000";
-    const shadow = "#000";
-    const mq = "#000";
-    const textStyle = "#000";
-    const breakpoints = "#000";
-    const fontFamily = "#000";
-
-    const returnObject = {
-      ...theme,
-      fontFamily,
-      color,
-      colors: color,
-      gradient,
-      shadow,
-      mq,
-      textStyle,
-      breakpoints,
-      fontSizes: "#000",
-      negateSpacing: "#000",
-      halfSpacing: "#000",
-      negateHalfSpacing: "#000",
-    };
-    return returnObject;
-  },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.69.9",
+  "version": "1.72.1",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -94,6 +94,7 @@
     "find-up": "^5.0.0",
     "fs-extra": "7.0.1",
     "html-to-draftjs": "^1.5.0",
+    "html-to-image": "^1.9.0",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
     "ignore-loader": "^0.1.2",
@@ -133,7 +134,7 @@
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
     "redux-persist": "6.0.0",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "^2.4.1",
     "reflect-metadata": "0.1.13",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
@@ -225,5 +226,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "58cb140e308cf03cd41d989a58398f159dcdc717"
+  "gitHead": "29a2e695f2b1a46ee994dcc93bf7dae93c470c06"
 }

package/src/Style/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider, createGlobalStyle } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import reset from "styled-reset";
 import { normalize } from "polished";
 import fonts from "./fonts";

package/src/__tests__/components/ElementsTooltip/ElementsTooltip.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { mock } from "jest-mock-extended";
+
+import { parseTheme } from "@ax/helpers";
+
+import ElementsTooltip, { IElementsTooltipProps } from "@ax/components/ElementsTooltip";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IElementsTooltipProps>();
+
+describe("Tooltip component rendering", () => {
+  it("should not render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsTooltipWrapper = screen.queryByTestId("elements-wrapper");
+
+    expect(elementsTooltipWrapper).not.toBeTruthy();
+  });
+
+  it("should render the component with one element visible", () => {
+    defaultProps.elements = ["uno", "dos", "tres"];
+    defaultProps.colors = { uno: "#fff" };
+    defaultProps.rounded = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsWrapper = screen.findByTestId("elements-wrapper");
+    const element = screen.queryAllByTestId("element");
+    const remainingElements = screen.queryByTestId("remaining-element");
+    const divElement = screen.queryAllByTestId("div-element");
+    const rowElement = screen.queryAllByTestId("row-element");
+
+    expect(elementsWrapper).toBeTruthy();
+    expect(element).toHaveLength(1);
+    expect(remainingElements).toHaveTextContent("+2");
+    expect(divElement).toHaveLength(3);
+    expect(rowElement).toHaveLength(3);
+  });
+
+  it("should render the component with three elements visibles", () => {
+    defaultProps.elements = ["uno", "dos", "tres"];
+    defaultProps.defaultElements = 3;
+    defaultProps.maxChar = 1;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsTooltipWrapper = screen.findByTestId("elements-wrapper");
+    const elementTooltip = screen.queryAllByTestId("element");
+    const remainingElements = screen.queryByTestId("remaining-element");
+
+    expect(elementsTooltipWrapper).toBeTruthy();
+    expect(elementTooltip).toHaveLength(3);
+    expect(remainingElements).toBeNull();
+  });
+
+  it("should render the component with one row", () => {
+    defaultProps.elements = ["uno", "dos", "tres"];
+    defaultProps.defaultElements = 1;
+    defaultProps.elementsPerRow = 3;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsWrapper = screen.findByTestId("elements-wrapper");
+    const element = screen.queryAllByTestId("element");
+    const remainingElements = screen.queryByTestId("remaining-element");
+    const divElement = screen.queryAllByTestId("div-element");
+    const rowElement = screen.queryAllByTestId("row-element");
+
+    expect(elementsWrapper).toBeTruthy();
+    expect(element).toHaveLength(1);
+    expect(remainingElements).toHaveTextContent("+2");
+    expect(divElement).toHaveLength(3);
+    expect(rowElement).toHaveLength(1);
+  });
+});

package/src/__tests__/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import EmptyState from "@ax/components/EmptyState";
+import { IEmptyStateProps } from "@ax/types";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IEmptyStateProps>();
+
+describe("EmptyState component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("Oh! This Looks so empty");
+  });
+
+  it("should render the component with title", () => {
+    defaultProps.title = "The title";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("The title");
+  });
+
+  it("should render the component with message", () => {
+    defaultProps.message = "A message";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("A message");
+  });
+});
+
+describe("EmptyState component events", () => {
+  it("should trigger the onClick", () => {
+    const actionFunc = jest.fn();
+    defaultProps.button = "A button";
+    defaultProps.action = actionFunc;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    const buttonComponent = screen.getByTestId("button-line-inverse");
+
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(buttonComponent).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("A button");
+    fireEvent.click(buttonComponent);
+    expect(actionFunc).toBeCalled();
+  });
+});

package/src/__tests__/components/FieldContainer/FieldContainer.test.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import FieldContainer, { IFieldContainerProps } from "@ax/components/FieldContainer";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IFieldContainerProps>();
+
+describe("FieldContainer component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.field = {
+      title: "Title",
+      type: "ComponentContainer",
+      key: "title",
+      hideable: true,
+      slugTo: "/",
+    };
+    defaultProps.updateValue = jest.fn();
+    defaultProps.selectedContent = { id: 1, component: "BasicCard" };
+    defaultProps.objKey = "id";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldContainer {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+  });
+
+  it("should render the FieldsBehavior", () => {
+    defaultProps.field = {
+      title: "Title",
+      type: "TextField",
+      key: "semTitle",
+      hideable: true,
+      slugTo: "/",
+      whiteList: ["BasicCard", "CollectionCard"],
+    };
+    defaultProps.updateValue = jest.fn();
+    defaultProps.selectedContent = { id: 1 };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldContainer {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+  });
+
+  it("should render the HiddenField", () => {
+    defaultProps.field = {
+      title: "Title",
+      type: "TextField",
+      key: "semTitle",
+      hideable: true,
+      slugTo: "/",
+    };
+    defaultProps.updateValue = jest.fn();
+    defaultProps.selectedContent = { id: 1, value: null };
+    defaultProps.objKey = "value";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <FieldContainer {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const fieldsBehaviorWrapper = screen.getByTestId("field-single-option");
+    expect(fieldsBehaviorWrapper).toBeTruthy();
+  });
+});

package/src/__tests__/components/Fields/AnalyticsField/AnalyticsField.test.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { render, cleanup } from "../../../../../config/jest/test-utils";
 
 import AnalyticsField from "@ax/components/Fields/AnalyticsField";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
 const valuesMock = {

package/src/__tests__/components/Fields/AnalyticsField/PageAnalytics/PageAnalytics.test.tsx

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import PageAnalytics from "@ax/components/Fields/AnalyticsField/PageAnalytics";
 import { IAnalytics } from "@ax/types";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, cleanup } from "@testing-library/react";
 
@@ -188,17 +188,3 @@ describe("PageAnalytics component rendering", () => {
     expect(getAllByText(/Select Dimensions/i)).toHaveLength(2);
   });
 });
-
-export interface IAnalyticsFieldProps {
-  value: IState;
-  template: string;
-  onChange: (value: IState) => void;
-  analytics: IAnalytics;
-}
-
-export interface IState {
-  contentSelect: string;
-  groupSelect: string;
-  dimensionsSelect: string[];
-  values: Record<string, string>;
-}

package/src/__tests__/components/Fields/AnalyticsField/StructuredDataAnalytics/StructuredDataAnalytics.test.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import StructuredDataAnalytics from "@ax/components/Fields/AnalyticsField/StructuredDataAnalytics";
-import { IAnalytics } from "@ax/types";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, cleanup } from "@testing-library/react";
 
@@ -130,17 +129,3 @@ describe("StructuredDataAnalytics component rendering", () => {
     expect(getByPlaceholderText(/Type a variable/i)).toBeInTheDocument();
   });
 });
-
-export interface IAnalyticsFieldProps {
-  value: IState;
-  template: string;
-  onChange: (value: IState) => void;
-  analytics: IAnalytics;
-}
-
-export interface IState {
-  contentSelect: string;
-  groupSelect: string;
-  dimensionsSelect: string[];
-  values: Record<string, string>;
-}

package/src/__tests__/components/Fields/ArrayFieldGroup/ArrayFieldGroup.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import ArrayFieldGroup from "@ax/components/Fields/ArrayFieldGroup";
+import ArrayFieldGroup, { IProps } from "@ax/components/Fields/ArrayFieldGroup";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
@@ -21,7 +21,7 @@ describe("ArrayFieldGroup component rendering", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
   });
 
   it("should render the component with ArrayFieldInline", async () => {
@@ -71,7 +71,7 @@ describe("ArrayFieldGroup component rendering", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
     expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
 
     const fieldProps2 = {
@@ -147,7 +147,7 @@ describe("ArrayFieldGroup component rendering", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
     expect(screen.getByTestId("arrayFieldItem")).toBeTruthy();
 
     const fieldProps2 = {
@@ -209,8 +209,8 @@ describe("ArrayFieldGroup component events", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
-    fireEvent.click(screen.getByTestId("buttonLineInverse"));
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
+    fireEvent.click(screen.getByTestId("button-line-inverse"));
     expect(onChangeMock).toHaveBeenCalled();
   });
 
@@ -262,16 +262,7 @@ describe("ArrayFieldGroup component events", () => {
     });
 
     expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
-    fireEvent.click(screen.getByTestId("iconActionComponent"));
+    fireEvent.click(screen.getByTestId("icon-action-component"));
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
-
-interface IProps {
-  value: Record<string, unknown>[];
-  name: string;
-  onChange: (value: Record<string, unknown>[]) => void;
-  innerFields: any[];
-  divider: { title: string; text: string };
-  arrayType: string;
-}

package/src/__tests__/components/Fields/AsyncCheckGroup/AsyncCheckGroup.test.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import axios from "axios";
-import AsyncCheckGroup from "@ax/components/Fields/AsyncCheckGroup";
+import AsyncCheckGroup, { IAsyncCheckGroup } from "@ax/components/Fields/AsyncCheckGroup";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, act } from "@testing-library/react";
 import { ISite } from "@ax/types";
@@ -67,7 +67,7 @@ describe("AsyncCheckGroup component rendering", () => {
       );
     });
 
-    expect(screen.getAllByTestId("checkFieldLabel")).toHaveLength(6);
+    expect(screen.getAllByTestId("check-field-label")).toHaveLength(6);
   });
 
   it("should render the component with no options", async () => {
@@ -91,18 +91,6 @@ describe("AsyncCheckGroup component rendering", () => {
         </ThemeProvider>
       );
     });
-    expect(screen.queryByTestId("checkFieldLabel")).not.toBeTruthy();
+    expect(screen.queryByTestId("check-field-label")).not.toBeTruthy();
   });
 });
-
-interface IAsyncCheckGroup {
-  value: any[];
-  site?: ISite | null;
-  source: string;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-  error?: boolean;
-  handleValidation?: (value: string | any[]) => void;
-  validators?: Record<string, unknown>;
-  fullHeight?: boolean;
-}

package/src/__tests__/components/Fields/AsyncSelect/AsyncSelect.test.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
-import AsyncSelect from "@ax/components/Fields/AsyncSelect";
+import AsyncSelect, { IAsyncSelectProps } from "@ax/components/Fields/AsyncSelect";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, act } from "@testing-library/react";
 import { ISite } from "@ax/types";
@@ -286,21 +286,3 @@ describe("AsyncSelect component events", () => {
     expect(screen.getByTestId("asyncSelect")).toHaveTextContent("English test");
   });
 });
-
-interface IAsyncSelectProps {
-  name: string;
-  value: any;
-  entity?: string;
-  entityId?: string | number;
-  error?: boolean;
-  disabled?: boolean;
-  onChange: (value: string) => void;
-  site: ISite;
-  lang: string;
-  selectedContent: any;
-  mandatory?: boolean;
-  placeholder?: string;
-  filter?: any[];
-  options?: any;
-  source?: string;
-}

package/src/__tests__/components/Fields/CheckField/CheckField.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import CheckField from "@ax/components/Fields/CheckField";
 import { ThemeProvider } from "styled-components";
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
@@ -27,8 +27,8 @@ describe("CheckField component rendering", () => {
       </ThemeProvider>
     );
 
-    const checkFieldLabel = screen.getByTestId("checkFieldLabel");
-    const checkFieldInput = screen.getByTestId("checkFieldInput");
+    const checkFieldLabel = screen.getByTestId("check-field-label");
+    const checkFieldInput = screen.getByTestId("check-field-input");
     const checkFieldCheckMark = screen.getByTestId("checkFieldCheckMark");
 
     expect(checkFieldLabel).toBeTruthy();
@@ -55,7 +55,7 @@ describe("CheckField component rendering", () => {
       </ThemeProvider>
     );
 
-    const checkFieldInput = screen.getByTestId("checkFieldInput");
+    const checkFieldInput = screen.getByTestId("check-field-input");
 
     expect(checkFieldInput).toBeTruthy();
   });
@@ -83,8 +83,8 @@ describe("CheckField events", () => {
       </ThemeProvider>
     );
 
-    const checkFieldLabel = screen.getByTestId("checkFieldLabel");
-    const checkFieldInput = screen.getByTestId<HTMLInputElement>("checkFieldInput");
+    const checkFieldLabel = screen.getByTestId("check-field-label");
+    const checkFieldInput = screen.getByTestId<HTMLInputElement>("check-field-input");
 
     expect(checkFieldLabel).toBeTruthy();
     expect(checkFieldInput).toBeTruthy();

package/src/__tests__/components/Fields/CheckGroup/CheckGroup.test.tsx

@@ -8,7 +8,7 @@ import CheckGroup from "@ax/components/Fields/CheckGroup";
 import { ThemeProvider } from "styled-components";
 import globalTheme from "@ax/themes/theme.json";
 
-import { parseTheme } from "@griddo/core";
+import { parseTheme } from "@ax/helpers";
 
 afterEach(cleanup);
 
@@ -28,7 +28,7 @@ describe("CheckField component rendering", () => {
       </ThemeProvider>
     );
 
-    expect(screen.findByTestId("CheckGroupFieldgroup")).toBeTruthy();
+    expect(screen.findByTestId("check-group-field-group")).toBeTruthy();
   });
 
   it("should render the component with CheckField", async () => {
@@ -53,8 +53,8 @@ describe("CheckField component rendering", () => {
       </ThemeProvider>
     );
 
-    expect(screen.findByTestId("CheckGroupFieldgroup")).toBeTruthy();
-    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(2);
+    expect(screen.findByTestId("check-group-field-group")).toBeTruthy();
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(2);
   });
 });
 
@@ -84,9 +84,9 @@ describe("CheckField events", () => {
       </ThemeProvider>
     );
 
-    expect(screen.findByTestId("CheckGroupFieldgroup")).toBeTruthy();
-    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(2);
-    const checkFieldInput = await screen.queryAllByTestId<HTMLInputElement>("checkFieldInput");
+    expect(screen.findByTestId("check-group-field-group")).toBeTruthy();
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(2);
+    const checkFieldInput = await screen.queryAllByTestId<HTMLInputElement>("check-field-input");
     fireEvent.change(checkFieldInput[0], {
       target: { value: "name", checked: true },
     });
@@ -119,8 +119,8 @@ describe("CheckField events", () => {
       </ThemeProvider>
     );
 
-    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(2);
-    const checkFieldInput = await screen.queryAllByTestId<HTMLInputElement>("checkFieldInput");
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(2);
+    const checkFieldInput = await screen.queryAllByTestId<HTMLInputElement>("check-field-input");
     fireEvent.change(checkFieldInput[0], {
       target: { value: "all", checked: true },
     });
@@ -156,8 +156,8 @@ describe("CheckField events", () => {
         <CheckGroup {...props} />
       </ThemeProvider>
     );
-    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(3);
-    const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(3);
+    const checkFieldInputs = await screen.queryAllByTestId("check-field-input");
 
     await user.type(checkFieldInputs[1], "name");
     await user.type(checkFieldInputs[2], "surname");
@@ -200,9 +200,9 @@ describe("CheckField events", () => {
       </ThemeProvider>
     );
 
-    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(4);
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(4);
 
-    const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
+    const checkFieldInputs = await screen.queryAllByTestId("check-field-input");
 
     await user.type(checkFieldInputs[1], "name");
     expect(onChangeMock).toHaveBeenCalledTimes(1);
@@ -247,9 +247,9 @@ describe("CheckField events", () => {
       </ThemeProvider>
     );
 
-    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(4);
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(4);
 
-    const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
+    const checkFieldInputs = await screen.queryAllByTestId("check-field-input");
     await user.type(checkFieldInputs[1], "name");
 
     expect(onChangeMock).toHaveBeenCalledTimes(1);