Remaining Disclosure tests

Minus the render prop tests
2021-12-27 12:55:21 -08:00
parent 1bed7dbea7
commit b37e0f3c9c
1 changed files with 388 additions and 16 deletions
--- a/src/lib/components/disclosure/disclosure.test.ts
+++ b/src/lib/components/disclosure/disclosure.test.ts
@@ -2,8 +2,8 @@ import { Disclosure, DisclosureButton, DisclosurePanel } from ".";
 import { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs";
 import { render } from "@testing-library/svelte";
 import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
-import { assertDisclosureButton, assertDisclosurePanel, DisclosureState, getDisclosureButton, getDisclosurePanel } from "$lib/test-utils/accessibility-assertions";
-import { click } from "$lib/test-utils/interactions";
+import { assertActiveElement, assertDisclosureButton, assertDisclosurePanel, DisclosureState, getByText, getDisclosureButton, getDisclosurePanel } from "$lib/test-utils/accessibility-assertions";
+import { click, Keys, MouseButton, press } from "$lib/test-utils/interactions";
 import { Transition, TransitionChild } from "../transitions";
 import TransitionDebug from "./_TransitionDebug.svelte";

@@ -537,20 +537,6 @@ describe('Composition', () => {
    'should be possible to control the DisclosurePanel by wrapping it in a Transition component',
    suppressConsoleLogs(async () => {
      let orderFn = jest.fn()
-      // render(
-      //   <Disclosure>
-      //     <Disclosure.Button>Trigger</Disclosure.Button>
-      //     <Debug name="Disclosure" fn={orderFn} />
-      //     <Transition>
-      //       <Debug name="Transition" fn={orderFn} />
-      //       <Disclosure.Panel>
-      //         <Transition.Child>
-      //           <Debug name="Transition.Child" fn={orderFn} />
-      //         </Transition.Child>
-      //       </Disclosure.Panel>
-      //     </Transition>
-      //   </Disclosure>
-      // )
      render(
        TestRenderer, {
        allProps: [
@@ -596,3 +582,389 @@ describe('Composition', () => {
    })
  )
 })
+
+describe('Keyboard interactions', () => {
+  describe('`Enter` key', () => {
+    it(
+      'should be possible to open the Disclosure with Enter',
+      suppressConsoleLogs(async () => {
+        render(
+          TestRenderer, {
+          allProps: [
+            Disclosure, {}, [
+              [DisclosureButton, {}, "Trigger"],
+              [DisclosurePanel, {}, "Contents"],
+            ]
+          ]
+        })
+
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+        // Focus the button
+        getDisclosureButton()?.focus()
+
+        // Open disclosure
+        await press(Keys.Enter)
+
+        // Verify it is open
+        assertDisclosureButton({ state: DisclosureState.Visible })
+        assertDisclosurePanel({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-panel-2' },
+        })
+
+        // Close disclosure
+        await press(Keys.Enter)
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+      })
+    )
+
+    it(
+      'should not be possible to open the disclosure with Enter when the button is disabled',
+      suppressConsoleLogs(async () => {
+        render(
+          TestRenderer, {
+          allProps: [
+            Disclosure, {}, [
+              [DisclosureButton, { disabled: true }, "Trigger"],
+              [DisclosurePanel, {}, "Contents"],
+            ]
+          ]
+        })
+
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+        // Focus the button
+        getDisclosureButton()?.focus()
+
+        // Try to open the disclosure
+        await press(Keys.Enter)
+
+        // Verify it is still closed
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+      })
+    )
+
+    it(
+      'should be possible to close the disclosure with Enter when the disclosure is open',
+      suppressConsoleLogs(async () => {
+        render(
+          TestRenderer, {
+          allProps: [
+            Disclosure, {}, [
+              [DisclosureButton, {}, "Trigger"],
+              [DisclosurePanel, {}, "Contents"],
+            ]
+          ]
+        })
+
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+        // Focus the button
+        getDisclosureButton()?.focus()
+
+        // Open disclosure
+        await press(Keys.Enter)
+
+        // Verify it is open
+        assertDisclosureButton({ state: DisclosureState.Visible })
+        assertDisclosurePanel({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-panel-2' },
+        })
+
+        // Close disclosure
+        await press(Keys.Enter)
+
+        // Verify it is closed again
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+      })
+    )
+  })
+
+  describe('`Space` key', () => {
+    it(
+      'should be possible to open the disclosure with Space',
+      suppressConsoleLogs(async () => {
+        render(
+          TestRenderer, {
+          allProps: [
+            Disclosure, {}, [
+              [DisclosureButton, {}, "Trigger"],
+              [DisclosurePanel, {}, "Contents"],
+            ]
+          ]
+        })
+
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+        // Focus the button
+        getDisclosureButton()?.focus()
+
+        // Open disclosure
+        await press(Keys.Space)
+
+        // Verify it is open
+        assertDisclosureButton({ state: DisclosureState.Visible })
+        assertDisclosurePanel({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-panel-2' },
+        })
+      })
+    )
+
+    it(
+      'should not be possible to open the disclosure with Space when the button is disabled',
+      suppressConsoleLogs(async () => {
+        render(
+          TestRenderer, {
+          allProps: [
+            Disclosure, {}, [
+              [DisclosureButton, { disabled: true }, "Trigger"],
+              [DisclosurePanel, {}, "Contents"],
+            ]
+          ]
+        })
+
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+        // Focus the button
+        getDisclosureButton()?.focus()
+
+        // Try to open the disclosure
+        await press(Keys.Space)
+
+        // Verify it is still closed
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+      })
+    )
+
+    it(
+      'should be possible to close the disclosure with Space when the disclosure is open',
+      suppressConsoleLogs(async () => {
+        render(
+          TestRenderer, {
+          allProps: [
+            Disclosure, {}, [
+              [DisclosureButton, {}, "Trigger"],
+              [DisclosurePanel, {}, "Contents"],
+            ]
+          ]
+        })
+
+        assertDisclosureButton({
+          state: DisclosureState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-disclosure-button-1' },
+        })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+        // Focus the button
+        getDisclosureButton()?.focus()
+
+        // Open disclosure
+        await press(Keys.Space)
+
+        // Verify it is open
+        assertDisclosureButton({ state: DisclosureState.Visible })
+        assertDisclosurePanel({
+          state: DisclosureState.Visible,
+          attributes: { id: 'headlessui-disclosure-panel-2' },
+        })
+
+        // Close disclosure
+        await press(Keys.Space)
+
+        // Verify it is closed again
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+        assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+      })
+    )
+  })
+})
+
+describe('Mouse interactions', () => {
+  it(
+    'should be possible to open a disclosure on click',
+    suppressConsoleLogs(async () => {
+      render(
+        TestRenderer, {
+        allProps: [
+          Disclosure, {}, [
+            [DisclosureButton, {}, "Trigger"],
+            [DisclosurePanel, {}, "Contents"],
+          ]
+        ]
+      })
+
+      assertDisclosureButton({
+        state: DisclosureState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-disclosure-button-1' },
+      })
+      assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+      // Open disclosure
+      await click(getDisclosureButton())
+
+      // Verify it is open
+      assertDisclosureButton({ state: DisclosureState.Visible })
+      assertDisclosurePanel({
+        state: DisclosureState.Visible,
+        attributes: { id: 'headlessui-disclosure-panel-2' },
+      })
+    })
+  )
+
+  it(
+    'should not be possible to open a disclosure on right click',
+    suppressConsoleLogs(async () => {
+      render(
+        TestRenderer, {
+        allProps: [
+          Disclosure, {}, [
+            [DisclosureButton, {}, "Trigger"],
+            [DisclosurePanel, {}, "Contents"],
+          ]
+        ]
+      })
+
+      assertDisclosureButton({
+        state: DisclosureState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-disclosure-button-1' },
+      })
+      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' },
+      })
+      assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+    })
+  )
+
+  it(
+    'should not be possible to open a disclosure on click when the button is disabled',
+    suppressConsoleLogs(async () => {
+      render(
+        TestRenderer, {
+        allProps: [
+          Disclosure, {}, [
+            [DisclosureButton, { disabled: true }, "Trigger"],
+            [DisclosurePanel, {}, "Contents"],
+          ]
+        ]
+      })
+
+      assertDisclosureButton({
+        state: DisclosureState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-disclosure-button-1' },
+      })
+      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' },
+      })
+      assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+    })
+  )
+
+  it(
+    'should be possible to close a disclosure on click',
+    suppressConsoleLogs(async () => {
+      render(
+        TestRenderer, {
+        allProps: [
+          Disclosure, {}, [
+            [DisclosureButton, {}, "Trigger"],
+            [DisclosurePanel, {}, "Contents"],
+          ]
+        ]
+      })
+
+      // Open disclosure
+      await click(getDisclosureButton())
+
+      // Verify it is open
+      assertDisclosureButton({ state: DisclosureState.Visible })
+
+      // Click to close
+      await click(getDisclosureButton())
+
+      // Verify it is closed
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+      assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+    })
+  )
+
+  it(
+    'should be possible to close the Disclosure by clicking on a DisclosureButton inside a DisclosurePanel',
+    suppressConsoleLogs(async () => {
+      render(
+        TestRenderer, {
+        allProps: [
+          Disclosure, {}, [
+            [DisclosureButton, {}, "Trigger"],
+            [DisclosurePanel, {}, [
+              [DisclosureButton, {}, "Close"]
+            ]]
+          ]
+        ]
+      })
+
+      // Open the disclosure
+      await click(getDisclosureButton())
+
+      let closeBtn = getByText('Close')
+
+      expect(closeBtn).not.toHaveAttribute('id')
+      expect(closeBtn).not.toHaveAttribute('aria-controls')
+      expect(closeBtn).not.toHaveAttribute('aria-expanded')
+
+      // The close button should close the disclosure
+      await click(closeBtn)
+
+      // Verify it is closed
+      assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
+
+      // Verify we restored the Open button
+      assertActiveElement(getDisclosureButton())
+    })
+  )
+})