From 163a514298e0e29de1efe4c6e8eab5301ad9e6d6 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Fri, 23 Jun 2017 10:14:28 -0700 Subject: [PATCH 1/8] reduce eslint warnings --- test/.eslintrc.js | 9 +++++++++ test/cli.js | 1 + test/expectations.js | 1 + test/fs.js | 1 + test/google-oauth.js | 2 ++ test/index.js | 1 + test/metrics.js | 1 + test/sheets.js | 1 + 8 files changed, 17 insertions(+) create mode 100644 test/.eslintrc.js diff --git a/test/.eslintrc.js b/test/.eslintrc.js new file mode 100644 index 0000000..4fd370f --- /dev/null +++ b/test/.eslintrc.js @@ -0,0 +1,9 @@ +module.exports = { + "extends": '../.eslintrc.js', + "globals": { + "expect": true, + "sinon": true, + "chai": true, + "sinonChai": true, + } +} diff --git a/test/cli.js b/test/cli.js index 41ffdfb..334f3ec 100644 --- a/test/cli.js +++ b/test/cli.js @@ -6,6 +6,7 @@ const path = require('path'); const childProcess = require('child_process'); const expect = require('chai').expect; +/* eslint-env mocha */ describe('CLI', function() { describe('url', () => { it('should throw error if a url is not provided by cli', () => { diff --git a/test/expectations.js b/test/expectations.js index ed8c6b3..2bd8653 100644 --- a/test/expectations.js +++ b/test/expectations.js @@ -7,6 +7,7 @@ const timings = require('./fixtures/metrics-results.json').timings; const normalizedExpectations = require('./fixtures/mocks').normalizedExpectations; const expectationsData = require('./fixtures/run-expectations').expectations; +/* eslint-env mocha */ describe('Expectations', () => { describe('checkExpectations', () => { let logSpy; diff --git a/test/fs.js b/test/fs.js index fcd5f70..cf01474 100644 --- a/test/fs.js +++ b/test/fs.js @@ -6,6 +6,7 @@ const {getConfigFromFile} = require('../lib/utils/fs'); const packageJSON = require('../package.json'); const expectations = require('./fixtures/run-expectations'); +/* eslint-env mocha */ describe('Config', () => { describe('validate input', () => { context('from package.json as default parameter', () => { diff --git a/test/google-oauth.js b/test/google-oauth.js index eefefbf..4ce16b1 100644 --- a/test/google-oauth.js +++ b/test/google-oauth.js @@ -9,6 +9,8 @@ const GoogleOauth = require('../lib/oauth/google-oauth'); const mocks = require('./fixtures/mocks'); +/* eslint-env mocha */ + const mockedOauth2Client = { generateAuthUrl() { return 'http://mocked.url'; diff --git a/test/index.js b/test/index.js index 0b1d59b..2196e61 100644 --- a/test/index.js +++ b/test/index.js @@ -6,6 +6,7 @@ const PWMetrics = require('../lib'); const runOptions = require('./fixtures/run-options'); const dataMocks = require('./fixtures/mocks'); +/* eslint-env mocha */ describe('PWMetrics', () => { describe('public variables', () => { it('should set class variables', () => { diff --git a/test/metrics.js b/test/metrics.js index 4c62442..8142833 100644 --- a/test/metrics.js +++ b/test/metrics.js @@ -7,6 +7,7 @@ const metrics = require('../lib/metrics'); const events = require('./fixtures/events.json'); const metricsResults = require('./fixtures/metrics-results.json'); +/* eslint-env mocha */ describe('Metrics', () => { describe('prepareData', () => { it('should prepare data', () => { diff --git a/test/sheets.js b/test/sheets.js index 3937882..1c2accc 100644 --- a/test/sheets.js +++ b/test/sheets.js @@ -7,6 +7,7 @@ const {getMessage} = require('../lib/utils/messages'); const runOptions = require('./fixtures/run-options'); +/* eslint-env mocha */ describe('Sheets', () => { let sheets; From e37b36e0feb8e0b37d9a3d8de2d773738a7d16ae Mon Sep 17 00:00:00 2001 From: Jem Young Date: Thu, 29 Jun 2017 00:49:51 -0700 Subject: [PATCH 2/8] Update readme (#126) * Update readme * Show `chromeFlags` as a usable feature flag * Add `options` example * Update readme to show lighthouse flag support --- readme.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 173ac9c..838c36d 100644 --- a/readme.md +++ b/readme.md @@ -115,6 +115,8 @@ module.exports = { upload: true, // turn on uploading to Google Drive view: true, // open uploaded traces to Google Drive in DevTools expectations: true // turn on assertation metrics results against provides values + chromeFlags: [] // custom flags to pass to Chrome. For a full list of flags, see http://peter.sh/experiments/chromium-command-line-switches/. + // Note: pwmetrics supports all flags from Lighthouse }, expectations: { // these expectations values are examples, for your cases set your own @@ -303,6 +305,19 @@ module.exports = { ```js const PWMetrics = require('pwmetrics'); +const options = { + flags: { + runs: '3', // number or runs + submit: true, // turn on submitting to Google Sheets + upload: true, // turn on uploading to Google Drive + view: true, // open uploaded traces to Google Drive in DevTools + expectations: true // turn on assertation metrics results against provides values + chromeFlags: [ + '--headless' // run in headless Chrome + ] + } +}; + const pwMetrics = new PWMetrics('http://example.com/', options); // _All available configuration options_ can be used as `options` pwMetrics.start(); // returns Promise @@ -321,7 +336,7 @@ pwMetrics.start(); // returns Promise - flags + flags* Object 
@@ -331,7 +346,8 @@ pwMetrics.start(); // returns Promise
   upload: false,
   view: false,
   expectations: false,
-  disableCpuThrottling: false
+  disableCpuThrottling: false,
+  chromeFlags: []
 }
@@ -361,6 +377,9 @@ pwMetrics.start(); // returns Promise +*pwmetrics supports all flags from Lighthouse. See [here](https://github.com/GoogleChrome/lighthouse/#cli-options) for the complete list. + + ### Recipes - [gulp](/recipes/gulp/gulpfile.js) From 095608ee4172d47473384a5b5401bff57c3385ce Mon Sep 17 00:00:00 2001 From: Will Mendes Date: Tue, 11 Jul 2017 08:24:06 +1000 Subject: [PATCH 3/8] ci: removing nodejs duplication --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 6fc82ec..8d0ee01 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,7 +2,6 @@ language: node_js matrix: include: - node_js: "6" - - node_js: "7" - node_js: "7" env: RUN_RECIPES=1 allow_failures: From e489e92ae76d7ee36852df75a03050b4d039ac1e Mon Sep 17 00:00:00 2001 From: Will Mendes Date: Tue, 11 Jul 2017 08:24:35 +1000 Subject: [PATCH 4/8] ci: removing progress in install tasks --- .travis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 8d0ee01..2929a1f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -13,9 +13,9 @@ cache: directories: - node_modules before_install: - - npm install -g yarn@v0.22.0 + - npm install -g --no-progress yarn@v0.22.0 install: - - yarn install + - yarn install --no-progress before_script: - export DISPLAY=:99.0 - export LIGHTHOUSE_CHROMIUM_PATH="$(pwd)/chrome-linux/chrome" From da99ff06569dc1bcc155c8171b133437bd299812 Mon Sep 17 00:00:00 2001 From: David Benson Date: Mon, 17 Jul 2017 18:24:42 +0100 Subject: [PATCH 5/8] Adds timeline viewer link to sheet output if files uploaded to drive https://chromedevtools.github.io/timeline-viewer/ --- lib/index.ts | 4 ++++ lib/metrics.ts | 2 ++ lib/sheets/index.ts | 10 +++++++++- types/types.ts | 2 ++ 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/index.ts b/lib/index.ts index 925ba98..e7a3b1e 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -174,6 +174,10 @@ class PWMetrics { if (this.flags.upload) { const driveResponse = await upload(data, this.clientSecret); + + preparedData.fileId = driveResponse.id; + preparedData.fileName = driveResponse.name; + this.view(driveResponse.id); } diff --git a/lib/metrics.ts b/lib/metrics.ts index 4a5160c..3512a2f 100644 --- a/lib/metrics.ts +++ b/lib/metrics.ts @@ -89,6 +89,8 @@ function prepareData(res: LighthouseResults): MetricsResults { }); return { + fileId: '', + fileName: '', timings, timestamps, generatedTime: res.generatedTime, diff --git a/lib/sheets/index.ts b/lib/sheets/index.ts index 263779e..82d5452 100644 --- a/lib/sheets/index.ts +++ b/lib/sheets/index.ts @@ -13,6 +13,7 @@ const metricsIds = require('../metrics').ids; const SHEET_TYPES = { 'GOOGLE_SHEETS': 'GOOGLE_SHEETS' }; +const VIEWER_URL_PREFIX = 'https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=drive://'; class Sheets { constructor(public config: SheetsConfig, public clientSecret: AuthorizeCredentials) { @@ -50,6 +51,12 @@ class Sheets { results.forEach(data => { const getTiming = (key: string) => data.timings.find(t => t.id === key).timing; const dateObj = new Date(data.generatedTime); + let viewerUrl = ''; + + if(typeof data.fileName !== 'undefined' && typeof data.fileName !== 'undefined') { + viewerUrl = VIEWER_URL_PREFIX + data.fileId; + } + // order matters valuesToAppend.push([ data.lighthouseVersion, @@ -62,7 +69,8 @@ class Sheets { getTiming(metricsIds.VC100), getTiming(metricsIds.TTFI), getTiming(metricsIds.TTCI), - getTiming(metricsIds.VC85) + getTiming(metricsIds.VC85), + viewerUrl ]); }); diff --git a/types/types.ts b/types/types.ts index 27a0373..6a399b3 100644 --- a/types/types.ts +++ b/types/types.ts @@ -35,6 +35,8 @@ interface FeatureFlags { } interface MetricsResults { + fileName: string, + fileId: string, timestamps: Timestamp[]; timings: Timing[]; generatedTime: string; From 757b5c30e75978fdbffbd3a5630e225e949aa474 Mon Sep 17 00:00:00 2001 From: David Benson Date: Wed, 19 Jul 2017 15:30:17 +0100 Subject: [PATCH 6/8] Correct file check in lib/sheets `data.fileName` not used now (was considering making it the link text) --- lib/sheets/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/sheets/index.ts b/lib/sheets/index.ts index 82d5452..bd4e3a7 100644 --- a/lib/sheets/index.ts +++ b/lib/sheets/index.ts @@ -53,7 +53,7 @@ class Sheets { const dateObj = new Date(data.generatedTime); let viewerUrl = ''; - if(typeof data.fileName !== 'undefined' && typeof data.fileName !== 'undefined') { + if(typeof data.fileId !== 'undefined') { viewerUrl = VIEWER_URL_PREFIX + data.fileId; } From cddb41241940044b82fdfc6465c871f3ef6f6dd0 Mon Sep 17 00:00:00 2001 From: David Benson Date: Wed, 19 Jul 2017 15:48:58 +0100 Subject: [PATCH 7/8] Timeline viewer link: Check upload flag is true before adding link --- lib/index.ts | 2 +- lib/sheets/index.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/index.ts b/lib/index.ts index e7a3b1e..68e541f 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -83,7 +83,7 @@ class PWMetrics { this.displayOutput(results.median); } else if (this.flags.submit) { const sheets = new Sheets(this.sheets, this.clientSecret); - await sheets.appendResults(results.runs); + await sheets.appendResults(results.runs, this.flags.upload); } } return results; diff --git a/lib/sheets/index.ts b/lib/sheets/index.ts index bd4e3a7..20737d2 100644 --- a/lib/sheets/index.ts +++ b/lib/sheets/index.ts @@ -39,21 +39,21 @@ class Sheets { } } - appendResults(results: Array) { + appendResults(results: Array, upload: boolean) { switch (this.config.type) { case SHEET_TYPES.GOOGLE_SHEETS: - return this.appendResultsToGSheets(results); + return this.appendResultsToGSheets(results, upload); } } - async appendResultsToGSheets(results: Array) { + async appendResultsToGSheets(results: Array, upload: boolean) { let valuesToAppend: Array = []; results.forEach(data => { const getTiming = (key: string) => data.timings.find(t => t.id === key).timing; const dateObj = new Date(data.generatedTime); let viewerUrl = ''; - if(typeof data.fileId !== 'undefined') { + if(upload && typeof data.fileId !== 'undefined') { viewerUrl = VIEWER_URL_PREFIX + data.fileId; } From a3bd4c73cc765b7d897befb842daf96b353282c0 Mon Sep 17 00:00:00 2001 From: David Benson Date: Fri, 4 Aug 2017 14:33:03 +0100 Subject: [PATCH 8/8] Modifications in response to change requests [WIP] Strip out uneeded changes from prior commits on this branch. Add `configIsSubmitAndUpload()` to lib/index.ts Pass that fn to Sheets class. Add null value `viwerUrl` to Metrics class return object to prevent undefined type errors in Sheets Update readme.md https://github.com/paulirish/pwmetrics/pull/131 --- lib/index.ts | 13 ++++++++++--- lib/metrics.ts | 4 ++-- lib/sheets/index.ts | 16 ++++++---------- readme.md | 2 ++ types/types.ts | 4 ++-- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/lib/index.ts b/lib/index.ts index 1b6c587..f3f1c50 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -96,8 +96,8 @@ class PWMetrics { console.log(messages.getMessage('MEDIAN_RUN')); this.displayOutput(results.median); } else if (this.flags.submit) { - const sheets = new Sheets(this.sheets, this.clientSecret); - await sheets.appendResults(results.runs, this.flags.upload); + const sheets = new Sheets(this.sheets, this.clientSecret, this.configIsSubmitAndUpload); + await sheets.appendResults(results.runs); } } @@ -207,7 +207,6 @@ class PWMetrics { const driveResponse = await upload(data, this.clientSecret); preparedData.fileId = driveResponse.id; - preparedData.fileName = driveResponse.name; this.view(driveResponse.id); } @@ -235,6 +234,14 @@ class PWMetrics { return data; } + configIsSubmitAndUpload = (data: MetricsResults) => { + if(this.flags.submit && this.flags.upload) { + data.viewerUrl = getTimelineViewerUrl(data.fileId); + } + + return data; + } + showChart(data: MetricsResults) { // reverse to preserve the order, because cli-chart. let timings = data.timings; diff --git a/lib/metrics.ts b/lib/metrics.ts index 3b586ba..a4e9a25 100644 --- a/lib/metrics.ts +++ b/lib/metrics.ts @@ -90,12 +90,12 @@ function prepareData(res: LighthouseResults): MetricsResults { return { fileId: '', - fileName: '', timings, timestamps, generatedTime: res.generatedTime, lighthouseVersion: res.lighthouseVersion, initialUrl: res.initialUrl, - url: res.url + url: res.url, + viewerUrl: null }; } diff --git a/lib/sheets/index.ts b/lib/sheets/index.ts index 20737d2..c2c9b28 100644 --- a/lib/sheets/index.ts +++ b/lib/sheets/index.ts @@ -13,10 +13,9 @@ const metricsIds = require('../metrics').ids; const SHEET_TYPES = { 'GOOGLE_SHEETS': 'GOOGLE_SHEETS' }; -const VIEWER_URL_PREFIX = 'https://chromedevtools.github.io/timeline-viewer/?loadTimelineFromURL=drive://'; class Sheets { - constructor(public config: SheetsConfig, public clientSecret: AuthorizeCredentials) { + constructor(public config: SheetsConfig, public clientSecret: AuthorizeCredentials, public configIsSubmitAndUpload: Function) { this.validateOptions(config, clientSecret); } @@ -39,23 +38,20 @@ class Sheets { } } - appendResults(results: Array, upload: boolean) { + appendResults(results: Array) { switch (this.config.type) { case SHEET_TYPES.GOOGLE_SHEETS: - return this.appendResultsToGSheets(results, upload); + return this.appendResultsToGSheets(results); } } - async appendResultsToGSheets(results: Array, upload: boolean) { + async appendResultsToGSheets(results: Array) { let valuesToAppend: Array = []; results.forEach(data => { const getTiming = (key: string) => data.timings.find(t => t.id === key).timing; const dateObj = new Date(data.generatedTime); - let viewerUrl = ''; - if(upload && typeof data.fileId !== 'undefined') { - viewerUrl = VIEWER_URL_PREFIX + data.fileId; - } + data = this.configIsSubmitAndUpload(data); // order matters valuesToAppend.push([ @@ -70,7 +66,7 @@ class Sheets { getTiming(metricsIds.TTFI), getTiming(metricsIds.TTCI), getTiming(metricsIds.VC85), - viewerUrl + data.viewerUrl ]); }); diff --git a/readme.md b/readme.md index 151f62f..2d40524 100644 --- a/readme.md +++ b/readme.md @@ -268,6 +268,8 @@ Show Lighthouse traces in timeline-viewer. [timeline-viewer](https://chromedevtools.github.io/timeline-viewer/) - Shareable URLs for your Chrome DevTools Timeline traces. +If both upload and submit flags are set, a link to the viewer for each result trace will be added to the Notes column of the sheet. This is particularly useful when multiple runs have been stored, as otherwise it is dificult to view the trace for any given run. + ```sh # run pwmetrics with config in package.json diff --git a/types/types.ts b/types/types.ts index 7f8d21a..73fdddb 100644 --- a/types/types.ts +++ b/types/types.ts @@ -31,12 +31,11 @@ interface FeatureFlags { expectations: Boolean; output: Boolean; chromeFlags: Array; - chromePath?: string + chromePath?: string; port?: number; } interface MetricsResults { - fileName: string, fileId: string, timestamps: Timestamp[]; timings: Timing[]; @@ -44,6 +43,7 @@ interface MetricsResults { lighthouseVersion: string; url: string; initialUrl: string; + viewerUrl?: string; } interface PWMetricsResults {