orcs-design-system/es/components/SideNavV2/__tests__/sections.test.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "onClick", "variant", "size", "disabled", "type", "borderRadius", "borderColor", "small", "iconOnly"],
  _excluded2 = ["children", "flexDirection", "gap", "p", "mt"],
  _excluded3 = ["children", "fontWeight"],
  _excluded4 = ["children", "sizing", "color"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/* eslint-disable react/prop-types */
import React from "react";
import { render, screen } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import SideNavTeamsSection from "../sections/SideNavTeamsSection";
import SideNavPinnedSection from "../sections/SideNavPinnedSection";
import RenderCurrentViewSection from "../components/RenderCurrentViewSection";
import { SideNavStateProvider } from "../index";
import SystemThemeProvider from "../../../SystemThemeProvider";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const renderWithTheme = (ui, options) => render(/*#__PURE__*/_jsx(SystemThemeProvider, {
  children: ui
}), options);

// Mock the RenderCurrentViewSection component to avoid portal issues in tests
jest.mock("../components/RenderCurrentViewSection", () => {
  function MockRenderCurrentViewSection(_ref) {
    let {
      viewingState
    } = _ref;
    // Don't render anything if there's no valid viewing state or no name
    if (!viewingState || !viewingState.name) {
      return null;
    }
    return /*#__PURE__*/_jsxs("div", {
      "data-testid": "render-current-view-section",
      children: [/*#__PURE__*/_jsx("div", {
        "data-testid": "viewing-name",
        children: viewingState.name
      }), /*#__PURE__*/_jsx("div", {
        "data-testid": "viewing-team-link",
        children: viewingState.teamLink
      }), viewingState.avatar && viewingState.avatar !== "" && /*#__PURE__*/_jsx("div", {
        "data-testid": "viewing-avatar",
        children: viewingState.avatar
      }), viewingState.shape && viewingState.shape !== "" && /*#__PURE__*/_jsx("div", {
        "data-testid": "viewing-shape",
        children: viewingState.shape
      }), viewingState.subNav && viewingState.subNav.length > 0 && /*#__PURE__*/_jsx("div", {
        "data-testid": "viewing-subnav",
        children: viewingState.subNav.map((item, index) => /*#__PURE__*/_jsxs("div", {
          "data-testid": "subnav-item-".concat(index),
          children: [item.name, ": ", item.link]
        }, index))
      }), viewingState.badge && /*#__PURE__*/_jsx("div", {
        "data-testid": "viewing-badge",
        children: viewingState.badge
      })]
    });
  }
  return MockRenderCurrentViewSection;
});

// Mock components that might not be available in test environment
jest.mock("../../Avatar", () => {
  function MockAvatar(_ref2) {
    let {
      image,
      customSize,
      shape
    } = _ref2;
    return /*#__PURE__*/_jsx("div", {
      "data-testid": "avatar",
      "data-image": image,
      "data-size": customSize,
      "data-shape": shape
    });
  }
  return MockAvatar;
});
jest.mock("../../Icon", () => {
  function MockIcon(_ref3) {
    let {
      icon,
      color,
      size
    } = _ref3;
    return /*#__PURE__*/_jsx("div", {
      "data-testid": "icon",
      "data-icon": icon.join(" "),
      "data-color": color,
      "data-size": size
    });
  }
  return MockIcon;
});
jest.mock("../../Button", () => {
  function MockButton(_ref4) {
    let {
        children,
        onClick,
        variant,
        size,
        disabled,
        type,
        borderRadius,
        // eslint-disable-line no-unused-vars
        borderColor,
        // eslint-disable-line no-unused-vars
        small,
        iconOnly
      } = _ref4,
      props = _objectWithoutProperties(_ref4, _excluded);
    void small;
    void iconOnly;
    return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
      "data-testid": "button",
      onClick: onClick,
      "data-variant": variant,
      "data-size": size,
      "data-disabled": disabled,
      "data-type": type
    }, props), {}, {
      children: children
    }));
  }
  return MockButton;
});
jest.mock("../../Flex", () => {
  function MockFlex(_ref5) {
    let {
        children,
        flexDirection,
        gap,
        p,
        mt
      } = _ref5,
      props = _objectWithoutProperties(_ref5, _excluded2);
    return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
      "data-testid": "flex",
      "data-direction": flexDirection,
      "data-gap": gap,
      "data-p": p,
      "data-mt": mt
    }, props), {}, {
      children: children
    }));
  }
  return MockFlex;
});
jest.mock("../../Typography", () => {
  function MockH5(_ref6) {
    let {
        children,
        fontWeight
      } = _ref6,
      props = _objectWithoutProperties(_ref6, _excluded3);
    return /*#__PURE__*/_jsx("h5", _objectSpread(_objectSpread({
      "data-testid": "h5",
      "data-font-weight": fontWeight
    }, props), {}, {
      children: children
    }));
  }
  function MockH6(_ref7) {
    let {
        children,
        sizing,
        color
      } = _ref7,
      props = _objectWithoutProperties(_ref7, _excluded4);
    return /*#__PURE__*/_jsx("h6", _objectSpread(_objectSpread({
      "data-testid": "h6",
      "data-sizing": sizing,
      "data-color": color
    }, props), {}, {
      children: children
    }));
  }
  return {
    H5: MockH5,
    H6: MockH6
  };
});
const renderWithRouter = component => {
  return renderWithTheme(/*#__PURE__*/_jsx(BrowserRouter, {
    children: component
  }));
};
describe("SideNavTeamsSection", () => {
  const mockTeams = [{
    avatar: "team1.jpg",
    name: "Team Alpha",
    link: "/teams/alpha"
  }, {
    avatar: "team2.jpg",
    name: "Team Beta",
    link: "/teams/beta"
  }];
  it("should render teams section when expanded", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: mockTeams,
      isExpanded: true
    }));
    expect(screen.getByText("My Teams")).toBeInTheDocument();
    expect(screen.getByText("Team Alpha")).toBeInTheDocument();
    expect(screen.getByText("Team Beta")).toBeInTheDocument();
  });
  it("should not show title when collapsed", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: mockTeams,
      isExpanded: false
    }));
    expect(screen.queryByText("My Teams")).not.toBeInTheDocument();
  });
  it("should render avatars for each team", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: mockTeams,
      isExpanded: true
    }));
    const avatars = screen.getAllByTestId("avatar");
    expect(avatars).toHaveLength(2);
    expect(avatars[0]).toHaveAttribute("data-image", "team1.jpg");
    expect(avatars[1]).toHaveAttribute("data-image", "team2.jpg");
  });

  // Prop validation tests
  it("should handle empty teams array", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: [],
      isExpanded: true
    }));
    expect(screen.getByText("My Teams")).toBeInTheDocument();
    // Should not crash with empty array
  });
  it("should handle teams with missing optional props", () => {
    const teamsWithMissingProps = [{
      name: "Team Alpha",
      link: "/teams/alpha"
    },
    // missing avatar
    {
      avatar: "team2.jpg",
      name: "Team Beta",
      link: "/teams/beta"
    }];
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: teamsWithMissingProps,
      isExpanded: true
    }));
    expect(screen.getByText("My Teams")).toBeInTheDocument();
    expect(screen.getByText("Team Alpha")).toBeInTheDocument();
    expect(screen.getByText("Team Beta")).toBeInTheDocument();
  });
  it("should handle undefined isExpanded prop", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: mockTeams
    }));

    // When isExpanded is undefined, it defaults to false, so no text should be visible
    expect(screen.queryByText("My Teams")).not.toBeInTheDocument();
    // Team names are still visible in popovers when collapsed
    expect(screen.getByText("Team Alpha")).toBeInTheDocument();
    expect(screen.getByText("Team Beta")).toBeInTheDocument();
    // But avatars should still be rendered
    const avatars = screen.getAllByTestId("avatar");
    expect(avatars).toHaveLength(2);
  });
  it("should handle null teams prop", () => {
    // The component should handle null gracefully by providing an empty array
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: null,
      isExpanded: true
    }));

    // Should render the section title but no teams
    expect(screen.getByText("My Teams")).toBeInTheDocument();
  });
  it("should handle teams with invalid data", () => {
    const invalidTeams = [{
      name: "Team Alpha",
      link: "/teams/alpha"
    }, {
      name: "Team Beta",
      link: "/teams/beta"
    }, {
      name: "Team Gamma",
      link: "/teams/gamma"
    }];
    renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {
      teams: invalidTeams,
      isExpanded: true
    }));
    expect(screen.getByText("My Teams")).toBeInTheDocument();
    expect(screen.getByText("Team Alpha")).toBeInTheDocument();
  });
});
describe("SideNavPinnedSection", () => {
  const mockPinnedItems = [{
    avatar: "user1.jpg",
    name: "John Doe",
    link: "/users/john",
    shape: "circle",
    onUnpin: jest.fn()
  }, {
    avatar: "user2.jpg",
    name: "Jane Smith",
    link: "/users/jane",
    shape: "square",
    onUnpin: jest.fn()
  }];
  it("should render pinned section when expanded", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: mockPinnedItems,
      isExpanded: true
    }));
    expect(screen.getByText("Pinned")).toBeInTheDocument();
    expect(screen.getByText("John Doe")).toBeInTheDocument();
    expect(screen.getByText("Jane Smith")).toBeInTheDocument();
  });
  it("should not show title when collapsed", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: mockPinnedItems,
      isExpanded: false
    }));
    expect(screen.queryByText("Pinned")).not.toBeInTheDocument();
  });
  it("should render unpin buttons when expanded", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: mockPinnedItems,
      isExpanded: true
    }));
    const buttons = screen.getAllByTestId("button");
    expect(buttons).toHaveLength(2);
  });
  it("should render avatars with correct shapes", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: mockPinnedItems,
      isExpanded: true
    }));
    const avatars = screen.getAllByTestId("avatar");
    expect(avatars[0]).toHaveAttribute("data-shape", "circle");
    expect(avatars[1]).toHaveAttribute("data-shape", "square");
  });

  // Prop validation tests
  it("should handle empty items array", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: [],
      isExpanded: true
    }));
    expect(screen.getByText("Pinned")).toBeInTheDocument();
    // Should not crash with empty array
  });
  it("should handle items with missing optional props", () => {
    const itemsWithMissingProps = [{
      name: "John Doe",
      link: "/users/john"
    },
    // missing avatar, shape, onUnpin
    {
      avatar: "user2.jpg",
      name: "Jane Smith",
      link: "/users/jane",
      shape: "square"
    } // missing onUnpin
    ];
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: itemsWithMissingProps,
      isExpanded: true
    }));
    expect(screen.getByText("Pinned")).toBeInTheDocument();
    expect(screen.getByText("John Doe")).toBeInTheDocument();
    expect(screen.getByText("Jane Smith")).toBeInTheDocument();
  });
  it("should handle undefined isExpanded prop", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: mockPinnedItems
    }));

    // When isExpanded is undefined, it defaults to false, so no text should be visible
    expect(screen.queryByText("Pinned")).not.toBeInTheDocument();
    // Item names are still visible in popovers when collapsed
    expect(screen.getByText("John Doe")).toBeInTheDocument();
    expect(screen.getByText("Jane Smith")).toBeInTheDocument();
    // But avatars should still be rendered
    const avatars = screen.getAllByTestId("avatar");
    expect(avatars).toHaveLength(2);
  });
  it("should handle null items prop", () => {
    // The component should handle null gracefully by providing an empty array
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: null,
      isExpanded: true
    }));

    // Should render the section title but no items
    expect(screen.getByText("Pinned")).toBeInTheDocument();
  });
  it("should handle items with invalid data", () => {
    const invalidItems = [{
      name: "John Doe",
      link: "/users/john"
    }, {
      name: "Jane Smith",
      link: "/users/jane"
    }, {
      name: "Jill Taylor",
      link: "/users/jill"
    }];
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: invalidItems,
      isExpanded: true
    }));
    expect(screen.getByText("Pinned")).toBeInTheDocument();
    expect(screen.getByText("John Doe")).toBeInTheDocument();
    // Should handle invalid data gracefully
  });
  it("should handle onUnpin callback", () => {
    const onUnpinMock = jest.fn();
    const itemsWithCallback = [{
      avatar: "user1.jpg",
      name: "John Doe",
      link: "/users/john",
      shape: "circle",
      onUnpin: onUnpinMock
    }];
    renderWithRouter(/*#__PURE__*/_jsx(SideNavPinnedSection, {
      items: itemsWithCallback,
      isExpanded: true
    }));
    const buttons = screen.getAllByTestId("button");
    expect(buttons).toHaveLength(1);

    // Test that the button exists and can be clicked
    expect(buttons[0]).toBeInTheDocument();
  });
});
describe("RenderCurrentViewSection", () => {
  const mockViewingState = {
    name: "Test Team",
    teamLink: "/teams/test",
    avatar: "/avatars/test.jpg",
    shape: "square"
  };
  it("should render current view section with basic data", () => {
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: mockViewingState
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-name")).toHaveTextContent("Test Team");
    expect(screen.getByTestId("viewing-team-link")).toHaveTextContent("/teams/test");
    expect(screen.getByTestId("viewing-avatar")).toHaveTextContent("/avatars/test.jpg");
    expect(screen.getByTestId("viewing-shape")).toHaveTextContent("square");
  });
  it("should render current view section with subNav", () => {
    const viewingStateWithSubNav = _objectSpread(_objectSpread({}, mockViewingState), {}, {
      subNav: [{
        name: "Overview",
        link: "/teams/test/overview"
      }, {
        name: "Members",
        link: "/teams/test/members"
      }]
    });
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithSubNav
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-subnav")).toBeInTheDocument();
    expect(screen.getByTestId("subnav-item-0")).toHaveTextContent("Overview: /teams/test/overview");
    expect(screen.getByTestId("subnav-item-1")).toHaveTextContent("Members: /teams/test/members");
  });
  it("should render current view section with badge", () => {
    const viewingStateWithBadge = _objectSpread(_objectSpread({}, mockViewingState), {}, {
      badge: /*#__PURE__*/_jsx("div", {
        "data-testid": "badge",
        children: "Badge"
      })
    });
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithBadge
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-badge")).toBeInTheDocument();
  });
  it("should handle viewing state without avatar", () => {
    const viewingStateWithoutAvatar = {
      name: "Team No Avatar",
      teamLink: "/teams/no-avatar"
    };
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithoutAvatar
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-name")).toHaveTextContent("Team No Avatar");
    expect(screen.getByTestId("viewing-team-link")).toHaveTextContent("/teams/no-avatar");
    expect(screen.queryByTestId("viewing-avatar")).not.toBeInTheDocument();
    expect(screen.queryByTestId("viewing-shape")).not.toBeInTheDocument();
  });
  it("should not render when viewing state is null or undefined", () => {
    const {
      container
    } = renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: null
      })
    }));
    expect(container.firstChild).toBeNull();
  });
  it("should not render when viewing state has no name", () => {
    const viewingStateWithoutName = {
      teamLink: "/teams/test",
      avatar: "/avatars/test.jpg"
    };
    const {
      container
    } = renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithoutName
      })
    }));
    expect(container.firstChild).toBeNull();
  });

  // Prop validation tests
  it("should handle viewing state with missing optional props", () => {
    const viewingStateWithMissingProps = {
      name: "Test Team",
      teamLink: "/teams/test"
      // missing avatar, shape, badge, subNav
    };
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithMissingProps
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-name")).toHaveTextContent("Test Team");
    expect(screen.getByTestId("viewing-team-link")).toHaveTextContent("/teams/test");
    expect(screen.queryByTestId("viewing-avatar")).not.toBeInTheDocument();
    expect(screen.queryByTestId("viewing-shape")).not.toBeInTheDocument();
    expect(screen.queryByTestId("viewing-badge")).not.toBeInTheDocument();
    expect(screen.queryByTestId("viewing-subnav")).not.toBeInTheDocument();
  });
  it("should handle viewing state with invalid subNav data", () => {
    const viewingStateWithInvalidSubNav = _objectSpread(_objectSpread({}, mockViewingState), {}, {
      subNav: [{
        name: "Overview",
        link: "/teams/test/overview"
      }, {
        name: null,
        link: "/teams/test/members"
      },
      // invalid name
      {
        name: "Settings"
      } // missing link
      ]
    });
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithInvalidSubNav
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-subnav")).toBeInTheDocument();
    expect(screen.getByTestId("subnav-item-0")).toHaveTextContent("Overview: /teams/test/overview");
    // Should handle invalid subNav data gracefully
  });
  it("should handle viewing state with empty subNav array", () => {
    const viewingStateWithEmptySubNav = _objectSpread(_objectSpread({}, mockViewingState), {}, {
      subNav: []
    });
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithEmptySubNav
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.queryByTestId("viewing-subnav")).not.toBeInTheDocument();
  });
  it("should handle viewing state with null subNav", () => {
    const viewingStateWithNullSubNav = _objectSpread(_objectSpread({}, mockViewingState), {}, {
      subNav: null
    });
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithNullSubNav
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.queryByTestId("viewing-subnav")).not.toBeInTheDocument();
  });
  it("should handle viewing state with undefined badge", () => {
    const viewingStateWithUndefinedBadge = _objectSpread(_objectSpread({}, mockViewingState), {}, {
      badge: undefined
    });
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithUndefinedBadge
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.queryByTestId("viewing-badge")).not.toBeInTheDocument();
  });
  it("should handle viewing state with empty string values", () => {
    const viewingStateWithEmptyStrings = {
      name: "Test Team",
      teamLink: "/teams/test",
      avatar: "",
      shape: ""
    };
    renderWithRouter(/*#__PURE__*/_jsx(SideNavStateProvider, {
      children: /*#__PURE__*/_jsx(RenderCurrentViewSection, {
        viewingState: viewingStateWithEmptyStrings
      })
    }));
    expect(screen.getByTestId("render-current-view-section")).toBeInTheDocument();
    expect(screen.getByTestId("viewing-name")).toHaveTextContent("Test Team");
    expect(screen.getByTestId("viewing-team-link")).toHaveTextContent("/teams/test");
    // Empty strings should not render the elements
    expect(screen.queryByTestId("viewing-avatar")).not.toBeInTheDocument();
    expect(screen.queryByTestId("viewing-shape")).not.toBeInTheDocument();
  });
});