Merge pull request #843 from w3c/v2-test-format-testrun

Update Test Runner for V2 Test Format

Author: howard-e

client/components/CandidateReview/CandidateTestPlanRun/InstructionsRenderer.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import nextId from 'react-id-generator';
 import styled from '@emotion/styled';
 import { Button } from 'react-bootstrap';
+import { unescape } from 'lodash';
+import { parseListContent } from '../../TestRenderer/utils';
 import {
     userCloseWindow,
     userOpenWindow
@@ -14,6 +15,7 @@ import {
 import { TestWindow } from '../../../resources/aria-at-test-window.mjs';
 import { evaluateAtNameKey } from '../../../utils/aria.js';
 import commandsJson from '../../../resources/commands.json';
+import supportJson from '../../../resources/support.json';
 
 const Container = styled.div`
     padding: 20px;
@@ -50,21 +52,16 @@ const NumberedList = styled.ol`
     }
 `;
 
-const BulletList = styled.ul`
-    padding-inline-start: 2.5rem;
-    list-style-type: circle;
-
-    > li {
-        display: list-item;
-        list-style: circle;
-    }
-`;
-
-const InstructionsRenderer = ({ testResult, testPageUrl, at }) => {
+const InstructionsRenderer = ({
+    testResult,
+    testPageUrl,
+    at,
+    testFormatVersion = 1
+}) => {
     const { test = {} } = testResult;
     const { renderableContent } = test;
     const [testRunExport, setTestRunExport] = useState();
-    const [instructionsContent, setInstructionsContent] = useState({
+    const [pageContent, setPageContent] = useState({
         instructions: {
             assertions: { assertions: [] },
             instructions: {
@@ -125,104 +122,66 @@ const InstructionsRenderer = ({ testResult, testPageUrl, at }) => {
 
     useEffect(() => {
         if (testRunExport) {
-            setInstructionsContent(testRunExport.instructions());
+            setPageContent(testRunExport.instructions());
         }
     }, [testRunExport]);
 
-    const parseRichContent = (instruction = []) => {
-        let content = null;
-        for (let value of instruction) {
-            if (typeof value === 'string') {
-                if (value === '.')
-                    content = (
-                        <>
-                            {content}
-                            {value}
-                        </>
-                    );
-                else
-                    content = content = (
-                        <>
-                            {content} {value}
-                        </>
-                    );
-            } else if ('href' in value) {
-                const { href, description } = value;
-                content = (
-                    <>
-                        {content} <a href={href}>{description}</a>
-                    </>
-                );
-            }
-        }
-        return content;
-    };
-
-    const parseListContent = (instructions = [], commandsContent = null) => {
-        return instructions.map((value, index) => {
-            if (typeof value === 'string')
-                return (
-                    <li key={nextId()}>
-                        {value}
-                        {commandsContent &&
-                            index === instructions.length - 1 && (
-                                <BulletList>{commandsContent}</BulletList>
-                            )}
-                    </li>
-                );
-            else if (Array.isArray(value))
-                return (
-                    <li key={nextId()}>
-                        {parseRichContent(value)}
-                        {commandsContent &&
-                            index === instructions.length - 1 && (
-                                <BulletList>{commandsContent}</BulletList>
-                            )}
-                    </li>
-                );
-        });
-    };
-
-    const allInstructions = [
-        ...instructionsContent.instructions.instructions.instructions,
-        ...instructionsContent.instructions.instructions.strongInstructions,
-        instructionsContent.instructions.instructions.commands.description
-    ];
-
-    const commands =
-        instructionsContent.instructions.instructions.commands.commands;
+    let allInstructions;
+    const isV2 = testFormatVersion === 2;
+
+    if (isV2) {
+        const commandSettingSpecified = renderableContent.commands.some(
+            ({ settings }) => settings && settings !== 'defaultMode'
+        );
+
+        const defaultInstructions =
+            renderableContent.target.at.raw
+                .defaultConfigurationInstructionsHTML;
+        const setupScriptDescription = `${supportJson.testPlanStrings.openExampleInstruction} ${renderableContent.target.setupScript.scriptDescription}`;
+        const testInstructions = renderableContent.instructions.instructions;
+        const settingsInstructions = `${
+            supportJson.testPlanStrings.commandListPreface
+        }${
+            commandSettingSpecified
+                ? ` ${supportJson.testPlanStrings.commandListSettingsPreface}`
+                : ''
+        }`;
+
+        allInstructions = [
+            defaultInstructions,
+            setupScriptDescription + '.',
+            testInstructions + ' ' + settingsInstructions
+        ].map(e => unescape(e));
+    } else {
+        allInstructions = [
+            ...pageContent.instructions.instructions.instructions,
+            ...pageContent.instructions.instructions.strongInstructions,
+            pageContent.instructions.instructions.commands.description
+        ];
+    }
 
+    const commands = pageContent.instructions.instructions.commands.commands;
     const commandsContent = parseListContent(commands);
+
     const allInstructionsContent = parseListContent(
         allInstructions,
         commandsContent
     );
 
-    const assertions = [
-        ...instructionsContent.instructions.assertions.assertions
-    ];
-
+    const assertions = [...pageContent.instructions.assertions.assertions];
     const assertionsContent = parseListContent(assertions);
 
     return (
         <Container>
-            <p>{instructionsContent.instructions.description}</p>
-            <Heading>
-                {instructionsContent.instructions.instructions.header}
-            </Heading>
             <NumberedList>{allInstructionsContent}</NumberedList>
-            <Heading>
-                {instructionsContent.instructions.assertions.header}
-            </Heading>
-            {instructionsContent.instructions.assertions.description}
+            <Heading>{pageContent.instructions.assertions.header}</Heading>
+            {pageContent.instructions.assertions.description}
             <NumberedList>{assertionsContent}</NumberedList>
             <Button
-                disabled={
-                    !instructionsContent.instructions.openTestPage.enabled
-                }
-                onClick={instructionsContent.instructions.openTestPage.click}
+                disabled={!pageContent.instructions.openTestPage.enabled}
+                onClick={pageContent.instructions.openTestPage.click}
             >
-                {instructionsContent.instructions.openTestPage.button}
+                {pageContent.instructions.openTestPage.button}
             </Button>
         </Container>
     );
@@ -235,7 +194,8 @@ InstructionsRenderer.propTypes = {
     testPageUrl: PropTypes.string,
     at: PropTypes.shape({
         name: PropTypes.string.isRequired
-    })
+    }),
+    testFormatVersion: PropTypes.number
 };
 
 export default InstructionsRenderer;

client/components/CandidateReview/CandidateTestPlanRun/index.jsx

@@ -502,6 +502,9 @@ const CandidateTestPlanRun = () => {
                             completedAt: new Date()
                         }}
                         testPageUrl={testPlanReport.testPlanVersion.testPageUrl}
+                        testFormatVersion={
+                            testPlanVersion.metadata.testFormatVersion
+                        }
                     />,
                     ...testPlanReports.map(testPlanReport => {
                         const testResult =