Skip to content

Commit

Permalink
update tests
Browse files Browse the repository at this point in the history 
Due to a timing issue bug, we updated the snapshot tests in
#3273 incorrectly so this
commit fixes that which is why there are a lot of changes.

Most tests have `show={true}` but not `appear` which means that they
should _not_ transition which means that no data attributes should be
present.
  • Loading branch information
@RobinMalfait
RobinMalfait committed Jun 19, 2024
1 parent 7cc8809 commit 6b5cbe4
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 150 deletions.
158 changes: 20 additions & 138 deletions packages/@headlessui-react/src/components/transition/__snapshots__/transition.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,11 @@ exports[`Setup API nested should be possible to change the underlying DOM tag of
<div
class="My Page"
>
<article
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<aside
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<article>
<aside>
Sidebar
</aside>
<section
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<section>
Content
</section>
</article>
Expand All @@ -37,29 +19,11 @@ exports[`Setup API nested should be possible to change the underlying DOM tag of
<div
class="My Page"
>
<div
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<aside
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<div>
<aside>
Sidebar
</aside>
<section
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<section>
Content
</section>
</div>
Expand All @@ -70,29 +34,11 @@ exports[`Setup API nested should be possible to nest transition components 1`] =
<div
class="My Page"
>
<div
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<div
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<div>
<div>
Sidebar
</div>
<div
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<div>
Content
</div>
</div>
Expand All @@ -103,26 +49,11 @@ exports[`Setup API nested should be possible to use render props on the Transiti
<div
class="My Page"
>
<article
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
>
<aside
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
>
<article>
<aside>
Sidebar
</aside>
<section
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
>
<section>
Content
</section>
</article>
Expand All @@ -133,27 +64,11 @@ exports[`Setup API nested should be possible to use render props on the Transiti
<div
class="My Page"
>
<div
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<aside
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
>
<div>
<aside>
Sidebar
</aside>
<section
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
>
<section>
Content
</section>
</div>
Expand All @@ -167,37 +82,21 @@ exports[`Setup API nested should yell at us when we forgot to forward a ref on t
exports[`Setup API nested should yell at us when we forgot to forward the ref on one of the Transition.Child components 1`] = `"Did you forget to passthrough the \`ref\` to the actual DOM node?"`;

exports[`Setup API shallow should be possible to change the underlying DOM tag 1`] = `
<span
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<span>
Children
</span>
`;

exports[`Setup API shallow should be possible to use a render prop 1`] = `
<span
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
>
<span>
Children
</span>
`;

exports[`Setup API shallow should passthrough all the props (that we do not use internally) 1`] = `
<div
class="text-blue-400"
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
id="root"
style=""
>
Children
</div>
Expand All @@ -206,25 +105,14 @@ exports[`Setup API shallow should passthrough all the props (that we do not use
exports[`Setup API shallow should passthrough all the props (that we do not use internally) even when using an \`as\` prop 1`] = `
<a
class="text-blue-400"
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
href="/"
style=""
>
Children
</a>
`;

exports[`Setup API shallow should render another component if the \`as\` prop is used and its children by default 1`] = `
<a
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<a>
Children
</a>
`;
Expand All @@ -234,13 +122,7 @@ exports[`Setup API shallow should render nothing when the show prop is false 1`]
exports[`Setup API shallow should yell at us when we forget to forward the ref when using a render prop 1`] = `"Did you forget to passthrough the \`ref\` to the actual DOM node?"`;

exports[`Setup API transition classes should be possible to passthrough the transition classes 1`] = `
<div
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
<div>
Children
</div>
`;
Expand All @@ -250,7 +132,7 @@ exports[`Setup API transition classes should be possible to passthrough the tran
class="enter enter-from"
data-closed=""
data-headlessui-state="closed"
style=""
style="transition: none;"
>
Children
</div>
Expand Down
16 changes: 4 additions & 12 deletions packages/@headlessui-react/src/components/transition/transition.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ describe('Setup API', () => {
expect(container.firstChild).toMatchSnapshot()
})

it('should be possible to change the underlying DOM tag of the Transition component and Transition.Child components', () => {
it('should be possible to change the underlying DOM tag of the Transition component and Transition.Child components', async () => {
let { container } = render(
<div className="My Page">
<Transition show={true} as="article">
Expand Down Expand Up @@ -358,11 +358,6 @@ describe('Setup API', () => {
<div
class="foo1
foo2"
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-transition=""
style=""
>
Children
</div>
Expand All @@ -371,20 +366,17 @@ describe('Setup API', () => {

await click(getByText('toggle'))

// TODO: This is not quite right
// The `foo1\nfoo2` should be gone
// I think this is a quirk of JSDOM
expect(container.firstChild).toMatchInlineSnapshot(`
<div>
<button>
toggle
</button>
<div
class="foo1
foo2 foo1 foo2 leave"
foo2 leave"
data-closed=""
data-enter=""
data-headlessui-state="closed enter transition"
data-headlessui-state="closed leave transition"
data-leave=""
data-transition=""
style=""
>
Expand Down

0 comments on commit 6b5cbe4

Please sign in to comment.