@instructure/ui-navigation 9.0.2-snapshot-6 → 9.0.2-snapshot-9

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.0.2-snapshot-6](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-6) (2024-06-06)
+## [9.0.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-9) (2024-06-11)
 
 **Note:** Version bump only for package @instructure/ui-navigation
 

package/es/AppNav/Item/__new-tests__/Item.test.js

@@ -0,0 +1,111 @@
+var _Item, _Item2, _Item3, _ScreenReaderContent;
+/*
+ * 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, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Item } from '../index';
+const icon = /*#__PURE__*/React.createElement("svg", {
+  height: "24",
+  width: "24"
+}, /*#__PURE__*/React.createElement("title", null, "Some icon"), /*#__PURE__*/React.createElement("circle", {
+  cx: "50",
+  cy: "50",
+  r: "40"
+}));
+describe('<AppNav.Item />', () => {
+  it('should render label text', async () => {
+    render(_Item || (_Item = /*#__PURE__*/React.createElement(Item, {
+      renderLabel: "Some label",
+      href: "#"
+    })));
+    const item = screen.getByRole('link');
+    expect(item).toHaveTextContent('Some label');
+  });
+  it('should render an icon/image/etc.', async () => {
+    const _render = render(_Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, {
+        renderIcon: icon,
+        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, "Some label"),
+        href: "#"
+      }))),
+      container = _render.container;
+    const iconTitle = screen.getByTitle('Some icon');
+    const iconSvg = container.querySelector('svg');
+    const item = screen.getByRole('link');
+    expect(iconTitle).toBeInTheDocument();
+    expect(iconSvg).toBeInTheDocument();
+    expect(iconSvg).toHaveTextContent('Some icon');
+    expect(item).toHaveTextContent('Some label');
+  });
+  it('should render content after the label text to accommodate badges, etc.', async () => {
+    render(_Item3 || (_Item3 = /*#__PURE__*/React.createElement(Item, {
+      renderLabel: "Some label",
+      href: "#",
+      renderAfter: /*#__PURE__*/React.createElement("strong", null, "I am rendered after!")
+    })));
+    const item = screen.getByRole('link');
+    const after = screen.getByText('I am rendered after!');
+    expect(item).toBeInTheDocument();
+    expect(item).toHaveTextContent('Some label');
+    expect(after).toBeInTheDocument();
+    expect(after.tagName).toBe('STRONG');
+  });
+  it('should respond to an onClick event', async () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(Item, {
+      renderLabel: "Some label",
+      onClick: onClick
+    }));
+    const button = screen.getByRole('button');
+    await userEvent.click(button);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should output a console error if icon is used with non-screenreader label text', async () => {
+    const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+    render( /*#__PURE__*/React.createElement(Item, {
+      renderIcon: icon,
+      renderLabel: "Some label",
+      onClick: () => 'clicked'
+    }));
+    const expectedErrorMessage = 'Warning: [AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.';
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+    consoleErrorMock.mockRestore();
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render( /*#__PURE__*/React.createElement(Item, {
+        renderIcon: icon,
+        renderLabel: _ScreenReaderContent || (_ScreenReaderContent = /*#__PURE__*/React.createElement(ScreenReaderContent, null, "Some label")),
+        onClick: () => 'clicked'
+      })),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/AppNav/__new-tests__/AppNav.test.js

