From b37e0f3c9ccdb7665f65c6ff5197b310c6994ec6 Mon Sep 17 00:00:00 2001 From: Ryan Gossiaux Date: Mon, 27 Dec 2021 12:55:21 -0800 Subject: [PATCH] Remaining Disclosure tests Minus the render prop tests --- .../components/disclosure/disclosure.test.ts | 404 +++++++++++++++++- 1 file changed, 388 insertions(+), 16 deletions(-) diff --git a/src/lib/components/disclosure/disclosure.test.ts b/src/lib/components/disclosure/disclosure.test.ts index 774e0d9..3f9c007 100644 --- 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( - // - // Trigger - // - // - // - // - // - // - // - // - // - // - // ) 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()) + }) + ) +})