@griddo/ax 1.75.35 → 1.75.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.35",
+  "version": "1.75.37",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b07f3c7a091191e2bcc82ff31bb034456d68f4d0"
+  "gitHead": "41e8c3e94e959bdf33b22b44523533673d1a59f2"
 }

package/src/__mocks__/axios/SitesList.ts

@@ -3,6 +3,36 @@ import { structuredDataMock } from "./../store/SitesList";
 export const sitesResponse = {
   data: {
     totalItems: 22,
+    items: [
+        {
+            "id": 4,
+            "locale": "en_GB",
+            "language": "English",
+            "path": "/gonzalo-h",
+            "domain": {
+                "id": 1,
+                "url": "//cx.dev.griddo.io/pre-griddo",
+                "slug": "/pre-griddo"
+            },
+            "label": "EN",
+            "isDefault": true,
+            "home": "//cx.dev.griddo.io/pre-griddo/gonzalo-h"
+        },
+        {
+            "id": 2,
+            "locale": "es_ES",
+            "language": "Spanish",
+            "path": "/gonzalo-h/es",
+            "domain": {
+                "id": 1,
+                "url": "//cx.dev.griddo.io/pre-griddo",
+                "slug": "/pre-griddo"
+            },
+            "label": "ES",
+            "isDefault": false,
+            "home": "//cx.dev.griddo.io/pre-griddo/gonzalo-h/es"
+        }
+    ],
     page: "1",
     recentSites: [
       { siteId: 1, lastAccess: "2022-09-12T13:28:31.000Z" },

package/src/__mocks__/axios/SitesListCategories.ts

@@ -0,0 +1,29 @@
+import { structuredDataMock } from "../store/SitesList";
+
+export const sitesResponseCategories = {
+  data: [
+    {
+        "id": "Accordion",
+        "title": "Accordion",
+        "category": "interactive",
+        "thumbnails": {
+            "default-theme": {},
+            "griddo-alt-theme": {}
+        },
+        "dataPacks": null,
+        "type": {}
+    }
+    ],
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};
+
+export const structuredDataResponse = {
+  data: structuredDataMock,
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};

package/src/__mocks__/axios/SitesListDataPack.ts

@@ -0,0 +1,175 @@
+import { structuredDataMock } from "../store/SitesList";
+
+export const sitesResponseDataPack = {
+  data: {
+    totalItems: 1,
+    items: [
+      {
+        "id": "ARTICLES",
+        "title": "Articles",
+        "category": {
+            "id": "ARTICLES",
+            "label": "Articles"
+        },
+        "description": "Allows you to hightlight articles",
+        "image": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/data-packs-thumbnails/articles.png",
+        "templates": [
+            {
+                "id": "ArticlesList",
+                "title": "Articles List",
+                "thumbnails": {
+                    "1x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesList",
+                    "2x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesList@2x"
+                },
+                "dataPacks": [
+                    "ARTICLES"
+                ],
+                "type": {
+                    "label": "Articles",
+                    "value": "articles",
+                    "mode": "list"
+                }
+            }
+        ],
+        "modules": [
+            {
+                "id": "ArticlesDistributor",
+                "title": "Articles Distributor",
+                "category": "articlesAndEvents",
+                "thumbnails": {
+                    "1x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor",
+                    "2x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor@2x"
+                },
+                "dataPacks": [
+                    "ARTICLES"
+                ],
+                "type": {},
+                "sectionList": {
+                    "BasicTemplate": [
+                        "mainContent"
+                    ],
+                    "NewsDetail": [
+                        "closureContent"
+                    ],
+                    "NewsList": [
+                        "relatedContent"
+                    ],
+                    "SitemapTemplate": [
+                        "relatedContent",
+                        "closureContent"
+                    ],
+                    "StoryDetail": [
+                        "mainContent",
+                        "relatedContent"
+                    ]
+                }
+            }
+        ],
+        "categories": [
+            {
+                "id": "STORY_TYPE",
+                "title": "Story Type",
+                "dataPacks": ["STORIES"],
+                "local": false,
+                "taxonomy": true,
+                "fromPage": false,
+                "translate": true,
+                "schema": null,
+                "clone": null,
+                "defaults": null,
+                "editable": true,
+            },
+        ],
+        "structuredData": [
+            {
+                "id": "ARTICLES",
+                "title": "Articles",
+                "dataPacks": [
+                    "ARTICLES"
+                ],
+                "local": false,
+                "fromPage": false,
+                "relatedCategories": []
+            }
+        ],
+        "activated": true,
+        "config": {
+            "defaultParent": null,
+            "indexDefault": true,
+            "modifiableOnPage": false,
+            "templates": {
+                "ArticlesList": {
+                    "defaultHeader": 178,
+                    "defaultFooter": 78,
+                    "integrations": [
+                        {
+                            "id": 91,
+                            "name": "Script",
+                            "description": "Super script",
+                            "site": null,
+                            "contentHead": "<script>alert(\"hola\")</script>",
+                            "contentBody": "",
+                            "contentBodyPosition": "start",
+                            "contentPresence": {
+                                "presenceType": "page-specific",
+                                "relatedPages": [
+                                    4111,
+                                    4111
+                                ]
+                            },
+                            "active": true,
+                            "variables": [
+                                {
+                                    "id": 93,
+                                    "variableName": "v1",
+                                    "variableKey": "key",
+                                    "isMultilanguage": true,
+                                    "defaultValue": "",
+                                    "multilanguage": [
+                                        {
+                                            "id": 54,
+                                            "languageId": 4,
+                                            "value": null
+                                        },
+                                        {
+                                            "id": 55,
+                                            "languageId": 2,
+                                            "value": null
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "name": "codigoCustom",
+                            "contentHead": "",
+                            "contentBody": "",
+                            "contentBodyPosition": null,
+                            "contentPresence": {
+                                "presenceType": "page-manual",
+                                "relatedPages": null
+                            }
+                        }
+                    ]
+                }
+            },
+            "defaultHeader": null,
+            "defaultFooter": null
+        }
+    }
+    ],
+    page: "1",
+  },
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};
+
+export const structuredDataResponse = {
+  data: structuredDataMock,
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};

package/src/__mocks__/axios/SitesListOptions.ts

@@ -0,0 +1,22 @@
+import { structuredDataMock } from "../store/SitesList";
+
+export const sitesOptions = {
+  data: [
+      {
+        "value": 80,
+        "label": "DEMO SITE"
+      } 
+    ],
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};
+
+export const structuredDataResponse = {
+  data: structuredDataMock,
+  status: 200,
+  statusText: "Ok",
+  headers: {},
+  config: {},
+};

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

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import DragAndDrop, { IDragAndDropProps } from "@ax/components/DragAndDrop";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IDragAndDropProps>();
+const onDropMock = defaultProps.onDrop as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDragOverMock = defaultProps.onDragOver as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDragEnterMock = defaultProps.onDragEnter as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+const onDragLeaveMock = defaultProps.onDragLeave as jest.MockedFunction<(e: React.DragEvent<HTMLDivElement>) => void>;
+defaultProps.children = React.createElement("button", null, "back button");
+
+describe("ErrorCenter component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("drag-drop-wrapper")).toBeTruthy();
+  });
+
+  it("should call the onDrop", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dragDropWrapper = screen.getByTestId("drag-drop-wrapper");
+    fireEvent.drop(dragDropWrapper);
+    expect(onDropMock).toBeCalled();
+  });
+
+  it("should call the onDragOver", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dragDropWrapper = screen.getByTestId("drag-drop-wrapper");
+    fireEvent.dragOver(dragDropWrapper);
+    expect(onDragOverMock).toBeCalled();
+  });
+
+  it("should call the onDragEnter", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dragDropWrapper = screen.getByTestId("drag-drop-wrapper");
+    fireEvent.dragEnter(dragDropWrapper);
+    expect(onDragEnterMock).toBeCalled();
+  });
+
+  it("should call the onDragLeave", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const dragDropWrapper = screen.getByTestId("drag-drop-wrapper");
+    fireEvent.dragLeave(dragDropWrapper);
+    expect(onDragLeaveMock).toBeCalled();
+  });
+
+  it("should render the children", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <DragAndDrop {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonText = screen.getByText("back button");
+    expect(buttonText).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,117 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import Button, { IButtonProps } from "@ax/components/Button";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IButtonProps>();
+
+describe("Button component rendering", () => {
+  it("should render the component with the default button and no icon", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonElement = screen.getByTestId("button-default");
+    expect(buttonElement).toBeTruthy();
+    const iconElement = screen.queryByTestId("icon-component");
+    expect(iconElement).not.toBeTruthy();
+  });
+
+  it("should render the component with the text button and an icon", () => {
+    defaultProps.buttonStyle = "text";
+    defaultProps.icon = "delete";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonElement = screen.getByTestId("button-text");
+    expect(buttonElement).toBeTruthy();
+    const iconElement = screen.getByTestId("icon-component");
+    expect(iconElement).toBeTruthy();
+  });
+
+  it("should render the component with the line button", () => {
+    defaultProps.buttonStyle = "line";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonElement = screen.getByTestId("button-line-inverse");
+    expect(buttonElement).toBeTruthy();
+  });
+
+  it("should render the component with a className", () => {
+    defaultProps.className = "my-class";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonElement = screen.getByTestId("button-line-inverse");
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement).toHaveClass("my-class");
+  });
+
+  it("should render the children", () => {
+    defaultProps.children = "el texto";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText<HTMLElement>("el texto")).toBeInTheDocument();
+  });
+
+  it("should trigger the onClick action", () => {
+    defaultProps.buttonStyle = "lineInverse";
+    const handleOnClickMock = defaultProps.onClick as jest.MockedFunction<
+      (e: React.MouseEvent<HTMLButtonElement>) => void
+    >;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonElement = screen.getByTestId("button-line-inverse");
+    expect(buttonElement).toBeTruthy();
+    fireEvent.click(buttonElement);
+    expect(handleOnClickMock).toHaveBeenCalled();
+  });
+
+  it("should not trigger the onClick action if the button is disabled", () => {
+    defaultProps.buttonStyle = "lineInverse";
+    defaultProps.disabled = true;
+    const handleOnClickMock = defaultProps.onClick as jest.MockedFunction<
+      (e: React.MouseEvent<HTMLButtonElement>) => void
+    >;
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Button {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const buttonElement = screen.getByTestId("button-line-inverse");
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement).toBeDisabled();
+    fireEvent.click(buttonElement);
+    expect(handleOnClickMock).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/PasteModuleButton.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import PasteModuleButton, {
-  IProps,
+  IPasteModuleProps,
 } from "@ax/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@ax/helpers";
@@ -12,10 +12,17 @@ import { mock } from "jest-mock-extended";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IProps>();
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useLocation: () => ({
+    pathname: "localhost:3000/example/path",
+  }),
+}));
+
+const defaultProps = mock<IPasteModuleProps>();
 
 const mockedFunction = defaultProps.pasteModule as jest.MockedFunction<
-  (value: number) => Promise<{ error?: INotification }>
+  (editorID: number, key: string) => Promise<{ error?: INotification }>
 >;
 const mockedNotification = defaultProps.setNotification as jest.MockedFunction<(notification: INotification) => void>;
 defaultProps.editorID = 1;
@@ -26,7 +33,7 @@ describe("ComponentArraySelector component rendering", () => {
     defaultProps.setHistoryPush = jest.fn();
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <PasteModuleButton arrayKey={""} {...defaultProps} />
+        <PasteModuleButton {...defaultProps} />
       </ThemeProvider>
     );
     const iconButton = screen.getByTestId("icon-action-component");
@@ -50,7 +57,7 @@ describe("ComponentArraySelector trigger events", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <PasteModuleButton arrayKey={""} {...defaultProps} />
+        <PasteModuleButton {...defaultProps} />
       </ThemeProvider>
     );
     const iconButton = screen.getByTestId("icon-action-component");
@@ -59,7 +66,7 @@ describe("ComponentArraySelector trigger events", () => {
       fireEvent.click(iconButton);
     });
     await expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1)).resolves.toEqual({
+    await expect(mockedFunction(1, "")).resolves.toEqual({
       error: {
         type: "warning",
         text: "This is a warning",
@@ -75,7 +82,7 @@ describe("ComponentArraySelector trigger events", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <PasteModuleButton arrayKey={""} {...defaultProps} />
+        <PasteModuleButton {...defaultProps} />
       </ThemeProvider>
     );
     const iconButton = screen.getByTestId("icon-action-component");
@@ -84,7 +91,7 @@ describe("ComponentArraySelector trigger events", () => {
       fireEvent.click(iconButton);
     });
     await expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1)).resolves.toEqual({});
+    await expect(mockedFunction(1, "")).resolves.toEqual({});
     expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
   });
 
@@ -94,7 +101,7 @@ describe("ComponentArraySelector trigger events", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <PasteModuleButton arrayKey={""} {...defaultProps} />
+        <PasteModuleButton {...defaultProps} />
       </ThemeProvider>
     );
     const iconButton = screen.getByTestId("icon-action-component");
@@ -103,7 +110,7 @@ describe("ComponentArraySelector trigger events", () => {
       fireEvent.click(iconButton);
     });
     await expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1)).resolves.toEqual({ error: undefined });
