diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index 367fa15..88c0fc6 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx @@ -52,8 +52,6 @@ import { let NOOP = () => {} -jest.mock('../../hooks/use-id') - // Mocking the `getBoundingClientRect` method for the virtual tests otherwise // the `Virtualizer` from `@tanstack/react-virtual` will not work as expected // because it couldn't measure the elements correctly. @@ -114,10 +112,7 @@ describe('safeguards', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -146,18 +141,12 @@ describe('Rendering', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await click(getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.Visible }) assertComboboxList({ state: ComboboxState.Visible }) }) ) @@ -177,32 +166,23 @@ describe('Rendering', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await click(getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await press(Keys.Enter, getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // The input should also be disabled assertComboboxInput({ state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-input-1', disabled: '' }, + attributes: { disabled: '' }, }) // And even if we try to focus it, it should not open the combobox @@ -950,22 +930,13 @@ describe('Rendering', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-3' }, - }) - assertComboboxLabel({ - attributes: { id: 'headlessui-label-1' }, - textContent: JSON.stringify({ open: false, disabled: false }), - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) + assertComboboxLabel({ textContent: JSON.stringify({ open: false, disabled: false }) }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await click(getComboboxButton()) - assertComboboxLabel({ - attributes: { id: 'headlessui-label-1' }, - textContent: JSON.stringify({ open: true, disabled: false }), - }) + assertComboboxLabel({ textContent: JSON.stringify({ open: true, disabled: false }) }) assertComboboxList({ state: ComboboxState.Visible }) assertComboboxLabelLinkedWithCombobox() assertComboboxButtonLinkedWithComboboxLabel() @@ -1005,7 +976,6 @@ describe('Rendering', () => { ) assertComboboxLabel({ - attributes: { id: 'headlessui-label-1' }, textContent: JSON.stringify({ open: false, disabled: false }), tag: 'p', }) @@ -1013,7 +983,6 @@ describe('Rendering', () => { await click(getComboboxButton()) assertComboboxLabel({ - attributes: { id: 'headlessui-label-1' }, textContent: JSON.stringify({ open: true, disabled: false }), tag: 'p', }) @@ -1040,7 +1009,6 @@ describe('Rendering', () => { assertComboboxButton({ state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, textContent: JSON.stringify({ open: false, active: false, @@ -1057,7 +1025,6 @@ describe('Rendering', () => { assertComboboxButton({ state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, textContent: JSON.stringify({ open: true, active: true, @@ -1091,7 +1058,6 @@ describe('Rendering', () => { assertComboboxButton({ state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, textContent: JSON.stringify({ open: false, active: false, @@ -1108,7 +1074,6 @@ describe('Rendering', () => { assertComboboxButton({ state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, textContent: JSON.stringify({ open: true, active: true, @@ -1142,10 +1107,7 @@ describe('Rendering', () => { // TODO: Needed to make it similar to vue test implementation? // await new Promise(requestAnimationFrame) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-3' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) assertComboboxButtonLinkedWithComboboxLabel() }) @@ -1260,18 +1222,12 @@ describe('Rendering', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await click(getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.Visible }) assertComboboxList({ state: ComboboxState.Visible, textContent: JSON.stringify({ open: true }), @@ -1333,18 +1289,12 @@ describe('Rendering', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await click(getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.Visible }) assertComboboxList({ state: ComboboxState.Visible, textContent: JSON.stringify({ @@ -1932,10 +1882,7 @@ describe('Rendering composition', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open Combobox @@ -2013,10 +1960,7 @@ describe('Rendering composition', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open Combobox @@ -2110,18 +2054,12 @@ describe('Composition', () => { ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await rawClick(getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.Visible }) assertComboboxList({ state: ComboboxState.Visible, textContent: JSON.stringify({ @@ -2228,10 +2166,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2245,10 +2180,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2267,10 +2199,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Try to focus the button @@ -2280,10 +2209,7 @@ describe.each([{ virtual: true }, { virtual: false }])( await press(Keys.Enter) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -2293,10 +2219,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2310,10 +2233,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2344,10 +2264,7 @@ describe.each([{ virtual: true }, { virtual: false }])( ) - assertComboboxButton({ - state: ComboboxState.InvisibleHidden, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleHidden }) assertComboboxList({ state: ComboboxState.InvisibleHidden }) // Focus the button @@ -2361,10 +2278,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2399,10 +2313,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2416,10 +2327,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2463,10 +2371,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2480,10 +2385,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2500,10 +2402,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2513,10 +2412,7 @@ describe.each([{ virtual: true }, { virtual: false }])( await press(Keys.Space) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -2526,13 +2422,8 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) - assertComboboxList({ - state: ComboboxState.InvisibleUnmounted, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) + assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button await focus(getComboboxButton()) @@ -2542,10 +2433,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2593,13 +2481,8 @@ describe.each([{ virtual: true }, { virtual: false }])( /> ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) - assertComboboxList({ - state: ComboboxState.InvisibleUnmounted, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) + assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button await focus(getComboboxButton()) @@ -2623,10 +2506,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2695,10 +2575,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2709,10 +2586,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2731,10 +2605,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2744,10 +2615,7 @@ describe.each([{ virtual: true }, { virtual: false }])( await press(Keys.ArrowDown) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -2757,10 +2625,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2771,10 +2636,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2814,10 +2676,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2828,10 +2687,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2850,10 +2706,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2863,10 +2716,7 @@ describe.each([{ virtual: true }, { virtual: false }])( await press(Keys.ArrowUp) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -2876,10 +2726,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the button @@ -2890,10 +2737,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -2941,7 +2785,6 @@ describe.each([{ virtual: true }, { virtual: false }])( assertComboboxButton({ state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) @@ -2988,10 +2831,7 @@ describe.each([{ virtual: true }, { virtual: false }])( render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3128,10 +2968,7 @@ describe.each([{ virtual: true }, { virtual: false }])( render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3172,10 +3009,7 @@ describe.each([{ virtual: true }, { virtual: false }])( render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3211,10 +3045,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -3354,10 +3185,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3368,10 +3196,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -3390,10 +3215,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3403,10 +3225,7 @@ describe.each([{ virtual: true }, { virtual: false }])( await press(Keys.ArrowDown) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -3416,10 +3235,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3430,10 +3246,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -3471,10 +3284,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3514,10 +3324,7 @@ describe.each([{ virtual: true }, { virtual: false }])( /> ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3548,10 +3355,7 @@ describe.each([{ virtual: true }, { virtual: false }])( /> ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3574,10 +3378,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3603,10 +3404,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3617,10 +3415,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -3639,10 +3434,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3652,10 +3444,7 @@ describe.each([{ virtual: true }, { virtual: false }])( await press(Keys.ArrowUp) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -3665,10 +3454,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3679,10 +3465,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -3728,10 +3511,7 @@ describe.each([{ virtual: true }, { virtual: false }])( /> ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3762,10 +3542,7 @@ describe.each([{ virtual: true }, { virtual: false }])( /> ) - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -3795,10 +3572,7 @@ describe.each([{ virtual: true }, { virtual: false }])( suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -3809,10 +3583,7 @@ describe.each([{ virtual: true }, { virtual: false }])( // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -4710,10 +4481,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input @@ -4721,10 +4489,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -4740,20 +4505,14 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-3' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input await focus(getComboboxInput()) // Verify it is invisible - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-3' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -4763,20 +4522,14 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-3' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Focus the input await focus(getComboboxInput()) // Verify it is invisible - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-3' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -4830,10 +4583,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -4841,10 +4591,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -4860,10 +4607,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Try to open the combobox @@ -4879,20 +4623,14 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Try to open the combobox await click(getComboboxButton()) // Verify it is still closed - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) }) ) @@ -4902,10 +4640,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) // Open combobox @@ -4913,10 +4648,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', // Verify it is visible assertComboboxButton({ state: ComboboxState.Visible }) - assertComboboxList({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-options-3' }, - }) + assertComboboxList({ state: ComboboxState.Visible }) assertActiveElement(getComboboxInput()) assertComboboxButtonLinkedWithCombobox() @@ -5460,18 +5192,12 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', suppressConsoleLogs(async () => { render() - assertComboboxButton({ - state: ComboboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.InvisibleUnmounted }) assertComboboxList({ state: ComboboxState.InvisibleUnmounted }) await click(getComboboxButton()) - assertComboboxButton({ - state: ComboboxState.Visible, - attributes: { id: 'headlessui-combobox-button-2' }, - }) + assertComboboxButton({ state: ComboboxState.Visible }) assertComboboxList({ state: ComboboxState.Visible }) let options = getComboboxOptions() diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx index e9a71d4..c7ad239 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx +++ b/packages/@headlessui-react/src/components/dialog/dialog.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', () => { ) - 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')) diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx index 635c87d..04e3d8b 100644 --- a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx +++ b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx @@ -14,8 +14,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { Transition } from '../transition/transition' import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure' -jest.mock('../../hooks/use-id') - afterAll(() => jest.restoreAllMocks()) function nextFrame() { @@ -51,10 +49,7 @@ describe('Safe guards', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) }) ) @@ -76,18 +71,12 @@ describe('Rendering', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) await click(getDisclosureButton()) - assertDisclosureButton({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.Visible }) assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' }) }) ) @@ -104,10 +93,7 @@ describe('Rendering', () => { ) - assertDisclosureButton({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.Visible }) assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' }) await click(getDisclosureButton()) @@ -263,7 +249,6 @@ describe('Rendering', () => { assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, textContent: JSON.stringify({ open: false, hover: false, @@ -279,7 +264,6 @@ describe('Rendering', () => { assertDisclosureButton({ state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-button-1' }, textContent: JSON.stringify({ open: true, hover: false, @@ -307,7 +291,6 @@ describe('Rendering', () => { assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, textContent: JSON.stringify({ open: false, hover: false, @@ -323,7 +306,6 @@ describe('Rendering', () => { assertDisclosureButton({ state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-button-1' }, textContent: JSON.stringify({ open: true, hover: false, @@ -474,18 +456,12 @@ describe('Rendering', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) await click(getDisclosureButton()) - assertDisclosureButton({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.Visible }) assertDisclosurePanel({ state: DisclosureState.Visible, textContent: JSON.stringify({ open: true }), @@ -710,10 +686,7 @@ describe('Keyboard interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Focus the button @@ -724,10 +697,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertDisclosureButton({ state: DisclosureState.Visible }) - assertDisclosurePanel({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-panel-2' }, - }) + assertDisclosurePanel({ state: DisclosureState.Visible }) // Close disclosure await press(Keys.Enter) @@ -745,10 +715,7 @@ describe('Keyboard interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Focus the button @@ -758,10 +725,7 @@ describe('Keyboard interactions', () => { await press(Keys.Enter) // Verify it is still closed - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) }) ) @@ -776,10 +740,7 @@ describe('Keyboard interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Focus the button @@ -790,10 +751,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertDisclosureButton({ state: DisclosureState.Visible }) - assertDisclosurePanel({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-panel-2' }, - }) + assertDisclosurePanel({ state: DisclosureState.Visible }) // Close disclosure await press(Keys.Enter) @@ -816,10 +774,7 @@ describe('Keyboard interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Focus the button @@ -830,10 +785,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertDisclosureButton({ state: DisclosureState.Visible }) - assertDisclosurePanel({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-panel-2' }, - }) + assertDisclosurePanel({ state: DisclosureState.Visible }) }) ) @@ -847,10 +799,7 @@ describe('Keyboard interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Focus the button @@ -860,10 +809,7 @@ describe('Keyboard interactions', () => { await press(Keys.Space) // Verify it is still closed - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) }) ) @@ -878,10 +824,7 @@ describe('Keyboard interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Focus the button @@ -892,10 +835,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertDisclosureButton({ state: DisclosureState.Visible }) - assertDisclosurePanel({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-panel-2' }, - }) + assertDisclosurePanel({ state: DisclosureState.Visible }) // Close disclosure await press(Keys.Space) @@ -919,10 +859,7 @@ describe('Mouse interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Open disclosure @@ -930,10 +867,7 @@ describe('Mouse interactions', () => { // Verify it is open assertDisclosureButton({ state: DisclosureState.Visible }) - assertDisclosurePanel({ - state: DisclosureState.Visible, - attributes: { id: 'headlessui-disclosure-panel-2' }, - }) + assertDisclosurePanel({ state: DisclosureState.Visible }) }) ) @@ -947,20 +881,14 @@ describe('Mouse interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Open disclosure await click(getDisclosureButton(), MouseButton.Right) // Verify it is still closed - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) }) ) @@ -975,20 +903,14 @@ describe('Mouse interactions', () => { ) - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) // Try to open the disclosure await click(getDisclosureButton()) // Verify it is still closed - assertDisclosureButton({ - state: DisclosureState.InvisibleUnmounted, - attributes: { id: 'headlessui-disclosure-button-1' }, - }) + assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) }) ) diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx index 6ddac4d..6441532 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx +++ b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx @@ -37,8 +37,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { Transition } from '../transition/transition' import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from './listbox' -jest.mock('../../hooks/use-id') - beforeAll(() => { jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any) jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any) @@ -83,10 +81,7 @@ describe('safeguards', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) }) ) @@ -114,18 +109,12 @@ describe('Rendering', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await click(getListboxButton()) - assertListboxButton({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.Visible }) assertListbox({ state: ListboxState.Visible }) }) ) @@ -144,26 +133,17 @@ describe('Rendering', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await click(getListboxButton()) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await press(Keys.Enter, getListboxButton()) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) }) ) @@ -521,22 +501,13 @@ describe('Rendering', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-2' }, - }) - assertListboxLabel({ - attributes: { id: 'headlessui-label-1' }, - textContent: JSON.stringify({ open: false, disabled: false }), - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) + assertListboxLabel({ textContent: JSON.stringify({ open: false, disabled: false }) }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await click(getListboxButton()) - assertListboxLabel({ - attributes: { id: 'headlessui-label-1' }, - textContent: JSON.stringify({ open: true, disabled: false }), - }) + assertListboxLabel({ textContent: JSON.stringify({ open: true, disabled: false }) }) assertListbox({ state: ListboxState.Visible }) assertListboxButtonLinkedWithListboxLabel() }) @@ -558,7 +529,6 @@ describe('Rendering', () => { ) assertListboxLabel({ - attributes: { id: 'headlessui-label-1' }, textContent: JSON.stringify({ open: false, disabled: false }), tag: 'p', }) @@ -566,7 +536,6 @@ describe('Rendering', () => { await click(getListboxButton()) assertListboxLabel({ - attributes: { id: 'headlessui-label-1' }, textContent: JSON.stringify({ open: true, disabled: false }), tag: 'p', }) @@ -592,7 +561,6 @@ describe('Rendering', () => { assertListboxButton({ state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, textContent: JSON.stringify({ open: false, active: false, @@ -609,7 +577,6 @@ describe('Rendering', () => { assertListboxButton({ state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-button-1' }, textContent: JSON.stringify({ open: true, active: true, @@ -642,7 +609,6 @@ describe('Rendering', () => { assertListboxButton({ state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, textContent: JSON.stringify({ open: false, active: false, @@ -659,7 +625,6 @@ describe('Rendering', () => { assertListboxButton({ state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-button-1' }, textContent: JSON.stringify({ open: true, active: true, @@ -692,10 +657,7 @@ describe('Rendering', () => { // TODO: Needed to make it similar to vue test implementation? // await new Promise(requestAnimationFrame) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-2' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) assertListboxButtonLinkedWithListboxLabel() }) @@ -805,22 +767,13 @@ describe('Rendering', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await click(getListboxButton()) - assertListboxButton({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-button-1' }, - }) - assertListbox({ - state: ListboxState.Visible, - textContent: JSON.stringify({ open: true }), - }) + assertListboxButton({ state: ListboxState.Visible }) + assertListbox({ state: ListboxState.Visible, textContent: JSON.stringify({ open: true }) }) assertActiveElement(getListbox()) }) ) @@ -875,18 +828,12 @@ describe('Rendering', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await click(getListboxButton()) - assertListboxButton({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.Visible }) assertListbox({ state: ListboxState.Visible, textContent: JSON.stringify({ @@ -1309,10 +1256,7 @@ describe('Rendering composition', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open Listbox @@ -1420,10 +1364,7 @@ describe('Rendering composition', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open Listbox @@ -1470,18 +1411,12 @@ describe('Composition', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) await rawClick(getListboxButton()) - assertListboxButton({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.Visible }) assertListbox({ state: ListboxState.Visible, textContent: JSON.stringify({ @@ -1523,10 +1458,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open listbox @@ -1575,10 +1507,7 @@ describe('Keyboard interactions', () => { render() - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open listbox @@ -1629,10 +1558,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -1643,10 +1569,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -1672,10 +1595,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -1685,10 +1605,7 @@ describe('Keyboard interactions', () => { await press(Keys.Space) // Verify it is still closed - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) }) ) @@ -1707,10 +1624,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -1721,10 +1635,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -1778,10 +1689,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -1815,10 +1723,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -1854,10 +1759,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -1898,10 +1800,7 @@ describe('Keyboard interactions', () => { render() - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open listbox @@ -1960,10 +1859,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -1998,10 +1894,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2012,10 +1905,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2052,10 +1942,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2066,10 +1953,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2105,10 +1989,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2119,10 +2000,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2150,10 +2028,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2163,10 +2038,7 @@ describe('Keyboard interactions', () => { await press(Keys.ArrowDown) // Verify it is still closed - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) }) ) @@ -2185,10 +2057,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2199,10 +2068,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2254,10 +2120,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2302,10 +2165,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2344,10 +2204,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2380,10 +2237,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2428,24 +2282,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) - assertListbox({ state: ListboxState.InvisibleUnmounted }) - - // Focus the button - await focus(getListboxButton()) - - // Open listbox - await press(Keys.ArrowUp) - - // Verify it is visible - assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2473,10 +2310,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2486,10 +2320,7 @@ describe('Keyboard interactions', () => { await press(Keys.ArrowUp) // Verify it is still closed - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) }) ) @@ -2508,10 +2339,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2522,10 +2350,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2581,10 +2406,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2619,10 +2441,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2661,10 +2480,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2675,10 +2491,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -2718,10 +2531,7 @@ describe('Keyboard interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Focus the button @@ -2732,11 +2542,7 @@ describe('Keyboard interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - orientation: 'horizontal', - }) + assertListbox({ state: ListboxState.Visible, orientation: 'horizontal' }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -3675,10 +3481,7 @@ describe('Mouse interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open listbox @@ -3686,10 +3489,7 @@ describe('Mouse interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() @@ -3714,10 +3514,7 @@ describe('Mouse interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Try to open the listbox @@ -3742,20 +3539,14 @@ describe('Mouse interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Try to open the listbox await click(getListboxButton()) // Verify it is still closed - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) }) ) @@ -3774,10 +3565,7 @@ describe('Mouse interactions', () => { ) - assertListboxButton({ - state: ListboxState.InvisibleUnmounted, - attributes: { id: 'headlessui-listbox-button-1' }, - }) + assertListboxButton({ state: ListboxState.InvisibleUnmounted }) assertListbox({ state: ListboxState.InvisibleUnmounted }) // Open listbox @@ -3785,10 +3573,7 @@ describe('Mouse interactions', () => { // Verify it is visible assertListboxButton({ state: ListboxState.Visible }) - assertListbox({ - state: ListboxState.Visible, - attributes: { id: 'headlessui-listbox-options-2' }, - }) + assertListbox({ state: ListboxState.Visible }) assertActiveElement(getListbox()) assertListboxButtonLinkedWithListbox() diff --git a/packages/@headlessui-react/src/components/menu/menu.test.tsx b/packages/@headlessui-react/src/components/menu/menu.test.tsx index fe994e6..9e727f2 100644 --- a/packages/@headlessui-react/src/components/menu/menu.test.tsx +++ b/packages/@headlessui-react/src/components/menu/menu.test.tsx @@ -33,8 +33,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { Transition } from '../transition/transition' import { Menu, MenuButton, MenuItem, MenuItems } from './menu' -jest.mock('../../hooks/use-id') - beforeAll(() => { jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any) jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any) @@ -98,18 +96,12 @@ describe('Rendering', () => { ) - assertMenuButton({ - state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, - }) + assertMenuButton({ state: MenuState.InvisibleUnmounted }) assertMenu({ state: MenuState.InvisibleUnmounted }) await click(getMenuButton()) - assertMenuButton({ - state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, - }) + assertMenuButton({ state: MenuState.Visible }) assertMenu({ state: MenuState.Visible }) }) ) @@ -169,7 +161,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, textContent: JSON.stringify({ open: false, active: false, @@ -185,7 +176,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, textContent: JSON.stringify({ open: true, active: true, @@ -217,7 +207,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, textContent: JSON.stringify({ open: false, active: false, @@ -233,7 +222,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, textContent: JSON.stringify({ open: true, active: true, @@ -353,7 +341,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.InvisibleUnmounted }) @@ -361,7 +348,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.Visible, @@ -422,7 +408,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.InvisibleUnmounted }) @@ -430,7 +415,6 @@ describe('Rendering', () => { assertMenuButton({ state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.Visible, @@ -583,7 +567,6 @@ describe('Rendering composition', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.InvisibleUnmounted }) @@ -652,7 +635,6 @@ describe('Rendering composition', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.InvisibleUnmounted }) @@ -748,7 +730,6 @@ describe('Composition', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.InvisibleUnmounted }) @@ -756,7 +737,6 @@ describe('Composition', () => { assertMenuButton({ state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.Visible, @@ -802,16 +782,12 @@ describe('Composition', () => { assertMenuButton({ state: MenuState.InvisibleUnmounted, - attributes: { id: 'headlessui-menu-button-1' }, }) assertMenu({ state: MenuState.InvisibleUnmounted }) await rawClick(getMenuButton()) - assertMenuButton({ - state: MenuState.Visible, - attributes: { id: 'headlessui-menu-button-1' }, - }) + assertMenuButton({ state: MenuState.Visible }) assertMenu({ state: MenuState.Visible, textContent: JSON.stringify({ active: false, focus: false, disabled: false }), diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx index 86d9d44..038d67a 100644 --- a/packages/@headlessui-react/src/components/popover/popover.test.tsx +++ b/packages/@headlessui-react/src/components/popover/popover.test.tsx @@ -18,8 +18,6 @@ import { Portal } from '../portal/portal' import { Transition } from '../transition/transition' import { Popover, PopoverButton, PopoverPanel } from './popover' -jest.mock('../../hooks/use-id') - afterAll(() => jest.restoreAllMocks()) function nextFrame() { @@ -57,10 +55,7 @@ describe('Safe guards', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) }) ) @@ -124,18 +119,12 @@ describe('Rendering', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) await click(getPopoverButton()) - assertPopoverButton({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.Visible }) assertPopoverPanel({ state: PopoverState.Visible, textContent: 'Panel is: open' }) }) ) @@ -349,18 +338,12 @@ describe('Rendering', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) await click(getPopoverButton()) - assertPopoverButton({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.Visible }) assertPopoverPanel({ state: PopoverState.Visible }) }) ) @@ -376,7 +359,6 @@ describe('Rendering', () => { assertPopoverButton({ state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, textContent: JSON.stringify({ open: false, active: false, @@ -392,7 +374,6 @@ describe('Rendering', () => { assertPopoverButton({ state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-button-1' }, textContent: JSON.stringify({ open: true, active: true, @@ -420,7 +401,6 @@ describe('Rendering', () => { assertPopoverButton({ state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, textContent: JSON.stringify({ open: false, active: false, @@ -436,7 +416,6 @@ describe('Rendering', () => { assertPopoverButton({ state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-button-1' }, textContent: JSON.stringify({ open: true, active: true, @@ -522,18 +501,12 @@ describe('Rendering', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) await click(getPopoverButton()) - assertPopoverButton({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.Visible }) assertPopoverPanel({ state: PopoverState.Visible, textContent: JSON.stringify({ open: true }), @@ -1032,10 +1005,7 @@ describe('Keyboard interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Focus the button @@ -1046,10 +1016,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertPopoverButton({ state: PopoverState.Visible }) - assertPopoverPanel({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-panel-3' }, - }) + assertPopoverPanel({ state: PopoverState.Visible }) // Close popover await press(Keys.Enter) @@ -1067,10 +1034,7 @@ describe('Keyboard interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Focus the button @@ -1080,10 +1044,7 @@ describe('Keyboard interactions', () => { await press(Keys.Enter) // Verify it is still closed - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) }) ) @@ -1098,10 +1059,7 @@ describe('Keyboard interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Focus the button @@ -1112,10 +1070,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertPopoverButton({ state: PopoverState.Visible }) - assertPopoverPanel({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-panel-3' }, - }) + assertPopoverPanel({ state: PopoverState.Visible }) // Close popover await press(Keys.Enter) @@ -2081,10 +2036,7 @@ describe('Keyboard interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Focus the button @@ -2095,10 +2047,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertPopoverButton({ state: PopoverState.Visible }) - assertPopoverPanel({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-panel-3' }, - }) + assertPopoverPanel({ state: PopoverState.Visible }) }) ) @@ -2112,10 +2061,7 @@ describe('Keyboard interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Focus the button @@ -2125,10 +2071,7 @@ describe('Keyboard interactions', () => { await press(Keys.Space) // Verify it is still closed - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) }) ) @@ -2143,10 +2086,7 @@ describe('Keyboard interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Focus the button @@ -2157,10 +2097,7 @@ describe('Keyboard interactions', () => { // Verify it is open assertPopoverButton({ state: PopoverState.Visible }) - assertPopoverPanel({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-panel-3' }, - }) + assertPopoverPanel({ state: PopoverState.Visible }) // Close popover await press(Keys.Space) @@ -2292,10 +2229,7 @@ describe('Mouse interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Open popover @@ -2303,10 +2237,7 @@ describe('Mouse interactions', () => { // Verify it is open assertPopoverButton({ state: PopoverState.Visible }) - assertPopoverPanel({ - state: PopoverState.Visible, - attributes: { id: 'headlessui-popover-panel-3' }, - }) + assertPopoverPanel({ state: PopoverState.Visible }) }) ) @@ -2320,20 +2251,14 @@ describe('Mouse interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Open popover await click(getPopoverButton(), MouseButton.Right) // Verify it is still closed - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) }) ) @@ -2348,20 +2273,14 @@ describe('Mouse interactions', () => { ) - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) // Try to open the popover await click(getPopoverButton()) // Verify it is still closed - assertPopoverButton({ - state: PopoverState.InvisibleUnmounted, - attributes: { id: 'headlessui-popover-button-1' }, - }) + assertPopoverButton({ state: PopoverState.InvisibleUnmounted }) assertPopoverPanel({ state: PopoverState.InvisibleUnmounted }) }) ) diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx index 436b2e3..03b045d 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx +++ b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx @@ -12,8 +12,6 @@ import { Keys, click, focus, press, shift } from '../../test-utils/interactions' import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { RadioGroup } from './radio-group' -jest.mock('../../hooks/use-id') - beforeAll(() => { jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any) jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any) diff --git a/packages/@headlessui-react/src/components/switch/switch.test.tsx b/packages/@headlessui-react/src/components/switch/switch.test.tsx index 308121b..e57b236 100644 --- a/packages/@headlessui-react/src/components/switch/switch.test.tsx +++ b/packages/@headlessui-react/src/components/switch/switch.test.tsx @@ -11,8 +11,6 @@ import { import { click, focus, Keys, mouseEnter, press } from '../../test-utils/interactions' import { Switch } from './switch' -jest.mock('../../hooks/use-id') - describe('Safe guards', () => { it('should be possible to render a Switch without crashing', () => { render() diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx index 37ec8fc..3725639 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx @@ -11,8 +11,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { Dialog } from '../dialog/dialog' import { Tab } from './tabs' -jest.mock('../../hooks/use-id') - beforeAll(() => { jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any) jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any)