22 * @jest -environment jsdom
33 */
44
5- import { render } from '@testing-library/svelte'
5+ import { render , fireEvent , findAllByText } from '@testing-library/svelte'
66import TreeView from '../TreeView.svelte'
77
88import example1 from './__fixtures__/example1.json'
@@ -12,6 +12,19 @@ import type { TreeNode } from '../types'
1212
1313// https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component/
1414
15+ async function clickByText ( container : HTMLElement , text : string , index = 0 ) {
16+ const el = ( await findAllByText ( container , text ) ) [ index ]
17+ if ( el ) {
18+ return fireEvent (
19+ el ,
20+ new MouseEvent ( 'click' , {
21+ bubbles : true ,
22+ cancelable : true
23+ } )
24+ )
25+ }
26+ }
27+
1528describe ( 'TreeView' , ( ) => {
1629 it ( 'should render' , async ( ) => {
1730 const results = render ( TreeView , {
@@ -23,11 +36,8 @@ describe('TreeView', () => {
2336 }
2437 } )
2538
26- const lists = results . container . querySelectorAll ( 'ul' )
27- const rows = results . container . querySelectorAll ( 'li' )
28-
29- expect ( lists . length ) . toEqual ( 37 )
30- expect ( rows . length ) . toEqual ( 270 )
39+ expect ( results . container . querySelectorAll ( 'ul' ) . length ) . toEqual ( 37 )
40+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 270 )
3141 expect ( results . container ) . toBeInTheDocument ( )
3242 expect ( results . container ) . toMatchSnapshot ( )
3343 } )
@@ -99,12 +109,130 @@ describe('TreeView', () => {
99109 }
100110 } )
101111
102- const lists = results . container . querySelectorAll ( 'ul' )
103- const rows = results . container . querySelectorAll ( 'li' )
104-
105- expect ( lists . length ) . toEqual ( 34 )
106- expect ( rows . length ) . toEqual ( 118 )
112+ expect ( results . container . querySelectorAll ( 'ul' ) . length ) . toEqual ( 34 )
113+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 118 )
107114 expect ( results . container ) . toBeInTheDocument ( )
108115 expect ( results . container ) . toMatchSnapshot ( )
109116 } )
117+
118+ it ( 'should respect maxDepth and collapse nodes correctly' , async ( ) => {
119+ const data = {
120+ a : [ 1 , 2 , 3 ] ,
121+ b : new Map < string , any > ( [
122+ [ 'c' , { d : null } ] ,
123+ [ 'e' , { f : [ 9 , 8 , 7 ] } ]
124+ ] )
125+ }
126+ const results = render ( TreeView , {
127+ props : {
128+ data,
129+ recursionOpts : {
130+ maxDepth : 4
131+ }
132+ }
133+ } )
134+ window . HTMLElement . prototype . scrollIntoView = jest . fn ( )
135+
136+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 2 )
137+ expect ( results . container ) . toBeInTheDocument ( )
138+
139+ await clickByText ( results . container , 'b:' )
140+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 5 )
141+
142+ await clickByText ( results . container , '[map entry 1]:' )
143+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 8 )
144+
145+ await clickByText ( results . container , '[value]:' )
146+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 10 )
147+
148+ // Here should not expand the 'f:' value since it's beyond maxDepth
149+ await clickByText ( results . container , 'f:' )
150+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 10 )
151+
152+ // Collapsing and uncollapsing should not change anything
153+ await clickByText ( results . container , '[value]:' )
154+ await clickByText ( results . container , '[value]:' )
155+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 10 )
156+
157+ await clickByText ( results . container , 'b:' )
158+ await clickByText ( results . container , 'b:' )
159+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 10 )
160+
161+ // Add circular node to the data and use stopCircularRecursion
162+ data . b = data . b . set ( 'g' , data . b . get ( 'e' ) )
163+ results . rerender ( {
164+ props : {
165+ data,
166+ recursionOpts : {
167+ maxDepth : 5 ,
168+ stopCircularRecursion : true
169+ }
170+ }
171+ } )
172+
173+ // Rerendering should collapse again everything
174+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 2 )
175+
176+ await clickByText ( results . container , 'b:' )
177+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 6 )
178+
179+ await clickByText ( results . container , '[map entry 1]:' )
180+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 9 )
181+
182+ await clickByText ( results . container , '[value]:' )
183+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 11 )
184+
185+ // Now clicking f: should expand more nodes since maxDepth was increased
186+ await clickByText ( results . container , 'f:' )
187+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 15 )
188+
189+ // Clicking the added 'g' value open
190+ await clickByText ( results . container , '[map entry 2]:' )
191+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 18 )
192+
193+ // Should not expand since it's a circular value
194+ await clickByText ( results . container , '[value]:' , 1 )
195+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 18 )
196+ } )
197+
198+ it ( 'should respect maxDepth and collapse nodes correctly' , async ( ) => {
199+ const results = render ( TreeView , {
200+ props : {
201+ data : undefined
202+ }
203+ } )
204+ window . HTMLElement . prototype . scrollIntoView = jest . fn ( )
205+
206+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 0 )
207+
208+ const nonTreeValues = [
209+ null ,
210+ Symbol ( 'foo' ) ,
211+ NaN ,
212+ 123 ,
213+ BigInt ( '0x1fffffffffffff' ) ,
214+ 'asdf' ,
215+ / \w + / ,
216+ ( ) => undefined ,
217+ function ( ) {
218+ return 0
219+ } ,
220+ document . createElement ( 'li' )
221+ ]
222+ nonTreeValues . forEach ( val => {
223+ results . rerender ( {
224+ props : {
225+ data : val
226+ }
227+ } )
228+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 0 )
229+ } )
230+
231+ results . rerender ( {
232+ props : {
233+ data : nonTreeValues
234+ }
235+ } )
236+ expect ( results . container . querySelectorAll ( 'li' ) . length ) . toEqual ( 10 )
237+ } )
110238} )
0 commit comments