@griddo/ax 1.72.1 → 1.72.2

package/package.json

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

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import ErrorToast, { IProps } from "@ax/components/ErrorToast";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("ErrorToast component rendering", () => {
+  it("should render the component", () => {
+    const defaultProps: IProps = {
+      size: "m",
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ErrorToast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const errorWrapper = screen.getByTestId("error-wrapper");
+    expect(errorWrapper).toBeTruthy();
+  });
+
+  it("should render the component with no size", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ErrorToast />
+      </ThemeProvider>
+    );
+
+    const errorWrapper = screen.getByTestId("error-wrapper");
+    expect(errorWrapper).toBeTruthy();
+  });
+
+  it("should render the component with a wrong size value", () => {
+    const defaultProps: IProps = {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      size: 100,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ErrorToast {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const errorWrapper = screen.getByTestId("error-wrapper");
+    expect(errorWrapper).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,243 @@
+import * as React from "react";
+
+import "jest-styled-components";
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import Pagination, { IPaginationProps } from "@ax/components/Pagination";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IPaginationProps>();
+
+describe("Pagination component rendering", () => {
+  it("should render pagination component", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const paginationWrapper = screen.getByTestId("pagination-wrapper");
+    expect(paginationWrapper).toBeTruthy();
+  });
+
+  it("should render pagination label when size equals 'S'", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = "S";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const paginationLabel = screen.getByTestId("pagination-label");
+    expect(paginationLabel.textContent).toEqual("Page 1 of 2");
+  });
+
+  it("should render pagination text input when size is undefined", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const paginationTextInput = screen.getByTestId("pagination-text-input");
+    expect(paginationTextInput).toBeTruthy();
+  });
+
+  it("should render arrow left disabled when it's first page", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = "S";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    expect(iconActionComponents.length).toEqual(2);
+
+    expect(iconActionComponents[0]).toHaveStyleRule("pointer-events", "none");
+  });
+
+  it("should render arrow right disabled when it's last page", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 2;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = "S";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+
+    expect(iconActionComponents[0]).toHaveStyleRule("pointer-events", "auto");
+    expect(iconActionComponents[1]).toHaveStyleRule("pointer-events", "none");
+  });
+});
+
+describe("Pagination component events", () => {
+  it("should call setPage when click next page button", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = "S";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    fireEvent.click(iconActionComponents[1]);
+    expect(setPageMock).toBeCalled();
+  });
+
+  it("should call setPage when click next page button", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = "S";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    fireEvent.click(iconActionComponents[1]);
+    expect(setPageMock).toBeCalled();
+  });
+
+  it("should call setPage when click prev page button", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 2;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = "S";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    fireEvent.click(iconActionComponents[0]);
+    expect(setPageMock).toBeCalled();
+  });
+
+  it("should call setPage when change input value", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const paginationTextInput = screen.getByTestId("pagination-text-input");
+    fireEvent.change(paginationTextInput, { target: { value: 2 } });
+    expect(setPageMock).toBeCalled();
+  });
+
+  it("should call setPage with 0 when change input value is not a number", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const paginationTextInput = screen.getByTestId("pagination-text-input");
+    fireEvent.change(paginationTextInput, { target: { value: "A" } });
+    expect(setPageMock).toBeCalledWith(0);
+  });
+
+  it("shouldn't call setPage when current page is lower than or equal to 1", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 1;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    fireEvent.click(iconActionComponents[0]);
+    expect(setPageMock).not.toHaveBeenCalled();
+  });
+
+  it("shouldn't call setPage when current page is greater than or equal to last page", () => {
+    const setPageMock = jest.fn();
+    defaultProps.currPage = 2;
+    defaultProps.itemsPerPage = 10;
+    defaultProps.setPage = setPageMock;
+    defaultProps.totalItems = 14;
+    defaultProps.size = undefined;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Pagination {...defaultProps} />
+      </ThemeProvider>
+    );
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    fireEvent.click(iconActionComponents[1]);
+    expect(setPageMock).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,11 +1,14 @@
 import * as React from "react";
-import Tabs, { ITabsProps } from "@ax/components/Tabs";
+
+import "jest-styled-components";
 import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
-import "jest-styled-components";
+import Tabs, { ITabsProps } from "@ax/components/Tabs";
 
 afterEach(cleanup);
 
@@ -202,4 +205,4 @@ describe("Tabs component events", () => {
     expect(tabs[0]).toHaveStyleRule("cursor", "initial");
     expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
   });
-});
+});

package/src/components/ErrorToast/index.tsx

@@ -5,11 +5,11 @@ import * as S from "./style";
 const ErrorToast = (props: IProps) => {
   const { size } = props;
   return (
-    <S.ErrorWrapper id="error" size={size}/>
+    <S.ErrorWrapper id="error" data-testid="error-wrapper" size={size}/>
   );
 };
 
-interface IProps {
+export interface IProps {
   size?: string;
 }
 

package/src/components/Pagination/index.tsx

@@ -4,7 +4,7 @@ import { IconAction } from "@ax/components";
 
 import * as S from "./style";
 
-const Pagination = (props: IProps) => {
+const Pagination = (props: IPaginationProps) => {
   const { itemsPerPage, totalItems, setPage, currPage, size } = props;
 
   const lastPage = Math.ceil(totalItems / itemsPerPage);
@@ -33,11 +33,11 @@ const Pagination = (props: IProps) => {
     setPage(nextPage);
   };
 
-  const CurrentPage = size === "S" ? currPage : <S.Input type="text" value={currPage} onChange={_handleChange} />;
+  const CurrentPage = size === "S" ? currPage : <S.Input data-testid="pagination-text-input" type="text" value={currPage} onChange={_handleChange} />;
 
   return (
     <S.Wrapper data-testid="pagination-wrapper">
-      <S.Literal size={size}>
+      <S.Literal size={size} data-testid="pagination-label">
         Page {CurrentPage} of {lastPage}
       </S.Literal>
       <IconAction icon="left-arrow" onClick={handlePrev} disabled={isFirstPage} />
@@ -46,7 +46,7 @@ const Pagination = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IPaginationProps {
   setPage?: any;
   itemsPerPage: number;
   totalItems: number;