@griddo/ax 1.75.33 → 1.75.35

package/config/jest/componentsMock.js

@@ -1,4 +1,5 @@
 module.exports = {
+  SiteProvider: jest.fn(),
   schemas: {
     key: "schema definition",
     all: {
@@ -1501,4 +1502,4 @@ module.exports = {
       },
     },
   },
-};
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.33",
+  "version": "1.75.35",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -183,7 +183,8 @@
     "react-test-render": "1.1.2",
     "react-test-renderer": "^18.2.0",
     "redux-mock-store": "^1.5.4",
-    "ts-jest": "^27.1.4"
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.9.1"
   },
   "resolutions": {
     "react-error-overlay": "6.0.9"
@@ -229,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8fd3e9c38978faee9d3860c4f2613423bc59e117"
+  "gitHead": "b07f3c7a091191e2bcc82ff31bb034456d68f4d0"
 }

package/src/__tests__/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Avatar component rendering should render the component only with name 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil fkodDH"
+    className="sc-lbVpMG hOAqbs"
     data-testid="avatar"
   />
 </div>
@@ -14,11 +14,11 @@ exports[`Avatar component rendering should render the component only with name 1
 
 exports[`Avatar component rendering should render the component with a wrong image url 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil ejhcAS"
+    className="sc-lbVpMG kLnTvZ"
     data-testid="avatar"
   />
 </div>
@@ -26,11 +26,11 @@ exports[`Avatar component rendering should render the component with a wrong ima
 
 exports[`Avatar component rendering should render the component with an empty string as name 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil hilXDA"
+    className="sc-lbVpMG dbQJiT"
     data-testid="avatar"
   />
 </div>
@@ -38,11 +38,11 @@ exports[`Avatar component rendering should render the component with an empty st
 
 exports[`Avatar component rendering should render the component with image null 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil jDWEnq"
+    className="sc-lbVpMG jpmXvZ"
     data-testid="avatar"
   />
 </div>
@@ -50,11 +50,11 @@ exports[`Avatar component rendering should render the component with image null
 
 exports[`Avatar component rendering should render the component without name or image 1`] = `
 <div
-  className="sc-gSAPjG jRkXjC"
+  className="sc-gScZFl gCBoym"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbxAil hilXDA"
+    className="sc-lbVpMG dbQJiT"
     data-testid="avatar"
   />
 </div>

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

@@ -0,0 +1,201 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Browser, { IBrowserProps } from "@ax/components/Browser";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(() => {
+  jest.resetAllMocks();
+  cleanup();
+});
+
+const defaultProps = mock<IBrowserProps>();
+
+defaultProps.content = {};
+defaultProps.browserRef = {
+  current: "",
+};
+defaultProps.cloudinaryName = "thesaurus-cms";
+defaultProps.disabled = false;
+defaultProps.footer = {};
+defaultProps.header = {};
+defaultProps.isPage = true;
+defaultProps.siteID = 108;
+defaultProps.siteLangs = [{}];
+defaultProps.socials = {
+  facebook: "https://www.facebook.com/SlothSanctuaryCostaRica",
+  instagram: "https://www.instagram.com/sloth.sanctuary.costa.rica/",
+};
+defaultProps.theme = "default-theme";
+defaultProps.url = "/gallery-stuff";
+
+describe("Browser component rendering", () => {
+  it("should render the component", () => {
+    defaultProps.isPreview = false;
+    defaultProps.showIframe = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Browser {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+    expect(navActionsWrapper).not.toBeTruthy();
+    const browserWrapper = screen.getByTestId("browser-wrapper");
+    expect(browserWrapper).toBeTruthy();
+    const showIframeWrapper = screen.queryByTestId("navbar-iframe-wrapper");
+    expect(showIframeWrapper).toBeTruthy();
+    const browserContentWrapper = screen.queryByTestId("browser-content-wrapper");
+    expect(browserContentWrapper).not.toBeTruthy();
+  });
+
+  it("should do the copyUrl action and return console error", () => {
+    defaultProps.isPreview = true;
+    defaultProps.showIframe = true;
+
+    document.execCommand = jest.fn();
+    console.log = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Browser {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+    expect(navActionsWrapper).toBeTruthy();
+    const browserWrapper = screen.getByTestId("browser-wrapper");
+    expect(browserWrapper).toBeTruthy();
+
+    const iconWrapperBrowser = screen.getAllByTestId("icon-wrapper-browser");
+
+    fireEvent.click(iconWrapperBrowser[0]);
+    waitFor(() => expect(console.log).toHaveBeenCalledWith("Could not copy text:"));
+  });
+
+  it("should do the copyUrl action and return document.execCommand call", () => {
+    defaultProps.isPreview = true;
+    defaultProps.showIframe = true;
+
+    Object.assign(document, {
+      execCommand: jest.fn().mockImplementation(() => Promise.resolve()),
+    });
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Browser {...defaultProps} />
+      </ThemeProvider>
+    );
+    const browserWrapper = screen.getByTestId("browser-wrapper");
+    expect(browserWrapper).toBeTruthy();
+
+    const iconWrapperBrowser = screen.getAllByTestId("icon-wrapper-browser");
+
+    fireEvent.click(iconWrapperBrowser[0]);
+    waitFor(() => expect(screen.getByText(/URL Copied/i)).toBeInTheDocument());
+  });
+
+  it("should do the copyUrl action and return clipboard call", () => {
+    defaultProps.isPreview = true;
+    defaultProps.showIframe = true;
+
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockImplementation(() => Promise.resolve()),
+      },
+    });
+
+    Object.assign(window, {
+      isSecureContext: {},
+    });
+
+    jest.spyOn(navigator.clipboard, "writeText");
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Browser {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const browserWrapper = screen.getByTestId("browser-wrapper");
+    expect(browserWrapper).toBeTruthy();
+
+    const iconWrapperBrowser = screen.getAllByTestId("icon-wrapper-browser");
+    fireEvent.click(iconWrapperBrowser[0]);
+    waitFor(() =>
+      expect(navigator.clipboard.writeText).toBeCalledWith(
+        "http://localhost/page-preview/4390/c221db88-41bf-423b-8e40-d5f7837db627"
+      )
+    );
+  });
+
+  it("should render the browserContent", () => {
+    defaultProps.isPreview = false;
+    defaultProps.showIframe = false;
+    const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<
+      (editorID: number) => void
+    >;
+    const duplicateModuleActionMock = defaultProps.actions?.duplicateModuleAction as jest.MockedFunction<
+      (editorID: number) => Promise<number>
+    >;
+    const setSelectedContentActionMock = defaultProps.actions?.setSelectedContentAction as jest.MockedFunction<
+      () => void
+    >;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Browser {...defaultProps} />
+      </ThemeProvider>
+    );
+    const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+    expect(navActionsWrapper).not.toBeTruthy();
+    const showIframeWrapper = screen.queryByTestId("navbar-iframe-wrapper");
+    expect(showIframeWrapper).not.toBeTruthy();
+    const browserContentWrapper = screen.queryByTestId("browser-content-wrapper");
+    expect(browserContentWrapper).toBeTruthy();
+  });
+
+  it("should change the iFrame width when changing the resulution", () => {
+    defaultProps.isPreview = true;
+    defaultProps.showIframe = true;
+    const deleteModuleActionMock = defaultProps.actions?.deleteModuleAction as jest.MockedFunction<
+      (editorID: number) => void
+    >;
+    const duplicateModuleActionMock = defaultProps.actions?.duplicateModuleAction as jest.MockedFunction<
+      (editorID: number) => Promise<number>
+    >;
+    const setSelectedContentActionMock = defaultProps.actions?.setSelectedContentAction as jest.MockedFunction<
+      () => void
+    >;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Browser {...defaultProps} />
+      </ThemeProvider>
+    );
+    const navActionsWrapper = screen.queryByTestId("nav-actions-wrapper");
+    expect(navActionsWrapper).toBeTruthy();
+    const showIframeWrapper = screen.queryByTestId("navbar-iframe-wrapper");
+    expect(showIframeWrapper).toBeTruthy();
+    const browserContentWrapper = screen.queryByTestId("browser-content-wrapper");
+    expect(browserContentWrapper).not.toBeTruthy();
+
+    const iframe = document.querySelector("iframe");
+    expect(iframe).toBeTruthy();
+    expect(iframe?.width).toBe("100%");
+
+    const iconActionTablet = screen.getByTestId("icon-res-tablet");
+    fireEvent.click(iconActionTablet);
+    expect(iframe?.width).toBe("768px");
+
+    const iconActionPhone = screen.getByTestId("icon-res-phone");
+    fireEvent.click(iconActionPhone);
+    expect(iframe?.width).toBe("425px");
+  });
+});

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

@@ -0,0 +1,167 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+
+import { parseTheme } from "@ax/helpers";
+import BulkSelectionOptions from "@ax/components/BulkSelectionOptions";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(() => {
+  jest.resetAllMocks();
+  cleanup();
+});
+const propActionMock = jest.fn();
+const selectItemsMock = jest.fn();
+const defaultProps = {
+  isScrolling: false,
+  checkState: { isAllSelected: false, indeterminate: false },
+  actions: [
+    {
+      icon: "delete",
+      text: "delete",
+      action: propActionMock,
+    },
+  ],
+  selectItems: selectItemsMock,
+  totalItems: 1234,
+};
+
+describe("Browser component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <BulkSelectionOptions {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkHeaderWrapper).toBeTruthy();
+
+    const tableCounter = screen.getByTestId("table-counter");
+    expect(tableCounter).toBeTruthy();
+    expect(screen.getByText("1234 results")).toBeInTheDocument();
+  });
+
+  it("should call the action on onclick", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <BulkSelectionOptions {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkHeaderWrapper).toBeTruthy();
+    const buttonText = screen.getByTestId("button-text");
+    expect(buttonText).toBeTruthy();
+    fireEvent.click(buttonText);
+    expect(propActionMock).toHaveBeenCalled();
+  });
+
+  it("should call the action on onchange", async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <BulkSelectionOptions {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkHeaderWrapper).toBeTruthy();
+    const checkFieldInput = screen.getByTestId<HTMLInputElement>("check-field-input");
+    expect(checkFieldInput).toBeTruthy();
+    await user.click(checkFieldInput);
+    expect(selectItemsMock).toHaveBeenCalled();
+  });
+
+  it("should mark the check if isAllSelected", () => {
+    const defaultPropsCheck = {
+      isScrolling: false,
+      checkState: { isAllSelected: true, indeterminate: false },
+      actions: [
+        {
+          icon: "delete",
+          text: "delete",
+          action: propActionMock,
+        },
+      ],
+      selectItems: selectItemsMock,
+      totalItems: 10,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <BulkSelectionOptions {...defaultPropsCheck} />
+      </ThemeProvider>
+    );
+
+    const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkHeaderWrapper).toBeTruthy();
+
+    const checkFieldCheckMark = screen.getAllByTestId<HTMLInputElement>("check-field-check-mark");
+    checkFieldCheckMark.map((item) => {
+      expect(item.checked).toBe(true);
+    });
+  });
+
+  it("should change the style if indeterminate is true", () => {
+    const defaultPropsCheck = {
+      isScrolling: false,
+      checkState: { isAllSelected: false, indeterminate: true },
+      actions: [
+        {
+          icon: "delete",
+          text: "delete",
+          action: propActionMock,
+        },
+      ],
+      selectItems: selectItemsMock,
+      totalItems: 10,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <BulkSelectionOptions {...defaultPropsCheck} />
+      </ThemeProvider>
+    );
+
+    const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkHeaderWrapper).toBeTruthy();
+    const theme = parseTheme(globalTheme);
+    expect(bulkHeaderWrapper).not.toHaveStyle(`border-bottom: 1px solid ${theme.color.uiLine}`);
+
+    const checkFieldCheckMark = screen.getAllByTestId<HTMLInputElement>("check-field-check-mark");
+    checkFieldCheckMark.map((item) => {
+      expect(item.checked).toBe(false);
+      expect(item).toHaveStyle("border: 2px solid #5057FF");
+    });
+  });
+
+  it("should show the borderBottom whe isScrolling is true", () => {
+    const defaultPropsCheck = {
+      isScrolling: true,
+      checkState: { isAllSelected: true, indeterminate: false },
+      actions: [
+        {
+          icon: "delete",
+          text: "delete",
+          action: propActionMock,
+        },
+      ],
+      selectItems: selectItemsMock,
+      totalItems: 10,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <BulkSelectionOptions {...defaultPropsCheck} />
+      </ThemeProvider>
+    );
+    const theme = parseTheme(globalTheme);
+    const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
+    expect(bulkHeaderWrapper).toBeTruthy();
+    expect(bulkHeaderWrapper).toHaveStyle(`border-bottom: 1px solid ${theme.color.uiLine}`);
+  });
+});

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

