@griddo/ax 1.73.4 → 1.73.5

package/package.json

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

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

@@ -0,0 +1,141 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, cleanup, screen, fireEvent, waitFor } from "@testing-library/react";
+import { parseTheme } from "@ax/helpers";
+import "@testing-library/jest-dom";
+
+import MenuItem, { IMenuItemProps } from "@ax/components/MenuItem";
+import globalTheme from "@ax/themes/theme.json";
+import userEvent from "@testing-library/user-event";
+
+afterEach(cleanup);
+
+describe("MenuItem component rendering", () => {
+  it("should render the component inactive", () => {
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subItem = screen.getByTestId("menu-subitem");
+    expect(subItem).toBeTruthy();
+  });
+
+  it("should render the component active", () => {
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+      active: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subItem = screen.getByTestId("menu-subitem");
+    expect(subItem).toBeTruthy();
+  });
+
+  it("should render with extendend action visible", () => {
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+      extendedAction: { icon: "delete", action: jest.fn(), onlyOnHover: false },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subItem = screen.getByTestId("menu-subitem");
+    const extendedAction = screen.getByTestId("menu-extended-action");
+    expect(subItem).toBeTruthy();
+    expect(extendedAction).toBeTruthy();
+  });
+
+  it("should render with extendend action not visible", () => {
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+      extendedAction: { icon: "delete", action: jest.fn(), onlyOnHover: true },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subItem = screen.getByTestId("menu-subitem");
+    const extendedAction = screen.getByTestId("menu-extended-action");
+    expect(subItem).toBeTruthy();
+    expect(extendedAction).not.toBeVisible();
+  });
+
+  it("should render with extendend action not visible if onlyOnHover is undefined", () => {
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+      extendedAction: { icon: "delete", action: jest.fn() },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subItem = screen.getByTestId("menu-subitem");
+    const extendedAction = screen.getByTestId("menu-extended-action");
+    expect(subItem).toBeTruthy();
+    expect(extendedAction).not.toBeVisible();
+  });
+});
+
+describe("component events", () => {
+  test("onClick is been called", () => {
+    const onClickMock = jest.fn();
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+      onClick: onClickMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const subItem = screen.getByTestId("menu-subitem");
+    expect(subItem).toBeTruthy();
+    fireEvent.click(subItem);
+    expect(onClickMock).toBeCalledTimes(1);
+  });
+
+  test("extended action is called", async () => {
+    const actionMock = jest.fn();
+    const defaultProps: IMenuItemProps = {
+      children: <div>Item</div>,
+      extendedAction: { icon: "delete", action: actionMock, onlyOnHover: false },
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MenuItem {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const extendedAction = screen.getByTestId("menu-extended-action");
+    const iconActionComponent = screen.getByTestId("icon-action-component");
+    expect(extendedAction).toBeTruthy();
+    expect(iconActionComponent).toBeTruthy();
+    fireEvent.click(iconActionComponent);
+    expect(actionMock).toBeCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,56 @@
+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 Nav, { INavProps } from "@ax/components/Nav";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+describe("Nav component rendering", () => {
+  it("should render the component with 3 links", () => {
+    const items = [
+      { title: "Item 1", path: "/item1", component: "Item1" },
+      { title: "Item 2", path: "/item2", component: "Item2" },
+      { title: "Item 3", path: "/item3", component: "Item3" },
+    ];
+
+    const defaultProps: INavProps = {
+      items,
+      current: items[0],
+      onClick: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Nav {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const links = screen.queryAllByTestId("nav-link");
+    expect(links).toHaveLength(3);
+  });
+
+  it("should render the component with 0 links", () => {
+    const defaultProps: INavProps = {
+      items: [],
+      current: undefined,
+      onClick: jest.fn(),
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Nav {...defaultProps} />
+      </ThemeProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    const links = screen.queryAllByTestId("nav-link");
+    expect(links).toHaveLength(0);
+  });
+});

package/src/components/MenuItem/index.tsx

@@ -19,10 +19,10 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
   };
 
   return (
-    <S.SubItem onClick={handleOnClick} active={active}>
+    <S.SubItem onClick={handleOnClick} active={active} data-testid="menu-subitem">
       {children}
       {extendedAction && (
-        <S.ExtendedAction onlyOnHover={extendedAction.onlyOnHover ?? true}>
+        <S.ExtendedAction onlyOnHover={extendedAction.onlyOnHover ?? true} data-testid="menu-extended-action">
           <IconAction icon={extendedAction.icon} size="s" onClick={handleExtendedAction} />
         </S.ExtendedAction>
       )}
@@ -30,7 +30,7 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
   );
 };
 
-interface IMenuItemProps {
+export interface IMenuItemProps {
   children: JSX.Element | string;
   active?: boolean;
   onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;

package/src/components/Nav/index.tsx

@@ -4,22 +4,22 @@ import { NavLink } from "react-router-dom";
 import { SubNav, MenuItem } from "@ax/components";
 import { INavItem } from "@ax/types";
 
-import * as S from './style';
+import * as S from "./style";
 
-const Nav = (props: IProps): JSX.Element => {
+const Nav = (props: INavProps): JSX.Element => {
   const { current, items, onClick } = props;
 
   return (
     <SubNav>
       {items &&
         items.map((item: INavItem, key: number) => {
-          const isSelected = current && item.title === current.title;
+          const isSelected = (current && item.title === current.title) || false;
           const selectedClass = isSelected ? "selected" : "";
           const handleClick = () => onClick(item.path);
           return (
             <MenuItem key={key} onClick={handleClick}>
               <NavLink to="#" className={selectedClass}>
-                <S.Link active={isSelected}>
+                <S.Link active={isSelected} data-testid="nav-link">
                   {item.title}
                 </S.Link>
               </NavLink>
@@ -30,8 +30,8 @@ const Nav = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
-  current: INavItem;
+export interface INavProps {
+  current?: INavItem;
   items: INavItem[];
   onClick(path: string): void;
 }