testaro 4.9.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "Automation of accessibility testing",
   "main": "index.js",
   "scripts": {

package/tests/styleDiff.js

@@ -6,145 +6,148 @@
   particular style properties, listed in the 'mainStyles' and 'headingStyles' arrays.
 */
 exports.reporter = async (page, withItems) => {
-  // Get an object with arrays of list and adjacent links as properties.
+  // Get an object with arrays of list links and adjacent links as properties.
   const linkTypes = await require('../procs/linksByType').linksByType(page);
   return await page.$eval('body', (body, args) => {
-    const withItems = args[0];
-    const linkTypes = args[1];
+    const linkTypes = args[0];
+    const withItems = args[1];
     // Identify the settable style properties to be compared for all tag names.
     const mainStyles = [
-      'borderStyle',
-      'borderWidth',
       'fontStyle',
       'fontWeight',
+      'opacity',
+      'textDecorationLine',
+      'textDecorationStyle',
+      'textDecorationThickness'
+    ];
+    // Identify those only for buttons.
+    const buttonStyles = [
+      'borderStyle',
+      'borderWidth',
+      'height',
       'lineHeight',
       'maxHeight',
       'maxWidth',
       'minHeight',
       'minWidth',
-      'opacity',
       'outlineOffset',
       'outlineStyle',
-      'outlineWidth',
-      'textDecorationLine',
-      'textDecorationStyle',
-      'textDecorationThickness'
+      'outlineWidth'
     ];
     // Identify those for headings.
     const headingStyles = [
+      'color',
       'fontSize'
     ];
+    // Identify those for list links.
+    const listLinkStyles = [
+      'color',
+      'fontSize',
+      'lineHeight'
+    ];
     // Initialize the data to be returned.
     const data = {
       mainStyles,
+      buttonStyles,
       headingStyles,
+      listLinkStyles,
       totals: {}
     };
     if (withItems) {
       data.items = {};
     }
-    // Identify the heading tag names to be analyzed.
-    const headingNames = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    // Identify the other nonlink tag names to be analyzed.
-    const otherNames = ['button'];
-    // Initialize an object of elements to be analyzed.
-    const elementClasses = {
-      headings: {},
-      other: {
-        aAdjacent: linkTypes.adjacent,
-        aList: linkTypes.list
+    // Initialize an object of elements to be analyzed, including links.
+    const elements = {
+      buttons: [],
+      headings: {
+        h1: [],
+        h2: [],
+        h3: [],
+        h4: [],
+        h5: [],
+        h6: []
+      },
+      links: {
+        adjacent: linkTypes.adjacent,
+        list: linkTypes.list
       }
     };
+    // Identify the heading tag names to be analyzed.
+    const headingNames = Object.keys(elements.headings);
+    // Add the buttons to the object.
+    elements.buttons = Array.from(body.querySelectorAll('button, input[type=button]'));
     // For each heading tag name:
     headingNames.forEach(tagName => {
       // Add its elements to the object.
-      elementClasses.headings[tagName] = Array.from(body.getElementsByTagName(tagName));
-    });
-    // For each other tag name:
-    otherNames.forEach(tagName => {
-      // Add its elements to the object.
-      elementClasses.other[tagName] = Array.from(body.getElementsByTagName(tagName));
+      elements.headings[tagName] = Array.from(body.getElementsByTagName(tagName));
     });
-    // For each element superclass:
-    ['headings', 'other'].forEach(superClass => {
-      // For each class in the superclass:
-      Object.keys(elementClasses[superClass]).forEach(tagName => {
-        const elements = elementClasses[superClass][tagName];
-        const elementCount = elements.length;
-        // If there are any:
-        if (elementCount) {
-          const styleProps = {};
-          const styleTexts = {};
+    // Tabulates the distribution of style properties for elements of a type.
+    const tallyStyles = (typeName, elements, typeStyles, withItems) => {
+      // If there are any elements:
+      const elementCount = elements.length;
+      if (elementCount) {
+        const styleProps = {};
+        const styleTexts = {};
+        // For each element:
+        elements.forEach(element => {
+          // Get its values on the style properties to be compared.
+          const styleDec = window.getComputedStyle(element);
+          const style = {};
+          const styles = mainStyles.concat(typeStyles);
+          styles.forEach(styleName => {
+            style[styleName] = styleDec[styleName];
+          });
+          // Get a text representation of the style, limited to those properties.
+          const styleText = JSON.stringify(style);
+          // Increment the total of elements with that style.
+          styleTexts[styleText] = ++styleTexts[styleText] || 1;
+          // If details are to be reported:
           if (withItems) {
-            if (! data.items[tagName]) {
-              data.items[tagName] = {};
-            }
-          }
-          // For each of them:
-          elements.forEach(element => {
-            // Get its values on the style properties to be compared.
-            const styleDec = window.getComputedStyle(element);
-            const style = {};
-            // Identify the styles to be compared.
-            const styles = mainStyles;
-            if (superClass === 'headings') {
-              styles.push(...headingStyles);
+            // Add the element’s values and text to the style details.
+            if (! styleProps[typeName]) {
+              styleProps[typeName] = {};
             }
+            const elementText = element.textContent.trim().replace(/\s/g, ' ');
+            // For each style property being compared:
             styles.forEach(styleName => {
-              style[styleName] = styleDec[styleName];
+              if (! styleProps[typeName][styleName]) {
+                styleProps[typeName][styleName] = {};
+              }
+              if (! styleProps[typeName][styleName][style[styleName]]) {
+                styleProps[typeName][styleName][style[styleName]] = [];
+              }
+              styleProps[typeName][styleName][style[styleName]].push(elementText);
             });
-            // Get a text representation of the style.
-            const styleText = JSON.stringify(style);
-            // Increment the total of elements with that style declaration.
-            styleTexts[styleText] = ++styleTexts[styleText] || 1;
-            // If details are required:
-            if (withItems) {
-              // For each style property:
-              styles.forEach(styleName => {
-                const styleValue = style[styleName];
-                // Increment the total of elements with the same value on it as the element.
-                if (styleProps[styleName]) {
-                  styleProps[styleName][styleValue] = ++styleProps[styleName][styleValue] || 1;
-                }
-                else {
-                  styleProps[styleName] = {[styleValue]: 1};
-                }
-              });
-            }
-          });
-          // Add the total to the result.
-          data.totals[tagName] = {total: elementCount};
-          const styleCounts = Object.values(styleTexts);
-          // If the elements in the element class differ in style:
-          if (styleCounts.length > 1) {
-            // Add the distribution of its style counts to the result.
-            data.totals[tagName].subtotals = styleCounts.sort((a, b) => b - a);
           }
-          // If details are required:
+        });
+        // Add the total to the result.
+        data.totals[typeName] = {total: elementCount};
+        const styleCounts = Object.values(styleTexts);
+        // If the elements of the type differ in style:
+        if (styleCounts.length > 1) {
+          // Add the distribution of its style counts to the result.
+          data.totals[typeName].subtotals = styleCounts.sort((a, b) => b - a);
+          // If details are to be reported:
           if (withItems) {
-            // For each style property:
-            Object.keys(styleProps).forEach(styleProp => {
-              // Ignore it if all the elements have the same value.
-              if (Object.keys(styleProps[styleProp]).length === 1) {
-                delete styleProps[styleProp];
-              }
-              // Otherwise:
-              else {
-                if (! data.items[tagName][styleProp]) {
-                  data.items[tagName][styleProp] = {};
-                }
-                // Sort the values in order of decreasing count.
-                const sortedEntries = Object.entries(styleProps[styleProp]).sort((a, b) => b[1] - a[1]);
-                sortedEntries.forEach(entry => {
-                  const propData = data.items[tagName][styleProp];
-                  propData[entry[0]] = (propData[entry[0]] || 0) + entry[1];
-                });
+            // Delete the data on uniform style properties.
+            Object.keys(styleProps[typeName]).forEach(styleName => {
+              if (Object.keys(styleProps[typeName][styleName]).length === 1) {
+                delete styleProps[typeName][styleName];
               }
             });
+            // Add the element values and texts to the result.
+            data.items[typeName] = styleProps[typeName];
           }
         }
-      });
+      }
+    };
+    // Report the style-property distributions for the element types.
+    tallyStyles('button', elements.buttons, buttonStyles, withItems);
+    tallyStyles('adjacentLink', elements.links.adjacent, [], withItems);
+    tallyStyles('listLink', elements.links.list, listLinkStyles, withItems);
+    headingNames.forEach(headingName => {
+      tallyStyles(headingName, elements.headings[headingName], headingStyles, withItems);
     });
     return {result: data};
-  }, [withItems, linkTypes]);
+  }, [linkTypes, withItems]);
 };

package/validation/executors/styleDiff.js

@@ -0,0 +1,62 @@
+// app.js
+// Validator for Testaro tests.
+
+const fs = require('fs').promises;
+const {handleRequest} = require(`${__dirname}/../../run`);
+const validateTests = async () => {
+  const totals = {
+    attempts: 0,
+    successes: 0
+  };
+  const scriptFileNames = await fs.readdir(`${__dirname}/../tests/scripts`);
+  for (const scriptFileName of scriptFileNames.filter(fileName => fileName === 'styleDiff.json')) {
+    const rawScriptJSON = await fs
+    .readFile(`${__dirname}/../tests/scripts/${scriptFileName}`, 'utf8');
+    const scriptJSON = rawScriptJSON
+    .replace(/__targets__/g, `file://${__dirname}/../tests/targets`);
+    const script = JSON.parse(scriptJSON);
+    const report = {script};
+    report.log = [];
+    report.acts = [];
+    await handleRequest(report);
+    const {log, acts} = report;
+    if (log.length === 2 && log[1].event === 'endTime' && /^\d{4}-.+$/.test(log[1].value)) {
+      console.log('Success: Log has been correctly populated');
+    }
+    else {
+      console.log('Failure: Log empty or invalid');
+      console.log(JSON.stringify(log, null, 2));
+    }
+    if (
+      acts.length === script.commands.length
+      && acts.every(
+        act => act.type && act.type === 'test'
+          ? act.result && act.result.failureCount !== undefined
+          : true
+      )
+    ) {
+      totals.attempts++;
+      totals.successes++;
+      console.log('Success: Reports have been correctly populated');
+      if (acts.every(
+        act => act.type === 'test' ? act.result.failureCount === 0 : true
+      )) {
+        totals.attempts++;
+        totals.successes++;
+        console.log('Success: No failures');
+      }
+      else {
+        totals.attempts++;
+        console.log('Failure: At least one test has at least one failure');
+        console.log(JSON.stringify(acts, null, 2));
+      }
+    }
+    else {
+      totals.attempts++;
+      console.log('Failure: Reports empty or invalid');
+      console.log(JSON.stringify(acts, null, 2));
+    }
+  }
+  console.log(`Grand totals: attempts ${totals.attempts}, successes ${totals.successes}`);
+};
+validateTests();

package/validation/tests/scripts/styleDiff.json

@@ -15,16 +15,16 @@
     {
       "type": "test",
       "which": "styleDiff",
+      "withItems": true,
       "what": "styleDiff",
-      "withItems": false,
       "expect": [
-        ["totals.aAdjacent.total", "=", 2],
-        ["totals.aList.total", "=", 2],
+        ["totals.adjacentLink.total", "=", 2],
+        ["totals.listLink.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aAdjacent.subtotals"],
-        ["totals.aList.subtotals"],
+        ["totals.adjacentLink.subtotals"],
+        ["totals.listLink.subtotals"],
         ["totals.button.subtotals"],
         ["totals.h1.subtotals"],
         ["totals.h2.subtotals"]
@@ -38,23 +38,24 @@
     {
       "type": "test",
       "which": "styleDiff",
+      "withItems": true,
       "what": "styleDiff",
-      "withItems": false,
       "expect": [
-        ["totals.aAdjacent.total", "=", 2],
-        ["totals.aList.total", "=", 2],
+        ["totals.adjacentLink.total", "=", 2],
+        ["totals.listLink.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aAdjacent.subtotals.0", "=", 1],
-        ["totals.aAdjacent.subtotals.1", "=", 1],
-        ["totals.aList.subtotals.0", "=", 1],
-        ["totals.aList.subtotals.1", "=", 1],
+        ["totals.adjacentLink.subtotals.0", "=", 1],
+        ["totals.adjacentLink.subtotals.1", "=", 1],
+        ["totals.listLink.subtotals.0", "=", 1],
+        ["totals.listLink.subtotals.1", "=", 1],
         ["totals.button.subtotals.0", "=", 1],
         ["totals.button.subtotals.1", "=", 1],
         ["totals.h1.subtotals"],
         ["totals.h2.subtotals.0", "=", 3],
-        ["totals.h2.subtotals.1", "=", 1]
+        ["totals.h2.subtotals.1", "=", 1],
+        ["items.adjacentLink.textDecorationStyle.double.0", "=", "French information"]
       ]
     }
   ]

package/validation/tests/targets/styleDiff/bad.html

@@ -19,17 +19,17 @@
     <main>
       <h1>Page with inconsistent styles</h1>
       <h2>Inline links</h2>
-      <p>This paragraph contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline; text-decoration-style: double" href="https://fr.wikipedia.org">French information</a>. They have different styles.</p>
+      <p>This paragraph contains adjacent links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration-style: double" href="https://fr.wikipedia.org">French information</a>. They have different styles.</p>
       <h2>Block links</h2>
-      <p>The following links are not inline. They have a different styles.</p>
+      <p>The following links are list links. They have different styles.</p>
       <ul>
         <li><a style="font-weight: 700" href="https://sp.wikipedia.org">Spanish information</a></li>
         <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
       </ul>
       <h2>Buttons</h2>
-      <p>This paragraph contains two buttons with a different custom styles. <button type="button">Wikipedia</button> <button type="button" style="border-width: 3px">Wiktionary</button></p>
+      <p>This paragraph contains two buttons with different custom styles. <button type="button">Wikipedia</button> <button type="button" style="border-width: 3px">Wiktionary</button></p>
       <h2 class="italic">Headings</h2>
-      <p>This page contains 4 <code>h2</code> headings. This one has a deviant style.</p>
+      <p>This page contains 4 <code>h2</code> headings. This last one has a deviant style.</p>
     </main>
   </body>
 </html>

package/validation/tests/targets/styleDiff/good.html

@@ -20,9 +20,9 @@
     <main>
       <h1>Page with consistent styles</h1>
       <h2>Inline links</h2>
-      <p>This paragraph contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a href="https://fr.wikipedia.org">French information</a>. They both have a default style.</p>
+      <p>This paragraph contains adjacent links to <a href="https://en.wikipedia.org">English information</a> and <a href="https://fr.wikipedia.org">French information</a>. They both have a default style.</p>
       <h2>Block links</h2>
-      <p>The following links are not inline. They have a uniform custom underline.</p>
+      <p>The following links are list links. They have a uniform custom underline.</p>
       <ul class="dotted">
         <li><a href="https://sp.wikipedia.org">Spanish information</a></li>
         <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>