@griddo/ax 1.73.10 → 1.73.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.73.10",
+  "version": "1.73.11",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -226,5 +226,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b60b2dea4d4782ea2a362cd0f1e29aac41ba7dda"
+  "gitHead": "0ff3dc60103c9eda592bec1db564b7afff2871bf"
 }

package/src/__tests__/components/MainWrapper/AppBar/AppBar.test.tsx

@@ -0,0 +1,505 @@
+import * as React from "react";
+import { BrowserRouter } from "react-router-dom";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import AppBar, { IAppBarProps } from "@ax/components/MainWrapper/AppBar";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("AppBar component rendering", () => {
+  it("should render the component empty with title", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const header = screen.getByTestId("appbar-header");
+    expect(header).toBeTruthy();
+    expect(header).not.toHaveClass("fixed");
+
+    const title = screen.getByText("the title");
+    expect(title).toBeTruthy();
+
+    const backButton = screen.queryByTestId("back-button-wrapper");
+    expect(backButton).toBeFalsy();
+
+    const tabsWrapper = screen.queryByTestId("tabs-wrapper");
+    expect(tabsWrapper).toBeFalsy();
+
+    const searchWrapper = screen.queryByTestId("search-wrapper");
+    expect(searchWrapper).toBeFalsy();
+
+    const languageWrapper = screen.queryByTestId("language-wrapper");
+    expect(languageWrapper).toBeFalsy();
+
+    const pageStatusWrapper = screen.queryByTestId("page-status-wrapper");
+    expect(pageStatusWrapper).toBeFalsy();
+
+    const errorCenterWrapper = screen.queryByTestId("error-center-wrapper");
+    expect(errorCenterWrapper).toBeFalsy();
+  });
+
+  it("should render the component with subtitle", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      subtitle: "the subtitle",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const subtitle = screen.getByText("the subtitle");
+    expect(subtitle).toBeTruthy();
+  });
+
+  it("should render the component inversed", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      inversed: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const header = screen.getByTestId("appbar-header");
+    expect(header).toBeTruthy();
+  });
+
+  it("should render with fixed class", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      fixedAppBar: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const header = screen.getByTestId("appbar-header");
+    expect(header).toBeTruthy();
+    expect(header).toHaveClass("fixed");
+  });
+
+  it("should render without fixed class", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      fixedAppBar: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const header = screen.getByTestId("appbar-header");
+    expect(header).toBeTruthy();
+    expect(header).not.toHaveClass("fixed");
+  });
+
+  it("should render with additional class", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      additionalClass: "customClass",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const header = screen.getByTestId("appbar-header");
+    expect(header).toBeTruthy();
+    expect(header).toHaveClass("customClass");
+  });
+
+  it("should render with back link", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      backLink: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const backButton = screen.getByTestId("back-button-wrapper");
+    expect(backButton).toBeTruthy();
+  });
+
+  it("should render tabs with icons", () => {
+    const tabs = {
+      icons: [
+        { name: "tab1", text: "Tab 1" },
+        { name: "tab2", text: "Tab 2" },
+      ],
+      selectedTab: "tab1",
+      action: jest.fn(),
+    };
+
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      tabs,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const tabsWrapper = screen.getByTestId("tabs-wrapper");
+    expect(tabsWrapper).toBeTruthy();
+  });
+
+  it("should render tabs", () => {
+    const tabs = {
+      tabSet: ["Tab 1", "Tab 2"],
+      selectedTab: "Tab 1",
+      action: jest.fn(),
+    };
+
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      tabs,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const tabsWrapper = screen.getByTestId("tabs-wrapper");
+    expect(tabsWrapper).toBeTruthy();
+  });
+
+  it("should render the search field", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      searchAction: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const searchWrapper = screen.getByTestId("search-wrapper");
+    expect(searchWrapper).toBeTruthy();
+  });
+
+  it("should render the language", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      language: { locale: "es_ES", id: 4 },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const languageWrapper = screen.getByTestId("language-wrapper");
+    expect(languageWrapper).toBeTruthy();
+  });
+
+  it("should render the page status", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      pageStatus: "active",
+      pageStatusActions: [
+        {
+          icon: "icon",
+          label: "Action 1",
+          action: jest.fn(),
+        },
+        {
+          icon: "icon2",
+          label: "Action 2",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const pageStatusWrapper = screen.getByTestId("page-status-wrapper");
+    expect(pageStatusWrapper).toBeTruthy();
+  });
+
+  it("should render the error center", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      isFromEditor: true,
+      errors: [
+        {
+          type: "error",
+          message: "error message 1",
+          validator: {},
+          editorID: null,
+          component: "",
+          name: "",
+          key: "",
+          tab: "",
+          template: false,
+        },
+        {
+          type: "error",
+          message: "error message 2",
+          validator: {},
+          editorID: null,
+          component: "",
+          name: "",
+          key: "",
+          tab: "",
+          template: false,
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const errorCenterWrapper = screen.getByTestId("error-center-wrapper");
+    expect(errorCenterWrapper).toBeTruthy();
+  });
+
+  it("should render the right line button", () => {
+    const label = "the right line button";
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      rightLineButton: {
+        label,
+        action: jest.fn(),
+      },
+    };
+
+    const { getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const button = getByText(label);
+    expect(button).toBeTruthy();
+  });
+
+  it("should render the right button", () => {
+    const label = "the right button";
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      rightButton: {
+        label,
+        action: jest.fn(),
+      },
+    };
+
+    const { getByText } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const button = getByText(label);
+    expect(button).toBeTruthy();
+  });
+
+  it("should render the action menu", () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      downArrowMenu: {
+        displayed: true,
+        options: [
+          {
+            icon: "icon",
+            label: "Action 1",
+            action: jest.fn(),
+          },
+          {
+            icon: "icon2",
+            label: "Action 2",
+            action: jest.fn(),
+          },
+        ],
+        button: { label: "the menu button", action: jest.fn() },
+      },
+    };
+
+    const { getByTestId } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const arrowButtonWrapper = getByTestId("down-arrow-button-wrapper");
+    expect(arrowButtonWrapper).toBeTruthy();
+  });
+});
+
+describe("AppBar component events", () => {
+  it("should render the language menu on click", async () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      downArrowMenu: {
+        displayed: true,
+        options: [
+          {
+            icon: "icon",
+            label: "Action 1",
+            action: jest.fn(),
+          },
+          {
+            icon: "icon2",
+            label: "Action 2",
+            action: jest.fn(),
+          },
+        ],
+        button: { label: "the menu button", action: jest.fn() },
+      },
+      language: { locale: "en_GB", id: 4 },
+      availableLanguages: [
+        {
+          domain: { id: 1, slug: "/pre-griddo", url: "//cx.dev.griddo.io/pre-griddo" },
+          home: "//cx.dev.griddo.io/pre-griddo/gonzalo-h",
+          id: 4,
+          isDefault: true,
+          label: "EN",
+          language: "English",
+          locale: "en_GB",
+          path: "/gonzalo-h",
+        },
+        {
+          domain: { id: 1, url: "//cx.dev.griddo.io/pre-griddo", slug: "/pre-griddo" },
+          home: "//cx.dev.griddo.io/pre-griddo/gonzalo-h/es",
+          id: 2,
+          isDefault: false,
+          label: "ES",
+          language: "Spanish",
+          locale: "es_ES",
+          path: "/gonzalo-h/es",
+        },
+      ],
+      languageActions: {
+        createNewTranslation: jest.fn(),
+        getSiteContent: jest.fn(),
+        setLanguage: jest.fn(),
+      },
+    };
+
+    const { getByTestId, getAllByTestId } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const languageMenuBtn = getByTestId("language-menu-btn");
+    expect(languageMenuBtn).toBeTruthy();
+    fireEvent.click(languageMenuBtn);
+    const languageMenu = getByTestId("language-menu");
+    expect(languageMenu).toBeTruthy();
+    const languageMenuItem = getAllByTestId("language-menu-item");
+    expect(languageMenuItem.length).toEqual(2);
+    const languageLocaleLabel = getByTestId("language-locale-label");
+    expect(languageLocaleLabel.textContent).toEqual("en_GB");
+    expect(languageMenuItem[0].textContent).toEqual("EN - English");
+    expect(languageMenuItem[1].textContent).toEqual("ES - Spanish");
+  });
+
+  it("should render the status menu on click", async () => {
+    const defaultProps: IAppBarProps = {
+      title: "the title",
+      downArrowMenu: {
+        displayed: true,
+        options: [
+          {
+            icon: "icon",
+            label: "Action 1",
+            action: jest.fn(),
+          },
+          {
+            icon: "icon2",
+            label: "Action 2",
+            action: jest.fn(),
+          },
+        ],
+        button: { label: "the menu button", action: jest.fn() },
+      },
+      pageStatus: "active",
+      pageStatusActions: [
+        {
+          icon: "icon",
+          label: "Action 1",
+          action: jest.fn(),
+        },
+        {
+          icon: "icon2",
+          label: "Action 2",
+          action: jest.fn(),
+        },
+      ],
+    };
+
+    const { getByTestId, getAllByTestId } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <AppBar {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const statusBtn = getByTestId("status-button");
+    expect(statusBtn).toBeTruthy();
+    fireEvent.click(statusBtn);
+    const actionSimpleMenu = getByTestId("action-simple-menu");
+    expect(actionSimpleMenu).toBeTruthy();
+    const actionMenuItem = getAllByTestId("action-menu-item");
+    expect(actionMenuItem.length).toEqual(2);
+  });
+});

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

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { BrowserRouter } from "react-router-dom";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import MainWrapper, { IWrapperProps } from "@ax/components/MainWrapper";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("MainWrapper component rendering", () => {
+  it("should render the component with children", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+      children: <div>the children</div>,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const wrapper = screen.getByTestId("main-wrapper");
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("should render the component without children", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const wrapper = screen.getByTestId("main-wrapper");
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("should add padding top if fixedAppBar", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+      fixedAppBar: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const wrapper = screen.getByTestId("main-wrapper");
+    expect(wrapper).toBeTruthy();
+    expect(wrapper).toHaveStyle(`padding-top: 64px`);
+  });
+
+  it("should add padding top if fixedAppBar", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+      fixedAppBar: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const wrapper = screen.getByTestId("main-wrapper");
+    expect(wrapper).toBeTruthy();
+    expect(wrapper).toHaveStyle(`padding-top: 64px`);
+  });
+
+  it("should have padding top 0 if fixedAppBar is false", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+      fixedAppBar: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const wrapper = screen.getByTestId("main-wrapper");
+    expect(wrapper).toBeTruthy();
+    expect(wrapper).toHaveStyle(`padding-top: 0`);
+  });
+
+  it("main should have overflow visible if fullwidth", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+      fullWidth: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const main = screen.getByTestId("main-component");
+    expect(main).toBeTruthy();
+    expect(main).toHaveStyle(`overflow: visible`);
+  });
+
+  it("main should have overflow auto if not fullwidth", () => {
+    const defaultProps: IWrapperProps = {
+      title: "the title",
+      fullWidth: false,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MainWrapper {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const main = screen.getByTestId("main-component");
+    expect(main).toBeTruthy();
+    expect(main).toHaveStyle(`overflow: auto`);
+  });
+});

