@cucumber/html-formatter 13.0.0 → 15.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cucumber/html-formatter",
-  "version": "13.0.0",
+  "version": "15.0.2",
   "description": "HTML formatter for Cucumber",
   "bin": {
     "cucumber-html-formatter": "bin/cucumber-html-formatter.js"
@@ -18,31 +18,34 @@
     "prepublishOnly": "tsc --build tsconfig.build.json"
   },
   "dependencies": {
-    "@cucumber/messages": "^15.0.0",
-    "commander": "^7.2.0",
-    "source-map-support": "^0.5.19"
+    "@cucumber/messages": "^16.0.1",
+    "commander": "7.2.0",
+    "source-map-support": "0.5.19"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.14",
-    "@cucumber/gherkin-utils": "^4.0.0",
-    "@cucumber/query": "^9.0.2",
-    "@cucumber/react": "^13.0.0",
-    "@cucumber/gherkin-streams": "^1.0.0",
-    "@cucumber/message-streams": "^1.0.0",
-    "@types/mocha": "^8.2.2",
-    "@types/node": "^14.14.37",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "babel-loader": "^8.2.2",
-    "mocha": "^8.3.2",
-    "puppeteer": "^8.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "ts-loader": "^8.1.0",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.3",
-    "webpack": "^5.30.0",
-    "webpack-cli": "^4.6.0"
+    "@babel/core": "7.14.3",
+    "@cucumber/gherkin-streams": "^2.0.2",
+    "@cucumber/gherkin-utils": "^5.1.0",
+    "@cucumber/message-streams": "^2.0.0",
+    "@cucumber/query": "^10.0.0",
+    "@cucumber/react": "^16.1.0",
+    "@types/mocha": "8.2.2",
+    "@types/node": "15.6.1",
+    "@types/react": "17.0.8",
+    "@types/react-dom": "17.0.5",
+    "babel-loader": "8.2.2",
+    "css-loader": "5.2.6",
+    "mini-css-extract-plugin": "1.6.0",
+    "mocha": "8.4.0",
+    "puppeteer": "9.1.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "sass-loader": "11.1.1",
+    "ts-loader": "9.2.2",
+    "ts-node": "10.0.0",
+    "typescript": "4.3.2",
+    "webpack": "5.37.1",
+    "webpack-cli": "4.7.0"
   },
   "bugs": {
     "url": "https://github.com/cucumber/cucumber/issues"

package/src/CucumberHtmlStream.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import { Readable, Transform, TransformCallback } from 'stream'
-import { messages } from '@cucumber/messages'
+import * as messages from '@cucumber/messages'
 
 export default class CucumberHtmlStream extends Transform {
   private template: string | null = null
@@ -104,6 +104,6 @@ export default class CucumberHtmlStream extends Transform {
     } else {
       this.push(',')
     }
-    this.push(JSON.stringify(envelope.toJSON()))
+    this.push(JSON.stringify(envelope))
   }
 }

package/src/cli-main.ts

@@ -1,26 +1,17 @@
-import { messages } from '@cucumber/messages'
-import { BinaryToMessageStream, NdjsonToMessageStream } from '@cucumber/message-streams'
+import { NdjsonToMessageStream } from '@cucumber/message-streams'
 import program from 'commander'
 import p from '../package.json'
 import { pipeline } from 'stream'
 import CucumberHtmlStream from './CucumberHtmlStream'
 
 program.version(p.version)
-program.option('-f, --format <format>', 'output format: ndjson|protobuf', 'protobuf')
 program.parse(process.argv)
 
