implemented html streaming (#50)

* implemented html streaming

Author: AlexGalichenko

CHANGELOG.MD

@@ -1,3 +1,6 @@
+# 0.17.0
+- implemented runtime streaming
+
 # 0.16.0
 - added dark theme
 

formatter/formatter.js

@@ -1,18 +1,99 @@
-const JsonFormatter = require('./json_formatter');
-const fs = require('fs');
-const path = require('path');
-class HTMLFormatter extends JsonFormatter {
+const { Formatter } = require('@cucumber/cucumber');
+const { write, readFileSync } = require('node:fs');
+const path = require('node:path');
+
+class HTMLStream {
+
+    constructor(fd, ender) {
+        this.fd = fd;
+        this.position = 0;
+        this.ender = Buffer.from(ender);
+    }
+
+    write(data) {
+        const dataBuffer = Buffer.from(data);
+        const buffer = Buffer.concat([dataBuffer, this.ender]);
+        write(this.fd, buffer, 0, buffer.length, this.position, () => {});
+        this.position += dataBuffer.length;
+    }
+
+}
+
+class HTMLFormatter extends Formatter {
+
+    hooks = {};
 
     constructor(options) {
         super(options);
-        this.metadata = options.parsedArgvOptions.htmlConfig?.metadata ?? {};
-        const log = this.log.bind(this);
-        this.log = function(json) {
-            const htmlTemplate = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8');
-            log(htmlTemplate
-                .replace('METADATA', () => JSON.stringify(this.metadata))
-                .replace('SOURCE_DATA', () => JSON.stringify(JSON.parse(json))));
+        const metadata = JSON.stringify(options.parsedArgvOptions.htmlConfig?.metadata ?? {});
+        const htmlTemplate = readFileSync(path.resolve(__dirname, './index.html'), 'utf-8')
+            .replace('METADATA', metadata);
+        const [left, right] = htmlTemplate.split('SOURCE_DATA');
+        this.htmlStream = new HTMLStream(this.stream.fd, right);
+        this.htmlStream.write(left);
+        options.eventBroadcaster.on('envelope', this.processEnvelope.bind(this));
+    }
+
+    processEnvelope(envelope) {
+        if (envelope.testCaseFinished) {
+            return this.finishTest(envelope);
+        }
+        if (envelope.hook) {
+            return this.hooks[envelope.hook.id] = envelope.hook;
+        }
+    }
+
+    finishTest(envelope) {
+        if (envelope.testCaseFinished.willBeRetried) return;
+        const testCase = this.eventDataCollector.getTestCaseAttempt(envelope.testCaseFinished.testCaseStartedId);
+        const feature = {
+            description: testCase.gherkinDocument.feature.description,
+            id: 'feature' + testCase.pickle.id,
+            line: testCase.gherkinDocument.feature.location.line,
+            keyword: testCase.gherkinDocument.feature.keyword,
+            name: testCase.gherkinDocument.feature.name,
+            uri: testCase.gherkinDocument.uri,
+            tags: this.formatTags(testCase.gherkinDocument.feature.tags)
+        };
+
+        const steps = testCase.testCase.testSteps;
+        for (const step of steps) {
+            const pickle = testCase.pickle.steps.find(pickle => step.pickleStepId === pickle.id);
+            step.name = pickle ? pickle.text : this.hookText(steps, step);
+            step.arguments = pickle ? [{ ...(pickle.argument?.dataTable ?? pickle.argument?.docString) }] : undefined;
+            const result = testCase.stepResults[step.id];
+            step.result = {
+                status: result.status.toLowerCase(),
+                duration: result.duration.seconds * 1_000_000_000 + result.duration.nanos,
+                error_message: result.message
+            };
+            step.embeddings = testCase.stepAttachments[step.id]?.map(attachment => ({
+                ...attachment,
+                data: attachment.body,
+                mime_type: attachment.mediaType
+            }));
         }
+        const scenario = {
+            feature,
+            steps,
+            name: testCase.pickle.name,
+            id: testCase.pickle.id,
+            keyword: 'Scenario',
+            tags: this.formatTags(testCase.pickle.tags),
+            type: 'scenario'
+        };
+        this.htmlStream.write(JSON.stringify(scenario) + ',');
+    }
+
+    formatTags(tags) {
+        return tags.map(tag => ({ name: tag.name, line: tag.location?.line }));
+    }
+
+    hookText(steps, step) {
+        const hook = this.hooks[step.hookId];
+        if (hook?.name) return hook.name;
+        const stepsBefore = steps.slice(0, steps.findIndex((element) => element === step));
+        return stepsBefore.every(element => element.pickleStepId === undefined) ? 'Before' : 'After';
     }
 
 }

formatter/json_formatter.js

@@ -1,4 +1,5 @@
 const { Formatter } = require('@cucumber/cucumber');
+
 class JsonFormatter extends Formatter {
 
     constructor(options) {
@@ -22,26 +23,22 @@ class JsonFormatter extends Formatter {
     finishTest(envelope) {
         if (envelope.testCaseFinished.willBeRetried) return;
         const testCase = this.eventDataCollector.getTestCaseAttempt(envelope.testCaseFinished.testCaseStartedId);
-        let feature = this.json.find(feature => feature.name === testCase.gherkinDocument.feature.name);
-        if (!feature) {
-            feature = {
-                description: testCase.gherkinDocument.feature.description,
-                id: 'feature' + testCase.pickle.id,
-                line: testCase.gherkinDocument.feature.location.line,
-                keyword: testCase.gherkinDocument.feature.keyword,
-                name: testCase.gherkinDocument.feature.name,
-                uri: testCase.gherkinDocument.uri,
-                elements: [],
-                tags: this.formatTags(testCase.gherkinDocument.feature.tags)
-            };
-            this.json.push(feature);
-        }
+        const feature = {
+            description: testCase.gherkinDocument.feature.description,
+            id: 'feature' + testCase.pickle.id,
+            line: testCase.gherkinDocument.feature.location.line,
+            keyword: testCase.gherkinDocument.feature.keyword,
+            name: testCase.gherkinDocument.feature.name,
+            uri: testCase.gherkinDocument.uri,
+            elements: [],
+            tags: this.formatTags(testCase.gherkinDocument.feature.tags)
+        };
         const steps = testCase.testCase.testSteps;
         for (const step of steps) {
             const pickle = testCase.pickle.steps.find(pickle => step.pickleStepId === pickle.id);
             step.name = pickle ? pickle.text : this.hookText(steps, step);
             step.arguments = pickle ? [{ ...(pickle.argument?.dataTable ?? pickle.argument?.docString) }] : undefined;
-            const result= testCase.stepResults[step.id];
+            const result = testCase.stepResults[step.id];
             step.result = {
                 status: result.status.toLowerCase(),
                 duration: result.duration.seconds * 1_000_000_000 + result.duration.nanos,
@@ -55,28 +52,29 @@ class JsonFormatter extends Formatter {
         }
         const scenario = {
             steps,
+            feature,
             name: testCase.pickle.name,
             id: testCase.pickle.id,
             keyword: 'Scenario',
             tags: this.formatTags(testCase.pickle.tags),
             type: 'scenario'
-        }
-        feature.elements.push(scenario);
+        };
+        this.json.push(scenario);
     }
 
     finishLaunch() {
-        this.log(JSON.stringify(this.json, null, 2))
+        this.log(JSON.stringify(this.json, null, 2));
     }
 
     formatTags(tags) {
-        return tags.map(tag => ({ name: tag.name, line: tag.location?.line }))
+        return tags.map(tag => ({ name: tag.name, line: tag.location?.line }));
     }
 
     hookText(steps, step) {
         const hook = this.hooks[step.hookId];
         if (hook?.name) return hook.name;
         const stepsBefore = steps.slice(0, steps.findIndex((element) => element === step));
-        return stepsBefore.every(element => element.pickleStepId === undefined) ? 'Before' : 'After'
+        return stepsBefore.every(element => element.pickleStepId === undefined) ? 'Before' : 'After';
     }
 }
 

index.html

@@ -10,7 +10,7 @@
     <div id="root"></div>
   <script>
     window.metaSourceData = METADATA;
-    window.sourceData = SOURCE_DATA;
+    window.sourceData = [SOURCE_DATA];
   </script>
   <script type="module" src="/src/index.tsx"></script>
   </body>