@instructure/ui-top-nav-bar 8.48.1-snapshot-2 → 8.48.1

package/CHANGELOG.md

@@ -3,9 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.48.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.48.0...v8.48.1-snapshot-2) (2023-11-15)
+## [8.48.1](https://github.com/instructure/instructure-ui/compare/v8.48.0...v8.48.1) (2023-11-17)
 
-**Note:** Version bump only for package @instructure/ui-top-nav-bar
+### Features
+
+* **ui-top-nav-bar:** add Breadcrumb to TopNavBar ([e340ae9](https://github.com/instructure/instructure-ui/commit/e340ae91fc0eeb961762453db020b80a44d0b70a))
 
 
 

package/es/TopNavBar/TopNavBarBreadcrumb/__new-tests__/TopNavBarBreadcrumb.test.js

@@ -1,4 +1,4 @@
-var _TopNavBarBreadcrumb, _BaseExample, _BaseExample2, _BaseExample3;
+var _Breadcrumb, _BaseExample, _BaseExample2, _BaseExample3, _BaseExample4;
 /*
  * The MIT License (MIT)
  *
@@ -24,7 +24,7 @@ var _TopNavBarBreadcrumb, _BaseExample, _BaseExample2, _BaseExample3;
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 // eslint-disable-next-line no-restricted-imports
@@ -66,9 +66,19 @@ const BaseExample = props => {
       layout: props.layout,
       inverseColor: props.inverseColor
     }
-  }, _TopNavBarBreadcrumb || (_TopNavBarBreadcrumb = /*#__PURE__*/React.createElement(TopNavBarBreadcrumb, null, /*#__PURE__*/React.createElement(Breadcrumb, {
+  }, /*#__PURE__*/React.createElement(TopNavBarBreadcrumb, {
+    onClick: props.onClick
+  }, _Breadcrumb || (_Breadcrumb = /*#__PURE__*/React.createElement(Breadcrumb, {
     label: TEST_BREADCRUMB_LABEL
-  }, /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 1"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 2"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 3"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 4"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 5")))));
+  }, /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 1"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 2"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 3"), /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+    href: "https://www.instructure.com"
+  }, "Course page 4"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 5")))));
+};
+BaseExample.defaultProps = {
+  inverseColor: true,
+  layout: 'desktop',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClick: () => {}
 };
 describe('<TopNavBarBreadcrumb />', () => {
   it('should render', () => {
@@ -91,13 +101,43 @@ describe('<TopNavBarBreadcrumb />', () => {
     expect(element).not.toBeInTheDocument();
     expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
   });
+  it('should render last but one crumb in smallViewPort mode', () => {
+    const _render3 = render(_BaseExample3 || (_BaseExample3 = /*#__PURE__*/React.createElement(BaseExample, {
+        inverseColor: true,
+        layout: "smallViewport"
+      }))),
+      queryByText = _render3.queryByText;
+    const page1 = queryByText('Course page 1');
+    const page2 = queryByText('Course page 2');
+    const page3 = queryByText('Course page 3');
+    const page4 = queryByText('Course page 4');
+    const page5 = queryByText('Course page 5');
+    expect(page1).not.toBeInTheDocument();
+    expect(page2).not.toBeInTheDocument();
+    expect(page3).not.toBeInTheDocument();
+    expect(page4).toBeInTheDocument();
+    expect(page5).not.toBeInTheDocument();
+  });
+  it('should fire onClick', () => {
+    const onClick = jest.fn();
+    const _render4 = render( /*#__PURE__*/React.createElement(BaseExample, {
+        inverseColor: true,
+        layout: "desktop",
+        onClick: onClick
+      })),
+      getByRole = _render4.getByRole;
+    const hamburger = getByRole('button');
+    expect(hamburger).toBeInTheDocument();
+    fireEvent.click(hamburger);
+    expect(onClick).toHaveBeenCalled();
+  });
   describe('should be accessible', () => {
     it('a11y', async () => {
-      const _render3 = render(_BaseExample3 || (_BaseExample3 = /*#__PURE__*/React.createElement(BaseExample, {
+      const _render5 = render(_BaseExample4 || (_BaseExample4 = /*#__PURE__*/React.createElement(BaseExample, {
           inverseColor: true,
           layout: "desktop"
         }))),
-        container = _render3.container;
+        container = _render5.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });

package/es/TopNavBar/TopNavBarLayout/DesktopLayout/__new-tests__/TopNavBarDesktopLayout.test.js

@@ -0,0 +1,136 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getActionItems, getBrand, getMenuItems, getUser, getBreadcrumb } from '../../../utils/exampleHelpers';
+import { TopNavBarDesktopLayout } from '../index';
+import TopNavBarContext from '../../../TopNavBarContext';
+const originalResizeObserver = global.ResizeObserver;
+describe('<TopNavBarDesktopLayout />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  describe('renderBreadcrumb', () => {
+    it('should render breadcrumb container', () => {
+      const _render = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, {
+          renderBreadcrumb: getBreadcrumb(),
+          renderUser: getUser(),
+          renderActionItems: getActionItems()
+        }))),
+        getByLabelText = _render.getByLabelText,
+        getByText = _render.getByText;
+      const breadCrumbContainer = getByLabelText('You are here');
+      const crumb1 = getByText('Course page 1');
+      const crumb2 = getByText('Course page 2');
+      const crumb3 = getByText('Course page 3');
+      expect(breadCrumbContainer).toBeInTheDocument();
+      expect(crumb1).toBeVisible();
+      expect(crumb2).toBeVisible();
+      expect(crumb3).toBeVisible();
+    });
+    it('should not render breadcrumb if inverseColor is false', () => {
+      const consoleMock = jest.spyOn(console, 'error').mockImplementation();
+      const _render2 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: false
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, {
+          renderBreadcrumb: getBreadcrumb(),
+          renderUser: getUser(),
+          renderActionItems: getActionItems()
+        }))),
+        queryByText = _render2.queryByText,
+        queryByLabelText = _render2.queryByLabelText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb1 = queryByText('Course page 1');
+      const crumb2 = queryByText('Course page 2');
+      const crumb3 = queryByText('Course page 3');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb1).not.toBeInTheDocument();
+      expect(crumb2).not.toBeInTheDocument();
+      expect(crumb3).not.toBeInTheDocument();
+      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
+    });
+    it('should not render breadcrumb if brand exists', () => {
+      const consoleMock = jest.spyOn(console, 'warn').mockImplementation();
+      const _render3 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, {
+          renderBrand: getBrand(),
+          renderBreadcrumb: getBreadcrumb()
+        }))),
+        queryByLabelText = _render3.queryByLabelText,
+        queryByText = _render3.queryByText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb1 = queryByText('Course page 1');
+      const crumb2 = queryByText('Course page 2');
+      const crumb3 = queryByText('Course page 3');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb1).not.toBeInTheDocument();
+      expect(crumb2).not.toBeInTheDocument();
+      expect(crumb3).not.toBeInTheDocument();
+      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBrand] is deprecated and will be removed in version 9. Please use the updated TopNavBar design.');
+    });
+    it('should not render breadcrumb if menuitems exist', () => {
+      const _render4 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarDesktopLayout, {
+          renderMenuItems: getMenuItems(),
+          renderBreadcrumb: getBreadcrumb()
+        }))),
+        queryByText = _render4.queryByText,
+        queryByLabelText = _render4.queryByLabelText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb1 = queryByText('Course page 1');
+      const crumb2 = queryByText('Course page 2');
+      const crumb3 = queryByText('Course page 3');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb1).not.toBeInTheDocument();
+      expect(crumb2).not.toBeInTheDocument();
+      expect(crumb3).not.toBeInTheDocument();
+    });
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+});

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/__new-tests__/TopNavBarSmallViewportLayout.test.js

