chore(deps-dev): bump puppeteer from 5.2.0 to 5.3.0 (#138)

* chore(deps-dev): bump puppeteer from 5.2.0 to 5.3.0

Bumps [puppeteer](https://github.com/puppeteer/puppeteer) from 5.2.0 to 5.3.0.
- [Release notes](https://github.com/puppeteer/puppeteer/releases)
- [Commits](puppeteer/puppeteer@v5.2.0...v5.3.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* test: fix example-3 test

* test: fix api tests

* test: fix api tests using more await delay

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: sebnitu <nitu.seb@gmail.com>

jest-puppeteer.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   launch: {
+    args: ['--window-size=1000,1000'],
     headless: true,
     // slowMo: 100,
-    args: ['--window-size=1000,1000'],
   },
   browserContext: 'incognito',
 };

package.json

@@ -49,6 +49,6 @@
     "jest-puppeteer": "^4.4.0",
     "microbundle": "^0.12.3",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "5.2.0"
+    "puppeteer": "5.3.0"
   }
 }

tests/anchor.test.js

@@ -1,13 +1,14 @@
 import 'expect-puppeteer';
 import path from 'path';
-import { throttleDelay } from './helpers/throttleDelay';
+
+const scrollAnimationDelay = 300;
 
 beforeAll(async () => {
   await page.goto(`file:${path.join(__dirname, '../example.html')}`);
 });
 
 test('should scroll to anchor from initial scroll position', async () => {
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   const el = await page.$eval('[data-scroll-stash="example-2"]', (el) => {
     document.querySelector('#example-2').scrollIntoView();
     return el.scrollTop;
@@ -22,9 +23,9 @@ test('should scroll to anchor from saved scroll position', async () => {
     return el.scrollTop;
   });
   expect(el).toBe(627);
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   await page.reload();
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   el = await page.$eval('[data-scroll-stash="example-2"]', (el) => {
     document.querySelector('#example-2').scrollIntoView();
     return el.scrollTop;
@@ -45,9 +46,9 @@ test('should scroll to anchor with spacing for sticky footer', async () => {
     document.querySelector('#example-3').scrollIntoView();
     el.scrollTop = 9999;
   });
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   await page.reload();
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   let el = await page.$eval('[data-scroll-stash="example-3"]', (el) => {
     document.querySelector('#example-3').scrollIntoView();
     return el.scrollTop;
@@ -68,9 +69,9 @@ test('should disable anchor scrolling when data attribute is set to false', asyn
   await page.$eval('[data-scroll-stash="page"]', (el) => {
     el.scrollTop = 0;
   });
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   await page.reload();
-  await throttleDelay();
+  await page.waitForTimeout(scrollAnimationDelay);
   const el = await page.$eval('[data-scroll-stash="page"]', (el) => {
     return el.scrollTop;
   });

tests/api-destroy.test.js

@@ -0,0 +1,44 @@
+import 'expect-puppeteer';
+import path from 'path';
+
+const scrollAnimationDelay = 300;
+
+let eLog = {
+  anchor: [],
+  saved: [],
+};
+
+test('should properly destroy scroll-stash instance on api call', async () => {
+  await page.exposeFunction('onCustomEvent', ({ type, detail, target }) => {
+    if (type == 'scroll-stash:anchor') {
+      eLog.anchor.push({ type, detail, target });
+    } else if (type == 'scroll-stash:saved') {
+      eLog.saved.push({ type, detail, target });
+    }
+  });
+
+  await page.evaluateOnNewDocument(() => {
+    window.addEventListener('scroll-stash:anchor', ({ type, detail, target }) => {
+      window.onCustomEvent({ type, detail, target });
+    });
+    window.addEventListener('scroll-stash:saved', ({ type, detail, target }) => {
+      window.onCustomEvent({ type, detail, target });
+    });
+  });
+
+  await page.goto(`file:${path.join(__dirname, '../example.html')}`);
+
+  const result = await page.evaluate(() => {
+    document.querySelector('.js-api-destroy').click();
+    return localStorage.getItem('ScrollStash');
+  });
+  await page.waitForTimeout(scrollAnimationDelay);
+  expect(result).toBe(null);
+
+  const eCount = eLog.saved.length;
+  await page.$eval('#page', (el) => {
+    el.scrollTop = 0;
+  });
+  await page.waitForTimeout(scrollAnimationDelay);
+  expect(eLog.saved.length).toBe(eCount);
+});

tests/api-init.test.js

@@ -0,0 +1,52 @@
+import 'expect-puppeteer';
+import path from 'path';
+
+const scrollAnimationDelay = 300;
+
+let eLog = {
+  anchor: [],
+  saved: [],
+};
+
+test('should re-initialize scroll-stash instance on api call', async () => {
+  await page.exposeFunction('onCustomEvent', ({ type, detail, target }) => {
+    if (type == 'scroll-stash:anchor') {
+      eLog.anchor.push({ type, detail, target });
+    } else if (type == 'scroll-stash:saved') {
+      eLog.saved.push({ type, detail, target });
+    }
+  });
+
+  await page.evaluateOnNewDocument(() => {
+    window.addEventListener('scroll-stash:anchor', ({ type, detail, target }) => {
+      window.onCustomEvent({ type, detail, target });
+    });
+    window.addEventListener('scroll-stash:saved', ({ type, detail, target }) => {
+      window.onCustomEvent({ type, detail, target });
+    });
+  });
+
+  await page.goto(`file:${path.join(__dirname, '../example.html')}`);
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  let result = await page.evaluate(() => {
+    document.querySelector('.js-api-destroy').click();
+    return localStorage.getItem('ScrollStash');
+  });
+
+  await page.waitForTimeout(scrollAnimationDelay);
+  expect(result).toBe(null);
+
+  const eSavedCount = eLog.saved.length;
+  const eAnchorCount = eLog.anchor.length;
+
+  result = await page.evaluate(() => {
+    document.querySelector('.js-api-init').click();
+    return localStorage.getItem('ScrollStash');
+  });
+
+  await page.waitForTimeout(scrollAnimationDelay);
+  expect(result).not.toBe(null);
+  expect(eLog.saved.length).toBe(eSavedCount + 1);
+  expect(eLog.anchor.length).toBe(eAnchorCount);
+});

tests/api.test.js

@@ -1,133 +1,101 @@
 import 'expect-puppeteer';
 import path from 'path';
-import { throttleDelay } from './helpers/throttleDelay';
 
 const scrollAnimationDelay = 300;
 
-let eLog = {
-  anchor: [],
-  saved: [],
-};
-
 beforeAll(async () => {
-  await page.exposeFunction('onCustomEvent', ({ type, detail, target }) => {
-    if (type == 'scroll-stash:anchor') {
-      eLog.anchor.push({ type, detail, target });
-    } else if (type == 'scroll-stash:saved') {
-      eLog.saved.push({ type, detail, target });
-    }
-  });
-
-  await page.evaluateOnNewDocument(() => {
-    window.addEventListener('scroll-stash:anchor', ({ type, detail, target }) => {
-      window.onCustomEvent({ type, detail, target });
-    });
-    window.addEventListener('scroll-stash:saved', ({ type, detail, target }) => {
-      window.onCustomEvent({ type, detail, target });
-    });
-  });
-
   await page.goto(`file:${path.join(__dirname, '../example.html')}`);
+  await page.waitForTimeout(scrollAnimationDelay);
 });
 
 test('should scroll to anchor on anchorShow api call', async () => {
+  // Setup
   let result = await page.$eval('[data-scroll-stash="example-2"]', (el) => {
-    document.querySelector('#example-2').scrollIntoView();
-    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
     el.scrollTop = 0;
-    btn.click();
     return el.scrollTop;
   });
   expect(result).toBe(0);
-  await throttleDelay(scrollAnimationDelay);
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  // Click button and wait for animation
+  await page.$eval('[data-scroll-stash="example-2"]', (el) => {
+    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
+    btn.click();
+  });
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  // Check scroll position
   result = await page.$eval('[data-scroll-stash="example-2"]', (el) => {
     return el.scrollTop;
   });
   expect(result).toBe(217);
 });
 
-test('should scroll to anchor with space adjustments on anchorShow api call', async () => {
+test('should scroll to anchor from top with space adjustments on anchorShow api call', async () => {
+  // Setup
   let result = await page.$eval('[data-scroll-stash="example-3"]', (el) => {
-    document.querySelector('#example-3').scrollIntoView();
-    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
     el.scrollTop = 0;
-    btn.click();
     return el.scrollTop;
   });
   expect(result).toBe(0);
-  await throttleDelay(scrollAnimationDelay);
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  // Click button and wait for animation
+  await page.$eval('[data-scroll-stash="example-3"]', (el) => {
+    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
+    btn.click();
+  });
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  // Check scroll position
   result = await page.$eval('[data-scroll-stash="example-3"]', (el) => {
     return el.scrollTop;
   });
   expect(result).toBe(107);
+});
 
-  result = await page.$eval('[data-scroll-stash="example-3"]', (el) => {
-    document.querySelector('#example-3').scrollIntoView();
-    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
+test('should scroll to anchor from bottom with space adjustments on anchorShow api call', async () => {
+  // Setup
+  let result = await page.$eval('[data-scroll-stash="example-3"]', (el) => {
     el.scrollTop = 9999;
-    btn.click();
     return el.scrollTop;
   });
   expect(result).toBe(517);
-  await throttleDelay(scrollAnimationDelay);
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  // Click button and wait for animation
+  await page.$eval('[data-scroll-stash="example-3"]', (el) => {
+    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
+    btn.click();
+  });
+  await page.waitForTimeout(scrollAnimationDelay);
+
+  // Check scroll position
   result = await page.$eval('[data-scroll-stash="example-3"]', (el) => {
     return el.scrollTop;
   });
   expect(result).toBe(369);
 });
 
 test('should scroll to custom anchor on anchorShow api call', async () => {
+  // Setup
   let result = await page.$eval('[data-scroll-stash="example-4"]', (el) => {
-    document.querySelector('#example-4').scrollIntoView();
-    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
     el.scrollTop = 0;
-    btn.click();
     return el.scrollTop;
   });
   expect(result).toBe(0);
-  await throttleDelay(scrollAnimationDelay);
-  result = await page.$eval('[data-scroll-stash="example-4"]', (el) => {
-    return el.scrollTop;
-  });
-  expect(result).toBe(217);
-});
+  await page.waitForTimeout(scrollAnimationDelay);
 
-test('should properly destroy scroll-stash instance on api call', async () => {
-  const result = await page.evaluate(() => {
-    document.querySelector('#example-api').scrollIntoView();
-    document.querySelector('.js-api-destroy').click();
-    return localStorage.getItem('ScrollStash');
-  });
-  await throttleDelay();
-  expect(result).toBe(null);
-
-  const eCount = eLog.saved.length;
-  await page.$eval('#page', (el) => {
-    el.scrollTop = 0;
-  });
-  await throttleDelay();
-  expect(eLog.saved.length).toBe(eCount);
-});
-
-test('should re-initialize scroll-stash instance on api call', async () => {
-  // await throttleDelay();
-  let result = await page.evaluate(() => {
-    document.querySelector('#example-api').scrollIntoView();
-    document.querySelector('.js-api-destroy').click();
-    return localStorage.getItem('ScrollStash');
+  // Click button and wait for animation
+  await page.$eval('[data-scroll-stash="example-4"]', (el) => {
+    const btn = el.closest('.example').querySelector('.js-api-anchor-show');
+    btn.click();
   });
-  await throttleDelay();
-  expect(result).toBe(null);
-
-  const eSavedCount = eLog.saved.length;
-  const eAnchorCount = eLog.anchor.length;
+  await page.waitForTimeout(scrollAnimationDelay);
 
-  result = await page.evaluate(() => {
-    document.querySelector('.js-api-init').click();
-    return localStorage.getItem('ScrollStash');
+  // Check scroll position
+  result = await page.$eval('[data-scroll-stash="example-4"]', (el) => {
+    return el.scrollTop;
   });
-  await throttleDelay();
-  expect(result).not.toBe(null);
-  expect(eLog.saved.length).toBe(eSavedCount + 1);
-  expect(eLog.anchor.length).toBe(eAnchorCount);
+  expect(result).toBe(217);
 });