fix(matchers): use computed styles to determine hidden-ness (ngneat#622)

* fix(matchers): also use computed styles to determine hidden-ness

this catches cases like <style>#a{visibility:hidden}<style><div id="a"></div> or
where css variables are used.

* test: ensure elements with visible computed styles remain visible

Author: aniederer-chatham

projects/spectator/jest/test/matchers/matchers.spec.ts

@@ -19,6 +19,7 @@ interface Dummy {
     <div id="classes" class="class-a class-b">Classes</div>
     <div id="styles" style="background-color: indianred; color: chocolate; --primary: var(--black)"></div>
     <custom-element style="visibility: hidden"></custom-element>
+    <div id="computed-style"></div>
   `,
 })
 export class MatchersComponent {}
@@ -121,6 +122,20 @@ describe('Matchers', () => {
         document.querySelector('custom-element')?.shadowRoot?.querySelector("#shadow-dom")
       ).toBeHidden();
     });
+
+    it('should detect elements whose computed styles are display: none', () => {
+      window.getComputedStyle = () => ({ getPropertyValue: (style) => style == 'display' && 'none' });
+      expect(document.querySelector('#computed-style')).toBeHidden();
+      window.getComputedStyle = () => ({ getPropertyValue: (style) => style == 'display' && 'block' });
+      expect(document.querySelector('#computed-style')).toBeVisible();
+    });
+
+    it('should detect elements whose computed styles are visibility: hidden', () => {
+      window.getComputedStyle = () => ({ getPropertyValue: (style) => style == 'visibility' && 'hidden' });
+      expect(document.querySelector('#computed-style')).toBeHidden();
+      window.getComputedStyle = () => ({ getPropertyValue: (style) => style == 'visibility' && 'visible' });
+      expect(document.querySelector('#computed-style')).toBeVisible();
+    });
   });
 
   describe('toBePartial', () => {

projects/spectator/src/lib/matchers.ts

@@ -410,11 +410,12 @@ export const toBePartial = comparator((actual, expected) => {
 
 /**
  * Hidden elements are elements that have:
- * 1. Display property set to "none"
- * 2. Width and height set to 0 (check not applied in jest)
- * 3. A hidden parent element (this also hides child elements)
- * 4. Type equal to "hidden" (only for form elements)
- * 5. A "hidden" attribute
+ * 1. Display or visibility style properties set to "none" or "hidden"
+ * 2. Display or visibility computed styles set to "none" or "hidden"
+ * 3. Width and height set to 0 (check not applied in jest)
+ * 4. A hidden parent element (this also hides child elements)
+ * 5. Type equal to "hidden" (only for form elements)
+ * 6. A "hidden" attribute
  */
 function isHidden(elOrSelector: HTMLElement | string): boolean {
   let el = $(elOrSelector)[0];
@@ -425,8 +426,8 @@ function isHidden(elOrSelector: HTMLElement | string): boolean {
 
   const hiddenWhen = [
     (el) => !(el.offsetWidth || el.offsetHeight || el.getClientRects().length),
-    (el) => el.style.display === 'none',
-    (el) => el.style.visibility === 'hidden',
+    (el) => el.style.display === 'none' || window.getComputedStyle(el).getPropertyValue?.('display') === 'none',
+    (el) => el.style.visibility === 'hidden' || window.getComputedStyle(el).getPropertyValue?.('visibility') === 'hidden',
     (el) => el.type === 'hidden',
     (el) => el.hasAttribute('hidden'),
   ];
@@ -454,11 +455,12 @@ function isHidden(elOrSelector: HTMLElement | string): boolean {
 
 /**
  * Hidden elements are elements that have:
- * 1. Display property set to "none"
- * 2. Width and height set to 0
- * 3. A hidden parent element (this also hides child elements)
- * 4. Type equal to "hidden" (only for form elements)
- * 5. A "hidden" attribute
+ * 1. Display or visibility style properties set to "none" or "hidden"
+ * 2. Display or visibility computed styles set to "none" or "hidden"
+ * 3. Width and height set to 0 (check not applied in jest)
+ * 4. A hidden parent element (this also hides child elements)
+ * 5. Type equal to "hidden" (only for form elements)
+ * 6. A "hidden" attribute
  *
  * expect('div').toBeHidden();
  *