adding test report ui

functions/postwomanTesting.js

@@ -2,6 +2,13 @@ const PASS = 'PASS',
   FAIL = 'FAIL',
   ERROR = 'ERROR';
 
+const styles = {
+  [PASS]: {icon: 'check', class: 'success-response'},
+  [FAIL]: {icon: 'close', class: 'cl-error-response'},
+  [ERROR]: {icon: 'close', class: 'cl-error-response'},
+  none: {icon: '', class: ''}
+};
+
 //TODO: probably have to use a more global state for `test`
 
 export default function runTestScriptWitVariables(script, variables) {
@@ -25,7 +32,15 @@ export default function runTestScriptWitVariables(script, variables) {
   let errors = null;
   new Function("pw", script)(pw);
   //
-  return {report: pw._report, errors: pw._errors, testResults: pw._testReports};
+  const report = pw._report.map(item => {
+    if (item.status) {
+      item.styles = styles[status];
+    } else {
+      item.styles = styles.none;
+    }
+    return item;
+  });
+  return {report, errors: pw._errors, testResults: pw._testReports};
 }
 
 function test(descriptor, func, _testReports) {

pages/index.vue

@@ -369,6 +369,21 @@
                   useWorker: false
                 }"
               />
+              <label>Test Reports<span v-if="testReports"></span></label>
+              <div v-if="testReports">
+                <div v-for="testReport in testReports.testReports">
+                  <div v-if="testReport.status">
+                    <i class="material-icons" :class="testReport.styles.class">{{testReport.styles.icon}}</i> {{testReport.result}}
+                    <ul v-if="testReport.message">
+                      <li>{{testReport.message}}</li>
+                    </ul>
+                  </div>
+                  <div v-else-if="testReport.startBlock">
+                    <h4>{{testReport.startBlock}}</h4>
+                  </div>
+                  <div v-else-if="testReport.endBlock"><br/></div>
+                </div>
+              </div>
             </li>
           </ul>
 
@@ -1290,6 +1305,7 @@ export default {
       testsEnabled: false,
       testScript: "// pw.expect('variable').toBe('value');",
       preRequestScript: "// pw.env.set('variable', 'value');",
+      testReports: null,
       copyButton: '<i class="material-icons">file_copy</i>',
       downloadButton: '<i class="material-icons">get_app</i>',
       doneButton: '<i class="material-icons">done</i>',
@@ -2202,8 +2218,8 @@ export default {
           body: this.response.body,
           headers: this.response.headers
         };
-        const testResults = runTestScriptWitVariables(this.testScript, {response: syntheticResponse});
+        const { testResults } = runTestScriptWitVariables(this.testScript, {response: syntheticResponse});
-        console.log('test results!! ', testResults)
+        this.testReports = testResults;
 
       } catch (error) {
         console.error(error);