@instructure/ui-side-nav-bar 9.3.1-snapshot-0 → 9.3.1-snapshot-2

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.3.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-snapshot-0) (2024-07-17)
+## [9.3.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-snapshot-2) (2024-07-23)
 
 **Note:** Version bump only for package @instructure/ui-side-nav-bar
 

package/es/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.js

@@ -0,0 +1,68 @@
+var _SideNavBarItem, _SideNavBarItem2;
+/*
+ * 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 { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { IconAdminLine } from '@instructure/ui-icons';
+import { SideNavBarItem } from '../index';
+describe('<SideNavBarItem />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = render(_SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/React.createElement(SideNavBarItem, {
+        icon: /*#__PURE__*/React.createElement(IconAdminLine, null),
+        label: "Admin",
+        href: "#"
+      }))),
+      container = _render.container;
+    const navItem = screen.getByRole('link');
+    const icon = container.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute('name', 'IconAdmin');
+    expect(navItem).toBeInTheDocument();
+    expect(navItem.tagName).toBe('A');
+    expect(navItem).toHaveAttribute('href', '#');
+    expect(navItem).toHaveTextContent('Admin');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render(_SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+        icon: /*#__PURE__*/React.createElement(IconAdminLine, null),
+        label: "Dashboard",
+        href: "#"
+      }))),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

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

