fix: visual regressions

src/__tests__/e2e/visual-regressions.js

@@ -1,30 +1,42 @@
+/**
+ * lazy loading tricks from
+ * https://www.screenshotbin.com/blog/handling-lazy-loaded-webpages-puppeteer
+ */
 const puppeteer = require(`puppeteer`)
 const { toMatchImageSnapshot } = require(`jest-image-snapshot`)
 expect.extend({ toMatchImageSnapshot })
 
 jest.setTimeout(15000)
 
+function wait(ms) {
+  return new Promise(resolve => setTimeout(() => resolve(), ms))
+}
+
+const [width, height] = [1240, 530]
 let page
 let browser
 
-const testIf = process.env.MODE && process.env.MODE === `skipsnapshots`
-  ? test.skip
-  : process.env.SKIP && process.env.SKIP === `e2e`
+const testIf =
+  process.env.MODE && process.env.MODE === `skipsnapshots`
     ? test.skip
-    : test
+    : process.env.SKIP && process.env.SKIP === `e2e`
+      ? test.skip
+      : test
 
 beforeAll(async () => {
-  browser = await puppeteer.launch()
+  browser = await puppeteer.launch({
+    args: [`--window-size=${width},${height}`],
+  })
   page = await browser.newPage()
+  await page.setViewport({ width, height })
   // await page.setViewport({ width, height })
   // await page.goto(`http://localhost:8000`)
 })
 afterAll(() => {
   browser.close()
 })
 
-// const URL = `http://localhost:8000/`
-const URL = `http://localhost:3333/`
+const URL = `http://localhost:8000/en/`
 
 const pagesToTest = [
   {
@@ -43,10 +55,10 @@ const pagesToTest = [
     title: `Blog`,
     url: `${URL}blog`,
   },
-  {
-    title: `Gallery`,
-    url: `${URL}gallery`,
-  },
+  // {
+  //   title: `Gallery`,
+  //   url: `${URL}gallery`,
+  // },
   {
     title: `Contact`,
     url: `${URL}contact`,
@@ -55,15 +67,43 @@ const pagesToTest = [
 
 describe(`Visual regressions`, () => {
   pagesToTest.forEach(x =>
-    testIf(x.title, async done => {
-      await page.goto(x.url)
-      await page.evaluate(() => {
-        /* eslint-disable-next-line no-undef */
-        window.scrollBy(0, window.innerHeight)
-      })
-      const screenshot = await page.screenshot({ fullPage: true })
-      expect(screenshot).toMatchImageSnapshot()
-      done()
-    }, 20000)
+    testIf(
+      x.title,
+      async done => {
+        await page.goto(x.url)
+        // await page.evaluate(() => {
+        //   /* eslint-disable-next-line no-undef */
+        //   window.scrollBy(0, window.innerHeight)
+        // })
+        // Get the height of the rendered page
+        const bodyHandle = await page.$(`body`)
+        const { height } = await bodyHandle.boundingBox()
+        await bodyHandle.dispose()
+
+        // Scroll one viewport at a time, pausing to let content load
+        const viewportHeight = page.viewport().height
+        let viewportIncr = 0
+        while (viewportIncr + viewportHeight < height) {
+          await page.evaluate(_viewportHeight => {
+            window.scrollBy(0, _viewportHeight) // eslint-disable-line
+          }, viewportHeight)
+          await wait(20)
+          viewportIncr = viewportIncr + viewportHeight
+        }
+
+        // Scroll back to top
+        await page.evaluate(_ => {
+          window.scrollTo(0, 0) // eslint-disable-line
+        })
+
+        // Some extra delay to let images load
+        await wait(100)
+
+        const screenshot = await page.screenshot({ fullPage: true })
+        expect(screenshot).toMatchImageSnapshot()
+        done()
+      },
+      20000
+    )
   )
-})
+})