@griddo/ax 1.75.111 → 1.75.113

package/src/__tests__/components/ConfigPanel/NavigationForm/NavigationForm.test.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+import thunk from "redux-thunk";
+
+import { parseTheme } from "@ax/helpers";
+import NavigationForm, { INavigationFormProps } from "@ax/components/ConfigPanel/NavigationForm";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const initialStore = {
+  pageEditor: {
+    selectedContent: {
+      editorID: 0,
+      title: "selected content field",
+      id: 1,
+      component: "module",
+    },
+    editorContent: {
+      module: 0,
+      editorID: 0,
+      parentEditorID: null,
+      setAsHome: false,
+      headerConfig: "{}",
+      footerConfig: "{}",
+    },
+  },
+  navigation: {
+    currentDefaultsContent: [
+      {
+        type: "module",
+        id: 2,
+      },
+    ],
+  },
+};
+
+const store = mockStore(initialStore);
+
+const defaultProps = mock<INavigationFormProps>();
+
+defaultProps.schema = {
+  schemaType: "module",
+  displayName: "Header",
+  component: "Header",
+  type: "header",
+  defaultNavigation: true,
+  category: "header",
+  dataPacks: null,
+  configTabs: [
+    {
+      title: "content",
+      fields: [
+        {
+          title: "Name",
+          key: "title",
+          type: "TextField",
+          mandatory: true,
+        },
+      ],
+    },
+  ],
+};
+defaultProps.theme = "default-theme";
+
+describe("NavigationForm component rendering", () => {
+  it("should render component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NavigationForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    // the text is loading in the header
+    const componentWrapper = screen.getByText(/selected content field/i);
+    expect(componentWrapper).toBeInTheDocument();
+
+    // the text is loading in the noteField
+    const noteText = screen.getByText(/go to Navigation/i);
+    expect(noteText).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/ConfigPanel/PreviewForm/PreviewForm.test.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import "@testing-library/jest-dom";
+import thunk from "redux-thunk";
+
+import { parseTheme } from "@ax/helpers";
+import PreviewForm, { IPreviewFormProps } from "@ax/components/ConfigPanel/PreviewForm";
+import globalTheme from "@ax/themes/theme.json";
+
+beforeEach(() => {
+  cleanup();
+});
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const initialStore = {
+  pageEditor: {
+    selectedContent: {
+      editorID: 0,
+      title: "selected content field",
+      id: 1,
+      component: "module",
+    },
+    editorContent: {
+      module: 0,
+      editorID: 0,
+      parentEditorID: null,
+      setAsHome: false,
+      headerConfig: "{}",
+      footerConfig: "{}",
+    },
+  },
+  navigation: {
+    currentDefaultsContent: [
+      {
+        type: "module",
+        id: 2,
+      },
+    ],
+  },
+};
+
+const store = mockStore(initialStore);
+
+const defaultProps = mock<IPreviewFormProps>();
+
+defaultProps.selectedTab = "content";
+const setSelectedTabMock = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
+
+describe("PreviewForm component rendering", () => {
+  it("should render component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PreviewForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const previewFormWrapper = screen.getByTestId("preview-form-wrapper");
+    expect(previewFormWrapper).toBeTruthy();
+
+    const noteFieldTitle = screen.getByText("This page is currently being edited");
+    expect(noteFieldTitle).toBeTruthy();
+  });
+
+  it("should render component with user name", () => {
+    defaultProps.userEditing = {
+      id: 0,
+      name: "User 1",
+      username: "user1",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <PreviewForm {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const previewFormWrapper = screen.getByTestId("preview-form-wrapper");
+    expect(previewFormWrapper).toBeTruthy();
+
+    const noteFieldTitle = screen.getByText(/User 1/i);
+    expect(noteFieldTitle).toBeTruthy();
+
+    expect(setSelectedTabMock).toBeCalled();
+  });
+});

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

@@ -24,9 +24,9 @@ describe("FieldGroup component rendering", () => {
       </ThemeProvider>
     );
 
-    const fieldGroupWrapper = screen.getByTestId("fieldGroupWrapper");
-    const fieldGroupLabel = screen.getByTestId("fieldGroupLabel");
-    const fieldGroupContent = screen.getByTestId("fieldGroupContent");
+    const fieldGroupWrapper = screen.getByTestId("field-group-wrapper");
+    const fieldGroupLabel = screen.getByTestId("field-group-label");
+    const fieldGroupContent = screen.getByTestId("field-group-content");
 
     expect(fieldGroupWrapper).toBeTruthy();
     expect(fieldGroupLabel).toBeTruthy();
@@ -52,8 +52,8 @@ describe("FieldGroup component rendering", () => {
       </ThemeProvider>
     );
 
-    const fieldGroupLabel = screen.getByTestId("fieldGroupLabel");
-    const fieldGroupContent = screen.getByTestId("fieldGroupContent");
+    const fieldGroupLabel = screen.getByTestId("field-group-label");
+    const fieldGroupContent = screen.getByTestId("field-group-content");
     expect(fieldGroupLabel).toBeTruthy();
     expect(fieldGroupContent).toBeTruthy();
     expect(fieldGroupContent).toHaveTextContent("blablabla");

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

@@ -19,7 +19,7 @@ describe("NoteField component rendering", () => {
       </ThemeProvider>
     );
 
-    const noteFieldWrapper = screen.getByTestId("noteFieldWrapper");
+    const noteFieldWrapper = screen.getByTestId("note-field-wrapper");
 
     expect(noteFieldWrapper).toBeTruthy();
   });
@@ -41,7 +41,7 @@ describe("NoteField component rendering", () => {
       </ThemeProvider>
     );
 
-    const title = screen.queryByTestId("title");
+    const title = screen.queryByTestId("note-field-title");
 
     expect(title).toBeNull();
   });
@@ -55,7 +55,7 @@ describe("NoteField component rendering", () => {
       </ThemeProvider>
     );
 
-    const title = screen.queryByTestId("title");
+    const title = screen.queryByTestId("note-field-title");
 
     expect(title).toBeTruthy();
   });

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

@@ -23,9 +23,9 @@ describe("Select component rendering", () => {
       </ThemeProvider>
     );
 
-    expect(screen.getByTestId("sliderComponent")).toBeTruthy();
-    expect(screen.getByTestId("bubbleComponent")).toBeTruthy();
-    expect(screen.getByTestId("inputComponent")).toBeTruthy();
+    expect(screen.getByTestId("slider-component")).toBeTruthy();
+    expect(screen.getByTestId("bubble-component")).toBeTruthy();
+    expect(screen.getByTestId("input-slider-component")).toBeTruthy();
   });
 
   test("should render the component with prefix and suffix", () => {
@@ -62,7 +62,7 @@ describe("Select component events trigger", () => {
       </ThemeProvider>
     );
 
-    const input = screen.getByTestId("inputComponent");
+    const input = screen.getByTestId("input-slider-component");
     fireEvent.change(input, { target: { value: "20" } });
     expect(onChangeMock).toBeCalledWith(20);
   });

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

@@ -20,11 +20,11 @@ describe("TagField component", () => {
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getAllByTestId("tagFieldWrapper");
+    const tagFieldWrapper = screen.getAllByTestId("tag-field-wrapper");
     expect(tagFieldWrapper).toBeTruthy();
     expect(tagFieldWrapper).toHaveLength(1);
 
-    const tagFieldInput = screen.getAllByTestId("tagFieldInput");
+    const tagFieldInput = screen.getAllByTestId("tag-field-input");
     expect(tagFieldInput).toBeTruthy();
     expect(tagFieldInput).toHaveLength(1);
   });
@@ -41,16 +41,16 @@ describe("TagField component", () => {
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
+    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
     expect(tagFieldWrapper).toBeTruthy();
 
-    const tagFieldInput = screen.getByTestId("tagFieldInput");
+    const tagFieldInput = screen.getByTestId("tag-field-input");
     expect(tagFieldInput).toBeTruthy();
 
     const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
 
-    const tagComponent = screen.getByTestId("tagFieldWrapper");
+    const tagComponent = screen.getByTestId("tag-field-wrapper");
     expect(tagComponent.textContent).toBe("onetwo");
   });
 });
@@ -62,7 +62,7 @@ describe("TagField events", () => {
         <TagField {...props} />
       </ThemeProvider>
     );
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tagFieldInput");
+    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
 
     fireEvent.change(tagFieldInput, { target: { value: "test" } });
     expect(tagFieldInput.value).toBe("test");
@@ -80,7 +80,7 @@ describe("TagField events", () => {
       </ThemeProvider>
     );
 
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tagFieldInput");
+    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
     fireEvent.input(tagFieldInput, { target: { value: "test" } });
     fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
     expect(onChange).toHaveBeenCalledWith(["test"]);
@@ -97,7 +97,7 @@ describe("TagField events", () => {
       </ThemeProvider>
     );
 
-    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tagFieldInput");
+    const tagFieldInput = screen.getByTestId<HTMLInputElement>("tag-field-input");
     fireEvent.input(tagFieldInput, { target: { value: "test" } });
     fireEvent.keyDown(tagFieldInput, { key: "Enter", code: "Enter", charCode: 13 });
     expect(onChange).toBeCalledTimes(0);
@@ -115,7 +115,7 @@ describe("TagField events", () => {
       </ThemeProvider>
     );
 
-    const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
+    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
     const tagRendered = within(tagFieldWrapper).getAllByTestId("delete-icon-wrapper");
     expect(tagRendered).toHaveLength(2);
     fireEvent.click(tagRendered[0], 0);
@@ -129,7 +129,7 @@ describe("TagField events", () => {
         <TagField {...props} />
       </ThemeProvider>
     );
-    const tagFieldWrapper = screen.getByTestId("tagFieldWrapper");
+    const tagFieldWrapper = screen.getByTestId("tag-field-wrapper");
     fireEvent.click(tagFieldWrapper);
     expect(useRefSpy).toBeCalledTimes(1);
   });

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

@@ -21,7 +21,7 @@ describe("TextArea component rendering", () => {
       </ThemeProvider>
     );
 
-    const textAreaComponent = screen.getAllByTestId("textAreaComponent");
+    const textAreaComponent = screen.getAllByTestId("text-area-component");
     expect(textAreaComponent).toHaveLength(1);
   });
 });
@@ -38,7 +38,7 @@ describe("TextArea events", () => {
       </ThemeProvider>
     );
 
-    const textAreaComponent = screen.getByTestId("textAreaComponent");
+    const textAreaComponent = screen.getByTestId("text-area-component");
     expect(textAreaComponent).toBeTruthy();
     fireEvent.change(textAreaComponent, { target: { value: "test" } });
     expect(setStateMock).toHaveBeenCalledWith("test");
@@ -59,7 +59,7 @@ describe("TextArea events", () => {
       </ThemeProvider>
     );
 
-    const textAreaComponent = screen.getByTestId("textAreaComponent");
+    const textAreaComponent = screen.getByTestId("text-area-component");
 
     expect(textAreaComponent).toBeTruthy();
     fireEvent.blur(textAreaComponent, { target: { value: "name" } });

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

@@ -21,7 +21,7 @@ describe("TextField component rendering", () => {
     );
 
     const textFieldContainer = screen.getByTestId("text-field-container");
-    const inputComponent = screen.getByTestId("inputComponent");
+    const inputComponent = screen.getByTestId("input-component");
 
     expect(textFieldContainer).toBeTruthy();
     expect(inputComponent).toBeTruthy();
@@ -41,7 +41,7 @@ describe("TextField component rendering", () => {
     );
 
     const textFieldContainer = screen.getByTestId("text-field-container");
-    const inputComponent = screen.getByTestId("inputComponent");
+    const inputComponent = screen.getByTestId("input-component");
     const prefix = screen.getByTestId("prefix");
     expect(textFieldContainer).toBeTruthy();
     expect(inputComponent).toBeTruthy();
@@ -62,8 +62,8 @@ describe("TextField component rendering", () => {
     );
 
     const textFieldContainer = screen.getByTestId("text-field-container");
-    const inputComponent = screen.getByTestId("inputComponent");
-    const backgroundIconComponent = screen.getByTestId("backgroundIconComponent");
+    const inputComponent = screen.getByTestId("input-component");
+    const backgroundIconComponent = screen.getByTestId("background-icon-component");
 
     expect(textFieldContainer).toBeTruthy();
     expect(inputComponent).toBeTruthy();
@@ -84,8 +84,8 @@ describe("TextField component rendering", () => {
     );
 
     const textFieldContainer = screen.getByTestId("text-field-container");
-    const inputComponent = screen.getByTestId("inputComponent");
-    const iconWrapperComponent = screen.getByTestId("iconWrapperComponent");
+    const inputComponent = screen.getByTestId("input-component");
+    const iconWrapperComponent = screen.getByTestId("icon-wrapper-component");
 
     expect(textFieldContainer).toBeTruthy();
     expect(inputComponent).toBeTruthy();
@@ -110,7 +110,7 @@ describe("onClick from buttons", () => {
       </ThemeProvider>
     );
 
-    const backgroundIconComponent = screen.getByTestId("backgroundIconComponent");
+    const backgroundIconComponent = screen.getByTestId("background-icon-component");
     expect(backgroundIconComponent).toBeTruthy();
 
     fireEvent.click(backgroundIconComponent);
@@ -133,7 +133,7 @@ describe("onClick from buttons", () => {
       </ThemeProvider>
     );
 
-    const iconWrapperComponent = screen.getByTestId("iconWrapperComponent");
+    const iconWrapperComponent = screen.getByTestId("icon-wrapper-component");
     expect(iconWrapperComponent).toBeTruthy();
     const iconActionComponent = within(iconWrapperComponent).getByTestId("icon-action-component");
     expect(iconActionComponent).toBeTruthy();

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

@@ -337,7 +337,7 @@ describe("onChange events", () => {
       );
     });
 
-    const inputComponents = screen.getAllByTestId("inputComponent");
+    const inputComponents = screen.getAllByTestId("input-component");
 
     await act(async () => {
       fireEvent.change(inputComponents[0], { target: { value: "eooo" } });
@@ -388,7 +388,7 @@ describe("onClick events", () => {
       const selectionListItem = screen.getAllByTestId("selection-list-item");
       selectionListItem[0].click();
 
-      const inputComponents = screen.getAllByTestId("inputComponent");
+      const inputComponents = screen.getAllByTestId("input-component");
       fireEvent.change(inputComponents[0], { value: "foo" });
     });