@griddo/ax 1.73.29 → 1.74.1

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

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import renderer from "react-test-renderer";
+
+import { parseTheme } from "@ax/helpers";
+import Avatar from "@ax/components/Avatar";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Avatar component rendering", () => {
+  it("should render the component with name and image", () => {
+    const props = {
+      name: "Ignatius Reilly",
+      image: "https://images.dev.griddo.io/w/215/h/161/descarga-1",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Avatar {...props} />
+      </ThemeProvider>
+    );
+
+    const avatarWrapper = screen.getByTestId("avatar-wrapper");
+    const avatar = screen.queryByTestId("avatar");
+
+    expect(avatarWrapper).toBeTruthy();
+    expect(avatar).toHaveStyle(`width: 32px; height: 32px`);
+    expect(avatar).toHaveStyle(
+      `background: url("https://images.dev.griddo.io/w/215/h/161/descarga-1") center center / cover no-repeat, rgb(230, 231, 248)`
+    );
+  });
+
+  it("should render the component only with name", () => {
+    const props = {
+      name: "Ignatius Reilly",
+    };
+
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Avatar {...props} />
+        </ThemeProvider>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("should render the component with image null", () => {
+    const props = {
+      name: "Ignatius Reilly",
+      image: null,
+    };
+
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Avatar {...props} />
+        </ThemeProvider>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("should render the component without name or image", () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Avatar />
+        </ThemeProvider>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("should render the component with a wrong image url", () => {
+    const props = {
+      name: "Ignatius Reilly",
+      image: "lolololololo",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Avatar {...props} />
+      </ThemeProvider>
+    );
+
+    const avatar = screen.queryByTestId("avatar");
+
+    expect(avatar).toHaveStyle(`width: 32px; height: 32px;`);
+
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Avatar {...props} />
+        </ThemeProvider>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("should render the component with an empty string as name", () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Avatar name="" />
+        </ThemeProvider>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar component rendering should render the component only with name 1`] = `
+<div
+  className="sc-gSAPjG jRkXjC"
+  data-testid="avatar-wrapper"
+>
+  <div
+    className="sc-lbxAil fkodDH"
+    data-testid="avatar"
+  />
+</div>
+`;
+
+exports[`Avatar component rendering should render the component with a wrong image url 1`] = `
+<div
+  className="sc-gSAPjG jRkXjC"
+  data-testid="avatar-wrapper"
+>
+  <div
+    className="sc-lbxAil ejhcAS"
+    data-testid="avatar"
+  />
+</div>
+`;
+
+exports[`Avatar component rendering should render the component with an empty string as name 1`] = `
+<div
+  className="sc-gSAPjG jRkXjC"
+  data-testid="avatar-wrapper"
+>
+  <div
+    className="sc-lbxAil hilXDA"
+    data-testid="avatar"
+  />
+</div>
+`;
+
+exports[`Avatar component rendering should render the component with image null 1`] = `
+<div
+  className="sc-gSAPjG jRkXjC"
+  data-testid="avatar-wrapper"
+>
+  <div
+    className="sc-lbxAil jDWEnq"
+    data-testid="avatar"
+  />
+</div>
+`;
+
+exports[`Avatar component rendering should render the component without name or image 1`] = `
+<div
+  className="sc-gSAPjG jRkXjC"
+  data-testid="avatar-wrapper"
+>
+  <div
+    className="sc-lbxAil hilXDA"
+    data-testid="avatar"
+  />
+</div>
+`;

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

@@ -439,19 +439,19 @@ describe("onChange events", () => {
     const initialState = { ...initialStore, ...defaultProps };
     const onChange = jest.fn();
 
-    mockApiCalls();
+  //   mockApiCalls();
 
-    const Component = (
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ReferenceField {...initialState} onChange={onChange} />
-      </ThemeProvider>
-    );
+  //   const Component = (
+  //     <ThemeProvider theme={parseTheme(globalTheme)}>
+  //       <ReferenceField {...initialState} onChange={onChange} />
+  //     </ThemeProvider>
+  //   );
 
-    const { rerender } = render(Component, { store });
+  //   const { rerender } = render(Component, { store });
 
-    await act(async () => {
-      rerender(Component);
-    });
+  //   await act(async () => {
+  //     rerender(Component);
+  //   });
 
     const referenceFieldItems = screen.getAllByTestId("reference-field-item");
     expect(referenceFieldItems[0]).toHaveTextContent("Article 02");

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

@@ -0,0 +1,221 @@
+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 { parseTheme } from "@ax/helpers";
+import LanguageMenu from "@ax/components/LanguageMenu";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  language: "en_GB",
+  availableLanguages: [
+    {
+      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",
+    },
+  ],
+  isInAppBar: true,
+};
+
+describe("LanguageMenu component rendering", () => {
+  it("should render the component", () => {
+    const setLanguage = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <LanguageMenu setLanguage={setLanguage} {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const languageMenu = screen.getByTestId("language-menu");
+    expect(languageMenu).toBeTruthy();
+    const languageMenuItems = screen.getAllByTestId("language-menu-item");
+    expect(languageMenuItems.length).toBe(2);
+    expect(screen.getByText(/English/i)).toBeTruthy();
+
+    // current selected language
+    expect(languageMenuItems[0].querySelector(`div[data-testid="language-icon"]`)).toBeTruthy();
+  });
+
+  it("should render the component without props", () => {
+    const setLanguage = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <LanguageMenu setLanguage={setLanguage} />
+      </ThemeProvider>
+    );
+
+    const languageMenu = screen.getByTestId("language-menu");
+    expect(languageMenu).toBeTruthy();
+
+    const languageMenuItem = screen.queryAllByTestId("language-menu-item");
+    expect(languageMenuItem.length).toBe(0);
+  });
+
+  it("should render the component with only one language", () => {
+    const setLanguage = jest.fn();
+
+    const props = {
+      language: "en_GB",
+      availableLanguages: [
+        {
+          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",
+        },
+      ],
+      isInAppBar: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <LanguageMenu setLanguage={setLanguage} {...props} />
+      </ThemeProvider>
+    );
+
+    const languageMenu = screen.getByTestId("language-menu");
+    expect(languageMenu).toBeTruthy();
+
+    const languageMenuItem = screen.queryAllByTestId("language-menu-item");
+    expect(languageMenuItem.length).toBe(1);
+  });
+
+  it("should render the component showing new version language", () => {
+    const setLanguage = jest.fn();
+
+    const props = {
+      language: "en_GB",
+      availableLanguages: defaultProps.availableLanguages,
+      isInAppBar: false,
+      currentLanguages: [
+        {
+          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",
+        },
+      ],
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <LanguageMenu setLanguage={setLanguage} {...props} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText(/Add new version/i)).toBeTruthy();
+  });
+});
+
+it("should render the component showing an editable language", () => {
+  const setLanguage = jest.fn();
+
+  const props = {
+    language: "en_GB",
+    availableLanguages: defaultProps.availableLanguages,
+    isInAppBar: false,
+    currentLanguages: [
+      {
+        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",
+      },
+      {
+        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",
+      },
+    ],
+  };
+
+  render(
+    <ThemeProvider theme={parseTheme(globalTheme)}>
+      <LanguageMenu setLanguage={setLanguage} {...props} />
+    </ThemeProvider>
+  );
+
+  expect(screen.queryByText(/Add new version/i)).toBeFalsy();
+  const languageMenuItems = screen.getAllByTestId("language-menu-item");
+  expect(languageMenuItems.length).toBe(2);
+  expect(screen.getByText(/Spanish/i)).toBeTruthy();
+});
+
+describe("LanguageMenu component events", () => {
+  it("should call setLanguage on clicking the second language in the list", () => {
+    const setLanguage = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <LanguageMenu setLanguage={setLanguage} {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const languageMenuItems = screen.getAllByTestId("language-menu-item");
+    fireEvent.click(languageMenuItems[1]);
+
+    expect(setLanguage).toHaveBeenLastCalledWith(defaultProps.availableLanguages[1]);
+  });
+});

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Loading from "@ax/components/Loading";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Loading component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Loading />
+      </ThemeProvider>
+    );
+
+    const wrapper = screen.getByTestId("loading-wrapper");
+    expect(wrapper).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,247 @@
+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 { parseTheme } from "@ax/helpers";
+import Login, { ILoginProps } from "@ax/components/Login";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const settings = {
+  cloudinaryName: "cloudinary",
+  globalLogoBig: "https://images.dev.griddo.io/logothesaurusextenden-2x-jrexex_6",
+  globalLogoMini: "https://images.dev.griddo.io/logothesaurusreduced-2x-cltah3_1",
+  siteLogoBig: "https://images.dev.griddo.io/logobs_1",
+  siteLogoMini: "https://images.dev.griddo.io/logobs-mini_1",
+  welcomeText1: "Welcome back to",
+  welcomeText2: "Griddo",
+};
+
+describe("Login component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps: ILoginProps = {
+      handleSubmit: jest.fn(),
+      email: "hola@secuoyas.com",
+      handleEmail: jest.fn(),
+      password: "password",
+      handlePassword: jest.fn(),
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const wrapper = screen.getByTestId("login-wrapper");
+    expect(wrapper).toBeTruthy();
+    const welcomeText1 = screen.getByText("Welcome back to");
+    expect(welcomeText1).toBeTruthy();
+    const welcomeText2 = screen.getByText("Griddo");
+    expect(welcomeText2).toBeTruthy();
+    const loginButton = screen.getByText("Log in");
+    expect(loginButton).toBeTruthy();
+  });
+
+  it("should render the component with log button disabled", () => {
+    const handleSubmitMock = jest.fn();
+    const defaultProps: ILoginProps = {
+      handleSubmit: handleSubmitMock,
+      email: "hola@secuoyas.com",
+      handleEmail: jest.fn(),
+      password: "password",
+      handlePassword: jest.fn(),
+      isLoggingIn: true,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const loginButton = screen.queryByText("Log in");
+    expect(loginButton).toBeFalsy();
+    const loginButtonSending = screen.getByText("Sending");
+    expect(loginButtonSending).toBeTruthy();
+    fireEvent.click(loginButtonSending);
+    expect(handleSubmitMock).toBeCalledTimes(0);
+  });
+});
+
+describe("Login component events", () => {
+  it("should call submit function on button click", () => {
+    const handleSubmitMock = jest.fn((e) => e.preventDefault());
+    const defaultProps: ILoginProps = {
+      handleSubmit: handleSubmitMock,
+      email: "hola@secuoyas.com",
+      handleEmail: jest.fn(),
+      password: "password",
+      handlePassword: jest.fn(),
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const loginButton = screen.getByText("Log in");
+    expect(loginButton).toBeTruthy();
+    fireEvent.click(loginButton);
+    expect(handleSubmitMock).toBeCalledTimes(1);
+  });
+
+  it("should call handleEmail function on email change", () => {
+    const handleEmailMock = jest.fn();
+    const defaultProps: ILoginProps = {
+      handleSubmit: jest.fn((e) => e.preventDefault()),
+      email: "hola@secuoyas.com",
+      handleEmail: handleEmailMock,
+      password: "password",
+      handlePassword: jest.fn(),
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByLabelText("email");
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba" } });
+    expect(handleEmailMock).toBeCalledTimes(1);
+  });
+
+  it("should call handlePassword function on password change", () => {
+    const handlePasswordMock = jest.fn();
+    const defaultProps: ILoginProps = {
+      handleSubmit: jest.fn((e) => e.preventDefault()),
+      email: "hola@secuoyas.com",
+      handleEmail: jest.fn(),
+      password: "password",
+      handlePassword: handlePasswordMock,
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByLabelText("password");
+    expect(input).toBeTruthy();
+    fireEvent.change(input, { target: { value: "prueba" } });
+    expect(handlePasswordMock).toBeCalledTimes(1);
+  });
+
+  it("should call handleRememberMe function on input click", () => {
+    const handleRememberMeMock = jest.fn();
+    const defaultProps: ILoginProps = {
+      handleSubmit: jest.fn((e) => e.preventDefault()),
+      email: "hola@secuoyas.com",
+      handleEmail: jest.fn(),
+      password: "password",
+      handlePassword: jest.fn(),
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: handleRememberMeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByLabelText("rememberMe");
+    expect(input).toBeTruthy();
+    fireEvent.click(input);
+    expect(handleRememberMeMock).toBeCalledTimes(1);
+  });
+
+  it("should change input type on button click", () => {
+    const defaultProps: ILoginProps = {
+      handleSubmit: jest.fn((e) => e.preventDefault()),
+      email: "hola@secuoyas.com",
+      handleEmail: jest.fn(),
+      password: "",
+      handlePassword: jest.fn(),
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByLabelText("password");
+    expect(input).toBeTruthy();
+    expect(input).toHaveAttribute("type", "password");
+
+    const button = screen.getByTestId("icon-component");
+    expect(button).toBeTruthy();
+    fireEvent.click(button);
+
+    expect(input).toHaveAttribute("type", "text");
+  });
+});
+
+describe("Recovery Modal rendering", () => {
+  it("should render the recovery modal on button click", () => {
+    const defaultProps: ILoginProps = {
+      handleSubmit: jest.fn(),
+      email: "",
+      handleEmail: jest.fn(),
+      password: "",
+      handlePassword: jest.fn(),
+      isLoggingIn: false,
+      settings,
+      rememberMe: false,
+      handleRememberMe: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Login {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const modalClosed = screen.queryByTestId("recovery-modal-content");
+    expect(modalClosed).toBeFalsy();
+
+    const button = screen.getByTestId("forgot-button");
+    expect(button).toBeTruthy();
+    fireEvent.click(button);
+
+    const modal = screen.getByTestId("recovery-modal-content");
+    expect(modal).toBeTruthy();
+  });
+});