Merge pull request #890 from ing-bank/test/addCalendarScreenshots

test(calendar): add visual regression tests

packages/calendar/test/demos.screenshots-test.js

@@ -0,0 +1,87 @@
+// @ts-nocheck
+/* globals capture getStoryPage */
+
+const selector = 'lion-calendar';
+
+describe('others-calendar', () => {
+  it('main', async () => {
+    const id = 'others-calendar--main';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('selected-date', async () => {
+    const id = 'others-calendar--selected-date';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('central-date', async () => {
+    const id = 'others-calendar--central-date';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('controlling-focus', async () => {
+    const id = 'others-calendar--controlling-focus';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await page.waitForSelector('button');
+    await page.evaluate(() => {
+      document.querySelector('button').click();
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-lower-limit', async () => {
+    const id = 'others-calendar--providing-lower-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('providing-higher-limit', async () => {
+    const id = 'others-calendar--providing-higher-limit';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('disabled-dates', async () => {
+    const id = 'others-calendar--disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+  it('combined-disabled-datess', async () => {
+    const id = 'others-calendar--combined-disabled-dates';
+    const page = await getStoryPage(id, {
+      command: 'Emulation.setVirtualTimePolicy',
+      parameters: {
+        policy: 'advance',
+        initialVirtualTime: new Date('2000/12/15').getTime() / 1000,
+      },
+    });
+    await capture({ selector, id, page });
+  });
+});

packages/select-rich/test/demos.screenshots-test.js

@@ -12,6 +12,7 @@ describe('forms-select-rich', () => {
   it('main-opened', async () => {
     const id = `forms-select-rich--main`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -31,6 +32,7 @@ describe('forms-select-rich', () => {
   it('options-with-html-opened', async () => {
     const id = `forms-select-rich--options-with-html`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -45,6 +47,7 @@ describe('forms-select-rich', () => {
   it('many-options-with-scrolling-opened', async () => {
     const id = `forms-select-rich--many-options-with-scrolling`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -69,6 +72,7 @@ describe('forms-select-rich', () => {
   it('disabled-option-opened', async () => {
     const id = `forms-select-rich--disabled-option`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.opened = true;
@@ -83,6 +87,7 @@ describe('forms-select-rich', () => {
   it('validation', async () => {
     const id = `forms-select-rich--validation`;
     const page = await getStoryPage(id);
+    await page.waitForSelector(selector);
     await page.evaluate(() => {
       const el = document.querySelector('lion-select-rich');
       el.updateComplete.then(() => {

scripts/screenshots/index.js

@@ -81,13 +81,18 @@ process.on('beforeExit', () => {
   serverPromise.then(server => server.close());
 });
 
-async function getPage(path) {
+async function getPage(path, cdp) {
   const browser = await browserPromise;
   const server = await serverPromise;
   const url = `http://127.0.0.1:${server.server.address().port}${path}`;
   log(`Creating a page for ${url}`);
   const page = await browser.newPage();
 
+  if (cdp) {
+    const client = await page.context().newCDPSession(page);
+    await client.send(cdp.command, cdp.parameters);
+  }
+
   // eslint-disable-next-line no-unused-vars
   page.on('console', msg => {
     if (msg._type !== 'debug') {
@@ -99,16 +104,15 @@ async function getPage(path) {
     }
   });
 
-  await page.goto(url);
+  await page.goto(url, { waitUntil: 'domcontentloaded' });
-  await page.waitForTimeout(500);
 
   log(`Page has been created`);
 
   return page;
 }
 
-async function getStoryPage(id) {
+async function getStoryPage(id, cdp) {
-  return getPage(`/iframe.html?id=${id}&viewMode=story`);
+  return getPage(`/iframe.html?id=${id}&viewMode=story`, cdp);
 }
 
 async function getClip({ page, selector, endClipSelector }) {
@@ -260,7 +264,29 @@ function createCapture() {
     if (!suite.page) {
       suite.page = await getPage(url);
     }
-    await page.waitForTimeout(500);
+    if (selector) {
+      await page.waitForSelector(selector);
+    }
+    if (endClipSelector) {
+      await page.waitForSelector(endClipSelector);
+    }
+    await page.evaluate(
+      async ([sel, endClipSel]) => {
+        if (sel) {
+          const el = document.querySelector(sel);
+          if (el && el.updateComplete) {
+            await el.updateComplete;
+          }
+        }
+        if (endClipSel) {
+          const el = document.querySelector(endClipSel);
+          if (el && el.updateComplete) {
+            await el.updateComplete;
+          }
+        }
+      },
+      [selector, endClipSelector],
+    );
     suite.clip = await getClip(suite);
 
     if (updateScreenshots) {