Add layout test service (#11)

* Establish node version

* Initial work on layout test service

* Fix eslint

* Add option to check elements count

* Test element's (x,y) position

* Fix display

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     es2021: true,
     node: true,
   },
-  extends: ['prettier'],
+  extends: ['eslint:recommended', 'prettier'],
   plugins: ['prettier', 'import'],
   parserOptions: {
     ecmaVersion: 12,

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.4.1

index.js

@@ -29,7 +29,7 @@ const main = async (fileName, options) => {
     }
 
     if (Array.isArray(tests)) {
-      for (test of tests) {
+      for (let test of tests) {
         await handleTest(test, mergedGlobalConfig);
       }
 

src/services/common/genericService.js

@@ -24,14 +24,17 @@ const genericService = async (localConfig, globalConfig, runTestsFunction) => {
     logger.debug(config);
 
     if (config.run !== false) {
+      if (localConfig.name)
+        logger.info(`Starting test case suite: ${localConfig.name}`);
+
       await runTestsFunction(config, testCases);
     }
 
     revertLoggerLevel(oldLogLevel);
   } catch (e) {
     logger.trace(e);
     logger.error(
-      `Error occured while running service for styles tests: ${
+      `Error occured while running test service for test case: ${
         localConfig.name || globalConfig.name
       }`
     );

src/services/layoutService/testsRunner.js

@@ -1,22 +1,117 @@
 // Created by Mikołaj Zatorski c. 2021
 
+const tap = require('tap');
 const { runPuppeteerTests } = require('../common/commonPuppeteer');
+const { logger } = require('../../utils/logger');
 
 const runLayoutTests = async (config, testCases) =>
   await runPuppeteerTests(config, testCases, runTestCases);
 
 const runTestCases = async (page, testCases) => {
-  for (testCase of testCases) {
+  for (let testCase of testCases) {
     await runTestCase(page, testCase);
   }
 };
 
 const runTestCase = async (page, testCase) => {
-  logger.info(
-    "Welcome to layout test service - it's finally coming in in the next release"
+  const { selector, xpath, ...tests } = testCase;
+  const { position, contains: containCases } = tests;
+  const locator = selector || xpath;
+
+  await tap.test(
+    `[LAYOUT SERVICE]: Checking element: ${locator}`,
+    async (t) => {
+      let element;
+      try {
+        element = await getElement(page, locator, !!selector);
+      } catch (err) {
+        logger.trace(err);
+        element = null;
+      }
+
+      if (!element) {
+        t.fail(`Element: ${locator} doesn't exist`);
+        t.end();
+        return;
+      }
+
+      if (position) {
+        const { x, y } = position;
+        if (typeof x !== 'number' || x < 0 || typeof y !== 'number' || y < 0) {
+          t.fail('Either x or y value is not a valid number');
+        } else {
+          const {
+            x: actualX,
+            y: actualY,
+            width,
+            height,
+          } = await element.boundingBox();
+          const offsetX = x - actualX;
+          const offsetY = y - actualY;
+          const isInside =
+            offsetX >= 0 &&
+            offsetX <= width &&
+            offsetY >= 0 &&
+            offsetY <= height;
+          tap.ok(
+            isInside,
+            `check if element ${locator} is visible at (x,y) = (${x}, ${y}).`
+          );
+        }
+      }
+
+      if (containCases) {
+        for (let elementToFind of containCases) {
+          const {
+            selector: childSelector,
+            xpath: childXpath,
+            count = 1,
+          } = elementToFind;
+          const childLocator = childSelector || childXpath;
+          try {
+            const multiple = true;
+            const foundChildElements = await getElement(
+              element,
+              childLocator,
+              !!childSelector,
+              multiple
+            );
+            const actualCount = foundChildElements?.length;
+            t.same(
+              actualCount,
+              count,
+              `check if element ${childLocator} appears ${count} times within element ${locator}`
+            );
+          } catch (err) {
+            logger.trace(err);
+            t.fail(`Element: ${childLocator} doesn't exist within ${locator}`);
+          }
+        }
+      }
+      t.end();
+    }
   );
-  console.log(page);
-  console.log(testCase);
+};
+
+const getElement = async (
+  parentElement,
+  elementSelector,
+  isSelector,
+  multiple = false
+) =>
+  isSelector
+    ? await getElementWithSelector(parentElement, elementSelector, multiple)
+    : await getElementWithxPath(parentElement, elementSelector, multiple);
+
+const getElementWithSelector = async (parentElement, selector, multiple) =>
+  multiple ? await parentElement.$$(selector) : await parentElement.$(selector);
+
+const getElementWithxPath = async (parentElement, xPath, multiple) => {
+  const nodeHandle = await parentElement.$x(xPath);
+  if (multiple) {
+    return nodeHandle;
+  }
+  return nodeHandle[0];
 };
 
 module.exports = {

src/services/stylesService/testsRunner.js

@@ -9,35 +9,36 @@ const runStylesTests = async (config, testCases) =>
   await runPuppeteerTests(config, testCases, runTestCases);
 
 const runTestCases = async (page, testCases) => {
-  for (testCase of testCases) {
+  for (let testCase of testCases) {
     await runTestCase(page, testCase);
   }
 };
 
 const runTestCase = async (page, testCase) => {
   const { selector, xpath, ...expectedStyles } = testCase;
+  const locator = selector || xpath;
 
   await tap.test(
-    `[STYLES SERVICE]: Checking element: ${selector || xpath}`,
+    `[STYLES SERVICE]: Checking element: ${locator}`,
     async (t) => {
       let actualStyles;
       try {
         actualStyles = await getStylesToCompare(
           page,
-          selector || xpath,
+          locator,
           expectedStyles,
           !!selector
         );
       } catch (err) {
         logger.trace(err);
         actualStyles = false;
       }
-      t.ok(actualStyles, `check if element ${selector || xpath} exists`);
+      t.ok(actualStyles, `check if element ${locator} exists`);
       if (actualStyles) {
         t.same(
           normalizeStyles(actualStyles),
           normalizeStyles(expectedStyles),
-          `compare if element ${selector || xpath} styles match`
+          `compare if element ${locator} styles match`
         );
       }
       t.end();
@@ -64,9 +65,10 @@ const getStylesWithxPath = async (page, xPath, expectedStyles) => {
 };
 
 const getElementStyles = (node, testedStyles) => {
+  // eslint-disable-next-line
   const nodeStyles = window.getComputedStyle(node);
   const shapedStyles = {};
-  for (property in testedStyles) {
+  for (let property in testedStyles) {
     shapedStyles[property] = nodeStyles.getPropertyValue(property);
   }
   return shapedStyles;

src/utils/setExitCode.js

@@ -4,7 +4,7 @@
 const tap = require('tap');
 
 const setExitCode = () => {
-  process.on('exit', (code) => {
+  process.on('exit', () => {
     if (tap.counts.total === 0) {
       console.log('No test cases run :(');
       console.log('Exiting with status code 1');