@griddo/ax 1.75.111 → 1.75.113

package/src/__tests__/components/Gallery/GalleryPanel/GalleryDragAndDrop/GalleryDragAndDrop.test.tsx

@@ -0,0 +1,252 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, act, waitFor } 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 GalleryDragAndDrop, {
+  IGalleryDragAndDropProps,
+  IDispatchProps,
+} from "@ax/components/Gallery/GalleryPanel/GalleryDragAndDrop";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const defaultGalleryDDProps = mock<IGalleryDragAndDropProps>();
+const defaultDispatchProps = mock<IDispatchProps>();
+
+describe("GalleryDragAndDrop component rendering", () => {
+  it("should render the component", () => {
+    defaultGalleryDDProps.validFormats = ["png", "jpg"];
+    defaultGalleryDDProps.allowUpload = false;
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryDDProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDragAndDrop {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
+  });
+
+  it("should render the component with the DragAndDrop", () => {
+    defaultGalleryDDProps.validFormats = ["png", "jpg"];
+    defaultGalleryDDProps.allowUpload = true;
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryDDProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDragAndDrop {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
+    expect(screen.getAllByTestId("drag-drop-wrapper")).toBeTruthy();
+  });
+});
+
+describe("GalleryDragAndDrop component actions", () => {
+  it("should trigger the handleFileclick", () => {
+    defaultGalleryDDProps.validFormats = ["png", "jpg"];
+    defaultGalleryDDProps.allowUpload = true;
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const clickInputSpy = jest.spyOn(HTMLInputElement.prototype, "click");
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryDDProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDragAndDrop {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const buttonSelect = screen.getByTestId("button-line-inverse");
+    act(() => {
+      fireEvent.click(buttonSelect);
+    });
+    expect(clickInputSpy).toBeCalled();
+  });
+
+  it("should trigger the handleTryAgain", () => {
+    defaultGalleryDDProps.validFormats = ["png", "jpg"];
+    defaultGalleryDDProps.allowUpload = true;
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryDDProps,
+      ...defaultDispatchProps,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDragAndDrop {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const buttonTry = screen.getByText(/TRY AGAIN/i);
+    fireEvent.click(buttonTry);
+    expect(store.getActions()).toContainEqual({
+      payload: { errorMsg: "", inDropZone: false, isError: false, isUploading: false },
+      type: "gallery/SET_UPLOAD_ERROR",
+    });
+  });
+
+  it("should trigger the DragAndDrop handleDragOver action", () => {
+    defaultGalleryDDProps.validFormats = ["png", "jpg"];
+    defaultGalleryDDProps.allowUpload = true;
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryDDProps,
+      ...defaultDispatchProps,
+    };
+
+    const galleryDragAndDropComponent = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(galleryDragAndDropComponent, { store });
+
+    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
+    const dragDropComponent = screen.getAllByTestId("drag-drop-wrapper");
+    expect(dragDropComponent).toBeTruthy();
+
+    const dataTransfer = {
+      dropEffect: "",
+    };
+    fireEvent.dragOver(dragDropComponent[0], {
+      dataTransfer,
+    });
+    expect(dataTransfer.dropEffect).toBe("copy");
+  });
+
+  it("should trigger the DragAndDrop handleDrop action", async () => {
+    defaultGalleryDDProps.validFormats = ["png", "jpg"];
+    defaultGalleryDDProps.allowUpload = true;
+    const refreshImagesMock = defaultGalleryDDProps.refreshImages as jest.MockedFunction<() => Promise<void>>;
+
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+
+    const store = mockStore(initialStore);
+
+    const defaultProps = {
+      ...defaultGalleryDDProps,
+      ...defaultDispatchProps,
+    };
+
+    const clearDataMock = jest.fn();
+
+    const galleryDragAndDropComponent = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryDragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    render(galleryDragAndDropComponent, { store });
+
+    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
+    const dragDropComponent = screen.getAllByTestId("drag-drop-wrapper");
+    expect(dragDropComponent).toBeTruthy();
+
+    fireEvent.drop(dragDropComponent[0], {
+      dataTransfer: {
+        files: [new File([""], "darthvader.png", { type: "png" })],
+        clearData: clearDataMock,
+      },
+    });
+    expect(clearDataMock).toBeCalled();
+    await waitFor(() => expect(refreshImagesMock).toBeCalled());
+  });
+});

package/src/__tests__/components/Gallery/GalleryPanel/GalleryPanel.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+
+import { parseTheme } from "@ax/helpers";
+import GalleryPanel, { IGalleryPanelProps } from "@ax/components/Gallery/GalleryPanel";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+const defaultProps = mock<IGalleryPanelProps>();
+
+defaultProps.isImageSelected = true;
+defaultProps.imageSelected = null;
+defaultProps.validFormats = ["png", "jpg"];
+const setImageMocked = defaultProps.setImage as jest.MockedFunction<(imageData: any) => void>;
+defaultProps.isGlobalTab = true;
+defaultProps.site = 1;
+defaultProps.selectedTab = "";
+const refreshImagesMocked = defaultProps.refreshImages as jest.MockedFunction<() => Promise<void>>;
+
+describe("GalleryPanel component rendering", () => {
+  it("should render the component", () => {
+    const initialStore = {
+      gallery: {
+        isSaving: {
+          save: false,
+          saveAdd: false,
+          delete: false,
+        },
+      },
+    };
+    const store = mockStore(initialStore);
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <GalleryPanel {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("detail-panel-wrapper")).toBeTruthy();
+  });
+});

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

@@ -1,20 +1,21 @@
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { render, cleanup, screen } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
 import "@testing-library/jest-dom";
 
 import { parseTheme } from "@ax/helpers";
-import Image, { IImageProps } from "@ax/components/Image";
+import Image from "@ax/components/Image";
 import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IImageProps>();
+const defaultProps = {
+  width: 1,
+  url: "",
+};
 
 describe("Image component rendering", () => {
   it("should render the component with img tag", () => {
-    defaultProps.width = 1;
     defaultProps.url = "https://res.cloudinary.com/url-example.png";
 
     render(
@@ -28,7 +29,6 @@ describe("Image component rendering", () => {
   });
 
   it("should render the component griddoImage", () => {
-    defaultProps.width = 1;
     defaultProps.url = "/url-example.png";
 
     render(

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -4,7 +4,7 @@ import { getInnerFields } from "@ax/forms";
 import { FieldContainer, FieldGroup } from "@ax/components";
 import { IErrorItem, IPage, ISite } from "@ax/types";
 
-const Field = (props: IProps): JSX.Element => {
+const Field = (props: IFieldProps): JSX.Element => {
   const {
     whiteList,
     objKey,
@@ -30,7 +30,6 @@ const Field = (props: IProps): JSX.Element => {
     template,
     setHistoryPush,
   } = props;
-
   const isGroup = field.type === "FieldGroup";
   const isCollapsed = isGroup && field.collapsed;
   const isConditional = field.type === "ConditionalField";
@@ -48,7 +47,7 @@ const Field = (props: IProps): JSX.Element => {
       theme,
       site,
       errors,
-      deleteError,
+      deleteError
     );
   }
 
@@ -85,7 +84,7 @@ const Field = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IFieldProps {
   whiteList: any;
   objKey: string;
   field: any;

package/src/components/ConfigPanel/Form/index.tsx

@@ -7,7 +7,7 @@ import ConnectedField from "./ConnectedField";
 
 import * as S from "./style";
 
-export const Form = (props: IProps): JSX.Element => {
+export const Form = (props: IFormProps): JSX.Element => {
   const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme, setHistoryPush, header, footer } =
     props;
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
@@ -63,16 +63,24 @@ export const Form = (props: IProps): JSX.Element => {
     actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
 
   return (
-    <section>
+    <section data-testid="form-section">
       <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
       {selectedTab === "content" && !isGlobal && header === 0 && (
         <S.FieldWrapper>
-          This page doesn&apos;t have a header. Click <S.Link onClick={handleRestoreHeader}>here</S.Link> to restore it.
+          This page doesn&apos;t have a header. Click{" "}
+          <S.Link data-testid="header-link" onClick={handleRestoreHeader}>
+            here
+          </S.Link>{" "}
+          to restore it.
         </S.FieldWrapper>
       )}
       {selectedTab === "content" && !isGlobal && footer === 0 && (
         <S.FieldWrapper>
-          This page doesn&apos;t have a footer. Click <S.Link onClick={handleRestoreFooter}>here</S.Link> to restore it.
+          This page doesn&apos;t have a footer. Click{" "}
+          <S.Link data-testid="footer-link" onClick={handleRestoreFooter}>
+            here
+          </S.Link>{" "}
+          to restore it.
         </S.FieldWrapper>
       )}
       {tabContent && tabContent.fields.map((field: ISchemaField) => generateFields(field))}
@@ -80,7 +88,7 @@ export const Form = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IFormProps {
   selectedTab: string;
   schema: ISchema;
   actions: any;

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -9,7 +9,7 @@ import * as S from "./style";
 const noteText = "This is Global content and you cannot edit it here. To do so, you must go to the Global page";
 const noteTitle = "Global content";
 
-const GlobalPageForm = (props: IProps): JSX.Element => {
+const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
   const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer } = props;
   const tabs = ["content", "config"];
 
@@ -39,19 +39,19 @@ const GlobalPageForm = (props: IProps): JSX.Element => {
     actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
 
   return (
-    <section>
+    <section data-testid="global-page-section">
       <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setSelectedTab} />
       <S.NoteWrapper>
         <NoteField value={{ text: noteText, title: noteTitle }} />
       </S.NoteWrapper>
       {selectedTab === "content" && header === 0 && (
         <S.FieldWrapper>
-          This page doesn&apos;t have a header. Click <S.Link onClick={handleRestoreHeader}>here</S.Link> to restore it.
+          This page doesn&apos;t have a header. Click <S.Link data-testid="header-link" onClick={handleRestoreHeader}>here</S.Link> to restore it.
         </S.FieldWrapper>
       )}
       {selectedTab === "content" && footer === 0 && (
         <S.FieldWrapper>
-          This page doesn&apos;t have a footer. Click <S.Link onClick={handleRestoreFooter}>here</S.Link> to restore it.
+          This page doesn&apos;t have a footer. Click <S.Link data-testid="footer-link" onClick={handleRestoreFooter}>here</S.Link> to restore it.
         </S.FieldWrapper>
       )}
       {selectedTab === "content" && (
@@ -80,7 +80,7 @@ const GlobalPageForm = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IGlobalPageFormProps {
   selectedTab: string;
   setSelectedTab(tab: string): void;
   schema: ISchema;

package/src/components/ConfigPanel/Header/index.tsx

@@ -6,7 +6,7 @@ import { useToast } from "@ax/hooks";
 
 import * as S from "./style";
 
-const Header = (props: IProps) => {
+const Header = (props: IHeaderProps) => {
   const { breadcrumb, schema, selectedParent, activatedModules, actions, setSelectedContent } = props;
   const { duplicateModuleAction, deleteModuleAction, copyModuleAction } = actions;
   const title = breadcrumb[breadcrumb.length - 1].displayName;
@@ -59,7 +59,7 @@ const Header = (props: IProps) => {
 
   return (
     <>
-      <S.HeaderWrapper>
+      <S.HeaderWrapper data-testid="header-config-wrapper">
         <S.Title>{title}</S.Title>
         <Breadcrumb breadcrumb={breadcrumb} setSelectedContent={setSelectedContent} />
         {isInArray && <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />}
@@ -69,7 +69,7 @@ const Header = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IHeaderProps {
   schema: any;
   actions: any;
   breadcrumb: IBreadcrumbItem[];

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -9,6 +9,7 @@ import * as S from "./style";
 
 const Field = (props: IProps) => {
   const { type, defaults, updateEditorContent, selectedContent, theme, removeNavigationFromPage } = props;
+
   const { isOpen, toggleModal } = useModal();
   const isDefault = selectedContent.setAsDefault;
 
@@ -19,6 +20,7 @@ const Field = (props: IProps) => {
   });
 
   const hasMultipleOptions: boolean | undefined = options && options.length > 0;
+
   let filteredByDefaultOptions = options;
   if (!isDefault && hasMultipleOptions) {
     filteredByDefaultOptions = options.filter((component: any) => !component.setAsDefault);
@@ -85,17 +87,17 @@ const Field = (props: IProps) => {
   );
 };
 
-interface IField {
+export interface IField {
   type: string;
   theme: string;
 }
 
-interface IStateProps {
+export interface IStateProps {
   defaults: any;
   selectedContent: any;
 }
 
-interface IDispatchProps {
+export interface IDispatchProps {
   updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
   removeNavigationFromPage: (key: string) => void;
 }

package/src/components/ConfigPanel/NavigationForm/index.tsx

@@ -7,7 +7,7 @@ import * as S from "./style";
 
 const noteText = "To create a new header or configure one of them, go to Navigation/Navigations modules";
 
-const NavigationForm = (props: IProps): JSX.Element => {
+const NavigationForm = (props: INavigationFormProps): JSX.Element => {
   const { schema, theme } = props;
 
   return (
@@ -23,7 +23,7 @@ const NavigationForm = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface INavigationFormProps {
   schema: any;
   theme: string;
 }

package/src/components/ConfigPanel/PreviewForm/index.tsx

@@ -5,7 +5,7 @@ import { IUserEditing } from "@ax/types";
 
 import * as S from "./style";
 
-const PreviewForm = (props: IProps): JSX.Element => {
+const PreviewForm = (props: IPreviewFormProps): JSX.Element => {
   const { selectedTab, setSelectedTab, userEditing } = props;
   const tabs = ["content"];
 
@@ -20,14 +20,14 @@ const PreviewForm = (props: IProps): JSX.Element => {
   return (
     <section>
       <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setSelectedTab} />
-      <S.FieldWrapper>
+      <S.FieldWrapper data-testid="preview-form-wrapper">
         <NoteField value={{ text: noteText, title: noteTitle }} />
       </S.FieldWrapper>
     </section>
   );
 };
 
-interface IProps {
+export interface IPreviewFormProps {
   selectedTab: string;
   setSelectedTab(tab: string): void;
   userEditing?: IUserEditing | null;

package/src/components/ConfigPanel/index.tsx

@@ -49,7 +49,6 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   if (isLoading || isEmptyObj(schema)) {
     return <Loading />;
   }
-
   const showNavigationForm = navigationModulesTypes.includes(schema.type) && isPage;
   const isGlobalPageNotEditable = isGlobal && isPage && !isEditable;
 
@@ -91,7 +90,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper ref={wrapperRef}>
+    <S.Wrapper data-testid="config-panel-wrapper" ref={wrapperRef}>
       <Header
         schema={schema}
         actions={actions}
@@ -105,7 +104,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   );
 };
 
-interface IStateProps {
+export interface IStateProps {
   isLoading: boolean;
   schema: any;
   actions: any;

package/src/components/Fields/FieldGroup/index.tsx

@@ -11,11 +11,11 @@ const FieldGroup = (props: IFieldsGroupProps): React.ReactElement => {
   };
 
   return (
-    <S.Wrapper data-testid="fieldGroupWrapper">
-      <S.Label data-testid="fieldGroupLabel" onClick={handleClick} isOpen={isOpen}>
+    <S.Wrapper data-testid="field-group-wrapper">
+      <S.Label data-testid="field-group-label" onClick={handleClick} isOpen={isOpen}>
         {title}
       </S.Label>
-      <S.Content data-testid="fieldGroupContent" isOpen={isOpen}>
+      <S.Content data-testid="field-group-content" isOpen={isOpen}>
         {children}
       </S.Content>
     </S.Wrapper>

package/src/components/Fields/NoteField/index.tsx

@@ -7,8 +7,8 @@ const NoteField = (props: INoteFieldProps): JSX.Element => {
   const { title, text } = value;
 
   return (
-    <S.Wrapper className={className} data-testid="noteFieldWrapper">
-      {title && <S.Title data-testid="title">{title}</S.Title>}
+    <S.Wrapper className={className} data-testid="note-field-wrapper">
+      {title && <S.Title data-testid="note-field-title">{title}</S.Title>}
       <S.Text>{text}</S.Text>
     </S.Wrapper>
   );

package/src/components/Fields/SliderField/index.tsx

@@ -31,13 +31,20 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
   };
 
   return (
-    <S.Slider data-testid="sliderComponent">
-      <S.Bubble data-testid="bubbleComponent" ref={bubbleRef}>
+    <S.Slider data-testid="slider-component">
+      <S.Bubble data-testid="bubble-component" ref={bubbleRef}>
         {prefix && `${prefix} `}
         {val}
         {suffix && ` ${suffix}`}
       </S.Bubble>
-      <S.Input data-testid="inputComponent" value={val} min={min} max={max} step={step} onChange={handleChange} />
+      <S.Input
+        data-testid="input-slider-component"
+        value={val}
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+      />
     </S.Slider>
   );
 };

package/src/components/Fields/TagField/index.tsx

@@ -36,14 +36,14 @@ const TagField = (props: IProps): JSX.Element => {
   const placeholder = valueArray.length > 0 ? "" : "Type a tag...";
 
   return (
-    <S.Wrapper data-testid="tagFieldWrapper" onClick={_handleClick}>
+    <S.Wrapper data-testid="tag-field-wrapper" onClick={_handleClick}>
       {valueArray &&
         valueArray.map((tag: string, index: number) => {
           const handleDelete = () => deleteTag(index);
           return <Tag key={tag} text={tag} onDeleteAction={handleDelete} />;
         })}
       <S.Input
-        data-testid="tagFieldInput"
+        data-testid="tag-field-input"
         ref={inputRef}
         type="text"
         value={inputValue}

package/src/components/Fields/TextArea/index.tsx

@@ -35,7 +35,7 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
 
   return (
     <S.TextArea
-      data-testid="textAreaComponent"
+      data-testid="text-area-component"
       name={name}
       minRows={rows}
       maxRows={4}