@@ -0,0 +1,157 @@
+var _AppNav, _AppNav$Item, _AppNav2, _AppNav3, _AppNav$Item2, _AppNav$Item3, _AppNav$Item4, _AppNav$Item5;
+/*
+ * 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, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { AppNav } from '../index';
+import AppNavExamples from '../__examples__/AppNav.examples';
+const originalResizeObserver = global.ResizeObserver;
+describe('<AppNav />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+  describe('for a11y', () => {
+    it('should render a nav element with an aria-label', async () => {
+      const _render = render(_AppNav || (_AppNav = /*#__PURE__*/React.createElement(AppNav, {
+          screenReaderLabel: "Screen reader label",
+          visibleItemsCount: 2
+        }, /*#__PURE__*/React.createElement(AppNav.Item, {
+          renderLabel: "Some label",
+          href: "http://instructure.design"
+        }), /*#__PURE__*/React.createElement(AppNav.Item, {
+          renderLabel: "Some other label",
+          href: "http://instructure.design"
+        })))),
+        container = _render.container;
+      const appNavList = container.querySelector('ul[class$="-appNav__list"]');
+      expect(appNavList).toBeInTheDocument();
+      expect(appNavList.tagName).toBe('UL');
+      expect(appNavList).toHaveAttribute('aria-label', 'Screen reader label');
+    });
+    it('should render a semantic list of items', async () => {
+      render( /*#__PURE__*/React.createElement(AppNav, {
+        screenReaderLabel: "App navigation",
+        visibleItemsCount: 2
+      }, _AppNav$Item || (_AppNav$Item = /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Some first label",
+        href: "http://instructure.design"
+      })), /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Some second label",
+        onClick: () => 'clicked'
+      })));
+      const list = screen.getAllByRole('list');
+      const items = screen.getAllByRole('listitem');
+      const link = screen.getAllByRole('link');
+      const button = screen.getAllByRole('button');
+      expect(list.length).toBe(1);
+      expect(items.length).toBe(2);
+      expect(link.length).toBe(1);
+      expect(button.length).toBe(1);
+    });
+    it('should render with a single item', async () => {
+      render(_AppNav2 || (_AppNav2 = /*#__PURE__*/React.createElement(AppNav, {
+        screenReaderLabel: "App navigation",
+        visibleItemsCount: 1
+      }, /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Some label",
+        href: "http://instructure.design"
+      }))));
+      const list = screen.getAllByRole('list');
+      const items = screen.getAllByRole('listitem');
+      const link = screen.getAllByRole('link');
+      expect(list.length).toBe(1);
+      expect(items.length).toBe(1);
+      expect(link.length).toBe(1);
+    });
+  });
+  describe('with rendered content', () => {
+    it('should render content after the navigation', async () => {
+      render(_AppNav3 || (_AppNav3 = /*#__PURE__*/React.createElement(AppNav, {
+        screenReaderLabel: "App navigation",
+        renderAfterItems: /*#__PURE__*/React.createElement("button", {
+          type: "button"
+        }, "I am rendered after!"),
+        visibleItemsCount: 2
+      }, /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Some label",
+        href: "http://instructure.design"
+      }), /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Some other label",
+        href: "http://instructure.design"
+      }))));
+      const button = screen.getByRole('button');
+      expect(button).toHaveTextContent('I am rendered after!');
+    });
+  });
+  describe('with item truncation', () => {
+    it('should pass a custom label to the menu trigger', async () => {
+      render( /*#__PURE__*/React.createElement(AppNav, {
+        screenReaderLabel: "App navigation",
+        visibleItemsCount: 2,
+        renderTruncateLabel: function () {
+          return 'I am sooo custom!';
+        }
+      }, _AppNav$Item2 || (_AppNav$Item2 = /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      })), _AppNav$Item3 || (_AppNav$Item3 = /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      })), _AppNav$Item4 || (_AppNav$Item4 = /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      })), _AppNav$Item5 || (_AppNav$Item5 = /*#__PURE__*/React.createElement(AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      }))));
+      const items = screen.getAllByRole('listitem');
+      expect(items.length).toBe(3);
+      expect(items[2]).toHaveTextContent('I am sooo custom!');
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(AppNav, AppNavExamples);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render2 = render(component.content),
+          container = _render2.container;
+        const axeCheck = await runAxeCheck(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
+});

package/lib/AppNav/Item/__new-tests__/Item.test.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _ScreenReaderContent2 = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _index = require("../index");
+var _Item, _Item2, _Item3, _ScreenReaderContent;
+/*
+ * 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 icon = /*#__PURE__*/_react.default.createElement("svg", {
+  height: "24",
+  width: "24"
+}, /*#__PURE__*/_react.default.createElement("title", null, "Some icon"), /*#__PURE__*/_react.default.createElement("circle", {
+  cx: "50",
+  cy: "50",
+  r: "40"
+}));
+describe('<AppNav.Item />', () => {
+  it('should render label text', async () => {
+    (0, _react2.render)(_Item || (_Item = /*#__PURE__*/_react.default.createElement(_index.Item, {
+      renderLabel: "Some label",
+      href: "#"
+    })));
+    const item = _react2.screen.getByRole('link');
+    expect(item).toHaveTextContent('Some label');
+  });
+  it('should render an icon/image/etc.', async () => {
+    const _render = (0, _react2.render)(_Item2 || (_Item2 = /*#__PURE__*/_react.default.createElement(_index.Item, {
+        renderIcon: icon,
+        renderLabel: /*#__PURE__*/_react.default.createElement(_ScreenReaderContent2.ScreenReaderContent, null, "Some label"),
+        href: "#"
+      }))),
+      container = _render.container;
+    const iconTitle = _react2.screen.getByTitle('Some icon');
+    const iconSvg = container.querySelector('svg');
+    const item = _react2.screen.getByRole('link');
+    expect(iconTitle).toBeInTheDocument();
+    expect(iconSvg).toBeInTheDocument();
+    expect(iconSvg).toHaveTextContent('Some icon');
+    expect(item).toHaveTextContent('Some label');
+  });
+  it('should render content after the label text to accommodate badges, etc.', async () => {
+    (0, _react2.render)(_Item3 || (_Item3 = /*#__PURE__*/_react.default.createElement(_index.Item, {
+      renderLabel: "Some label",
+      href: "#",
+      renderAfter: /*#__PURE__*/_react.default.createElement("strong", null, "I am rendered after!")
+    })));
+    const item = _react2.screen.getByRole('link');
+    const after = _react2.screen.getByText('I am rendered after!');
+    expect(item).toBeInTheDocument();
+    expect(item).toHaveTextContent('Some label');
+    expect(after).toBeInTheDocument();
+    expect(after.tagName).toBe('STRONG');
+  });
+  it('should respond to an onClick event', async () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Item, {
+      renderLabel: "Some label",
+      onClick: onClick
+    }));
+    const button = _react2.screen.getByRole('button');
+    await _userEvent.default.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  it('should output a console error if icon is used with non-screenreader label text', async () => {
+    const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Item, {
+      renderIcon: icon,
+      renderLabel: "Some label",
+      onClick: () => 'clicked'
+    }));
+    const expectedErrorMessage = 'Warning: [AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.';
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+    consoleErrorMock.mockRestore();
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Item, {
+        renderIcon: icon,
+        renderLabel: _ScreenReaderContent || (_ScreenReaderContent = /*#__PURE__*/_react.default.createElement(_ScreenReaderContent2.ScreenReaderContent, null, "Some label")),
+        onClick: () => 'clicked'
+      })),
+      container = _render2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/AppNav/__new-tests__/AppNav.test.js

