public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Remove TestRenderer from disclosure test

Browse Source
This commit is contained in:
Dave Parsons
2022-06-06 15:52:52 +02:00
committed by Ryan Gossiaux
parent 2332f365ef
commit 96aadb98c7
1 changed files with 115 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
src/lib/components/disclosure/disclosure.test.ts vendored
View File

@@ -1,7 +1,6 @@
import { Disclosure, DisclosureButton, DisclosurePanel } from "."; import { Disclosure, DisclosureButton, DisclosurePanel } from ".";
import { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs"; import { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs";
import { render } from "@testing-library/svelte"; import { render } from "@testing-library/svelte";
import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
import { import {
assertActiveElement, assertActiveElement,
assertDisclosureButton, assertDisclosureButton,
@@ -52,16 +51,12 @@ describe("Safe guards", () => {
it( it(
"should be possible to render a Disclosure without crashing", "should be possible to render a Disclosure without crashing",
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render(TestRenderer, { render(svelte`
allProps: [ <Disclosure>
Disclosure, <DisclosureButton>Trigger</DisclosureButton>
{}, <DisclosurePanel>Contents</DisclosurePanel>
[ </Disclosure>
[DisclosureButton, {}, "Trigger"], `);
[DisclosurePanel, {}, "Contents"],
],
],
});
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -248,43 +243,31 @@ describe("Rendering", () => {
describe('`type` attribute', () => { describe('`type` attribute', () => {
it('should set the `type` to "button" by default', async () => { it('should set the `type` to "button" by default', async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, </Disclosure>
[ `)
[DisclosureButton, {}, "Trigger"]
]
]
})
expect(getDisclosureButton()).toHaveAttribute('type', 'button') expect(getDisclosureButton()).toHaveAttribute('type', 'button')
}) })
it('should not set the `type` to "button" if it already contains a `type`', async () => { it('should not set the `type` to "button" if it already contains a `type`', async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton type="submit">Trigger</DisclosureButton>
Disclosure, {}, </Disclosure>
[ `)
[DisclosureButton, { type: "submit" }, "Trigger"]
]
]
})
expect(getDisclosureButton()).toHaveAttribute('type', 'submit') expect(getDisclosureButton()).toHaveAttribute('type', 'submit')
}) })
it('should not set the type if the "as" prop is not a "button"', async () => { it('should not set the type if the "as" prop is not a "button"', async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton as="div">Trigger</DisclosureButton>
Disclosure, {}, </Disclosure>
[ `)
[DisclosureButton, { as: "div" }, "Trigger"]
]
]
})
expect(getDisclosureButton()).not.toHaveAttribute('type') expect(getDisclosureButton()).not.toHaveAttribute('type')
}) })
@@ -323,32 +306,24 @@ describe("Rendering", () => {
) )
it('should be possible to always render the DisclosurePanel if we provide it a `static` prop', () => { it('should be possible to always render the DisclosurePanel if we provide it a `static` prop', () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, <DisclosurePanel static="true">Contents</DisclosurePanel>
[ </Disclosure>
[DisclosureButton, {}, "Trigger"], `)
[DisclosurePanel, { static: true }, "Contents"]
]
]
})
// Let's verify that the Disclosure is already there // Let's verify that the Disclosure is already there
expect(getDisclosurePanel()).not.toBe(null) expect(getDisclosurePanel()).not.toBe(null)
}) })
it('should be possible to use a different render strategy for the DisclosurePanel', async () => { it('should be possible to use a different render strategy for the DisclosurePanel', async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, <DisclosurePanel unmount={false}>Contents</DisclosurePanel>
[ </Disclosure>
[DisclosureButton, {}, "Trigger"], `)
[DisclosurePanel, { unmount: false }, "Contents"]
]
]
})
assertDisclosureButton({ state: DisclosureState.InvisibleHidden }) assertDisclosureButton({ state: DisclosureState.InvisibleHidden })
assertDisclosurePanel({ state: DisclosureState.InvisibleHidden }) assertDisclosurePanel({ state: DisclosureState.InvisibleHidden })
@@ -438,23 +413,20 @@ describe('Composition', () => {
'should be possible to control the DisclosurePanel by wrapping it in a Transition component', 'should be possible to control the DisclosurePanel by wrapping it in a Transition component',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let orderFn = jest.fn() let orderFn = jest.fn()
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <TransitionDebug name="Disclosure" fn={orderFn} />
[DisclosureButton, {}, "Trigger"], <Transition>
[TransitionDebug, { name: "Disclosure", fn: orderFn }], <TransitionDebug name="Transition" fn={orderFn} />
[Transition, {}, [ <DisclosurePanel>
[TransitionDebug, { name: "Transition", fn: orderFn }], <TransitionChild>
[DisclosurePanel, {}, [ <TransitionDebug name="TransitionChild" fn={orderFn} />
[TransitionChild, {}, [ </TransitionChild>
[TransitionDebug, { name: "TransitionChild", fn: orderFn }], </DisclosurePanel>
]] </Transition>
]] </Disclosure>
]] `)
]
]
})
// Verify the Disclosure is hidden // Verify the Disclosure is hidden
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted }) assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
@@ -489,15 +461,12 @@ describe('Keyboard interactions', () => {
it( it(
'should be possible to open the Disclosure with Enter', 'should be possible to open the Disclosure with Enter',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -527,15 +496,12 @@ describe('Keyboard interactions', () => {
it( it(
'should not be possible to open the disclosure with Enter when the button is disabled', 'should not be possible to open the disclosure with Enter when the button is disabled',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton disabled={true}>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, { disabled: true }, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -561,15 +527,12 @@ describe('Keyboard interactions', () => {
it( it(
'should be possible to close the disclosure with Enter when the disclosure is open', 'should be possible to close the disclosure with Enter when the disclosure is open',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -604,15 +567,12 @@ describe('Keyboard interactions', () => {
it( it(
'should be possible to open the disclosure with Space', 'should be possible to open the disclosure with Space',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -638,15 +598,12 @@ describe('Keyboard interactions', () => {
it( it(
'should not be possible to open the disclosure with Space when the button is disabled', 'should not be possible to open the disclosure with Space when the button is disabled',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton disabled={true}>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, { disabled: true }, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -672,15 +629,12 @@ describe('Keyboard interactions', () => {
it( it(
'should be possible to close the disclosure with Space when the disclosure is open', 'should be possible to close the disclosure with Space when the disclosure is open',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -716,15 +670,12 @@ describe('Mouse interactions', () => {
it( it(
'should be possible to open a disclosure on click', 'should be possible to open a disclosure on click',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -747,15 +698,12 @@ describe('Mouse interactions', () => {
it( it(
'should not be possible to open a disclosure on right click', 'should not be possible to open a disclosure on right click',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -778,15 +726,12 @@ describe('Mouse interactions', () => {
it( it(
'should not be possible to open a disclosure on click when the button is disabled', 'should not be possible to open a disclosure on click when the button is disabled',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton disabled={true}>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, { disabled: true }, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
assertDisclosureButton({ assertDisclosureButton({
state: DisclosureState.InvisibleUnmounted, state: DisclosureState.InvisibleUnmounted,
@@ -809,15 +754,12 @@ describe('Mouse interactions', () => {
it( it(
'should be possible to close a disclosure on click', 'should be possible to close a disclosure on click',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>Contents</DisclosurePanel>
[DisclosureButton, {}, "Trigger"], </Disclosure>
[DisclosurePanel, {}, "Contents"], `)
]
]
})
// Open disclosure // Open disclosure
await click(getDisclosureButton()) await click(getDisclosureButton())
@@ -837,17 +779,14 @@ describe('Mouse interactions', () => {
it( it(
'should be possible to close the Disclosure by clicking on a DisclosureButton inside a DisclosurePanel', 'should be possible to close the Disclosure by clicking on a DisclosureButton inside a DisclosurePanel',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Disclosure>
allProps: [ <DisclosureButton>Trigger</DisclosureButton>
Disclosure, {}, [ <DisclosurePanel>
[DisclosureButton, {}, "Trigger"], <DisclosureButton>Close</DisclosureButton>
[DisclosurePanel, {}, [ </DisclosurePanel>
[DisclosureButton, {}, "Close"] </Disclosure>
]] `)
]
]
})
// Open the disclosure // Open the disclosure
await click(getDisclosureButton()) await click(getDisclosureButton())