@@ -0,0 +1,162 @@
+var _SideNavBarItem, _SideNavBarItem2, _SideNavBarItem3, _SideNavBarItem4, _SideNavBarItem5, _SideNavBarItem6, _SideNavBarItem7, _SideNavBarItem8;
+/*
+ * 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 { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { Badge } from '@instructure/ui-badge';
+import { IconAdminLine, IconDashboardLine } from '@instructure/ui-icons';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { SideNavBar, SideNavBarItem } from '../index';
+describe('<SideNavBar />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = render( /*#__PURE__*/React.createElement(SideNavBar, {
+        label: "Main navigation",
+        toggleLabel: {
+          expandedLabel: 'Minimize SideNavBar',
+          minimizedLabel: 'Expand SideNavBar'
+        }
+      }, _SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/React.createElement(SideNavBarItem, {
+        icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
+        label: "Dashboard",
+        href: "#"
+      })))),
+      container = _render.container;
+    const nav = screen.getByRole('navigation');
+    const icons = container.querySelectorAll('svg');
+    expect(icons.length).toBe(2);
+    expect(icons[0]).toHaveAttribute('name', 'IconDashboard');
+    expect(icons[1]).toHaveAttribute('name', 'IconMoveStart');
+    expect(nav).toBeInTheDocument();
+    expect(nav.tagName).toBe('NAV');
+    expect(nav).toHaveAttribute('aria-label', 'Main navigation');
+    expect(nav).toHaveTextContent('Minimize SideNavBar');
+  });
+  it('should render a single semantic nav element', async () => {
+    render( /*#__PURE__*/React.createElement(SideNavBar, {
+      label: "Main navigation",
+      toggleLabel: {
+        expandedLabel: 'Minimize SideNavBar',
+        minimizedLabel: 'Expand SideNavBar'
+      }
+    }, _SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+      icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
+      label: "Dashboard",
+      href: "#"
+    }))));
+    const nav = screen.getByRole('navigation');
+    const navElements = screen.getAllByRole('listitem');
+    expect(nav).toBeInTheDocument();
+    expect(nav.tagName).toBe('NAV');
+    expect(navElements.length).toBe(1);
+    expect(navElements[0]).toHaveTextContent('Dashboard');
+  });
+  it('should render a semantic list for the nav content', async () => {
+    render( /*#__PURE__*/React.createElement(SideNavBar, {
+      label: "Main navigation",
+      toggleLabel: {
+        expandedLabel: 'Minimize SideNavBar',
+        minimizedLabel: 'Expand SideNavBar'
+      }
+    }, _SideNavBarItem3 || (_SideNavBarItem3 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+      icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
+      label: "Dashboard",
+      href: "#"
+    })), _SideNavBarItem4 || (_SideNavBarItem4 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+      icon: /*#__PURE__*/React.createElement(Badge, {
+        count: 99
+      }, /*#__PURE__*/React.createElement(IconAdminLine, null)),
+      label: "Inbox",
+      href: "#"
+    }))));
+    const list = screen.getAllByRole('list');
+    const navElements = screen.getAllByRole('listitem');
+    expect(list[0].tagName).toBe('UL');
+    expect(list.length).toBe(1);
+    expect(navElements.length).toBe(2);
+  });
+  it('should switch aria-expanded when the Toggle SideNavBar button is clicked', async () => {
+    render( /*#__PURE__*/React.createElement(SideNavBar, {
+      label: "Main navigation",
+      toggleLabel: {
+        expandedLabel: 'Minimize SideNavBar',
+        minimizedLabel: 'Expand SideNavBar'
+      }
+    }, _SideNavBarItem5 || (_SideNavBarItem5 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+      icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
+      label: "Dashboard",
+      href: "#"
+    })), _SideNavBarItem6 || (_SideNavBarItem6 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+      icon: /*#__PURE__*/React.createElement(Badge, {
+        count: 99
+      }, /*#__PURE__*/React.createElement(IconAdminLine, null)),
+      label: "Inbox",
+      href: "#"
+    }))));
+    const nav = screen.getByRole('navigation');
+    const toggleBtn = screen.getByRole('button');
+    expect(nav).toHaveTextContent('Minimize SideNavBar');
+    expect(toggleBtn).toHaveAttribute('aria-expanded', 'true');
+    userEvent.click(toggleBtn);
+    await waitFor(() => {
+      const updatedToggleBtn = screen.getByRole('button');
+      const updatedNav = screen.getByRole('navigation');
+      expect(updatedNav).toHaveTextContent('Expand SideNavBar');
+      expect(updatedToggleBtn).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render( /*#__PURE__*/React.createElement(SideNavBar, {
+        label: "Main navigation",
+        toggleLabel: {
+          expandedLabel: 'Minimize SideNavBar',
+          minimizedLabel: 'Expand SideNavBar'
+        }
+      }, _SideNavBarItem7 || (_SideNavBarItem7 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+        icon: /*#__PURE__*/React.createElement(IconDashboardLine, null),
+        label: "Dashboard",
+        href: "#"
+      })), _SideNavBarItem8 || (_SideNavBarItem8 = /*#__PURE__*/React.createElement(SideNavBarItem, {
+        icon: /*#__PURE__*/React.createElement(Badge, {
+          count: 99
+        }, /*#__PURE__*/React.createElement(IconAdminLine, null)),
+        label: "Inbox",
+        href: "#"
+      })))),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _IconAdminLine = require("@instructure/ui-icons/lib/IconAdminLine.js");
+var _index = require("../index");
+var _SideNavBarItem, _SideNavBarItem2;
+/*
+ * 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.
+ */
+describe('<SideNavBarItem />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = (0, _react2.render)(_SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+        icon: /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null),
+        label: "Admin",
+        href: "#"
+      }))),
+      container = _render.container;
+    const navItem = _react2.screen.getByRole('link');
+    const icon = container.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute('name', 'IconAdmin');
+    expect(navItem).toBeInTheDocument();
+    expect(navItem.tagName).toBe('A');
+    expect(navItem).toHaveAttribute('href', '#');
+    expect(navItem).toHaveTextContent('Admin');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = (0, _react2.render)(_SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+        icon: /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null),
+        label: "Dashboard",
+        href: "#"
+      }))),
+      container = _render2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

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

