From d38bba70a127b06d0a3622597c728a07c2c67f7a Mon Sep 17 00:00:00 2001
From: Kevin Chow <kschow48@gmail.com>
Date: Mon, 23 Aug 2021 11:01:24 -0500
Subject: [PATCH 1/6] fix: Support unenclosed innerText for details elements in
 toBeVisible

---
 src/__tests__/to-be-visible.js | 179 +++++++++++++++++++++++++++++++++
 src/to-be-visible.js           |  19 ++--
 2 files changed, 192 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.js
index f2b4277a..d1a4c6e5 100644
--- a/src/__tests__/to-be-visible.js
+++ b/src/__tests__/to-be-visible.js
@@ -247,6 +247,185 @@ describe('.toBeVisible', () => {
           ).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 nested details (unenclosed outer, enclosed inner)', () => {
+          describe('when both outer and inner are opened', () => {
+            beforeEach(() => {
+              subject = render(`
+                <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 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()
+            })
+          })
+
+          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()
+            })
+          })
+
+          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()
+            })
+          })
+        })
+      })
     })
   })
 })
diff --git a/src/to-be-visible.js b/src/to-be-visible.js
index 518b7d56..9ea39938 100644
--- a/src/to-be-visible.js
+++ b/src/to-be-visible.js
@@ -14,12 +14,19 @@ function isStyleVisible(element) {
 }
 
 function isAttributeVisible(element, previousElement) {
-  return (
-    !element.hasAttribute('hidden') &&
-    (element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
-      ? element.hasAttribute('open')
-      : true)
-  )
+  let detailsVisibility
+
+  if (previousElement) {
+    detailsVisibility =
+      element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
+        ? element.hasAttribute('open')
+        : true
+  } else {
+    detailsVisibility =
+      element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true
+  }
+
+  return !element.hasAttribute('hidden') && detailsVisibility
 }
 
 function isElementVisible(element, previousElement) {

From 4e97eaa5c70438353dc165edf79ef2101409ccf3 Mon Sep 17 00:00:00 2001
From: Kevin Chow <kschow48@gmail.com>
Date: Mon, 23 Aug 2021 11:04:31 -0500
Subject: [PATCH 2/6] docs: Update documentation for toBeVisible with details
 element examples

---
 README.md | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index e5a41091..9cd1db82 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,6 @@ clear to read and to maintain.
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Installation](#installation)
 - [Usage](#usage)
   - [With TypeScript](#with-typescript)
@@ -423,6 +422,14 @@ An element is visible if **all** the following conditions are met:
 </div>
 <div data-testid="visible">Visible Example</div>
 <div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>
+<details>
+  <summary>Title of hidden text</summary>
+  Hidden Details Example
+</details>
+<details open>
+  <summary>Title of visible text</summary>
+  <div>Visible Details Example</div>
+</details>
 ```
 
 ```javascript
@@ -432,6 +439,8 @@ expect(getByText('Display None Example')).not.toBeVisible()
 expect(getByText('Hidden Parent Example')).not.toBeVisible()
 expect(getByText('Visible Example')).toBeVisible()
 expect(getByText('Hidden Attribute Example')).not.toBeVisible()
+expect(getByText('Hidden Details Example')).not.toBeVisible()
+expect(getByText('Visible Details Example')).toBeVisible()
 ```
 
 <hr />
@@ -1203,12 +1212,8 @@ To perform a partial match, you can pass a `RegExp` or use
 #### Examples
 
 ```html
-<button aria-label="Close" aria-describedby="description-close">
-  X
-</button>
-<div id="description-close">
-  Closing will discard any changes
-</div>
+<button aria-label="Close" aria-describedby="description-close">X</button>
+<div id="description-close">Closing will discard any changes</div>
 
 <button>Delete</button>
 ```

From 295802323001c6576823bb34b240e7fa74edc69b Mon Sep 17 00:00:00 2001
From: Kevin Chow <kschow48@gmail.com>
Date: Wed, 22 Sep 2021 15:24:24 -0500
Subject: [PATCH 3/6] Restructure tests to have a maximum depth of 5 describes

---
 src/__tests__/to-be-visible.js | 272 ++++++++++++++++-----------------
 1 file changed, 134 insertions(+), 138 deletions(-)

diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.js
index d1a4c6e5..177a938c 100644
--- 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()
           })
         })
       })

