@@ -134,6 +134,74 @@ describe('.toBeVisible', () => {
134134 } )
135135 } )
136136
137+ describe ( 'when the <details /> inner text does not have an enclosing element' , ( ) => {
138+ describe ( 'when the details is not opened' , ( ) => {
139+ beforeEach ( ( ) => {
140+ subject = render ( `
141+ <details>
142+ <summary>Title of hidden innerText</summary>
143+ hidden innerText
144+ </details>
145+ ` )
146+ } )
147+
148+ it ( 'returns false to the details content' , ( ) => {
149+ expect ( subject . container . querySelector ( 'details' ) ) . not . toBeVisible ( )
150+ } )
151+
152+ it ( 'returns true to the details summary' , ( ) => {
153+ expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
154+ } )
155+
156+ describe ( 'when the user clicks on the summary' , ( ) => {
157+ beforeEach ( ( ) => subject . container . querySelector ( 'summary' ) . click ( ) )
158+
159+ it ( 'returns true to the details content' , ( ) => {
160+ expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
161+ } )
162+
163+ it ( 'returns true to the details summary' , ( ) => {
164+ expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
165+ } )
166+ } )
167+ } )
168+
169+ describe ( 'when the details is opened' , ( ) => {
170+ beforeEach ( ( ) => {
171+ subject = render ( `
172+ <details open>
173+ <summary>Title of visible innerText</summary>
174+ visible <small>innerText</small>
175+ </details>
176+ ` )
177+ } )
178+
179+ it ( 'returns true to the details content' , ( ) => {
180+ expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
181+ } )
182+
183+ it ( 'returns true to inner small content' , ( ) => {
184+ expect ( subject . container . querySelector ( 'small' ) ) . toBeVisible ( )
185+ } )
186+
187+ describe ( 'when the user clicks on the summary' , ( ) => {
188+ beforeEach ( ( ) => subject . container . querySelector ( 'summary' ) . click ( ) )
189+
190+ it ( 'returns false to the details content' , ( ) => {
191+ expect ( subject . container . querySelector ( 'details' ) ) . not . toBeVisible ( )
192+ } )
193+
194+ it ( 'returns false to the inner small content' , ( ) => {
195+ expect ( subject . container . querySelector ( 'small' ) ) . not . toBeVisible ( )
196+ } )
197+
198+ it ( 'returns true to the details summary' , ( ) => {
199+ expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
200+ } )
201+ } )
202+ } )
203+ } )
204+
137205 describe ( 'with a nested <details /> element' , ( ) => {
138206 describe ( 'when the nested <details /> is opened' , ( ) => {
139207 beforeEach ( ( ) => {
@@ -248,181 +316,109 @@ describe('.toBeVisible', () => {
248316 } )
249317 } )
250318
251- describe ( 'when the details inner text does not have an enclosing element ' , ( ) => {
252- describe ( 'when the details is not opened' , ( ) => {
319+ describe ( 'with nested details (unenclosed outer, enclosed inner) ' , ( ) => {
320+ describe ( 'when both outer and inner are opened' , ( ) => {
253321 beforeEach ( ( ) => {
254322 subject = render ( `
255- <details>
256- <summary>Title of hidden innerText</summary>
257- hidden innerText
323+ <details open>
324+ <summary>Title of outer unenclosed</summary>
325+ Unenclosed innerText
326+ <details open>
327+ <summary>Title of inner enclosed</summary>
328+ <div>Enclosed innerText</div>
329+ </details>
258330 </details>
259331 ` )
260332 } )
261333
262- it ( 'returns false to the details content ' , ( ) => {
263- expect ( subject . container . querySelector ( 'details' ) ) . not . toBeVisible ( )
334+ it ( 'returns true to outer unenclosed innerText ' , ( ) => {
335+ expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
264336 } )
265337
266- it ( 'returns true to the details summary' , ( ) => {
338+ it ( 'returns true to outer summary' , ( ) => {
267339 expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
268340 } )
269341
270- describe ( 'when the user clicks on the summary' , ( ) => {
271- beforeEach ( ( ) => subject . container . querySelector ( 'summary' ) . click ( ) )
272-
273- it ( 'returns true to the details content' , ( ) => {
274- expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
275- } )
342+ it ( 'returns true to inner enclosed innerText' , ( ) => {
343+ expect (
344+ subject . container . querySelector ( 'details > details > div' ) ,
345+ ) . toBeVisible ( )
346+ } )
276347
277- it ( 'returns true to the details summary' , ( ) => {
278- expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
279- } )
348+ it ( 'returns true to inner summary' , ( ) => {
349+ expect (
350+ subject . container . querySelector ( 'details > details > summary' ) ,
351+ ) . toBeVisible ( )
280352 } )
281353 } )
282354
283- describe ( 'when the details is opened' , ( ) => {
355+ describe ( 'when outer is opened and inner is not opened' , ( ) => {
284356 beforeEach ( ( ) => {
285357 subject = render ( `
286358 <details open>
287- <summary>Title of visible innerText</summary>
288- visible <small>innerText</small>
359+ <summary>Title of outer unenclosed</summary>
360+ Unenclosed innerText
361+ <details>
362+ <summary>Title of inner enclosed</summary>
363+ <div>Enclosed innerText</div>
364+ </details>
289365 </details>
290366 ` )
291367 } )
292368
293- it ( 'returns true to the details content ' , ( ) => {
369+ it ( 'returns true to outer unenclosed innerText ' , ( ) => {
294370 expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
295371 } )
296372
297- it ( 'returns true to inner small content ' , ( ) => {
298- expect ( subject . container . querySelector ( 'small ' ) ) . toBeVisible ( )
373+ it ( 'returns true to outer summary ' , ( ) => {
374+ expect ( subject . container . querySelector ( 'summary ' ) ) . toBeVisible ( )
299375 } )
300376
301- describe ( 'when the user clicks on the summary' , ( ) => {
302- beforeEach ( ( ) => subject . container . querySelector ( 'summary' ) . click ( ) )
303-
304- it ( 'returns false to the details content' , ( ) => {
305- expect (
306- subject . container . querySelector ( 'details' ) ,
307- ) . not . toBeVisible ( )
308- } )
309-
310- it ( 'returns false to the inner small content' , ( ) => {
311- expect ( subject . container . querySelector ( 'small' ) ) . not . toBeVisible ( )
312- } )
377+ it ( 'returns false to inner enclosed innerText' , ( ) => {
378+ expect (
379+ subject . container . querySelector ( 'details > details > div' ) ,
380+ ) . not . toBeVisible ( )
381+ } )
313382
314- it ( 'returns true to the details summary' , ( ) => {
315- expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
316- } )
383+ it ( 'returns true to inner summary' , ( ) => {
384+ expect (
385+ subject . container . querySelector ( 'details > details > summary' ) ,
386+ ) . toBeVisible ( )
317387 } )
318388 } )
319389
320- describe ( 'with nested details (unenclosed outer, enclosed inner)' , ( ) => {
321- describe ( 'when both outer and inner are opened' , ( ) => {
322- beforeEach ( ( ) => {
323- subject = render ( `
390+ describe ( 'when outer is not opened and inner is opened' , ( ) => {
391+ beforeEach ( ( ) => {
392+ subject = render ( `
393+ <details>
394+ <summary>Title of outer unenclosed</summary>
395+ Unenclosed innerText
324396 <details open>
325- <summary>Title of outer unenclosed</summary>
326- Unenclosed innerText
327- <details open>
328- <summary>Title of inner enclosed</summary>
329- <div>Enclosed innerText</div>
330- </details>
397+ <summary>Title of inner enclosed</summary>
398+ <div>Enclosed innerText</div>
331399 </details>
332- ` )
333- } )
334-
335- it ( 'returns true to outer unenclosed innerText' , ( ) => {
336- expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
337- } )
338-
339- it ( 'returns true to outer summary' , ( ) => {
340- expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
341- } )
342-
343- it ( 'returns true to inner enclosed innerText' , ( ) => {
344- expect (
345- subject . container . querySelector ( 'details > details > div' ) ,
346- ) . toBeVisible ( )
347- } )
348-
349- it ( 'returns true to inner summary' , ( ) => {
350- expect (
351- subject . container . querySelector ( 'details > details > summary' ) ,
352- ) . toBeVisible ( )
353- } )
400+ </details>
401+ ` )
354402 } )
355403
356- describe ( 'when outer is opened and inner is not opened' , ( ) => {
357- beforeEach ( ( ) => {
358- subject = render ( `
359- <details open>
360- <summary>Title of outer unenclosed</summary>
361- Unenclosed innerText
362- <details>
363- <summary>Title of inner enclosed</summary>
364- <div>Enclosed innerText</div>
365- </details>
366- </details>
367- ` )
368- } )
369-
370- it ( 'returns true to outer unenclosed innerText' , ( ) => {
371- expect ( subject . container . querySelector ( 'details' ) ) . toBeVisible ( )
372- } )
373-
374- it ( 'returns true to outer summary' , ( ) => {
375- expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
376- } )
377-
378- it ( 'returns false to inner enclosed innerText' , ( ) => {
379- expect (
380- subject . container . querySelector ( 'details > details > div' ) ,
381- ) . not . toBeVisible ( )
382- } )
383-
384- it ( 'returns true to inner summary' , ( ) => {
385- expect (
386- subject . container . querySelector ( 'details > details > summary' ) ,
387- ) . toBeVisible ( )
388- } )
404+ it ( 'returns true to outer unenclosed innerText' , ( ) => {
405+ expect ( subject . container . querySelector ( 'details' ) ) . not . toBeVisible ( )
389406 } )
390407
391- describe ( 'when outer is not opened and inner is opened' , ( ) => {
392- beforeEach ( ( ) => {
393- subject = render ( `
394- <details>
395- <summary>Title of outer unenclosed</summary>
396- Unenclosed innerText
397- <details open>
398- <summary>Title of inner enclosed</summary>
399- <div>Enclosed innerText</div>
400- </details>
401- </details>
402- ` )
403- } )
404-
405- it ( 'returns true to outer unenclosed innerText' , ( ) => {
406- expect (
407- subject . container . querySelector ( 'details' ) ,
408- ) . not . toBeVisible ( )
409- } )
410-
411- it ( 'returns true to outer summary' , ( ) => {
412- expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
413- } )
414-
415- it ( 'returns false to inner enclosed innerText' , ( ) => {
416- expect (
417- subject . container . querySelector ( 'details > details > div' ) ,
418- ) . not . toBeVisible ( )
419- } )
420-
421- it ( 'returns true to inner summary' , ( ) => {
422- expect (
423- subject . container . querySelector ( 'details > details > summary' ) ,
424- ) . not . toBeVisible ( )
425- } )
408+ it ( 'returns true to outer summary' , ( ) => {
409+ expect ( subject . container . querySelector ( 'summary' ) ) . toBeVisible ( )
410+ } )
411+
412+ it ( 'returns false to inner enclosed innerText' , ( ) => {
413+ expect (
414+ subject . container . querySelector ( 'details > details > div' ) ,
415+ ) . not . toBeVisible ( )
416+ } )
417+
418+ it ( 'returns true to inner summary' , ( ) => {
419+ expect (
420+ subject . container . querySelector ( 'details > details > summary' ) ,
421+ ) . not . toBeVisible ( )
426422 } )
427423 } )
428424 } )
0 commit comments