@@ -0,0 +1,106 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getActionItems, getBrand, getUser, getBreadcrumb, getMenuItems } from '../../../utils/exampleHelpers';
+import { TopNavBarSmallViewportLayout } from '../index';
+import TopNavBarContext from '../../../TopNavBarContext';
+const originalResizeObserver = global.ResizeObserver;
+describe('<TopNavBarSmallViewportLayout />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  describe('renderBreadcrumb', () => {
+    it('should render breadcrumb link', () => {
+      const _render = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'smallViewport',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarSmallViewportLayout, {
+          dropdownMenuToggleButtonLabel: "Toggle Menu",
+          renderBreadcrumb: getBreadcrumb(),
+          renderUser: getUser(),
+          renderActionItems: getActionItems()
+        }))),
+        getByText = _render.getByText;
+      const crumb = getByText('Course page 2');
+      expect(crumb).toBeVisible();
+    });
+    it('should not render breadcrumb link if inverseColor is false', () => {
+      const consoleMock = jest.spyOn(console, 'error').mockImplementation();
+      const _render2 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'smallViewport',
+            inverseColor: false
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarSmallViewportLayout, {
+          dropdownMenuToggleButtonLabel: "Toggle Menu",
+          renderBreadcrumb: getBreadcrumb(),
+          renderUser: getUser(),
+          renderActionItems: getActionItems()
+        }))),
+        queryByText = _render2.queryByText,
+        queryByLabelText = _render2.queryByLabelText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb = queryByText('Course page 2');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb).not.toBeInTheDocument();
+      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
+    });
+    it('should render breadcrumb link but not others', () => {
+      const _render3 = render( /*#__PURE__*/React.createElement(TopNavBarContext.Provider, {
+          value: {
+            layout: 'smallViewport',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/React.createElement(TopNavBarSmallViewportLayout, {
+          dropdownMenuToggleButtonLabel: "Toggle Menu",
+          renderBrand: getBrand(),
+          renderBreadcrumb: getBreadcrumb(),
+          renderActionItems: getActionItems(),
+          renderUser: getUser(),
+          renderMenuItems: getMenuItems()
+        }))),
+        container = _render3.container,
+        queryByText = _render3.queryByText;
+      const crumb = queryByText('Course page 2');
+      const menuTriggerContainer = container.querySelector("[class$='topNavBarSmallViewportLayout__menuTriggerContainer']");
+      const brandContainer = container.querySelector("[class$='topNavBarSmallViewportLayout__brandContainer']");
+      expect(crumb).toBeInTheDocument();
+      expect(menuTriggerContainer).not.toBeInTheDocument();
+      expect(brandContainer).not.toBeInTheDocument();
+    });
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+});