From 2f8db0d9641a538fd563c27cee2effd3734059fb Mon Sep 17 00:00:00 2001
From: Kevin Chow <kschow48@gmail.com>
Date: Mon, 23 Aug 2021 11:01:24 -0500
Subject: [PATCH 4/6] fix: Support unenclosed innerText for details elements in
 toBeVisible

---
 src/__tests__/to-be-visible.js | 179 +++++++++++++++++++++++++++++++++
 src/to-be-visible.js           |  19 ++--
 2 files changed, 192 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.js
index f2b4277a..d1a4c6e5 100644
--- a/src/__tests__/to-be-visible.js
+++ b/src/__tests__/to-be-visible.js
@@ -247,6 +247,185 @@ describe('.toBeVisible', () => {
           ).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 nested details (unenclosed outer, enclosed inner)', () => {
+          describe('when both outer and inner are opened', () => {
+            beforeEach(() => {
+              subject = render(`
+                <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 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()
+            })
+          })
+
+          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()
+            })
+          })
+
+          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()
+            })
+          })
+        })
+      })
     })
   })
 })
diff --git a/src/to-be-visible.js b/src/to-be-visible.js
index 518b7d56..9ea39938 100644
--- a/src/to-be-visible.js
+++ b/src/to-be-visible.js
@@ -14,12 +14,19 @@ function isStyleVisible(element) {
 }
 
 function isAttributeVisible(element, previousElement) {
-  return (
-    !element.hasAttribute('hidden') &&
-    (element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
-      ? element.hasAttribute('open')
-      : true)
-  )
+  let detailsVisibility
+
+  if (previousElement) {
+    detailsVisibility =
+      element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
+        ? element.hasAttribute('open')
+        : true
+  } else {
+    detailsVisibility =
+      element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true
+  }
+
+  return !element.hasAttribute('hidden') && detailsVisibility
 }
 
 function isElementVisible(element, previousElement) {

From 67128de53c6c9b3fd5c2ffebc026fd97bd415ccf Mon Sep 17 00:00:00 2001
From: Kevin Chow <kschow48@gmail.com>
Date: Mon, 23 Aug 2021 11:04:31 -0500
Subject: [PATCH 5/6] docs: Update documentation for toBeVisible with details
 element examples

---
 README.md | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 4a4c2caf..1778f8fe 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,6 @@ clear to read and to maintain.
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Installation](#installation)
 - [Usage](#usage)
   - [With TypeScript](#with-typescript)
@@ -424,6 +423,14 @@ An element is visible if **all** the following conditions are met:
 </div>
 <div data-testid="visible">Visible Example</div>
 <div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>
+<details>
+  <summary>Title of hidden text</summary>
+  Hidden Details Example
+</details>
+<details open>
+  <summary>Title of visible text</summary>
+  <div>Visible Details Example</div>
+</details>
 ```
 
 ```javascript
@@ -433,6 +440,8 @@ expect(getByText('Display None Example')).not.toBeVisible()
 expect(getByText('Hidden Parent Example')).not.toBeVisible()
 expect(getByText('Visible Example')).toBeVisible()
 expect(getByText('Hidden Attribute Example')).not.toBeVisible()
+expect(getByText('Hidden Details Example')).not.toBeVisible()
+expect(getByText('Visible Details Example')).toBeVisible()
 ```
 
 <hr />
@@ -1204,12 +1213,8 @@ To perform a partial match, you can pass a `RegExp` or use
 #### Examples
 
 ```html
-<button aria-label="Close" aria-describedby="description-close">
-  X
-</button>
-<div id="description-close">
-  Closing will discard any changes
-</div>
+<button aria-label="Close" aria-describedby="description-close">X</button>
+<div id="description-close">Closing will discard any changes</div>
 
 <button>Delete</button>
 ```

From a77798e0d4ec0616c711bdf9dc8d9f5f5e881b22 Mon Sep 17 00:00:00 2001
From: Kevin Chow <kschow48@gmail.com>
Date: Wed, 22 Sep 2021 15:24:24 -0500
Subject: [PATCH 6/6] Restructure tests to have a maximum depth of 5 describes

---
 src/__tests__/to-be-visible.js | 272 ++++++++++++++++-----------------
 1 file changed, 134 insertions(+), 138 deletions(-)

diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.js
index d1a4c6e5..177a938c 100644
--- 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()
           })
         })
       })