package/src/components/LanguageMenu/index.tsx

@@ -37,7 +37,7 @@ const LanguageMenu = (props: IProps): JSX.Element => {
   };
 
   const languageMenuItem = (item: ILanguage) => (
-    <S.LanguageItem key={item.locale} selected={item.locale === language} onClick={setLanguage(item)}>
+    <S.LanguageItem key={item.locale} selected={item.locale === language} onClick={setLanguage(item)} data-testid="language-menu-item">
       <S.LanguageItemWrapper>
         <S.LanguageLabel>
           <Flag name={item.locale} />
@@ -54,7 +54,7 @@ const LanguageMenu = (props: IProps): JSX.Element => {
   );
 
   return (
-    <S.ActionMenu>{availableLanguages && availableLanguages.map((item: any) => languageMenuItem(item))}</S.ActionMenu>
+    <S.ActionMenu data-testid="language-menu">{availableLanguages && availableLanguages.map((item: any) => languageMenuItem(item))}</S.ActionMenu>
   );
 };
 

package/src/components/MainWrapper/AppBar/atoms.tsx

@@ -6,7 +6,7 @@ import * as S from "./style";
 const ActionMenuItem = (item: any, color?: boolean) => {
   const { icon, action, label } = item;
   return (
-    <S.ActionItem className={color ? "" : "grey"} key={icon} onClick={action}>
+    <S.ActionItem data-testid="action-menu-item" className={color ? "" : "grey"} key={icon} onClick={action}>
       <Icon name={icon} />
       <S.ActionText>{label}</S.ActionText>
     </S.ActionItem>
@@ -42,7 +42,7 @@ const ActionMenu = (props: any) => {
 };
 
 const DownArrowButton = (props: any) => (
-  <S.IconWrapper inversed={props.inversed}>
+  <S.IconWrapper inversed={props.inversed} data-testid="down-arrow-button-wrapper">
     <Icon name="DownArrow" />
   </S.IconWrapper>
 );
@@ -52,7 +52,7 @@ const ActionSimpleMenu = (props: any) => {
   return (
     menu &&
     menu.options && (
-      <S.ActionMenu>{menu.options.map((item: any, i: number) => ActionMenuItem(item, true))}</S.ActionMenu>
+      <S.ActionMenu data-testid="action-simple-menu">{menu.options.map((item: any, i: number) => ActionMenuItem(item, true))}</S.ActionMenu>
     )
   );
 };

package/src/components/MainWrapper/AppBar/index.tsx

@@ -114,10 +114,10 @@ const AppBar = (props: IProps): JSX.Element => {
   const LanguageBtn = () =>
     language && (
       <>
-        <S.FlagWrapper>
+        <S.FlagWrapper data-testid="language-menu-btn">
           <Flag name={language.locale} size="24" />
         </S.FlagWrapper>
-        <S.LanguageTextWrapper>{language.locale}</S.LanguageTextWrapper>
+        <S.LanguageTextWrapper data-testid="language-locale-label">{language.locale}</S.LanguageTextWrapper>
         <DownArrowButton />
       </>
     );
@@ -130,7 +130,7 @@ const AppBar = (props: IProps): JSX.Element => {
     </S.ErrorWrapper>
   );
 
-  const StatusBtn = () => pageStatus && <Icon name={pageStatus} size="24" />;
+  const StatusBtn = () => pageStatus && <S.StatusBtn data-testid="status-button"><Icon name={pageStatus} size="24" /></S.StatusBtn>;
 
   const statusMenu = {
     options: pageStatusActions,
@@ -148,12 +148,14 @@ const AppBar = (props: IProps): JSX.Element => {
   const languageTooltip = typeof currentPageID === "number" && "Add language";
 
   return (
-    <S.Header className={`${fixedClass} ${additionalClass}`} inversed={inversed}>
+    <S.Header className={`${fixedClass} ${additionalClass}`} inversed={inversed} data-testid="appbar-header">
       <S.WrapperTitle>
         {backLink && (
-          <Tooltip content="Back to content screen" bottom>
-            <IconAction icon="FullArrowLeft" onClick={goToPages} inversed={inversed} />
-          </Tooltip>
+          <span data-testid="back-button-wrapper">
+            <Tooltip content="Back to content screen" bottom>
+              <IconAction icon="FullArrowLeft" onClick={goToPages} inversed={inversed} />
+            </Tooltip>
+          </span>
         )}
         <S.Title>
           {trimText(title, 50)}
@@ -161,7 +163,7 @@ const AppBar = (props: IProps): JSX.Element => {
         </S.Title>
       </S.WrapperTitle>
       {tabs && (
-        <S.WrapperTabs>
+        <S.WrapperTabs data-testid="tabs-wrapper">
           <S.TabsContent>
             <Tabs
               tabs={tabs.tabSet}
@@ -177,7 +179,7 @@ const AppBar = (props: IProps): JSX.Element => {
       <S.WrapperEnd>
         {searchAction && (
           <>
-            <S.SearchWrapper length={searchFilters && searchFilters.length ? 8 : 5}>
+            <S.SearchWrapper length={searchFilters && searchFilters.length ? 8 : 5} data-testid="search-wrapper">
               <SearchField
                 onChange={searchAction}
                 onFilterChange={filterSearchAction}
@@ -190,7 +192,7 @@ const AppBar = (props: IProps): JSX.Element => {
         )}
         {language && (
           <>
-            <S.LanguageWrapper>
+            <S.LanguageWrapper data-testid="language-wrapper">
               <Tooltip content={languageTooltip} hideOnClick bottom>
                 <FloatingMenu Button={LanguageBtn} isInAppBar={true} position="left">
                   {languageMenu}
@@ -202,7 +204,7 @@ const AppBar = (props: IProps): JSX.Element => {
         )}
         {pageStatus && (
           <>
-            <S.IconStatusWrapper>
+            <S.IconStatusWrapper data-testid="page-status-wrapper">
               <Tooltip content={publishedTooltip[pageStatus]} bottom>
                 <PageStatus />
               </Tooltip>
@@ -212,7 +214,7 @@ const AppBar = (props: IProps): JSX.Element => {
         )}
         {isFromEditor && errors && errors.length > 0 && (
           <>
-            <S.IconStatusWrapper>
+            <S.IconStatusWrapper data-testid="error-center-wrapper">
               <FloatingMenu Button={ErrorCenterBtn} isInAppBar={true} position="left" offset={-20}>
                 <ErrorCenter errors={errors} actions={errorActions} />
               </FloatingMenu>
@@ -248,7 +250,7 @@ const AppBar = (props: IProps): JSX.Element => {
   );
 };
 
-interface IAppBarProps {
+export interface IAppBarProps {
   backLink?: boolean | string;
   rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
   rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };

package/src/components/MainWrapper/AppBar/style.tsx

@@ -181,6 +181,8 @@ const SearchWrapper = styled.div<{ length: number }>`
   justify-content: flex-end;
 `;
 
+const StatusBtn = styled.span``;
+
 export {
   ActionMenu,
   Header,
@@ -202,4 +204,5 @@ export {
   WrapperEnd,
   WrapperTitle,
   TabsContent,
+  StatusBtn
 };

package/src/components/MainWrapper/index.tsx

@@ -9,14 +9,16 @@ const MainWrapper = (props: IWrapperProps): JSX.Element => {
   const { children, fixedAppBar, fullWidth } = props;
 
   return (
-    <S.Wrapper fixedAppBar={fixedAppBar}>
+    <S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper">
       <AppBar {...props} />
-      <S.Main fullWidth={fullWidth}>{children}</S.Main>
+      <S.Main fullWidth={fullWidth} data-testid="main-component">
+        {children}
+      </S.Main>
     </S.Wrapper>
   );
 };
 
-interface IWrapperProps {
+export interface IWrapperProps {
   children?: any[] | JSX.Element;
   backLink?: boolean | string;
   rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };