refactor(breadcrumbs): convert to TypeScript and RTL tests

package.json

@@ -92,7 +92,11 @@
             "last 2 Edge versions",
             "last 2 iOS versions"
         ],
-        "development": ["last 1 Chrome versions", "last 1 Firefox versions", "last 1 Safari versions"]
+        "development": [
+            "last 1 Chrome versions",
+            "last 1 Firefox versions",
+            "last 1 Safari versions"
+        ]
     },
     "husky": {
         "hooks": {
@@ -157,7 +161,7 @@
         "@storybook/react-webpack5": "^8.2.4",
         "@storybook/test": "^8.2.4",
         "@storybook/theming": "^8.2.4",
-        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/classnames": "^2.2.9",
@@ -176,6 +180,7 @@
         "@types/react-measure": "^2.0.6",
         "@types/react-router-dom": "^5.1.3",
         "@types/sinon": "^7.5.1",
+        "@types/testing-library__jest-dom": "^6.0.0",
         "@types/webpack": "^4.41.3",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
@@ -370,6 +375,8 @@
         }
     },
     "msw": {
-        "workerDirectory": [".storybook/public"]
+        "workerDirectory": [
+            ".storybook/public"
+        ]
     }
 }

scripts/jest/jest-setup.ts

@@ -1,31 +1 @@
-// @ts-nocheck override setImmediate to use setTimeout
 import '@testing-library/jest-dom';
-import util from 'util';
-
-Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(), // Deprecated
-        removeListener: jest.fn(), // Deprecated
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-    })),
-});
-
-global.setImmediate = cb => {
-    setTimeout(cb, 0);
-};
-
-Object.defineProperty(global, 'TextEncoder', {
-    value: util.TextEncoder,
-});
-
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));

src/elements/common/breadcrumbs/Breadcrumb.js → src/elements/common/breadcrumbs/Breadcrumb.tsx

@@ -1,24 +1,18 @@
-/**
- * @flow
- * @file Clickable breadcrumb component
- * @author Box
- */
-
 import * as React from 'react';
 import { TextButton } from '@box/blueprint-web';
 import BreadcrumbDelimiter from './BreadcrumbDelimiter';
 import type { Delimiter } from '../../../common/types/core';
 
 import './Breadcrumb.scss';
 
-type Props = {
-    delimiter?: Delimiter,
-    isLast?: boolean,
-    name: string,
-    onClick?: Function,
-};
+export interface BreadcrumbProps {
+    delimiter?: Delimiter;
+    isLast?: boolean;
+    name: string;
+    onClick?: () => void;
+}
 
-const Breadcrumb = ({ name = '', onClick, isLast, delimiter }: Props) => {
+const Breadcrumb = ({ name = '', onClick, isLast, delimiter }: BreadcrumbProps) => {
     const title = onClick ? (
         <TextButton className="bdl-Breadcrumb-title" inheritFont onClick={onClick}>
             {name}

src/elements/common/breadcrumbs/BreadcrumbDelimiter.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PointerChevronRight } from '@box/blueprint-web-assets/icons/Fill';
+import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import type { Delimiter } from '../../../common/types/core';
+import { DELIMITER_CARET, COLOR_999 } from '../../../constants';
+
+export interface BreadcrumbDelimiterProps {
+    delimiter?: Delimiter;
+}
+
+const BreadcrumbDelimiter = ({ delimiter }: BreadcrumbDelimiterProps) =>
+    delimiter === DELIMITER_CARET ? (
+        <PointerChevronRight
+            className="be-breadcrumb-seperator"
+            style={{ color: COLOR_999, width: Size3, height: Size3 }}
+        />
+    ) : (
+        <span className="be-breadcrumb-seperator">/</span>
+    );
+
+export default BreadcrumbDelimiter;

src/elements/common/breadcrumbs/BreadcrumbDropdown.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DropdownMenu, IconButton } from '@box/blueprint-web';
+import { Ellipsis } from '@box/blueprint-web-assets/icons/Fill';
+import type { Crumb } from '../../../common/types/core';
+
+export interface BreadcrumbDropdownProps {
+    className?: string;
+    crumbs: Crumb[];
+    onCrumbClick: (crumb: Crumb) => void;
+    'data-testid'?: string;
+}
+
+const BreadcrumbDropdown = ({ className, crumbs, onCrumbClick }: BreadcrumbDropdownProps) => (
+    <div className={className}>
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+                <IconButton icon={Ellipsis} aria-label="More breadcrumb items" />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+                {crumbs.map(crumb => (
+                    <DropdownMenu.Item key={crumb.id} onSelect={() => onCrumbClick(crumb)}>
+                        {crumb.name}
+                    </DropdownMenu.Item>
+                ))}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    </div>
+);
+
+export default BreadcrumbDropdown;

src/elements/common/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbDropdown from './BreadcrumbDropdown';
+import type { Crumb, Delimiter } from '../../../common/types/core';
+
+export interface BreadcrumbsProps {
+    className?: string;
+    crumbs: Crumb[];
+    delimiter?: Delimiter;
+    isSmall?: boolean;
+    onCrumbClick: (crumb: Crumb) => void;
+    rootId: string;
+}
+
+const Breadcrumbs = ({ className = '', crumbs = [], delimiter, isSmall = false, onCrumbClick }: BreadcrumbsProps) => {
+    const shouldShowDropdown = crumbs.length > 1;
+    const lastCrumb = crumbs[crumbs.length - 1];
+
+    return (
+        <nav
+            aria-label="Folder path"
+            className={classNames('be-breadcrumbs', className, {
+                'is-small': isSmall,
+            })}
+        >
+            {shouldShowDropdown && <BreadcrumbDropdown crumbs={crumbs.slice(0, -1)} onCrumbClick={onCrumbClick} />}
+            {lastCrumb && (
+                <Breadcrumb
+                    delimiter={delimiter}
+                    isLast
+                    name={lastCrumb.name}
+                    onClick={() => onCrumbClick(lastCrumb)}
+                />
+            )}
+        </nav>
+    );
+};
+
+export default Breadcrumbs;