Merge pull request #57 from calibreapp/conditional-test-formatting

Only display metrics if available

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.0.1 - 2019-05-17
+
+- Fixed test output to only display metric if available
+
 ### 2.0.0 - 2019-04-30
 
 - Added `calibre site deploys` command.

__tests__/fixtures/incompleteTest.json

@@ -0,0 +1,190 @@
+{
+  "uuid": "b3baaa1",
+  "url": "https://calibreapp.com",
+  "formattedTestUrl": "https://calibreapp.com/tests/b3baaa1/1fe9862",
+  "status": "completed",
+  "updatedAt": "2019-04-26T05:09:26Z",
+  "adBlockerIsEnabled": false,
+  "runtimeError": {
+    "code": "NO_ERROR",
+    "message": ""
+  },
+  "metrics": [
+    {
+      "name": "json_body_size_in_bytes",
+      "label": "Total JSON size in bytes",
+      "value": 13712
+    },
+    {
+      "name": "json_size_in_bytes",
+      "label": "Total JSON transferred",
+      "value": 10901
+    },
+    {
+      "name": "image_body_size_in_bytes",
+      "label": "Total Image size in bytes",
+      "value": 320962
+    },
+    {
+      "name": "image_size_in_bytes",
+      "label": "Total Image transferred",
+      "value": 118615
+    },
+    {
+      "name": "font_body_size_in_bytes",
+      "label": "Total Webfont size in bytes",
+      "value": 110125
+    },
+    {
+      "name": "font_size_in_bytes",
+      "label": "Total Webfont transferred",
+      "value": 111496
+    },
+    {
+      "name": "js_body_size_in_bytes",
+      "label": "Total JavaScript size in bytes",
+      "value": 2118815
+    },
+    {
+      "name": "js_size_in_bytes",
+      "label": "Total JavaScript Transferred",
+      "value": 510192
+    },
+    {
+      "name": "css_body_size_in_bytes",
+      "label": "Total CSS size in bytes",
+      "value": 75788
+    },
+    {
+      "name": "css_size_in_bytes",
+      "label": "Total CSS transferred",
+      "value": 17073
+    },
+    {
+      "name": "html_body_size_in_bytes",
+      "label": "Total HTML size in bytes",
+      "value": 24367
+    },
+    {
+      "name": "html_size_in_bytes",
+      "label": "Total HTML transferred",
+      "value": 10258
+    },
+    {
+      "name": "page_wait_timing",
+      "label": "Response time",
+      "value": 64
+    },
+    {
+      "name": "page_body_size_in_bytes",
+      "label": "Total Page size in bytes",
+      "value": 2665469
+    },
+    {
+      "name": "onload",
+      "label": "onLoad",
+      "value": 798
+    },
+    {
+      "name": "oncontentload",
+      "label": "onContentLoad",
+      "value": 271
+    },
+    {
+      "name": "lighthouse-seo-score",
+      "label": "Lighthouse SEO Score",
+      "value": 100
+    },
+    {
+      "name": "lighthouse-best-practices-score",
+      "label": "Lighthouse Best Practices Score",
+      "value": 93
+    },
+    {
+      "name": "lighthouse-accessibility-score",
+      "label": "Lighthouse Accessibility Score",
+      "value": 76
+    },
+    {
+      "name": "lighthouse-pwa-score",
+      "label": "Lighthouse Progressive Web App Score",
+      "value": 68
+    },
+    {
+      "name": "js-parse-compile",
+      "label": "JS Parse & Compile",
+      "value": 121
+    },
+    {
+      "name": "dom-size",
+      "label": "DOM Element Count",
+      "value": 324
+    },
+    {
+      "name": "visually_complete_85",
+      "label": "85% Visually Complete",
+      "value": 276
+    },
+    {
+      "name": "visually_complete",
+      "label": "Visually Complete",
+      "value": 1475
+    },
+    {
+      "name": "consistently-interactive",
+      "label": "Time to Interactive",
+      "value": 1319
+    },
+    {
+      "name": "first-interactive",
+      "label": "First CPU Idle",
+      "value": 1319
+    },
+    {
+      "name": "time-to-first-byte",
+      "label": "Time to First Byte",
+      "value": 41
+    },
+    {
+      "name": "estimated-input-latency",
+      "label": "Estimated input latency",
+      "value": 16
+    },
+    {
+      "name": "speed_index",
+      "label": "Speed Index",
+      "value": 263
+    },
+    {
+      "name": "first-meaningful-paint",
+      "label": "First Meaningful Paint",
+      "value": 191
+    },
+    {
+      "name": "first-contentful-paint",
+      "label": "First Contentful Paint",
+      "value": 191
+    },
+    {
+      "name": "firstRender",
+      "label": "First Paint",
+      "value": 191
+    },
+    {
+      "name": "test-duration",
+      "label": "translation missing: en.metrics.test-duration.human",
+      "value": 9584
+    },
+    {
+      "name": "benchmark-index",
+      "label": "translation missing: en.metrics.benchmark-index.human",
+      "value": 1396
+    }
+  ],
+  "device": null,
+  "connection": null,
+  "location": {
+    "name": "North Virginia, USA",
+    "emoji": "🇺🇸"
+  }
+}

