Restructure tests to have a maximum depth of 5 describes

testing-library · Mar 30, 2022 · a77798e · a77798e
1 parent 67128de
commit a77798e
Showing 1 changed file with 134 additions and 138 deletions.
diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.js
@@ -134,6 +134,74 @@ describe('.toBeVisible', () => {
       })
     })
 
+    describe('when the <details /> inner text does not have an enclosing element', () => {
+      describe('when the details is not opened', () => {
+        beforeEach(() => {
+          subject = render(`
+              <details>
+                <summary>Title of hidden innerText</summary>
+                hidden innerText
+              </details>
+            `)
+        })
+
+        it('returns false to the details content', () => {
+          expect(subject.container.querySelector('details')).not.toBeVisible()
+        })
+
+        it('returns true to the details summary', () => {
+          expect(subject.container.querySelector('summary')).toBeVisible()
+        })
+
+        describe('when the user clicks on the summary', () => {
+          beforeEach(() => subject.container.querySelector('summary').click())
+
+          it('returns true to the details content', () => {
+            expect(subject.container.querySelector('details')).toBeVisible()
+          })
+
+          it('returns true to the details summary', () => {
+            expect(subject.container.querySelector('summary')).toBeVisible()
+          })
+        })
+      })
+
+      describe('when the details is opened', () => {
+        beforeEach(() => {
+          subject = render(`
+              <details open>
+                <summary>Title of visible innerText</summary>
+                visible <small>innerText</small>
+              </details>
+            `)
+        })
+
+        it('returns true to the details content', () => {
+          expect(subject.container.querySelector('details')).toBeVisible()
+        })
+
+        it('returns true to inner small content', () => {
+          expect(subject.container.querySelector('small')).toBeVisible()
+        })
+
+        describe('when the user clicks on the summary', () => {
+          beforeEach(() => subject.container.querySelector('summary').click())
+
+          it('returns false to the details content', () => {
+            expect(subject.container.querySelector('details')).not.toBeVisible()
+          })
+
+          it('returns false to the inner small content', () => {
+            expect(subject.container.querySelector('small')).not.toBeVisible()
+          })
+
+          it('returns true to the details summary', () => {
+            expect(subject.container.querySelector('summary')).toBeVisible()
+          })
+        })
+      })
+    })
+
     describe('with a nested <details /> element', () => {
       describe('when the nested <details /> is opened', () => {
         beforeEach(() => {
@@ -248,181 +316,109 @@ describe('.toBeVisible', () => {
         })
       })
 
-      describe('when the details inner text does not have an enclosing element', () => {
-        describe('when the details is not opened', () => {
+      describe('with nested details (unenclosed outer, enclosed inner)', () => {
+        describe('when both outer and inner are opened', () => {
           beforeEach(() => {
             subject = render(`
-              <details>
-                <summary>Title of hidden innerText</summary>
-                hidden innerText
+              <details open>
+                <summary>Title of outer unenclosed</summary>
+                Unenclosed innerText
+                <details open>
+                  <summary>Title of inner enclosed</summary>
+                  <div>Enclosed innerText</div>
+                </details>
               </details>
             `)
           })
 
-          it('returns false to the details content', () => {
-            expect(subject.container.querySelector('details')).not.toBeVisible()
+          it('returns true to outer unenclosed innerText', () => {
+            expect(subject.container.querySelector('details')).toBeVisible()
           })
 
-          it('returns true to the details summary', () => {
+          it('returns true to outer summary', () => {
             expect(subject.container.querySelector('summary')).toBeVisible()
           })
 
-          describe('when the user clicks on the summary', () => {
-            beforeEach(() => subject.container.querySelector('summary').click())
-
-            it('returns true to the details content', () => {
-              expect(subject.container.querySelector('details')).toBeVisible()
-            })
+          it('returns true to inner enclosed innerText', () => {
+            expect(
+              subject.container.querySelector('details > details > div'),
+            ).toBeVisible()
+          })
 
-            it('returns true to the details summary', () => {
-              expect(subject.container.querySelector('summary')).toBeVisible()
-            })
+          it('returns true to inner summary', () => {
+            expect(
+              subject.container.querySelector('details > details > summary'),
+            ).toBeVisible()
           })
         })
 
-        describe('when the details is opened', () => {
+        describe('when outer is opened and inner is not opened', () => {
           beforeEach(() => {
             subject = render(`
               <details open>
-                <summary>Title of visible innerText</summary>
-                visible <small>innerText</small>
+                <summary>Title of outer unenclosed</summary>
+                Unenclosed innerText
+                <details>
+                  <summary>Title of inner enclosed</summary>
+                  <div>Enclosed innerText</div>
+                </details>
               </details>
             `)
           })
 
-          it('returns true to the details content', () => {
+          it('returns true to outer unenclosed innerText', () => {
             expect(subject.container.querySelector('details')).toBeVisible()
           })
 
-          it('returns true to inner small content', () => {
-            expect(subject.container.querySelector('small')).toBeVisible()
+          it('returns true to outer summary', () => {
+            expect(subject.container.querySelector('summary')).toBeVisible()
           })
 
-          describe('when the user clicks on the summary', () => {
-            beforeEach(() => subject.container.querySelector('summary').click())
-
-            it('returns false to the details content', () => {
-              expect(
-                subject.container.querySelector('details'),
-              ).not.toBeVisible()
-            })
-
-            it('returns false to the inner small content', () => {
-              expect(subject.container.querySelector('small')).not.toBeVisible()
-            })
+          it('returns false to inner enclosed innerText', () => {
+            expect(
+              subject.container.querySelector('details > details > div'),
+            ).not.toBeVisible()
+          })
 
-            it('returns true to the details summary', () => {
-              expect(subject.container.querySelector('summary')).toBeVisible()
-            })
+          it('returns true to inner summary', () => {
+            expect(
+              subject.container.querySelector('details > details > summary'),
+            ).toBeVisible()
           })
         })
 
-        describe('with nested details (unenclosed outer, enclosed inner)', () => {
-          describe('when both outer and inner are opened', () => {
-            beforeEach(() => {
-              subject = render(`
+        describe('when outer is not opened and inner is opened', () => {
+          beforeEach(() => {
+            subject = render(`
+              <details>
+                <summary>Title of outer unenclosed</summary>
+                Unenclosed innerText
                 <details open>
-                  <summary>Title of outer unenclosed</summary>
-                  Unenclosed innerText
-                  <details open>
-                    <summary>Title of inner enclosed</summary>
-                    <div>Enclosed innerText</div>
-                  </details>
+                  <summary>Title of inner enclosed</summary>
+                  <div>Enclosed innerText</div>
                 </details>
-              `)
-            })
-
-            it('returns true to outer unenclosed innerText', () => {
-              expect(subject.container.querySelector('details')).toBeVisible()
-            })
-
-            it('returns true to outer summary', () => {
-              expect(subject.container.querySelector('summary')).toBeVisible()
-            })
-
-            it('returns true to inner enclosed innerText', () => {
-              expect(
-                subject.container.querySelector('details > details > div'),
-              ).toBeVisible()
-            })
-
-            it('returns true to inner summary', () => {
-              expect(
-                subject.container.querySelector('details > details > summary'),
-              ).toBeVisible()
-            })
+              </details>
+            `)
           })
 
-          describe('when outer is opened and inner is not opened', () => {
-            beforeEach(() => {
-              subject = render(`
-                <details open>
-                  <summary>Title of outer unenclosed</summary>
-                  Unenclosed innerText
-                  <details>
-                    <summary>Title of inner enclosed</summary>
-                    <div>Enclosed innerText</div>
-                  </details>
-                </details>
-              `)
-            })
-
-            it('returns true to outer unenclosed innerText', () => {
-              expect(subject.container.querySelector('details')).toBeVisible()
-            })
-
-            it('returns true to outer summary', () => {
-              expect(subject.container.querySelector('summary')).toBeVisible()
-            })
-
-            it('returns false to inner enclosed innerText', () => {
-              expect(
-                subject.container.querySelector('details > details > div'),
-              ).not.toBeVisible()
-            })
-
-            it('returns true to inner summary', () => {
-              expect(
-                subject.container.querySelector('details > details > summary'),
-              ).toBeVisible()
-            })
+          it('returns true to outer unenclosed innerText', () => {
+            expect(subject.container.querySelector('details')).not.toBeVisible()
           })
 
-          describe('when outer is not opened and inner is opened', () => {
-            beforeEach(() => {
-              subject = render(`
-                <details>
-                  <summary>Title of outer unenclosed</summary>
-                  Unenclosed innerText
-                  <details open>
-                    <summary>Title of inner enclosed</summary>
-                    <div>Enclosed innerText</div>
-                  </details>
-                </details>
-              `)
-            })
-
-            it('returns true to outer unenclosed innerText', () => {
-              expect(
-                subject.container.querySelector('details'),
-              ).not.toBeVisible()
-            })
-
-            it('returns true to outer summary', () => {
-              expect(subject.container.querySelector('summary')).toBeVisible()
-            })
-
-            it('returns false to inner enclosed innerText', () => {
-              expect(
-                subject.container.querySelector('details > details > div'),
-              ).not.toBeVisible()
-            })
-
-            it('returns true to inner summary', () => {
-              expect(
-                subject.container.querySelector('details > details > summary'),
-              ).not.toBeVisible()
-            })
+          it('returns true to outer summary', () => {
+            expect(subject.container.querySelector('summary')).toBeVisible()
+          })
+
+          it('returns false to inner enclosed innerText', () => {
+            expect(
+              subject.container.querySelector('details > details > div'),
+            ).not.toBeVisible()
+          })
+
+          it('returns true to inner summary', () => {
+            expect(
+              subject.container.querySelector('details > details > summary'),
+            ).not.toBeVisible()
           })
         })
       })