refactor(breadcrumbs): convert to TypeScript and RTL tests

scripts/jest/jest-setup.ts

@@ -2,30 +2,37 @@
 import '@testing-library/jest-dom';
 import util from 'util';
 
+// Polyfill setImmediate
+global.setImmediate = callback => setTimeout(callback, 0);
+
+// Polyfill TextEncoder
+Object.defineProperty(global, 'TextEncoder', {
+    value: util.TextEncoder,
+});
+
+// Mock ResizeObserver since it's not available in JSDOM
+/* eslint-disable @typescript-eslint/no-empty-function */
+class ResizeObserver {
+    observe() {}
+
+    unobserve() {}
+
+    disconnect() {}
+}
+/* eslint-enable @typescript-eslint/no-empty-function */
+global.ResizeObserver = ResizeObserver;
+
+// Mock matchMedia since it's not available in JSDOM
 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
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
         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.js → src/elements/common/breadcrumbs/BreadcrumbDelimiter.tsx

@@ -1,20 +1,14 @@
-/**
- * @flow
- * @file Clickable breadcrumb component
- * @author Box
- */
-
 import * as React from 'react';
 import { PointerChevronRight } from '@box/blueprint-web-assets/icons/Fill';
 import { Gray50, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
 import type { Delimiter } from '../../../common/types/core';
 import { DELIMITER_CARET } from '../../../constants';
 
-type Props = {
-    delimiter?: Delimiter,
-};
+export interface BreadcrumbDelimiterProps {
+    delimiter?: Delimiter;
+}
 
-const BreadcrumbDelimiter = ({ delimiter }: Props) =>
+const BreadcrumbDelimiter = ({ delimiter }: BreadcrumbDelimiterProps) =>
     delimiter === DELIMITER_CARET ? (
         <PointerChevronRight
             className="be-breadcrumb-seperator"
@@ -24,7 +18,7 @@ const BreadcrumbDelimiter = ({ delimiter }: Props) =>
             width={Size3}
         />
     ) : (
-        <span>/</span>
+        <span className="be-breadcrumb-seperator">/</span>
     );
 
 export default BreadcrumbDelimiter;

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

@@ -1,23 +1,15 @@
-/**
- * @flow
- * @file Drop down part of breadcrumbs
- * @author Box
- */
-
 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';
-
 import messages from '../messages';
 
-type Props = {
-    className: string,
-    crumbs: Crumb[],
-    onCrumbClick: Function,
-};
+export interface BreadcrumbDropdownProps {
+    crumbs: Crumb[];
+    onCrumbClick: (id: string) => void;
+}
 
-const BreadcrumbDropdown = ({ crumbs, onCrumbClick }: Props) => (
+const BreadcrumbDropdown = ({ crumbs, onCrumbClick }: BreadcrumbDropdownProps) => (
     <DropdownMenu.Root>
         <DropdownMenu.Trigger>
             <IconButton aria-label={messages.breadcrumbLabel.defaultMessage} icon={Ellipsis} />

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

@@ -1,29 +1,19 @@
-/**
- * @flow
- * @file Component that creates breadcumbs for both the header and name details
- * @author Box
- */
-
 import * as React from 'react';
 import { useIntl } from 'react-intl';
-
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbDropdown from './BreadcrumbDropdown';
-import BreadcrumbDelimiter from './BreadcrumbDelimiter';
-import type { Delimiter, Crumb } from '../../../common/types/core';
-import { DELIMITER_CARET, DEFAULT_ROOT, DELIMITER_SLASH } from '../../../constants';
-
-import './Breadcrumbs.scss';
-
+import type { Crumb, Delimiter } from '../../../common/types/core';
+import { DEFAULT_ROOT } from '../../../constants';
 import messages from '../messages';
+import './Breadcrumbs.scss';
 
-type Props = {
-    crumbs: Crumb[],
-    delimiter: Delimiter,
-    isSmall?: boolean,
-    onCrumbClick: Function,
-    rootId: string,
-};
+export interface BreadcrumbsProps {
+    crumbs: Crumb[];
+    delimiter?: Delimiter;
+    isSmall?: boolean;
+    onCrumbClick: (crumb: Crumb) => void;
+    rootId: string;
+}
 
 /**
  * Filters out ancestors to root from the crumbs.
@@ -47,26 +37,24 @@ function filterCrumbs(rootId: string, crumbs: Crumb[]): Crumb[] {
  * @param {boolean} isLast is this the last crumb
  * @return {Element}
  */
-function getBreadcrumb(crumbs: Crumb | Crumb[], isLast: boolean, onCrumbClick: Function, delimiter: Delimiter) {
+function getBreadcrumb(
+    crumbs: Crumb | Crumb[],
+    isLast: boolean,
+    onCrumbClick: (crumb: Crumb) => void,
+    delimiter: Delimiter,
+) {
     if (Array.isArray(crumbs)) {
-        const condensed = delimiter !== DELIMITER_CARET;
         return (
             <span className="be-breadcrumb-more">
-                <BreadcrumbDropdown
-                    className={condensed ? 'be-breadcrumbs-condensed' : ''}
-                    crumbs={crumbs}
-                    onCrumbClick={onCrumbClick}
-                />
-                <BreadcrumbDelimiter delimiter={condensed ? DELIMITER_SLASH : DELIMITER_CARET} />
+                <BreadcrumbDropdown crumbs={crumbs} onCrumbClick={id => onCrumbClick(crumbs.find(c => c.id === id)!)} />
             </span>
         );
     }
 
-    const { id, name } = crumbs;
-    return <Breadcrumb delimiter={delimiter} isLast={isLast} name={name} onClick={() => onCrumbClick(id)} />;
+    return <Breadcrumb delimiter={delimiter} isLast={isLast} name={crumbs.name} onClick={() => onCrumbClick(crumbs)} />;
 }
 
-const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false }: Props) => {
+const Breadcrumbs = ({ crumbs = [], delimiter, isSmall = false, onCrumbClick, rootId }: BreadcrumbsProps) => {
     const { formatMessage } = useIntl();
 
     if (!rootId || crumbs.length === 0) {
@@ -86,27 +74,27 @@ const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false
 
     // Always show the last/leaf breadcrumb.
     const crumb = filteredCrumbs[length - 1];
-    const onClick = crumb.id ? () => onCrumbClick(crumb.id) : undefined;
+    const onClick = crumb.id ? () => onCrumbClick(crumb) : undefined;
     const lastBreadcrumb = <Breadcrumb isLast name={crumb.name} onClick={onClick} />;
 
     // Always show the second last/parent breadcrumb when there are at least 2 crumbs.
     const secondLastBreadcrumb =
         length > 1 ? getBreadcrumb(filteredCrumbs[length - 2], false, onCrumbClick, delimiter) : null;
 
-    // Only show the more dropdown when there were at least 4 crumbs.
+    // Only show the more dropdown when there were at least 3 crumbs.
     const moreBreadcrumbs =
-        length > 3 ? getBreadcrumb(filteredCrumbs.slice(1, length - 2), false, onCrumbClick, delimiter) : null;
+        length > 2 ? getBreadcrumb([...filteredCrumbs.slice(0, length - 1)], false, onCrumbClick, delimiter) : null;
 
     // Only show the root breadcrumb when there are at least 3 crumbs.
     const firstBreadcrumb = length > 2 ? getBreadcrumb(filteredCrumbs[0], false, onCrumbClick, delimiter) : null;
 
     return (
-        <div className="be-breadcrumbs">
+        <nav aria-label="Folder path" className={`be-breadcrumbs${isSmall ? ' is-small' : ''}`}>
             {isSmall ? null : firstBreadcrumb}
             {isSmall ? null : moreBreadcrumbs}
             {secondLastBreadcrumb}
             {lastBreadcrumb}
-        </div>
+        </nav>
     );
 };
 

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

@@ -1,9 +1,3 @@
-/**
- * @flow
- * @file Component for the details for the item name
- * @author Box
- */
-
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from '../messages';
@@ -12,13 +6,13 @@ import { DELIMITER_SLASH } from '../../../constants';
 import type { BoxItem } from '../../../common/types/core';
 import './InlineBreadcrumbs.scss';
 
-type Props = {
-    item: BoxItem,
-    onItemClick: Function,
-    rootId: string,
-};
+export interface InlineBreadcrumbsProps {
+    item: BoxItem;
+    onItemClick: (item: BoxItem | string) => void;
+    rootId: string;
+}
 
-const InlineBreadcrumbs = ({ item, onItemClick, rootId }: Props) => {
+const InlineBreadcrumbs = ({ item, onItemClick, rootId }: InlineBreadcrumbsProps) => {
     const { path_collection }: BoxItem = item;
     const { entries: breadcrumbs = [] } = path_collection || {};
     return (

src/elements/common/breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { render, screen } from '../../../../test-utils/testing-library';
+import Breadcrumbs from '../Breadcrumbs';
+import messages from '../../messages';
+
+describe('elements/common/breadcrumbs/Breadcrumbs', () => {
+    const renderComponent = (props = {}) => {
+        const defaultProps = {
+            crumbs: [{ id: '0', name: 'All Files' }],
+            delimiter: 'caret' as const,
+            onCrumbClick: jest.fn(),
+            rootId: '123123',
+        };
+        render(<Breadcrumbs {...defaultProps} {...props} />);
+    };
+
+    test('should render "All Files" breadcrumb', () => {
+        renderComponent();
+        expect(screen.getByRole('button', { name: 'All Files' })).toBeInTheDocument();
+    });
+
+    test('should render dropdown when there are three or more crumbs', () => {
+        const crumbs = [
+            { id: '0', name: 'All Files' },
+            { id: '1', name: 'Folder 1' },
+            { id: '2', name: 'Folder 2' },
+        ];
+        renderComponent({ crumbs });
+        expect(screen.getByRole('button', { name: messages.breadcrumbLabel.defaultMessage })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Folder 2' })).toBeInTheDocument();
+    });
+
+    test('should call onCrumbClick when clicking a breadcrumb', () => {
+        const onCrumbClick = jest.fn();
+        const crumbs = [{ id: '0', name: 'All Files' }];
+        renderComponent({ crumbs, onCrumbClick });
+        screen.getByRole('button', { name: 'All Files' }).click();
+        expect(onCrumbClick).toHaveBeenCalledWith(crumbs[0]);
+    });
+});

yarn.lock

@@ -5559,26 +5559,25 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@6.4.5":
-  version "6.4.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.5.tgz#badb40296477149136dabef32b572ddd3b56adf1"
-  integrity sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==
+"@testing-library/jest-dom@*", "@testing-library/jest-dom@^6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz#26ba906cf928c0f8172e182c6fe214eb4f9f2bd2"
+  integrity sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==
   dependencies:
-    "@adobe/css-tools" "^4.3.2"
-    "@babel/runtime" "^7.9.2"
+    "@adobe/css-tools" "^4.4.0"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
     dom-accessibility-api "^0.6.3"
     lodash "^4.17.21"
     redent "^3.0.0"
 
-"@testing-library/jest-dom@^6.4.6":
-  version "6.4.6"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz#ec1df8108651bed5475534955565bed88c6732ce"
-  integrity sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==
+"@testing-library/jest-dom@6.4.5":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.5.tgz#badb40296477149136dabef32b572ddd3b56adf1"
+  integrity sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==
   dependencies:
-    "@adobe/css-tools" "^4.4.0"
+    "@adobe/css-tools" "^4.3.2"
     "@babel/runtime" "^7.9.2"
     aria-query "^5.0.0"
     chalk "^3.0.0"
@@ -6244,6 +6243,13 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.12.tgz#bc2cab12e87978eee89fb21576b670350d6d86ab"
   integrity sha512-bTHG8fcxEqv1M9+TD14P8ok8hjxoOCkfKc8XXLaaD05kI7ohpeI956jtDOD3XHKBQrlyPughUtzm1jtVhHpA5Q==
 
+"@types/testing-library__jest-dom@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-6.0.0.tgz#b558b64b80a72130714be1f505c6df482d453690"
+  integrity sha512-bnreXCgus6IIadyHNlN/oI5FfX4dWgvGhOPvpr7zzCYDGAPIfvyIoAozMBINmhmsVuqV0cncejF2y5KC7ScqOg==
+  dependencies:
+    "@testing-library/jest-dom" "*"
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"