Simplify internal tests (#3720)

This PR simplifies the internal tests a bit.

1. Don't explicitly test if a component has a specific ID
1. Don't mock the `useId` hook if it's not necessary

What we care about more is that 2 components (E.g.: `MenuButton` and
`MenuItems`) are connected to each other. This is done via `id` and
`aria-controls` attributes. The exact ID is not important.

The main motivation for this is that every time we introduce some
`useId()` hook call somewhere, the IDs will shift and it will look like
some tests are broken.

If we are not explicitly testing the IDs, we also don't really care
about deterministic incrementing IDs in tests, so therefore we can
remove some `useId` mocking.

Note: some tests still have mocks like this (e.g.: `description.test.ts`
& `label.test.ts`) but that's because they have some snapshot tests.

Author: RobinMalfait

packages/@headlessui-react/src/components/combobox/combobox.test.tsx

@@ -21,8 +21,6 @@ import { Popover } from '../popover/popover'
 import { Transition } from '../transition/transition'
 import { Dialog } from './dialog'
 
-jest.mock('../../hooks/use-id')
-
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
@@ -65,10 +63,7 @@ describe('Safe guards', () => {
         </Dialog>
       )
 
-      assertDialog({
-        state: DialogState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-dialog-1' },
-      })
+      assertDialog({ state: DialogState.InvisibleUnmounted })
     })
   )
 })
@@ -584,10 +579,7 @@ describe('Rendering', () => {
 
         await nextFrame()
 
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
         assertDialogTitle({
           state: DialogState.Visible,
           textContent: JSON.stringify({ open: true }),
@@ -609,10 +601,7 @@ describe('Rendering', () => {
 
         await nextFrame()
 
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
         assertDialogDescription({
           state: DialogState.Visible,
           textContent: JSON.stringify({ open: true, disabled: false }),
@@ -754,10 +743,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Close dialog
         await press(Keys.Escape)
@@ -793,10 +779,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Close dialog
         await press(Keys.Escape)
@@ -838,10 +821,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Try to close the dialog
         await press(Keys.Escape)
@@ -885,10 +865,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Verify that the input field is focused
         assertActiveElement(document.getElementById('b'))
@@ -935,10 +912,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Verify that the input field is focused
         assertActiveElement(document.getElementById('a'))
@@ -985,10 +959,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Verify that the input field is focused
         assertActiveElement(document.getElementById('a'))