+    await expect(mockedFunction(1, "")).resolves.toEqual({ error: undefined });
     expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
   });
 });

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

@@ -21,6 +21,7 @@ const defaultProps = {
     },
   ],
   showAdvanced: false,
+  default: {},
 };
 
 describe("HeadingField component rendering", () => {
@@ -50,6 +51,7 @@ describe("HeadingField component rendering", () => {
         },
       ],
       showAdvanced: true,
+      default: {},
     };
 
     render(

package/src/__tests__/modules/Sites/SitesList/SitesList.test.tsx

@@ -12,10 +12,13 @@ import { history } from "@ax/routes";
 import globalTheme from "@ax/themes/theme.json";
 import { IGetSitesParams, ISettingsForm } from "@ax/types";
 
-import { render, cleanup, screen, fireEvent, act } from "./../../../../../config/jest/test-utils";
+import { render, cleanup, screen, fireEvent, act, waitFor } from "./../../../../../config/jest/test-utils";
 
 import { sitesDataMock, sitesDataNoThumbnailMock, userDataMock } from "./../../../../__mocks__/store/SitesList";
 import { sitesResponse } from "./../../../../__mocks__/axios/SitesList";
+import { sitesResponseDataPack } from "./../../../../__mocks__/axios/SitesListDataPack";
+import { sitesResponseCategories } from "./../../../../__mocks__/axios/SitesListCategories";
+import { sitesOptions } from "./../../../../__mocks__/axios/SitesListOptions";
 import SitesList, { ISitesListProps } from "./../../../../modules/Sites/SitesList";
 
 afterEach(cleanup);
@@ -35,7 +38,10 @@ const initialStore = {
   },
   users: userDataMock,
   sites: sitesDataMock,
-  structuredData: { global: [], sites: [] },
+  structuredData: {
+    structuredData: { global: [], sites: [] },
+    categories: { global: [], sites: [] },
+  },
 };
 
 describe("Sites module rendering", () => {
@@ -402,7 +408,24 @@ describe("Sites module events", () => {
       [path: string, isEditor?: boolean | undefined]
     >;
     const initialState = { ...initialStore, ...defaultProps };
-    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockImplementation((request: any) => {
+      switch (request.url) {
+        case "undefined/site/3/languages":
+        case "undefined/site/global/metrics":
+        case "undefined/site/3/metrics":
+        case "undefined/site/3/socials":
+        case "undefined/site/undefined/templates":
+        case "undefined/site/3/structured_data":
+          return Promise.resolve(sitesResponse);
+        case "undefined/sites?recentSitesNumber=7&pagination=true&page=1&itemsPerPage=30&order=lastAccess-desc":
+        case "undefined/site/3/data_pack/?status=activated":
+          return Promise.resolve(sitesResponseDataPack);
+        case "undefined/site/undefined/modules":
+          return Promise.resolve(sitesResponseCategories);
+        default:
+          return Promise.reject({ status: 500 });
+      }
+    });
 
     const Component = (
       <Router history={history}>
@@ -448,7 +471,9 @@ describe("Sites module events", () => {
     const listIconAction = screen.getByTestId("icon-action-BulletList");
     expect(gridIconAction).toBeTruthy();
     expect(listIconAction).toBeTruthy();
-    fireEvent.click(listIconAction);
+    await act(async () => {
+      fireEvent.click(listIconAction);
+    });
     const listSitesItems = screen.getAllByTestId("list-site-item");
     expect(listSitesItems.length).toEqual(2);
   });
@@ -481,13 +506,14 @@ describe("Sites module events", () => {
     const listIconAction = screen.getByTestId("icon-action-BulletList");
     expect(gridIconAction).toBeTruthy();
     expect(listIconAction).toBeTruthy();
-    fireEvent.click(listIconAction);
+    await act(async () => {
+      fireEvent.click(listIconAction);
+    });
     const listSitesItems = screen.getAllByTestId("list-site-item");
     expect(listSitesItems.length).toEqual(2);
 
     fireEvent.click(listSitesItems[0]);
-
-    expect(history.location.pathname).toEqual("/sites/pages");
+    waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
   });
 
   it("should display grid view on click grid option button", async () => {
@@ -533,7 +559,25 @@ describe("Sites module events", () => {
     >;
     const initialState = { ...initialStore, ...defaultProps };
 
-    mockedAxios.mockResolvedValue(sitesResponse);
+    // mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockImplementation((request: any) => {
+      switch (request.url) {
+        case "undefined/site/1/languages":
+        case "undefined/site/1/socials":
+        case "undefined/site/undefined/templates":
+        case "undefined/site/global/metrics":
+        case "undefined/site/1/metrics":
+          return Promise.resolve(sitesResponse);
+        case "undefined/sites?recentSitesNumber=7&pagination=true&page=1&itemsPerPage=30&order=lastAccess-desc":
+        case "undefined/site/1/data_pack/?status=activated":
+        case "undefined/site/1/structured_data":
+          return Promise.resolve(sitesResponseDataPack);
+        case "undefined/site/undefined/modules":
+          return Promise.resolve(sitesResponseCategories);
+        default:
+          return Promise.reject(new Error("not found"));
+      }
+    });
     const Component = (
       <Router history={history}>
         <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -561,7 +605,7 @@ describe("Sites module events", () => {
     const store = mockStore(initialStore);
 
     const initialState = { ...initialStore, ...defaultProps };
-    mockedAxios.mockResolvedValue(sitesResponse);
+    mockedAxios.mockResolvedValue(sitesOptions);
 
     const Component = (
       <Router history={history}>
@@ -577,7 +621,9 @@ describe("Sites module events", () => {
 
     const newButton = screen.getByTestId("button-default");
     expect(newButton.textContent).toEqual("New");
-    fireEvent.click(newButton);
+    await act(async () => {
+      fireEvent.click(newButton);
+    });
     const siteModalForm = screen.getByTestId("site-modal-form");
     expect(siteModalForm).toBeTruthy();
   });
@@ -811,7 +857,9 @@ describe("Sites module events", () => {
 
     const listIconAction = screen.getByTestId("icon-action-BulletList");
     expect(listIconAction).toBeTruthy();
-    fireEvent.click(listIconAction);
+    await act(async () => {
+      fireEvent.click(listIconAction);
+    });
     const listItems = screen.getAllByTestId("list-site-item");
     const moreInfoButton = screen.getAllByTestId("more-info-button");
 
@@ -880,7 +928,9 @@ describe("Sites module events", () => {
 
     const listIconAction = screen.getByTestId("icon-action-BulletList");
     expect(listIconAction).toBeTruthy();
-    fireEvent.click(listIconAction);
+    await act(async () => {
+      fireEvent.click(listIconAction);
+    });
     const listItems = screen.getAllByTestId("list-site-item");
     const moreInfoButton = screen.getAllByTestId("more-info-button");
 

package/src/components/Button/index.tsx

@@ -74,7 +74,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
   }
 };
 
-interface IButtonProps {
+export interface IButtonProps {
   children: JSX.Element | string;
   type: "button" | "submit" | "reset" | undefined;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;

package/src/components/Button/style.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 
 export const Button = styled.button`
@@ -6,7 +7,7 @@ export const Button = styled.button`
   border-radius: 4px;
   z-index: 0;
   border: none;
-  color: ${p => p.theme.colors.uiBackground02};
+  color: ${(p) => p.theme.colors.uiBackground02};
   min-height: calc(${(p) => p.theme.spacing.s} * 2);
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   vertical-align: middle;
@@ -59,7 +60,7 @@ export const Button = styled.button`
   }
 `;
 
-export const TextButton = styled(Button)`
+export const TextButton = styled((props) => <Button {...props} />)`
   background-color: transparent;
   color: ${(p) => p.theme.color.interactive01};
   padding: 0 ${(p) => p.theme.spacing.xs};
@@ -88,18 +89,19 @@ export const TextButton = styled(Button)`
   }
 `;
 
-export const LineButton = styled(Button)<{ isInverse: boolean | undefined }>`
-  background-color: ${(p) => p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.interactiveBackground};
-  border: 1px solid ${(p) => p.isInverse ? "#fff" : p.theme.color.interactive01};
-  color: ${(p) => p.isInverse ? "#fff" : p.theme.color.interactive01};
+export const LineButton = styled((props) => <Button {...props} />)<{ isInverse: boolean | undefined }>`
+  background-color: ${(p) => (p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.interactiveBackground)};
+  border: 1px solid ${(p) => (p.isInverse ? "#fff" : p.theme.color.interactive01)};
+  color: ${(p) => (p.isInverse ? "#fff" : p.theme.color.interactive01)};
   :hover:before {
-    background-color: ${(p) =>p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayHoverPrimary};
+    background-color: ${(p) => (p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayHoverPrimary)};
   }
   :focus:before {
-    background-color: ${(p) => p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayFocusPrimary};
+    background-color: ${(p) => (p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayFocusPrimary)};
   }
   :active:before {
-    background-color: ${(p) => p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayPressedPrimary};
+    background-color: ${(p) =>
+      p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.overlayPressedPrimary};
   }
   :disabled {
     background-color: transparent;

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

@@ -1,4 +1,5 @@
 import { Button } from "@ax/components";
+import React from "react";
 import styled from "styled-components";
 
 const NoteWrapper = styled.div`
@@ -29,7 +30,7 @@ const DataTitle = styled.div`
   margin-left: ${(p) => p.theme.spacing.xs};
 `;
 
-const StyledButton = styled(Button)`
+const StyledButton = styled((props) => <Button {...props} />)`
   margin-left: auto;
 `;
 

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

@@ -1,4 +1,5 @@
 import { Button } from "@ax/components";
+import React from "react";
 import styled from "styled-components";
 
 const FieldWrapper = styled.div`
@@ -29,7 +30,7 @@ const DataTitle = styled.div`
   margin-left: ${(p) => p.theme.spacing.xs};
 `;
 
-const StyledButton = styled(Button)`
+const StyledButton = styled((props) => <Button {...props} />)`
   margin-left: auto;
 `;
 

package/src/components/DragAndDrop/index.tsx

@@ -29,13 +29,19 @@ const DragAndDrop = (props: any) => {
   };
 
   return (
-    <S.DragDropWrapper onDrop={_handleDrop} onDragOver={_handleDragOver} onDragEnter={_handleDragEnter} onDragLeave={_handleDragLeave}>
+    <S.DragDropWrapper
+      data-testid="drag-drop-wrapper"
+      onDrop={_handleDrop}
+      onDragOver={_handleDragOver}
+      onDragEnter={_handleDragEnter}
+      onDragLeave={_handleDragLeave}
+    >
       {children}
     </S.DragDropWrapper>
   );
 };
 
-interface IDragAndDropProps {
+export interface IDragAndDropProps {
   children: JSX.Element | JSX.Element[];
   onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
   onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;

package/src/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/index.tsx

@@ -4,7 +4,7 @@ import { useToast } from "@ax/hooks";
 import { Tooltip, IconAction, Toast } from "@ax/components";
 import { INotification } from "@ax/types";
 
-const PasteModuleButton = (props: IProps): JSX.Element => {
+const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
   const { pasteModule, setNotification, setHistoryPush, editorID, isModuleCopyUnavailable, arrayKey } = props;
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -39,7 +39,7 @@ const PasteModuleButton = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IPasteModuleProps {
   pasteModule: (editorID: number, key: string) => Promise<{ error?: INotification }>;
   setNotification?: (notification: INotification) => void;
   setHistoryPush?: (path: string, isEditor: boolean) => void;

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/style.tsx

@@ -156,7 +156,7 @@ export const ErrorMsg = styled.div`
   margin-top: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const StyledButton = styled(Button)`
+export const StyledButton = styled((props) => <Button {...props} />)`
   margin-top: ${(p) => p.theme.spacing.s};
 `;