package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/props.js

@@ -24,11 +24,11 @@
 
 import { commonAllowedProps, commonPropTypes, smallViewportPropTypes, smallViewportAllowedProps } from '../props';
 const propTypes = {
-  // Edit PropTypes in TopNabBarLayout/props.ts
+  // Edit PropTypes in TopNavBarLayout/props.ts
   ...commonPropTypes,
   ...smallViewportPropTypes
 };
 const allowedProps = [
-// Edit allowed props in TopNabBarLayout/props.ts
+// Edit allowed props in TopNavBarLayout/props.ts
 ...commonAllowedProps, ...smallViewportAllowedProps];
 export { propTypes, allowedProps };

package/es/TopNavBar/utils/exampleHelpers.js

@@ -1,3 +1,4 @@
+var _TopNavBar$Breadcrumb;
 /*
  * The MIT License (MIT)
  *
@@ -28,6 +29,7 @@ import { IconQuestionLine, IconAlertsLine, IconConfigureLine, IconSearchLine, Ic
 import { TopNavBarContext } from '../TopNavBarContext';
 import { TopNavBar } from '../index';
 import { elevateIcon, elevateLogo, elevateLogoInverse } from './exampleSvgFiles';
+import { Breadcrumb } from '@instructure/ui-breadcrumb';
 const avatarExample = {
   avatarName: 'User Name',
   avatarSrc: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
@@ -160,6 +162,11 @@ const getUser = (config = {}) => {
     renderSubmenu: config.userWithSubmenu ? itemSubmenuExample : void 0
   }, config.userItemProps), ((_config$userItemProps = config.userItemProps) === null || _config$userItemProps === void 0 ? void 0 : _config$userItemProps.children) || (config.userVariant === 'button' ? 'Log In/Register' : 'User Name')));
 };
+const getBreadcrumb = (_config = {}) => {
+  return _TopNavBar$Breadcrumb || (_TopNavBar$Breadcrumb = /*#__PURE__*/React.createElement(TopNavBar.Breadcrumb, null, /*#__PURE__*/React.createElement(Breadcrumb, {
+    label: "You are here"
+  }, /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 1"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 2"), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, "Course page 3"))));
+};
 const getLayoutProps = (props, config = {}) => {
   return {
     desktopConfig: {
@@ -171,11 +178,11 @@ const getLayoutProps = (props, config = {}) => {
       alternativeTitle: config.hasAlternativeTitle ? 'Page title' : void 0,
       renderInPlaceDialogConfig: config.hasRenderInPlaceDialogConfig ? getInPlaceDialogConfig(props.inverseColor) : void 0
     },
-    renderBrand: getBrand({
+    renderBrand: config.hasRenderBreadcrumb ? void 0 : getBrand({
       ...props,
       ...config
     }),
-    renderMenuItems: getMenuItems({
+    renderMenuItems: config.hasRenderBreadcrumb ? void 0 : getMenuItems({
       ...props,
       ...config
     }),
@@ -186,7 +193,11 @@ const getLayoutProps = (props, config = {}) => {
     renderUser: getUser({
       ...props,
       ...config
-    })
+    }),
+    renderBreadcrumb: config.hasRenderBreadcrumb ? getBreadcrumb({
+      ...props,
+      ...config
+    }) : void 0
   };
 };
-export { avatarExample, itemSubmenuExample, SmallViewportModeWrapper, getCustomPopoverConfig, getCustomPopoverContent, getInPlaceDialogConfig, getBrand, getMenuItems, getActionItems, getUser, getLayoutProps };
+export { avatarExample, itemSubmenuExample, SmallViewportModeWrapper, getCustomPopoverConfig, getCustomPopoverContent, getInPlaceDialogConfig, getBrand, getMenuItems, getActionItems, getUser, getLayoutProps, getBreadcrumb };

package/lib/TopNavBar/TopNavBarBreadcrumb/__new-tests__/TopNavBarBreadcrumb.test.js

@@ -6,9 +6,9 @@ var _react2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _index = require("../index");
-var _Breadcrumb = require("@instructure/ui-breadcrumb/lib/Breadcrumb");
+var _Breadcrumb2 = require("@instructure/ui-breadcrumb/lib/Breadcrumb");
 var _TopNavBarContext = _interopRequireDefault(require("../../TopNavBarContext"));
-var _TopNavBarBreadcrumb, _BaseExample, _BaseExample2, _BaseExample3;
+var _Breadcrumb, _BaseExample, _BaseExample2, _BaseExample3, _BaseExample4;
 /*
  * The MIT License (MIT)
  *
@@ -67,9 +67,19 @@ const BaseExample = props => {
       layout: props.layout,
       inverseColor: props.inverseColor
     }
-  }, _TopNavBarBreadcrumb || (_TopNavBarBreadcrumb = /*#__PURE__*/_react.default.createElement(_index.TopNavBarBreadcrumb, null, /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb, {
+  }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarBreadcrumb, {
+    onClick: props.onClick
+  }, _Breadcrumb || (_Breadcrumb = /*#__PURE__*/_react.default.createElement(_Breadcrumb2.Breadcrumb, {
     label: TEST_BREADCRUMB_LABEL
-  }, /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb.Link, null, "Course page 1"), /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb.Link, null, "Course page 2"), /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb.Link, null, "Course page 3"), /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb.Link, null, "Course page 4"), /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb.Link, null, "Course page 5")))));
+  }, /*#__PURE__*/_react.default.createElement(_Breadcrumb2.Breadcrumb.Link, null, "Course page 1"), /*#__PURE__*/_react.default.createElement(_Breadcrumb2.Breadcrumb.Link, null, "Course page 2"), /*#__PURE__*/_react.default.createElement(_Breadcrumb2.Breadcrumb.Link, null, "Course page 3"), /*#__PURE__*/_react.default.createElement(_Breadcrumb2.Breadcrumb.Link, {
+    href: "https://www.instructure.com"
+  }, "Course page 4"), /*#__PURE__*/_react.default.createElement(_Breadcrumb2.Breadcrumb.Link, null, "Course page 5")))));
+};
+BaseExample.defaultProps = {
+  inverseColor: true,
+  layout: 'desktop',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClick: () => {}
 };
 describe('<TopNavBarBreadcrumb />', () => {
   it('should render', () => {
@@ -92,13 +102,43 @@ describe('<TopNavBarBreadcrumb />', () => {
     expect(element).not.toBeInTheDocument();
     expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
   });
+  it('should render last but one crumb in smallViewPort mode', () => {
+    const _render3 = (0, _react2.render)(_BaseExample3 || (_BaseExample3 = /*#__PURE__*/_react.default.createElement(BaseExample, {
+        inverseColor: true,
+        layout: "smallViewport"
+      }))),
+      queryByText = _render3.queryByText;
+    const page1 = queryByText('Course page 1');
+    const page2 = queryByText('Course page 2');
+    const page3 = queryByText('Course page 3');
+    const page4 = queryByText('Course page 4');
+    const page5 = queryByText('Course page 5');
+    expect(page1).not.toBeInTheDocument();
+    expect(page2).not.toBeInTheDocument();
+    expect(page3).not.toBeInTheDocument();
+    expect(page4).toBeInTheDocument();
+    expect(page5).not.toBeInTheDocument();
+  });
+  it('should fire onClick', () => {
+    const onClick = jest.fn();
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(BaseExample, {
+        inverseColor: true,
+        layout: "desktop",
+        onClick: onClick
+      })),
+      getByRole = _render4.getByRole;
+    const hamburger = getByRole('button');
+    expect(hamburger).toBeInTheDocument();
+    _react2.fireEvent.click(hamburger);
+    expect(onClick).toHaveBeenCalled();
+  });
   describe('should be accessible', () => {
     it('a11y', async () => {
-      const _render3 = (0, _react2.render)(_BaseExample3 || (_BaseExample3 = /*#__PURE__*/_react.default.createElement(BaseExample, {
+      const _render5 = (0, _react2.render)(_BaseExample4 || (_BaseExample4 = /*#__PURE__*/_react.default.createElement(BaseExample, {
           inverseColor: true,
           layout: "desktop"
         }))),
-        container = _render3.container;
+        container = _render5.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/__new-tests__/TopNavBarDesktopLayout.test.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _exampleHelpers = require("../../../utils/exampleHelpers");
+var _index = require("../index");
+var _TopNavBarContext = _interopRequireDefault(require("../../../TopNavBarContext"));
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const originalResizeObserver = global.ResizeObserver;
+describe('<TopNavBarDesktopLayout />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  describe('renderBreadcrumb', () => {
+    it('should render breadcrumb container', () => {
+      const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TopNavBarContext.default.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, {
+          renderBreadcrumb: (0, _exampleHelpers.getBreadcrumb)(),
+          renderUser: (0, _exampleHelpers.getUser)(),
+          renderActionItems: (0, _exampleHelpers.getActionItems)()
+        }))),
+        getByLabelText = _render.getByLabelText,
+        getByText = _render.getByText;
+      const breadCrumbContainer = getByLabelText('You are here');
+      const crumb1 = getByText('Course page 1');
+      const crumb2 = getByText('Course page 2');
+      const crumb3 = getByText('Course page 3');
+      expect(breadCrumbContainer).toBeInTheDocument();
+      expect(crumb1).toBeVisible();
+      expect(crumb2).toBeVisible();
+      expect(crumb3).toBeVisible();
+    });
+    it('should not render breadcrumb if inverseColor is false', () => {
+      const consoleMock = jest.spyOn(console, 'error').mockImplementation();
+      const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TopNavBarContext.default.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: false
+          }
+        }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, {
+          renderBreadcrumb: (0, _exampleHelpers.getBreadcrumb)(),
+          renderUser: (0, _exampleHelpers.getUser)(),
+          renderActionItems: (0, _exampleHelpers.getActionItems)()
+        }))),
+        queryByText = _render2.queryByText,
+        queryByLabelText = _render2.queryByLabelText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb1 = queryByText('Course page 1');
+      const crumb2 = queryByText('Course page 2');
+      const crumb3 = queryByText('Course page 3');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb1).not.toBeInTheDocument();
+      expect(crumb2).not.toBeInTheDocument();
+      expect(crumb3).not.toBeInTheDocument();
+      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
+    });
+    it('should not render breadcrumb if brand exists', () => {
+      const consoleMock = jest.spyOn(console, 'warn').mockImplementation();
+      const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TopNavBarContext.default.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, {
+          renderBrand: (0, _exampleHelpers.getBrand)(),
+          renderBreadcrumb: (0, _exampleHelpers.getBreadcrumb)()
+        }))),
+        queryByLabelText = _render3.queryByLabelText,
+        queryByText = _render3.queryByText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb1 = queryByText('Course page 1');
+      const crumb2 = queryByText('Course page 2');
+      const crumb3 = queryByText('Course page 3');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb1).not.toBeInTheDocument();
+      expect(crumb2).not.toBeInTheDocument();
+      expect(crumb3).not.toBeInTheDocument();
+      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBrand] is deprecated and will be removed in version 9. Please use the updated TopNavBar design.');
+    });
+    it('should not render breadcrumb if menuitems exist', () => {
+      const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TopNavBarContext.default.Provider, {
+          value: {
+            layout: 'desktop',
+            inverseColor: true
+          }
+        }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, {
+          renderMenuItems: (0, _exampleHelpers.getMenuItems)(),
+          renderBreadcrumb: (0, _exampleHelpers.getBreadcrumb)()
+        }))),
+        queryByText = _render4.queryByText,
+        queryByLabelText = _render4.queryByLabelText;
+      const breadCrumbContainer = queryByLabelText('You are here');
+      const crumb1 = queryByText('Course page 1');
+      const crumb2 = queryByText('Course page 2');
+      const crumb3 = queryByText('Course page 3');
+      expect(breadCrumbContainer).not.toBeInTheDocument();
+      expect(crumb1).not.toBeInTheDocument();
+      expect(crumb2).not.toBeInTheDocument();
+      expect(crumb3).not.toBeInTheDocument();
+    });
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+});