Added tests

backstopConfig.js

@@ -0,0 +1,48 @@
+'use strict';
+// https://github.com/garris/BackstopJS#advanced-scenarios
+
+const backstop = require('@mate-academy/backstop-config');
+const { basicScenario } = backstop;
+
+const basic = {
+  ...basicScenario,
+  label: 'Elementary test',
+  selectors: ['body'],
+  removeSelectors: [
+    'h1',
+  ],
+  misMatchThreshold: 0.5,
+  referenceUrl: basicScenario.referenceUrl + '/stopwatch/',
+};
+
+const config = {
+  ...backstop,
+  fileNameTemplate: '{scenarioLabel}',
+  onBeforeScript: 'puppet/onBefore.js',
+  onReadyScript: 'puppet/onReady.js',
+  viewports: [
+    {
+      name: 'tablet_h',
+      width: 1024,
+      height: 768,
+    },
+  ],
+  scenarios: [
+    {
+      ...basic,
+      label: 'Stopwatch started',
+    },
+    {
+      ...basic,
+      label: 'Stopwatch before one circle',
+      postDOMChangeWait: 5000,
+    },
+    {
+      ...basic,
+      label: 'Stopwatch after one circle',
+      postDOMChangeWait: 15000,
+    }
+  ],
+};
+
+module.exports = config;

backstop_data/engine_scripts/cookies.json

@@ -0,0 +1,14 @@
+[
+  {
+    "domain": ".www.yourdomain.com",
+    "path": "/",
+    "name": "yourCookieName",
+    "value": "yourCookieValue",
+    "expirationDate": 1798790400,
+    "hostOnly": false,
+    "httpOnly": false,
+    "secure": false,
+    "session": false,
+    "sameSite": "no_restriction"
+  }
+]

backstop_data/engine_scripts/puppet/clickAndHoverHelper.js

@@ -0,0 +1,39 @@
+module.exports = async (page, scenario) => {
+  var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  var clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  var scrollToSelector = scenario.scrollToSelector;
+  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitForSelector(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitForSelector(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitForSelector(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    await page.waitForTimeout(postInteractionWait);
+  }
+
+  if (scrollToSelector) {
+    await page.waitForSelector(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};

backstop_data/engine_scripts/puppet/loadCookies.js

@@ -0,0 +1,32 @@
+let fs = require('fs');
+
+module.exports = async (page, scenario) => {
+  let cookies = [];
+  let cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // MUNGE COOKIE DOMAIN
+  cookies = cookies.map(cookie => {
+    cookie.url = 'https://' + cookie.domain;
+    delete cookie.domain;
+
+    return cookie;
+  });
+
+  // SET COOKIES
+  const setCookies = async () => {
+    return Promise.all(
+      cookies.map(async (cookie) => {
+        await page.setCookie(cookie);
+      })
+    );
+  };
+
+  await setCookies();
+
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

backstop_data/engine_scripts/puppet/onBefore.js

@@ -0,0 +1,3 @@
+module.exports = async (page, scenario, vp) => {
+  await require('./loadCookies')(page, scenario);
+};

backstop_data/engine_scripts/puppet/onReady.js

@@ -0,0 +1,24 @@
+module.exports = async (page, scenario, vp) => {
+  console.log('SCENARIO > ' + scenario.label);
+  await require('./clickAndHoverHelper')(page, scenario);
+
+  const {
+    postDOMChangeWait = 0,
+  } = scenario;
+
+  await page.waitForSelector('.stopwatch');
+
+  await page.evaluate(() => {
+    const calendarElement = document.querySelector('.stopwatch');
+    const isAlreadySpeedUp = calendarElement.classList.contains('stopwatch--speed-up');
+
+    if (isAlreadySpeedUp) {
+      return;
+    }
+
+    calendarElement.classList.add('stopwatch--speed-up');
+  });
+
+  await page.waitForSelector('.stopwatch--speed-up');
+  await page.waitForTimeout(postDOMChangeWait);
+};