test(calendar): add visual regression tests

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

@@ -0,0 +1,85 @@
+/* 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.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 });
+  });
+});

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') {
@@ -107,8 +112,8 @@ async function getPage(path) {
   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 }) {