fix: toBeVisible ignoring hidden attribute (#85)

Author: diegohaz

.all-contributorsrc

@@ -228,6 +228,16 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "diegohaz",
+      "name": "Haz",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/3068563?v=4",
+      "profile": "https://twitter.com/diegohaz",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -16,7 +16,7 @@
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 
@@ -249,6 +249,7 @@ An element is visible if **all** the following conditions are met:
   `collapse`
 - it does not have its css property `opacity` set to `0`
 - its parent element is also visible (and so on up to the top of the DOM tree)
+- it does not have the [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) attribute
 
 #### Examples
 
@@ -262,6 +263,7 @@ An element is visible if **all** the following conditions are met:
   <span data-testid="hidden-parent">Hidden Parent Example</span>
 </div>
 <div data-testid="visible">Visible Example</div>
+<div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>
 ```
 
 ##### Using document.querySelector
@@ -276,6 +278,9 @@ expect(
   document.querySelector('[data-testid="hidden-parent"]'),
 ).not.toBeVisible()
 expect(document.querySelector('[data-testid="visible"]')).toBeVisible()
+expect(
+  document.querySelector('[data-testid="hidden-attribute"]'),
+).not.toBeVisible()
 ```
 
 ##### Using dom-testing-library
@@ -286,6 +291,7 @@ expect(getByText(container, 'Visibility Hidden Example')).not.toBeVisible()
 expect(getByText(container, 'Display None Example')).not.toBeVisible()
 expect(getByText(container, 'Hidden Parent Example')).not.toBeVisible()
 expect(getByText(container, 'Visible Example')).toBeVisible()
+expect(getByText(container, 'Hidden Attribute Example')).not.toBeVisible()
 ```
 
 <hr />
@@ -754,7 +760,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;" alt="Anto Aravinth"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=antoaravinth "Code") [⚠️](https://github.com/gnapse/jest-dom/commits?author=antoaravinth "Tests") [📖](https://github.com/gnapse/jest-dom/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;" alt="Jonah Moses"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/gnapse/jest-dom/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;" alt="Łukasz Gandecki"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=lgandecki "Code") [⚠️](https://github.com/gnapse/jest-dom/commits?author=lgandecki "Tests") [📖](https://github.com/gnapse/jest-dom/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;" alt="Ivan Babak"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;" alt="Jesse Day"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;" alt="Ernesto García"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=gnapse "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=gnapse "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=gnapse "Tests") | [<img src="https://avatars0.githubusercontent.com/u/79312?v=4" width="100px;" alt="Mark Volkmann"/><br /><sub><b>Mark Volkmann</b></sub>](http://ociweb.com/mark/)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Amvolkmann "Bug reports") [💻](https://github.com/gnapse/jest-dom/commits?author=mvolkmann "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/1659099?v=4" width="100px;" alt="smacpherson64"/><br /><sub><b>smacpherson64</b></sub>](https://github.com/smacpherson64)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Tests") | [<img src="https://avatars2.githubusercontent.com/u/132233?v=4" width="100px;" alt="John Gozde"/><br /><sub><b>John Gozde</b></sub>](https://github.com/jgoz)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Ajgoz "Bug reports") [💻](https://github.com/gnapse/jest-dom/commits?author=jgoz "Code") | [<img src="https://avatars2.githubusercontent.com/u/7830590?v=4" width="100px;" alt="Iwona"/><br /><sub><b>Iwona</b></sub>](https://github.com/callada)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=callada "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=callada "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=callada "Tests") | [<img src="https://avatars0.githubusercontent.com/u/840609?v=4" width="100px;" alt="Lewis"/><br /><sub><b>Lewis</b></sub>](https://github.com/6ewis)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=6ewis "Code") | [<img src="https://avatars3.githubusercontent.com/u/2339362?v=4" width="100px;" alt="Leandro Lourenci"/><br /><sub><b>Leandro Lourenci</b></sub>](https://blog.lourenci.com/)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Alourenci "Bug reports") [📖](https://github.com/gnapse/jest-dom/commits?author=lourenci "Documentation") [💻](https://github.com/gnapse/jest-dom/commits?author=lourenci "Code") [⚠️](https://github.com/gnapse/jest-dom/commits?author=lourenci "Tests") | [<img src="https://avatars1.githubusercontent.com/u/626420?v=4" width="100px;" alt="Shukhrat Mukimov"/><br /><sub><b>Shukhrat Mukimov</b></sub>](https://github.com/mufasa71)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Amufasa71 "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/1481264?v=4" width="100px;" alt="Roman Usherenko"/><br /><sub><b>Roman Usherenko</b></sub>](https://github.com/dreyks)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=dreyks "Code") [⚠️](https://github.com/gnapse/jest-dom/commits?author=dreyks "Tests") |
-| [<img src="https://avatars1.githubusercontent.com/u/648?v=4" width="100px;" alt="Joe Hsu"/><br /><sub><b>Joe Hsu</b></sub>](http://josephhsu.com)<br />[📖](https://github.com/gnapse/jest-dom/commits?author=jhsu "Documentation") |
+| [<img src="https://avatars1.githubusercontent.com/u/648?v=4" width="100px;" alt="Joe Hsu"/><br /><sub><b>Joe Hsu</b></sub>](http://josephhsu.com)<br />[📖](https://github.com/gnapse/jest-dom/commits?author=jhsu "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/3068563?v=4" width="100px;" alt="Haz"/><br /><sub><b>Haz</b></sub>](https://twitter.com/diegohaz)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Adiegohaz "Bug reports") [💻](https://github.com/gnapse/jest-dom/commits?author=diegohaz "Code") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/__tests__/to-be-visible.js

@@ -10,6 +10,7 @@ test('.toBeVisible', () => {
         <h4 style="opacity: 0">Secondary title</h4>
         <h5 style="opacity: 0.1">Secondary title</h5>
       </header>
+      <button hidden>Hidden button</button>
       <section style="display: block; visibility: hidden">
         <p>Hello <strong>World</strong></p>
       </section>
@@ -22,6 +23,7 @@ test('.toBeVisible', () => {
   expect(container.querySelector('h3')).not.toBeVisible()
   expect(container.querySelector('h4')).not.toBeVisible()
   expect(container.querySelector('h5')).toBeVisible()
+  expect(container.querySelector('button')).not.toBeVisible()
   expect(container.querySelector('strong')).not.toBeVisible()
 
   expect(() =>

src/to-be-visible.js

@@ -17,6 +17,7 @@ function isStyleVisible(element) {
 function isElementVisible(element) {
   return (
     isStyleVisible(element) &&
+    !element.hasAttribute('hidden') &&
     (!element.parentElement || isElementVisible(element.parentElement))
   )
 }