@@ -0,0 +1,159 @@
+"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 _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _AppNav4 = _interopRequireDefault(require("../__examples__/AppNav.examples"));
+var _AppNav, _AppNav$Item, _AppNav2, _AppNav3, _AppNav$Item2, _AppNav$Item3, _AppNav$Item4, _AppNav$Item5;
+/*
+ * 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.
+ */
+// eslint-disable-next-line no-restricted-imports
+const originalResizeObserver = global.ResizeObserver;
+describe('<AppNav />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+  describe('for a11y', () => {
+    it('should render a nav element with an aria-label', async () => {
+      const _render = (0, _react2.render)(_AppNav || (_AppNav = /*#__PURE__*/_react.default.createElement(_index.AppNav, {
+          screenReaderLabel: "Screen reader label",
+          visibleItemsCount: 2
+        }, /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+          renderLabel: "Some label",
+          href: "http://instructure.design"
+        }), /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+          renderLabel: "Some other label",
+          href: "http://instructure.design"
+        })))),
+        container = _render.container;
+      const appNavList = container.querySelector('ul[class$="-appNav__list"]');
+      expect(appNavList).toBeInTheDocument();
+      expect(appNavList.tagName).toBe('UL');
+      expect(appNavList).toHaveAttribute('aria-label', 'Screen reader label');
+    });
+    it('should render a semantic list of items', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.AppNav, {
+        screenReaderLabel: "App navigation",
+        visibleItemsCount: 2
+      }, _AppNav$Item || (_AppNav$Item = /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Some first label",
+        href: "http://instructure.design"
+      })), /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Some second label",
+        onClick: () => 'clicked'
+      })));
+      const list = _react2.screen.getAllByRole('list');
+      const items = _react2.screen.getAllByRole('listitem');
+      const link = _react2.screen.getAllByRole('link');
+      const button = _react2.screen.getAllByRole('button');
+      expect(list.length).toBe(1);
+      expect(items.length).toBe(2);
+      expect(link.length).toBe(1);
+      expect(button.length).toBe(1);
+    });
+    it('should render with a single item', async () => {
+      (0, _react2.render)(_AppNav2 || (_AppNav2 = /*#__PURE__*/_react.default.createElement(_index.AppNav, {
+        screenReaderLabel: "App navigation",
+        visibleItemsCount: 1
+      }, /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Some label",
+        href: "http://instructure.design"
+      }))));
+      const list = _react2.screen.getAllByRole('list');
+      const items = _react2.screen.getAllByRole('listitem');
+      const link = _react2.screen.getAllByRole('link');
+      expect(list.length).toBe(1);
+      expect(items.length).toBe(1);
+      expect(link.length).toBe(1);
+    });
+  });
+  describe('with rendered content', () => {
+    it('should render content after the navigation', async () => {
+      (0, _react2.render)(_AppNav3 || (_AppNav3 = /*#__PURE__*/_react.default.createElement(_index.AppNav, {
+        screenReaderLabel: "App navigation",
+        renderAfterItems: /*#__PURE__*/_react.default.createElement("button", {
+          type: "button"
+        }, "I am rendered after!"),
+        visibleItemsCount: 2
+      }, /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Some label",
+        href: "http://instructure.design"
+      }), /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Some other label",
+        href: "http://instructure.design"
+      }))));
+      const button = _react2.screen.getByRole('button');
+      expect(button).toHaveTextContent('I am rendered after!');
+    });
+  });
+  describe('with item truncation', () => {
+    it('should pass a custom label to the menu trigger', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.AppNav, {
+        screenReaderLabel: "App navigation",
+        visibleItemsCount: 2,
+        renderTruncateLabel: function () {
+          return 'I am sooo custom!';
+        }
+      }, _AppNav$Item2 || (_AppNav$Item2 = /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      })), _AppNav$Item3 || (_AppNav$Item3 = /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      })), _AppNav$Item4 || (_AppNav$Item4 = /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      })), _AppNav$Item5 || (_AppNav$Item5 = /*#__PURE__*/_react.default.createElement(_index.AppNav.Item, {
+        renderLabel: "Label",
+        href: "http://instructure.design"
+      }))));
+      const items = _react2.screen.getAllByRole('listitem');
+      expect(items.length).toBe(3);
+      expect(items[2]).toHaveTextContent('I am sooo custom!');
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.AppNav, _AppNav4.default);
+    for (const component of generatedComponents) {
+      it(component.description, async () => {
+        const _render2 = (0, _react2.render)(component.content),
+          container = _render2.container;
+        const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+        expect(axeCheck).toBe(true);
+      });
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "9.0.2-snapshot-6",
+  "version": "9.0.2-snapshot-9",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,36 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.0.2-snapshot-6",
-    "@instructure/ui-color-utils": "9.0.2-snapshot-6",
-    "@instructure/ui-test-locator": "9.0.2-snapshot-6",
-    "@instructure/ui-test-utils": "9.0.2-snapshot-6",
-    "@instructure/ui-themes": "9.0.2-snapshot-6"
+    "@instructure/ui-axe-check": "9.0.2-snapshot-9",
+    "@instructure/ui-babel-preset": "9.0.2-snapshot-9",
+    "@instructure/ui-color-utils": "9.0.2-snapshot-9",
+    "@instructure/ui-scripts": "9.0.2-snapshot-9",
+    "@instructure/ui-test-utils": "9.0.2-snapshot-9",
+    "@instructure/ui-themes": "9.0.2-snapshot-9",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.0.2-snapshot-6",
-    "@instructure/debounce": "9.0.2-snapshot-6",
-    "@instructure/emotion": "9.0.2-snapshot-6",
-    "@instructure/shared-types": "9.0.2-snapshot-6",
-    "@instructure/ui-a11y-content": "9.0.2-snapshot-6",
-    "@instructure/ui-a11y-utils": "9.0.2-snapshot-6",
-    "@instructure/ui-badge": "9.0.2-snapshot-6",
-    "@instructure/ui-dom-utils": "9.0.2-snapshot-6",
-    "@instructure/ui-focusable": "9.0.2-snapshot-6",
-    "@instructure/ui-icons": "9.0.2-snapshot-6",
-    "@instructure/ui-menu": "9.0.2-snapshot-6",
-    "@instructure/ui-prop-types": "9.0.2-snapshot-6",
-    "@instructure/ui-react-utils": "9.0.2-snapshot-6",
-    "@instructure/ui-testable": "9.0.2-snapshot-6",
-    "@instructure/ui-tooltip": "9.0.2-snapshot-6",
-    "@instructure/ui-truncate-list": "9.0.2-snapshot-6",
-    "@instructure/ui-utils": "9.0.2-snapshot-6",
-    "@instructure/ui-view": "9.0.2-snapshot-6",
+    "@instructure/console": "9.0.2-snapshot-9",
+    "@instructure/debounce": "9.0.2-snapshot-9",
+    "@instructure/emotion": "9.0.2-snapshot-9",
+    "@instructure/shared-types": "9.0.2-snapshot-9",
+    "@instructure/ui-a11y-content": "9.0.2-snapshot-9",
+    "@instructure/ui-a11y-utils": "9.0.2-snapshot-9",
+    "@instructure/ui-badge": "9.0.2-snapshot-9",
+    "@instructure/ui-dom-utils": "9.0.2-snapshot-9",
+    "@instructure/ui-focusable": "9.0.2-snapshot-9",
+    "@instructure/ui-icons": "9.0.2-snapshot-9",
+    "@instructure/ui-menu": "9.0.2-snapshot-9",
+    "@instructure/ui-prop-types": "9.0.2-snapshot-9",
+    "@instructure/ui-react-utils": "9.0.2-snapshot-9",
+    "@instructure/ui-testable": "9.0.2-snapshot-9",
+    "@instructure/ui-tooltip": "9.0.2-snapshot-9",
+    "@instructure/ui-truncate-list": "9.0.2-snapshot-9",
+    "@instructure/ui-utils": "9.0.2-snapshot-9",
+    "@instructure/ui-view": "9.0.2-snapshot-9",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {