fix(UnderlineNav2): underline nav items' selected state can be managed by the app state & clean up

.changeset/new-students-warn.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: underline nav items' selected state can be managed by the app state
+
+<!-- Changed components: UnderlineNav -->

src/UnderlineNav2/UnderlineNav.devonly.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {UnderlineNav} from './index'
+
+export default {
+  title: 'Drafts/Components/UnderlineNav/DevOnly',
+} as Meta
+
+export const IllegalState = () => {
+  return (
+    <UnderlineNav aria-label="Repository">
+      <UnderlineNav.Item aria-current="page">Code</UnderlineNav.Item>
+      <UnderlineNav.Item aria-current="page">Issues</UnderlineNav.Item>
+      <UnderlineNav.Item aria-current="page">Pull Requests</UnderlineNav.Item>
+    </UnderlineNav>
+  )
+}

src/UnderlineNav2/UnderlineNav.test.tsx

@@ -15,8 +15,6 @@ import {
 import {UnderlineNav} from '.'
 import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 
-declare const REACT_VERSION_LATEST: boolean
-
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(window, 'matchMedia', {
@@ -101,7 +99,6 @@ describe('UnderlineNav', () => {
     expect(nav.getElementsByTagName('svg').length).toEqual(7)
   })
   it('fires onSelect on click', async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
     const onSelect = jest.fn()
     const {getByRole} = render(
       <UnderlineNav aria-label="Test Navigation">
@@ -114,14 +111,6 @@ describe('UnderlineNav', () => {
     const user = userEvent.setup()
     await user.click(item)
     expect(onSelect).toHaveBeenCalledTimes(1)
-
-    if (REACT_VERSION_LATEST) {
-      expect(spy).not.toHaveBeenCalled()
-    } else {
-      // Warning: It looks like you're using the wrong act() around your test interactions
-      expect(spy).toHaveBeenCalledTimes(2)
-    }
-    spy.mockRestore()
   })
   it('fires onSelect on keypress', async () => {
     const onSelect = jest.fn()
@@ -173,6 +162,19 @@ describe('UnderlineNav', () => {
     expect(heading.className).toContain('VisuallyHidden')
     expect(heading.textContent).toBe('Repository navigation')
   })
+  it('throws an error when there are multiple items that have aria-current', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation()
+    expect(() => {
+      render(
+        <UnderlineNav aria-label="Test Navigation">
+          <UnderlineNav.Item aria-current="page">Item 1</UnderlineNav.Item>
+          <UnderlineNav.Item aria-current="page">Item 2</UnderlineNav.Item>
+        </UnderlineNav>,
+      )
+    }).toThrow('Only one current element is allowed')
+    expect(spy).toHaveBeenCalled()
+    spy.mockRestore()
+  })
 })
 
 describe('Keyboard Navigation', () => {