testaro 4.9.0 → 4.10.2

package/tests/hover.js

@@ -2,16 +2,22 @@
   hover
   This test reports unexpected effects of hovering. The effects include elements that are made
   visible, elements whose opacities are changed, elements with ancestors whose opacities are
-  changed, and elements that cannot be hovered over. Only Playwright-visible elements that have
-  'A', 'BUTTON', and 'LI' tag names or have 'onmouseenter' or 'onmouseover' attributes are
-  considered as hovering targets. The elements considered when the effects of hovering are
+  changed, and elements that cannot be hovered over. Only Playwright-visible elements in the
+  DOM that have 'A', 'BUTTON', and 'LI' tag names or have 'onmouseenter' or 'onmouseover' attributes
+  are considered as hovering targets. The elements considered when the effects of hovering are
   examined are the descendants of the grandparent of the element hovered over if that element
   has the tag name 'A' or 'BUTTON' or otherwise the descendants of the element. The only
   elements counted as being made visible by hovering are those with tag names 'A', 'BUTTON',
   'INPUT', and 'SPAN', and those with 'role="menuitem"' attributes. The test waits 700 ms after
-  each hover in case of delayed effects. Despite this delay, the test can make the execution time
-  practical by randomly sampling targets instead of hovering over all of them. When sampling is
-  performed, the results may vary from one execution to another.
+  each hover in case of delayed effects. Despite this delay, the test can make the execution
+  time practical by randomly sampling targets instead of hovering over all of them. When
+  sampling is performed, the results may vary from one execution to another. An element is
+  reported as unhoverable when it fails the Playwright actionability checks for hovering, i.e.
+  when it fails to be attached to the DOM, visible, stable (not or no longer animating), and
+  able to receive events. All target candidates satisfy the first two conditions, so only the
+  last two might fail. Playwright defines the ability to receive events as being the target of
+  an action on the location where the center of the element is, rather than some other element
+  with a higher zIndex value in the same location being the target.
 */
 
 // CONSTANTS

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/tests/wave.js

@@ -4,6 +4,7 @@
   specifies a WAVE report type: 1, 2, 3, or 4. The larger the number, the more detailed (and
   expensive) the report.
 */
+const fs = require('fs/promises');
 const https = require('https');
 exports.reporter = async (page, reportType) => {
   const waveKey = process.env.WAVE_KEY;
@@ -20,20 +21,33 @@ exports.reporter = async (page, reportType) => {
         response.on('data', chunk => {
           report += chunk;
         });
-        // When the data arrive, return them as an object.
-        response.on('end', () => {
+        // When the data arrive:
+        response.on('end', async () => {
           try {
+            // Delete unnecessary properties.
             const result = JSON.parse(report);
             const {categories} = result;
             delete categories.feature;
             delete categories.structure;
             delete categories.aria;
+            // Add WCAG information from the WAVE documentation.
+            const waveDocJSON = await fs.readFile('procs/wavedoc.json');
+            const waveDoc = JSON.parse(waveDocJSON);
+            Object.keys(categories).forEach(categoryName => {
+              const category = categories[categoryName];
+              const {items} = category;
+              Object.keys(items).forEach(issueName => {
+                const issueDoc = waveDoc.find((issue => issue.name === issueName));
+                const {guidelines} = issueDoc;
+                items[issueName].wcag = guidelines;
+              });
+            })
             return resolve(result);
           }
           catch (error) {
             return resolve({
               prevented: true,
-              error: 'WAVE did not return JSON.',
+              error: error.message,
               report
             });
           }

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>