-const toMessageStream =
-  program.opts().format === 'ndjson'
-    ? new NdjsonToMessageStream(messages.Envelope.fromObject.bind(messages.Envelope))
-    : new BinaryToMessageStream(messages.Envelope.decodeDelimited.bind(messages.Envelope))
-
+const toMessageStream = new NdjsonToMessageStream()
 pipeline(
   process.stdin,
   toMessageStream,
-  new CucumberHtmlStream(
-    __dirname + '/../../dist/cucumber-react.css',
-    __dirname + '/../../dist/main.js'
-  ),
+  new CucumberHtmlStream(__dirname + '/../../dist/main.css', __dirname + '/../../dist/main.js'),
   process.stdout,
   (err: any) => {
     if (err) {

package/src/main.tsx

@@ -1,4 +1,4 @@
-import { messages } from '@cucumber/messages'
+import * as messages from '@cucumber/messages'
 import { QueriesWrapper, EnvelopesQuery, FilteredResults } from '@cucumber/react'
 import { Query as GherkinQuery } from '@cucumber/gherkin-utils'
 import { Query as CucumberQuery } from '@cucumber/query'
@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom'
 
 declare global {
   interface Window {
-    CUCUMBER_MESSAGES: messages.IEnvelope[]
+    CUCUMBER_MESSAGES: messages.Envelope[]
   }
 }
 
@@ -15,8 +15,7 @@ const gherkinQuery = new GherkinQuery()
 const cucumberQuery = new CucumberQuery()
 const envelopesQuery = new EnvelopesQuery()
 
-for (const envelopeObject of window.CUCUMBER_MESSAGES) {
-  const envelope = messages.Envelope.fromObject(envelopeObject)
+for (const envelope of window.CUCUMBER_MESSAGES as messages.Envelope[]) {
   gherkinQuery.update(envelope)
   cucumberQuery.update(envelope)
   envelopesQuery.update(envelope)

package/test/CucumberHtmlStreamTest.ts

@@ -1,9 +1,9 @@
-import { messages } from '@cucumber/messages'
+import * as messages from '@cucumber/messages'
 import CucumberHtmlStream from '../src/CucumberHtmlStream'
 import { Writable } from 'stream'
 import assert from 'assert'
 
-async function renderAsHtml(...envelopes: messages.IEnvelope[]): Promise<string> {
+async function renderAsHtml(...envelopes: messages.Envelope[]): Promise<string> {
   return new Promise((resolve, reject) => {
     let html = ''
     const sink: Writable = new Writable({
@@ -34,25 +34,30 @@ describe('CucumberHtmlStream', () => {
   })
 
   it('writes one message to html', async () => {
-    const e1 = messages.Envelope.create({
-      testRunStarted: messages.TestRunStarted.create({}),
-    })
+    const e1: messages.Envelope = {
+      testRunStarted: {
+        timestamp: { seconds: 0, nanos: 0 },
+      },
+    }
     const html = await renderAsHtml(e1)
-    assert(html.indexOf(`window.CUCUMBER_MESSAGES = [${JSON.stringify(e1.toJSON())}]`) >= 0)
+    assert(html.indexOf(`window.CUCUMBER_MESSAGES = [${JSON.stringify(e1)}]`) >= 0)
   })
 
   it('writes two messages to html', async () => {
-    const e1 = messages.Envelope.create({
-      testRunStarted: messages.TestRunStarted.create({}),
-    })
-    const e2 = messages.Envelope.create({
-      testRunFinished: messages.TestRunFinished.create({}),
-    })
+    const e1: messages.Envelope = {
+      testRunStarted: {
+        timestamp: { seconds: 0, nanos: 0 },
+      },
+    }
+    const e2: messages.Envelope = {
+      testRunFinished: {
+        timestamp: { seconds: 0, nanos: 0 },
+        success: true,
+      },
+    }
     const html = await renderAsHtml(e1, e2)
     assert(
-      html.indexOf(
-        `window.CUCUMBER_MESSAGES = [${JSON.stringify(e1.toJSON())},${JSON.stringify(e2.toJSON())}]`
-      ) >= 0
+      html.indexOf(`window.CUCUMBER_MESSAGES = [${JSON.stringify(e1)},${JSON.stringify(e2)}]`) >= 0
     )
   })
 })

package/webpack.config.js

@@ -1,3 +1,29 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 module.exports = {
   entry: './dist/src/main.js',
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                auto: true
+              }
+            }
+          },
+          'sass-loader'
+        ],
+      }
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'main.css'
+    })
+  ]
 };

package/dist/cucumber-react.css

@@ -1,291 +0,0 @@
-.cucumber-react .cucumber-status--passed {
-  color: #2CB14A;
-}
-.cucumber-react .cucumber-status--skipped {
-  color: #00A0CC;
-}
-.cucumber-react .cucumber-status--pending {
-  color: #FFAD33;
-}
-.cucumber-react .cucumber-status--undefined {
-  color: #FFAD33;
-}
-.cucumber-react .cucumber-status--ambiguous {
-  color: #F4EBFD;
-}
-.cucumber-react .cucumber-status--failed {
-  color: #BB0000;
-}
-.cucumber-react .cucumber-status--unknown {
-  color: #B6BECB;
-}
-.cucumber-react h1, .cucumber-react h2, .cucumber-react h3 {
-  padding: 0;
-  margin: 0;
-}
-.cucumber-react a {
-  color: inherit;
-}
-.cucumber-react .gherkin-document-list {
-  font: 14px "Open Sans", sans-serif;
-  color: #161C24;
-  background: #fff;
-  overflow-x: hidden;
-}
-.cucumber-react .cucumber-title {
-  margin-top: 0.3em;
-  margin-bottom: 0;
-  display: inline-block;
-}
-.cucumber-react .cucumber-title__keyword {
-  font-weight: bold;
-}
-.cucumber-react .cucumber-title__text {
-  font-weight: normal;
-}
-.cucumber-react .cucumber-tags {
-  padding: 0;
-  margin-bottom: 0;
-}
-.cucumber-react .cucumber-tags .cucumber-tag {
-  display: inline;
-  list-style-type: none;
-  padding: 4px 8px 4px 8px;
-  margin-right: 6px;
-  background-color: #FFFFFF;
-  border-radius: 6px;
-}
-.cucumber-react .cucumber-feature__icon {
-  padding-top: 0.35em;
-  padding-right: 0.5em;
-}
-.cucumber-react .cucumber-description,
-.cucumber-react .cucumber-children {
-  margin-left: 1em;
-}
-.cucumber-react .cucumber-feature,
-.cucumber-react .cucumber-rule,
-.cucumber-react .cucumber-scenario,
-.cucumber-react .cucumber-background {
-  margin-bottom: 1em;
-}
-.cucumber-react .cucumber-steps {
-  list-style-type: none;
-  padding-left: 10px;
-}
-.cucumber-react .cucumber-steps .cucumber-step {
-  display: flex;
-}
-.cucumber-react .cucumber-steps .cucumber-step__status {
-  padding-top: 0.2em;
-  padding-right: 0.5em;
-}
-.cucumber-react .cucumber-steps .cucumber-step__content {
-  flex-grow: 1;
-  max-width: calc(100% - 1.5em);
-}
-.cucumber-react .cucumber-steps .cucumber-step__keyword {
-  font-weight: bold;
-}
-.cucumber-react .cucumber-steps .cucumber-step__text {
-  font-weight: normal;
-}
-.cucumber-react .cucumber-steps .cucumber-step__param {
-  font-weight: normal;
-  font-style: italic;
-}
-.cucumber-react .cucumber-table {
-  border-collapse: collapse;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-.cucumber-react .cucumber-table__header-cell {
-  border: 1px solid #4B5662;
-  padding: 0.3em;
-}
-.cucumber-react .cucumber-table__cell {
-  border: 1px solid #4B5662;
-  padding: 0.3em;
-}
-.cucumber-react .cucumber-table__cell__status {
-  padding: 0.5em 3px 3px 3px;
-}
-.cucumber-react .cucumber-table__cell__step {
-  flex-grow: 1;
-}
-.cucumber-react .cucumber-code {
-  padding: 0.25em;
-  background-color: #ebebeb;
-}
-.cucumber-react .cucumber-error {
-  padding: 0.5em;
-  margin: 0;
-  overflow-x: auto;
-}
-.cucumber-react .cucumber-no-documents {
-  font: 14px "Open Sans", sans-serif;
-}
-.cucumber-react .cucumber-attachment__icon {
-  margin-right: 0.5em;
-}
-.cucumber-react .cucumber-attachment__image {
-  max-width: 100%;
-  margin-top: 1em;
-}
-.cucumber-react .cucumber-attachment__text {
-  background-color: #ebebeb;
-  padding: 0.5em;
-  overflow-x: auto;
-}
-.cucumber-react .cucumber-anchor {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-top: 0.3em;
-}
-.cucumber-react .cucumber-anchor__link {
-  opacity: 0;
-  transition: all 0.35s ease-in-out;
-  position: absolute;
-  left: -20px;
-  display: flex;
-  align-items: center;
-}
-.cucumber-react .cucumber-anchor__icon {
-  margin-right: 0.5em;
-}
-.cucumber-react .cucumber-anchor:hover a {
-  opacity: 1;
-  width: max-content;
-  transition: all 0.35s ease-in-out;
-}
-.cucumber-react .cucumber-anchor > * {
-  height: 100%;
-  margin-top: 0px;
-}
-
-.cucumber-report-header {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  font: 11px "Open Sans", sans-serif;
-  margin-bottom: 1em;
-}
-.cucumber-report-header > * {
-  padding: 1em;
-}
-.cucumber-report-header .cucumber-status-filter {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.cucumber-report-header .cucumber-status-filter table {
-  width: 100%;
-}
-.cucumber-report-header .cucumber-execution-data {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.cucumber-report-header .cucumber-search-bar {
-  border-right: 0;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-search {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 9fr 1fr;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-search input {
-  padding: 0.4em;
-  border-radius: 0;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-search button {
-  height: 2.2em;
-  padding-left: 0.6em;
-  padding-right: 0.6em;
-}
-.cucumber-report-header .cucumber-search-bar p.help {
-  font-size: 80%;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul {
-  display: inline;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul li {
-  list-style-type: none;
-  display: inline-block;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul li input {
-  display: inline-block;
-  width: auto;
-  height: 0.6em;
-}
-.cucumber-report-header .cucumber-search-bar form.cucumber-search-bar-filter ul li label {
-  padding-right: 1em;
-}
-
-@media only screen and (min-width: 600px) {
-  .cucumber-report-header {
-    grid-template-columns: 1fr 1fr;
-  }
-  .cucumber-report-header .cucumber-status-filter {
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .cucumber-report-header .cucumber-search-bar {
-    grid-column: 1/-1;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .cucumber-report-header {
-    grid-template-columns: 1fr 1fr 2fr;
-  }
-  .cucumber-report-header .cucumber-status-filter {
-    border-bottom: 0;
-  }
-  .cucumber-report-header .cucumber-execution-data {
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 0;
-  }
-  .cucumber-report-header .cucumber-search-bar {
-    grid-column: auto;
-  }
-}
-.accordion {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 2px;
-}
-
-.accordion__item + .accordion__item {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.accordion__button {
-    background-color: #f4f4f4;
-    color: #444;
-    cursor: pointer;
-    padding: 10px;
-    width: 100%;
-    text-align: left;
-    border: none;
-}
-
-.accordion__button:hover {
-    background-color: #ddd;
-}
-
-.accordion__button:before {
-    display: inline-block;
-    content: '';
-    height: 10px;
-    width: 10px;
-    margin-right: 12px;
-    border-bottom: 2px solid currentColor;
-    border-right: 2px solid currentColor;
-    transform: rotate(-45deg);
-}
-
-.accordion__button[aria-expanded='true']::before,
-.accordion__button[aria-selected='true']::before {
-    transform: rotate(45deg);
-}
-
-.accordion__panel {
-    padding: 20px;
-    animation: fadein 0.35s ease-in;
-}