@@ -0,0 +1,66 @@
+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 CategoryCell, { ICategoryCellProps } from "@ax/components/CategoryCell";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ICategoryCellProps>();
+const addCategoryColorsMock = defaultProps.addCategoryColors as jest.MockedFunction<(cats: string[]) => void>;
+
+describe("CategoryCell component rendering", () => {
+  it("should render the component with no elements", () => {
+    defaultProps.categoryColors = {};
+    defaultProps.categories = false;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CategoryCell {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByTestId("elements-wrapper")).not.toBeTruthy();
+  });
+
+  it("should render the component with one element and no remaining element", () => {
+    defaultProps.categoryColors = {
+      Hogwarts: "#FFE695",
+    };
+    defaultProps.categories = ["Hogwarts"];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CategoryCell {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(addCategoryColorsMock).toBeCalled();
+    expect(screen.getByTestId("elements-wrapper")).toBeTruthy();
+    expect(screen.queryByTestId("remaining-element")).not.toBeTruthy();
+  });
+
+  it("should render the component with two remaining elements", () => {
+    defaultProps.categoryColors = {
+      Hogwarts: "#FFE695",
+      Test: "#FFE695",
+    };
+    defaultProps.categories = ["Hogwarts", "Test"];
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CategoryCell {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(addCategoryColorsMock).toBeCalled();
+    expect(screen.getByTestId("elements-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("remaining-element")).toBeTruthy();
+    expect(screen.getAllByTestId("div-element")).toHaveLength(2);
+  });
+});

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

@@ -1,9 +1,12 @@
 import React from "react";
-import CheckField from "@ax/components/Fields/CheckField";
+
 import { ThemeProvider } from "styled-components";
+import "@testing-library/jest-dom";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+import CheckField from "@ax/components/Fields/CheckField";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);
 
@@ -29,11 +32,71 @@ describe("CheckField component rendering", () => {
 
     const checkFieldLabel = screen.getByTestId("check-field-label");
     const checkFieldInput = screen.getByTestId("check-field-input");
-    const checkFieldCheckMark = screen.getByTestId("checkFieldCheckMark");
+    const checkFieldCheckMark = screen.getByTestId("check-field-check-mark");
+
+    expect(checkFieldLabel).toBeTruthy();
+    expect(checkFieldInput).toBeTruthy();
+    expect(checkFieldCheckMark).toBeTruthy();
+  });
+
+  it("should been checked", () => {
+    const newProps = {
+      name: "",
+      title: "",
+      value: "",
+      checked: true,
+      error: false,
+      disabled: false,
+      indeterminate: false,
+      onChange: jest.fn(),
+      icon: "",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckField {...newProps} />
+      </ThemeProvider>
+    );
+
+    const checkFieldLabel = screen.getByTestId("check-field-label");
+    const checkFieldInput = screen.getByTestId("check-field-input");
+    const checkFieldCheckMark = screen.getByTestId<HTMLInputElement>("check-field-check-mark");
+
+    expect(checkFieldLabel).toBeTruthy();
+    expect(checkFieldInput).toBeTruthy();
+    expect(checkFieldCheckMark).toBeTruthy();
+    expect(checkFieldCheckMark.checked).toBe(true);
+  });
+
+  it("should change the style if indeterminate is true", () => {
+    const newProps = {
+      name: "",
+      title: "",
+      value: "",
+      checked: false,
+      error: false,
+      disabled: false,
+      indeterminate: true,
+      onChange: jest.fn(),
+      icon: "",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckField {...newProps} />
+      </ThemeProvider>
+    );
+
+    const checkFieldLabel = screen.getByTestId("check-field-label");
+    const checkFieldInput = screen.getByTestId("check-field-input");
+    const checkFieldCheckMark = screen.getByTestId<HTMLInputElement>("check-field-check-mark");
 
     expect(checkFieldLabel).toBeTruthy();
     expect(checkFieldInput).toBeTruthy();
     expect(checkFieldCheckMark).toBeTruthy();
+    expect(checkFieldCheckMark.checked).toBe(false);
+    const theme = parseTheme(globalTheme);
+    expect(checkFieldCheckMark).toHaveStyle(`border: 2px solid ${theme.colors.interactive01}`);
   });
 
   it("should render the component with icon", () => {

package/src/components/Browser/index.tsx

@@ -105,12 +105,12 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   };
 
   return (
-    <S.BrowserWrapper ref={browserRef}>
+    <S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef}>
       <S.NavBar>
         <S.NavUrl>{url}</S.NavUrl>
         {isPreview && (
-          <S.NavActions>
-            <S.IconWrapper onClick={copyUrl}>
+          <S.NavActions data-testid="nav-actions-wrapper">
+            <S.IconWrapper data-testid="icon-wrapper-browser" onClick={copyUrl}>
               <Tooltip content="Copy url to share draft" bottom>
                 <Icon name="share" size="24" />
               </Tooltip>
@@ -120,12 +120,20 @@ const Browser = (props: IBrowserProps): JSX.Element => {
                 <Icon name="desktop" size="24" />
               </Tooltip>
             </S.IconWrapper>
-            <S.IconWrapper active={resolution === "tablet"} onClick={() => setResolution("tablet")}>
+            <S.IconWrapper
+              data-testid="icon-res-tablet"
+              active={resolution === "tablet"}
+              onClick={() => setResolution("tablet")}
+            >
               <Tooltip content="Tablet" bottom>
                 <Icon name="tablet" size="24" />
               </Tooltip>
             </S.IconWrapper>
-            <S.IconWrapper active={resolution === "phone"} onClick={() => setResolution("phone")}>
+            <S.IconWrapper
+              data-testid="icon-res-phone"
+              active={resolution === "phone"}
+              onClick={() => setResolution("phone")}
+            >
               <Tooltip content="Mobile" bottom>
                 <Icon name="phone" size="24" />
               </Tooltip>
@@ -134,11 +142,15 @@ const Browser = (props: IBrowserProps): JSX.Element => {
         )}
       </S.NavBar>
       {showIframe ? (
-        <S.FrameWrapper>
+        <S.FrameWrapper data-testid="navbar-iframe-wrapper">
           <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} loading="lazy" />
         </S.FrameWrapper>
       ) : (
-        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)} className="browser-content">
+        <S.Wrapper
+          data-testid="browser-content-wrapper"
+          ref={(ref: any) => ((window as any).browserRef = ref)}
+          className="browser-content"
+        >
           <BrowserContent
             cloudinaryName={cloudinaryName}
             theme={theme}
@@ -162,7 +174,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   );
 };
 
-interface IBrowserProps {
+export interface IBrowserProps {
   content: any;
   header?: any;
   footer?: any;

package/src/components/BulkSelectionOptions/index.tsx

@@ -4,11 +4,11 @@ import { Button, CheckField, TableCounter } from "@ax/components";
 
 import * as S from "./style";
 
-const BulkSelectionOptions = (props: any) => {
+const BulkSelectionOptions = (props: IBulkSelectionProps) => {
   const { isScrolling, checkState, actions, selectItems, totalItems } = props;
 
   return (
-    <S.BulkHeader isScrolling={isScrolling}>
+    <S.BulkHeader data-testid="bulk-header-wrapper" isScrolling={isScrolling}>
       <S.BulkActionsWrapper>
         <S.SelectAllCheckField>
           <CheckField
@@ -24,14 +24,9 @@ const BulkSelectionOptions = (props: any) => {
         </S.SelectAllCheckField>
         <S.BulkActions>
           {actions.map((item: any) => (
-            <Button
-              key={item.text}
-              type="button"
-              buttonStyle="text"
-              icon={item.icon}
-              children={item.text}
-              onClick={item.action}
-            />
+            <Button key={item.text} type="button" buttonStyle="text" icon={item.icon} onClick={item.action}>
+              {item.text}
+            </Button>
           ))}
         </S.BulkActions>
         <S.Counter>
@@ -42,4 +37,16 @@ const BulkSelectionOptions = (props: any) => {
   );
 };
 
+interface IBulkSelectionProps {
+  checkState: any;
+  actions: {
+    icon: string;
+    text: string;
+    action: () => void;
+  }[];
+  selectItems: () => void;
+  totalItems: number;
+  isScrolling?: boolean;
+}
+
 export default BulkSelectionOptions;

package/src/components/CategoryCell/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import { ElementsTooltip } from "@ax/components";
-import * as S from "./style"
+import * as S from "./style";
 
-const CategoryCell = (props: IProps): JSX.Element => {
+const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
   const { categories, categoryColors, addCategoryColors } = props;
 
   useEffect(() => {
@@ -17,7 +17,7 @@ const CategoryCell = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface ICategoryCellProps {
   categories: any;
   categoryColors: any;
   addCategoryColors(cats: string[]): void;

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

@@ -46,7 +46,7 @@ const CheckField = ({
           aria-label={`${name}`}
         />
         <S.CheckMark
-          data-testid={"checkFieldCheckMark"}
+          data-testid="check-field-check-mark"
           checked={checked}
           error={error}
           indeterminate={indeterminate}

package/src/modules/Redirects/BulkHeader/index.tsx

@@ -41,9 +41,9 @@ const BulkHeader = (props: IProps): JSX.Element => {
       filterItems={filterItems}
       filterValues={filterValues}
       isSiteItem={isSiteItem}
-        sortItems={sortItems}
-        sortedListStatus={sortedListStatus}
-      />
+      sortItems={sortItems}
+      sortedListStatus={sortedListStatus}
+    />
   );
 };