__tests__/views/__snapshots__/test.test.js.snap

@@ -31,6 +31,7 @@ Time to Interactive
 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 1.32 sec
 
 Number of requests: 44
+
 Total Page transferred: 764.17 KB
 
 View the full report https://calibreapp.com/tests/b3baaa1/1fe9862
@@ -50,6 +51,44 @@ exports[`test errored 1`] = `
     "
 `;
 
+exports[`test incomplete 1`] = `
+"
+https://calibreapp.com on Chrome Desktop
+🇺🇸  North Virginia, USA
+
+5:09am 26-Apr-2019
+
+Overall scores
+
+CATEGORY            | SCORE
+Performance         |   N/A
+Best Practices      |    93
+Accessibility       |    76
+SEO                 |   100
+Progressive Web App |    68
+
+Timing
+
+Time to First Byte
+■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 41 ms
+
+Response time
+■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 64 ms
+
+First Contentful Paint
+■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 191 ms
+
+Time to Interactive
+■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 1.32 sec
+
+Asset count metric not available.
+
+Page size in bytes metric not available.
+
+View the full report https://calibreapp.com/tests/b3baaa1/1fe9862
+  "
+`;
+
 exports[`test timeout 1`] = `
 "
 https://calibreapp.com on Chrome Desktop

__tests__/views/test.test.js

@@ -3,6 +3,7 @@ const formatTest = require('../../src/views/test')
 const completedTest = require('../fixtures/completedTest.json')
 const erroredTest = require('../fixtures/erroredTest.json')
 const timeoutTest = require('../fixtures/timeoutTest.json')
+const incompleteTest = require('../fixtures/incompleteTest.json')
 
 describe('test', () => {
   it('completed', () => {
@@ -19,4 +20,9 @@ describe('test', () => {
     const formattedTest = formatTest(timeoutTest)
     expect(formattedTest).toMatchSnapshot()
   })
+
+  it('incomplete', () => {
+    const formattedTest = formatTest(incompleteTest)
+    expect(formattedTest).toMatchSnapshot()
+  })
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "calibre",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "engines": {
     "node": "> 8.15.0"
   },

src/utils/formatters/grade-score.js

@@ -4,4 +4,5 @@ module.exports = score => {
   if (score >= 90) return chalk.green.bold(score)
   if (score > 50 && score < 90) return chalk.yellow.bold(score)
   if (score <= 50) return chalk.red.bold(score)
+  return 'N/A'
 }

src/views/grade-table.js

@@ -2,42 +2,53 @@ const columnify = require('columnify')
 const { gradeFormatter } = require('../utils/formatters')
 
 const table = measurements => {
-  const perf = measurements
-    .find(metric => metric.name === 'lighthouse-performance-score')
-    .value.toFixed()
-  const bp = measurements
-    .find(metric => metric.name === 'lighthouse-best-practices-score')
-    .value.toFixed()
-  const accessibility = measurements
-    .find(metric => metric.name === 'lighthouse-accessibility-score')
-    .value.toFixed()
-  const seo = measurements
-    .find(metric => metric.name === 'lighthouse-seo-score')
-    .value.toFixed()
-  const pwa = measurements
-    .find(metric => metric.name === 'lighthouse-pwa-score')
-    .value.toFixed()
+  const perfMetric = measurements.find(
+    metric => metric.name === 'lighthouse-performance-score'
+  )
+  const perfScore = perfMetric && perfMetric.value.toFixed()
+
+  const bestPracticesMetric = measurements.find(
+    metric => metric.name === 'lighthouse-best-practices-score'
+  )
+  const bestPracticesScore =
+    bestPracticesMetric && bestPracticesMetric.value.toFixed()
+
+  const accessibilityMetric = measurements.find(
+    metric => metric.name === 'lighthouse-accessibility-score'
+  )
+  const accessibilityScore =
+    accessibilityMetric && accessibilityMetric.value.toFixed()
+
+  const seoMetric = measurements.find(
+    metric => metric.name === 'lighthouse-seo-score'
+  )
+  const seoScore = seoMetric && seoMetric.value.toFixed()
+
+  const pwaMetric = measurements.find(
+    metric => metric.name === 'lighthouse-pwa-score'
+  )
+  const pwaScore = pwaMetric && pwaMetric.value.toFixed()
 
   const rows = [
     {
       category: 'Performance',
-      score: gradeFormatter(perf)
+      score: gradeFormatter(perfScore)
     },
     {
       category: 'Best Practices',
-      score: gradeFormatter(bp)
+      score: gradeFormatter(bestPracticesScore)
     },
     {
       category: 'Accessibility',
-      score: gradeFormatter(accessibility)
+      score: gradeFormatter(accessibilityScore)
     },
     {
       category: 'SEO',
-      score: gradeFormatter(seo)
+      score: gradeFormatter(seoScore)
     },
     {
       category: 'Progressive Web App',
-      score: gradeFormatter(pwa)
+      score: gradeFormatter(pwaScore)
     }
   ]