@@ -0,0 +1,165 @@
+"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"));
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _Badge = require("@instructure/ui-badge/lib/Badge");
+var _IconAdminLine = require("@instructure/ui-icons/lib/IconAdminLine.js");
+var _IconDashboardLine = require("@instructure/ui-icons/lib/IconDashboardLine.js");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _SideNavBarItem, _SideNavBarItem2, _SideNavBarItem3, _SideNavBarItem4, _SideNavBarItem5, _SideNavBarItem6, _SideNavBarItem7, _SideNavBarItem8;
+/*
+ * 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.
+ */
+describe('<SideNavBar />', () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.SideNavBar, {
+        label: "Main navigation",
+        toggleLabel: {
+          expandedLabel: 'Minimize SideNavBar',
+          minimizedLabel: 'Expand SideNavBar'
+        }
+      }, _SideNavBarItem || (_SideNavBarItem = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+        icon: /*#__PURE__*/_react.default.createElement(_IconDashboardLine.IconDashboardLine, null),
+        label: "Dashboard",
+        href: "#"
+      })))),
+      container = _render.container;
+    const nav = _react2.screen.getByRole('navigation');
+    const icons = container.querySelectorAll('svg');
+    expect(icons.length).toBe(2);
+    expect(icons[0]).toHaveAttribute('name', 'IconDashboard');
+    expect(icons[1]).toHaveAttribute('name', 'IconMoveStart');
+    expect(nav).toBeInTheDocument();
+    expect(nav.tagName).toBe('NAV');
+    expect(nav).toHaveAttribute('aria-label', 'Main navigation');
+    expect(nav).toHaveTextContent('Minimize SideNavBar');
+  });
+  it('should render a single semantic nav element', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.SideNavBar, {
+      label: "Main navigation",
+      toggleLabel: {
+        expandedLabel: 'Minimize SideNavBar',
+        minimizedLabel: 'Expand SideNavBar'
+      }
+    }, _SideNavBarItem2 || (_SideNavBarItem2 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+      icon: /*#__PURE__*/_react.default.createElement(_IconDashboardLine.IconDashboardLine, null),
+      label: "Dashboard",
+      href: "#"
+    }))));
+    const nav = _react2.screen.getByRole('navigation');
+    const navElements = _react2.screen.getAllByRole('listitem');
+    expect(nav).toBeInTheDocument();
+    expect(nav.tagName).toBe('NAV');
+    expect(navElements.length).toBe(1);
+    expect(navElements[0]).toHaveTextContent('Dashboard');
+  });
+  it('should render a semantic list for the nav content', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.SideNavBar, {
+      label: "Main navigation",
+      toggleLabel: {
+        expandedLabel: 'Minimize SideNavBar',
+        minimizedLabel: 'Expand SideNavBar'
+      }
+    }, _SideNavBarItem3 || (_SideNavBarItem3 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+      icon: /*#__PURE__*/_react.default.createElement(_IconDashboardLine.IconDashboardLine, null),
+      label: "Dashboard",
+      href: "#"
+    })), _SideNavBarItem4 || (_SideNavBarItem4 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+      icon: /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
+        count: 99
+      }, /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null)),
+      label: "Inbox",
+      href: "#"
+    }))));
+    const list = _react2.screen.getAllByRole('list');
+    const navElements = _react2.screen.getAllByRole('listitem');
+    expect(list[0].tagName).toBe('UL');
+    expect(list.length).toBe(1);
+    expect(navElements.length).toBe(2);
+  });
+  it('should switch aria-expanded when the Toggle SideNavBar button is clicked', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.SideNavBar, {
+      label: "Main navigation",
+      toggleLabel: {
+        expandedLabel: 'Minimize SideNavBar',
+        minimizedLabel: 'Expand SideNavBar'
+      }
+    }, _SideNavBarItem5 || (_SideNavBarItem5 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+      icon: /*#__PURE__*/_react.default.createElement(_IconDashboardLine.IconDashboardLine, null),
+      label: "Dashboard",
+      href: "#"
+    })), _SideNavBarItem6 || (_SideNavBarItem6 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+      icon: /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
+        count: 99
+      }, /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null)),
+      label: "Inbox",
+      href: "#"
+    }))));
+    const nav = _react2.screen.getByRole('navigation');
+    const toggleBtn = _react2.screen.getByRole('button');
+    expect(nav).toHaveTextContent('Minimize SideNavBar');
+    expect(toggleBtn).toHaveAttribute('aria-expanded', 'true');
+    _userEvent.default.click(toggleBtn);
+    await (0, _react2.waitFor)(() => {
+      const updatedToggleBtn = _react2.screen.getByRole('button');
+      const updatedNav = _react2.screen.getByRole('navigation');
+      expect(updatedNav).toHaveTextContent('Expand SideNavBar');
+      expect(updatedToggleBtn).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.SideNavBar, {
+        label: "Main navigation",
+        toggleLabel: {
+          expandedLabel: 'Minimize SideNavBar',
+          minimizedLabel: 'Expand SideNavBar'
+        }
+      }, _SideNavBarItem7 || (_SideNavBarItem7 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+        icon: /*#__PURE__*/_react.default.createElement(_IconDashboardLine.IconDashboardLine, null),
+        label: "Dashboard",
+        href: "#"
+      })), _SideNavBarItem8 || (_SideNavBarItem8 = /*#__PURE__*/_react.default.createElement(_index.SideNavBarItem, {
+        icon: /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
+          count: 99
+        }, /*#__PURE__*/_react.default.createElement(_IconAdminLine.IconAdminLine, null)),
+        label: "Inbox",
+        href: "#"
+      })))),
+      container = _render2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-side-nav-bar",
-  "version": "9.3.1-snapshot-0",
+  "version": "9.3.1-snapshot-2",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,25 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.3.1-snapshot-0",
-    "@instructure/ui-color-utils": "9.3.1-snapshot-0",
-    "@instructure/ui-test-locator": "9.3.1-snapshot-0",
-    "@instructure/ui-test-utils": "9.3.1-snapshot-0",
-    "@instructure/ui-themes": "9.3.1-snapshot-0"
+    "@instructure/ui-axe-check": "9.3.1-snapshot-2",
+    "@instructure/ui-babel-preset": "9.3.1-snapshot-2",
+    "@instructure/ui-color-utils": "9.3.1-snapshot-2",
+    "@instructure/ui-test-utils": "9.3.1-snapshot-2",
+    "@instructure/ui-themes": "9.3.1-snapshot-2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/debounce": "9.3.1-snapshot-0",
-    "@instructure/emotion": "9.3.1-snapshot-0",
-    "@instructure/shared-types": "9.3.1-snapshot-0",
-    "@instructure/ui-a11y-content": "9.3.1-snapshot-0",
-    "@instructure/ui-a11y-utils": "9.3.1-snapshot-0",
-    "@instructure/ui-badge": "9.3.1-snapshot-0",
-    "@instructure/ui-icons": "9.3.1-snapshot-0",
-    "@instructure/ui-prop-types": "9.3.1-snapshot-0",
-    "@instructure/ui-react-utils": "9.3.1-snapshot-0",
-    "@instructure/ui-testable": "9.3.1-snapshot-0",
-    "@instructure/ui-tooltip": "9.3.1-snapshot-0",
+    "@instructure/debounce": "9.3.1-snapshot-2",
+    "@instructure/emotion": "9.3.1-snapshot-2",
+    "@instructure/shared-types": "9.3.1-snapshot-2",
+    "@instructure/ui-a11y-content": "9.3.1-snapshot-2",
+    "@instructure/ui-a11y-utils": "9.3.1-snapshot-2",
+    "@instructure/ui-badge": "9.3.1-snapshot-2",
+    "@instructure/ui-icons": "9.3.1-snapshot-2",
+    "@instructure/ui-prop-types": "9.3.1-snapshot-2",
+    "@instructure/ui-react-utils": "9.3.1-snapshot-2",
+    "@instructure/ui-testable": "9.3.1-snapshot-2",
+    "@instructure/ui-tooltip": "9.3.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/SideNavBar/SideNavBarItem/__new-tests__/NavigationItem.test.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 { vi } from 'vitest'
+import '@testing-library/jest-dom'
+
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { IconAdminLine } from '@instructure/ui-icons'
+import { SideNavBarItem } from '../index'
+
+describe('<SideNavBarItem />', () => {
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as any
+  })
+
+  afterEach(() => {
+    consoleErrorMock.mockRestore()
+  })
+
+  it('should render', async () => {
+    const { container } = render(
+      <SideNavBarItem icon={<IconAdminLine />} label="Admin" href="#" />
+    )
+    const navItem = screen.getByRole('link')
+    const icon = container.querySelector('svg')
+
+    expect(icon).toBeInTheDocument()
+    expect(icon).toHaveAttribute('name', 'IconAdmin')
+
+    expect(navItem).toBeInTheDocument()
+    expect(navItem.tagName).toBe('A')
+    expect(navItem).toHaveAttribute('href', '#')
+    expect(navItem).toHaveTextContent('Admin')
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(
+      <SideNavBarItem icon={<IconAdminLine />} label="Dashboard" href="#" />
+    )
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+})