added new command

percy · Feb 3, 2025 · 924a853 · 924a853
1 parent 2a78443
commit 924a853
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -81,6 +81,7 @@ jobs:
           name: dist
           path: packages
       - run: yarn
+      - run: sudo apt update
       - name: Install browser dependencies
         run: sudo apt-get install -y libgbm-dev
         if: ${{ matrix.os == 'ubuntu-latest' }}

diff --git a/packages/dom/src/check-dom-loader.js b/packages/dom/src/check-dom-loader.js
@@ -1,6 +1,5 @@
 // Determines if an element is visible
 export function isElementVisible(el) {
-  if (!el) return false;
   const style = window.getComputedStyle(el);
   return (
     style.display !== 'none' &&

diff --git a/packages/dom/test/check-dom-loader.test.js b/packages/dom/test/check-dom-loader.test.js
@@ -8,14 +8,41 @@ describe('checkForLoader', () => {
     withExample('<div id="content"></div>', { showLoader: true });
 
     loaderElement = document.querySelector('.loader');
-    div = document.querySelector('.parent');
-  });
-
-  it('should return true if a loader element is visible and covers sufficient area of the viewport', () => {
     loaderElement.style.display = 'block';
     loaderElement.style.visibility = 'visible';
     loaderElement.style.opacity = '1';
+    div = document.querySelector('.parent');
+    div.style.display = 'block';
+    div.style.visibility = 'visible';
+    div.style.opacity = '1';
+  });
+
+  afterEach(() => {
+    loaderElement = null;
+    div = null;
+  });
 
+  it('should return true if the loader is visible and meets the size percentage criteria', () => {
+    loaderElement.style.width = '800px';
+    loaderElement.style.height = '600px';
+    const result = checkForLoader();
+    expect(result).toBe(true);
+  });
+
+  it('should return true if parent meets the size percentage criteria', () => {
+    div.style.width = '800px';
+    div.style.height = '3000px';
+    loaderElement.style.width = '600px';
+    loaderElement.style.height = '500px';
+
+    const result = checkForLoader();
+    expect(result).toBe(true);
+  });
+
+  it('should return true if loader has upto depth 1 children', () => {
+    const child1 = document.createElement('div');
+    div.style.height = '6000px';
+    loaderElement.appendChild(child1);
     const result = checkForLoader();
     expect(result).toBe(true);
   });
@@ -44,16 +71,6 @@ describe('checkForLoader', () => {
     expect(result).toBe(false);
   });
 
-  it('should return true if the loader meets the size percentage criteria', () => {
-    div.style.width = '200px';
-    div.style.height = '200px';
-    loaderElement.style.width = '800px';
-    loaderElement.style.height = '600px';
-
-    const result = checkForLoader();
-    expect(result).toBe(true);
-  });
-
   it('should return false if no loader element is found', () => {
     div.removeChild(loaderElement);