{"action":"created","comment":{"url":"https://api.github.com/repos/material-components/material-components-web-react/pulls/comments/176575980","pull_request_review_id":106300540,"id":176575980,"diff_hunk":"@@ -1,60 +1,220 @@\n+import {Readable} from 'stream';\n+import {createHash} from 'crypto';\n+import {readFile, writeFile} from 'fs';\n+import {promisify} from 'util';\n import puppeteer from 'puppeteer';\n import compareImages from 'resemblejs/compareImages';\n-import {promisify} from 'util';\n-import {readFile, writeFile} from 'fs';\n import {assert} from 'chai';\n+import Storage from '@google-cloud/storage';\n \n import comparisonOptions from './screenshot-comparison-options';\n \n const readFilePromise = promisify(readFile);\n const writeFilePromise = promisify(writeFile);\n \n+const SERVICE_ACCOUNT_KEY = process.env.SERVICE_ACCOUNT_KEY;\n+const BRANCH_NAME = process.env.BRANCH_NAME;\n+const COMMIT_HASH = process.env.COMMIT_HASH;\n+const GOLDENS_FILE_PATH = './test/screenshot/golden.json';\n+const BUCKET_NAME = 'screenshot-uploads';\n+const DEFAULT_METADATA = {\n+  commit: COMMIT_HASH,\n+  branch: BRANCH_NAME,\n+};\n+\n+const GOLDEN = 'golden';\n+const SNAPSHOT = 'snapshot';\n+const DIFF = 'diff';\n+\n+let credentials;\n+try {\n+  credentials = JSON.parse(SERVICE_ACCOUNT_KEY);\n+} catch (err) {\n+  console.error('Service account key could not be parsed.');\n+  process.exit(1);\n+}\n+\n+const storage = new Storage({\n+  credentials,\n+});\n+\n+const bucket = storage.bucket(BUCKET_NAME);\n+\n export default class Screenshot {\n+  /**\n+   * @param {string} urlPath The URL path to test\n+   */\n   constructor(urlPath) {\n+    /** @private {string} */\n     this.urlPath_ = urlPath;\n-    this.imagePath_ = `${urlPath}.golden.png`;\n-    this.snapshotImagePath_ = `${urlPath}.snapshot.png`;\n-    this.diffPath_ = `${urlPath}.diff.png`;\n     // TODO allow clients to specify capture-chrome options, like viewport size\n   }\n \n+  /**\n+   * Returns the golden ID\n+   * @return {string|undefined}\n+   * @private\n+   */\n+  async getGoldenID_() {\n+    const goldenFile = await readFilePromise(GOLDENS_FILE_PATH);\n+    const goldenJSON = JSON.parse(goldenFile);\n+    return goldenJSON[this.urlPath_];\n+  }\n+\n+  /**\n+   * Saves the golden ID\n+   * @param {string} goldenId The hash of the golden image\n+   * @private\n+   */\n+  async saveGoldenID_(goldenId) {\n+    const goldenFile = await readFilePromise(GOLDENS_FILE_PATH);\n+    const goldenJSON = JSON.parse(goldenFile);\n+    goldenJSON[this.urlPath_] = goldenId;\n+    await writeFilePromise(GOLDENS_FILE_PATH, JSON.stringify(goldenJSON, null, '  '));\n+  }\n+\n+  /**\n+   * Takes a screenshot of the URL\n+   * @return {!Buffer}\n+   * @private\n+   */\n+  async createScreenshotTask_() {\n+    const browser = await puppeteer.launch();\n+    const page = await browser.newPage();\n+    await page.goto(`http://localhost:8080/${this.urlPath_}`);\n+    const imageBuffer = await page.screenshot();\n+    await browser.close();\n+    return imageBuffer;\n+  }\n+\n+  /**\n+   * Generates a unique hash from an image's contents\n+   * @param {!Buffer} imageBuffer The image buffer to hash\n+   * @return {string}\n+   * @private\n+   */\n+  generateImageID_(imageBuffer) {\n+    return createHash('sha256').update(imageBuffer).digest('hex');\n+  }\n+\n+  /**\n+   * Returns the correct image path\n+   * @param {string} imageId The image ID\n+   * @param {string} imageType The image type\n+   * @private\n+   */\n+  getImagePath_(imageId, imageType) {\n+    switch (imageType) {\n+      case GOLDEN:\n+      return `${this.urlPath_}/${imageId}.golden.png`;\n+\n+      case SNAPSHOT:\n+      case DIFF:\n+      return `${this.urlPath_}/${COMMIT_HASH}/${imageId}.${imageType}.png`;\n+    }\n+  }\n+\n+  /**\n+   * Saves the given image to Google Cloud Storage with optional metadata\n+   * @param {string} imagePath The path to the image\n+   * @param {!Buffer} imageBuffer The image buffer\n+   * @param {Object} customMetadata Optional custom metadata\n+   * @private\n+   */\n+  async saveImage_(imagePath, imageBuffer, customMetadata={}) {\n+    const metadata = Object.assign({}, DEFAULT_METADATA, customMetadata);\n+    const file = bucket.file(imagePath);\n+\n+    // Check if file exists and exit if it does\n+    const [exists] = await file.exists();\n+    if (exists) {\n+      console.log('✔︎ No changes', imagePath);\n+      return;\n+    }\n+\n+    // Create a new stream from the image buffer\n+    let stream = new Readable();\n+    stream.push(imageBuffer);\n+    stream.push(null);\n+\n+    // The promise is resolved or rejected inside the stream event callbacks\n+    return new Promise((resolve, reject) => {\n+      stream.pipe(file.createWriteStream())\n+        .on('error', (err) => {\n+          reject(err);\n+        }).on('finish', async () => {\n+          try {\n+            // Make the image public and set it's metadata\n+            await file.makePublic();\n+            await file.setMetadata({metadata});\n+            console.log('✔︎ Uploaded', imagePath);\n+            resolve();\n+          } catch (err) {\n+            reject(err);\n+          }\n+        });\n+    });\n+  }\n+\n+  /**\n+   * Downloads an image from Google Cloud Storage\n+   * @param {string} gcsFilePath The file path on Google Cloud Storage\n+   * @return {Buffer}\n+   * @private\n+   */\n+  async readImage_(gcsFilePath) {\n+    const data = await bucket.file(gcsFilePath).download();\n+    return data[0];\n+  }\n+\n+  /**\n+   * Captures a screenshot of the test URL\n+   */\n   capture() {\n     test(this.urlPath_, async () => {\n-      const url = `http://localhost:8080/${this.urlPath_}`;\n-      const imagePath = `./test/screenshot/${this.imagePath_}`;\n-      await this.createScreenshotTask_(url, imagePath);\n+      const golden = await this.createScreenshotTask_();","path":"test/screenshot/screenshot.js","position":183,"original_position":183,"commit_id":"a508d1d6100669ae813ecd40970d2c659e8d1e6b","original_commit_id":"a508d1d6100669ae813ecd40970d2c659e8d1e6b","user":{"login":"acdvorak","id":409245,"avatar_url":"https://avatars1.githubusercontent.com/u/409245?v=4","gravatar_id":"","url":"https://api.github.com/users/acdvorak","html_url":"https://github.com/acdvorak","followers_url":"https://api.github.com/users/acdvorak/followers","following_url":"https://api.github.com/users/acdvorak/following{/other_user}","gists_url":"https://api.github.com/users/acdvorak/gists{/gist_id}","starred_url":"https://api.github.com/users/acdvorak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acdvorak/subscriptions","organizations_url":"https://api.github.com/users/acdvorak/orgs","repos_url":"https://api.github.com/users/acdvorak/repos","events_url":"https://api.github.com/users/acdvorak/events{/privacy}","received_events_url":"https://api.github.com/users/acdvorak/received_events","type":"User","site_admin":false},"body":"Rename to `goldenTask` or `screenshotTask`?","created_at":"2018-03-22T21:21:06Z","updated_at":"2018-03-22T21:30:26Z","html_url":"https://github.com/material-components/material-components-web-react/pull/12#discussion_r176575980","pull_request_url":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12","author_association":"NONE","_links":{"self":{"href":"https://api.github.com/repos/material-components/material-components-web-react/pulls/comments/176575980"},"html":{"href":"https://github.com/material-components/material-components-web-react/pull/12#discussion_r176575980"},"pull_request":{"href":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12"}}},"pull_request":{"url":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12","id":176906751,"html_url":"https://github.com/material-components/material-components-web-react/pull/12","diff_url":"https://github.com/material-components/material-components-web-react/pull/12.diff","patch_url":"https://github.com/material-components/material-components-web-react/pull/12.patch","issue_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/12","number":12,"state":"open","locked":false,"title":"feat: remote hosted screenshot testing","user":{"login":"patrickrodee","id":5939574,"avatar_url":"https://avatars2.githubusercontent.com/u/5939574?v=4","gravatar_id":"","url":"https://api.github.com/users/patrickrodee","html_url":"https://github.com/patrickrodee","followers_url":"https://api.github.com/users/patrickrodee/followers","following_url":"https://api.github.com/users/patrickrodee/following{/other_user}","gists_url":"https://api.github.com/users/patrickrodee/gists{/gist_id}","starred_url":"https://api.github.com/users/patrickrodee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/patrickrodee/subscriptions","organizations_url":"https://api.github.com/users/patrickrodee/orgs","repos_url":"https://api.github.com/users/patrickrodee/repos","events_url":"https://api.github.com/users/patrickrodee/events{/privacy}","received_events_url":"https://api.github.com/users/patrickrodee/received_events","type":"User","site_admin":false},"body":"Remove repo screenshots in favor of Google Cloud Storage-hosted images. Add `golden.json` file to keep track of the golden image per tested URL. Increase line length to 120. Remove image upload step from Travis CI.","created_at":"2018-03-22T20:54:09Z","updated_at":"2018-03-22T21:30:26Z","closed_at":null,"merged_at":null,"merge_commit_sha":"4d21f5f1025ba3332ea1487c108aa0913b925416","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12/commits","review_comments_url":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12/comments","review_comment_url":"https://api.github.com/repos/material-components/material-components-web-react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/12/comments","statuses_url":"https://api.github.com/repos/material-components/material-components-web-react/statuses/a508d1d6100669ae813ecd40970d2c659e8d1e6b","head":{"label":"material-components:experimental/gcp-upload","ref":"experimental/gcp-upload","sha":"a508d1d6100669ae813ecd40970d2c659e8d1e6b","user":{"login":"material-components","id":19478152,"avatar_url":"https://avatars3.githubusercontent.com/u/19478152?v=4","gravatar_id":"","url":"https://api.github.com/users/material-components","html_url":"https://github.com/material-components","followers_url":"https://api.github.com/users/material-components/followers","following_url":"https://api.github.com/users/material-components/following{/other_user}","gists_url":"https://api.github.com/users/material-components/gists{/gist_id}","starred_url":"https://api.github.com/users/material-components/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/material-components/subscriptions","organizations_url":"https://api.github.com/users/material-components/orgs","repos_url":"https://api.github.com/users/material-components/repos","events_url":"https://api.github.com/users/material-components/events{/privacy}","received_events_url":"https://api.github.com/users/material-components/received_events","type":"Organization","site_admin":false},"repo":{"id":124129430,"name":"material-components-web-react","full_name":"material-components/material-components-web-react","owner":{"login":"material-components","id":19478152,"avatar_url":"https://avatars3.githubusercontent.com/u/19478152?v=4","gravatar_id":"","url":"https://api.github.com/users/material-components","html_url":"https://github.com/material-components","followers_url":"https://api.github.com/users/material-components/followers","following_url":"https://api.github.com/users/material-components/following{/other_user}","gists_url":"https://api.github.com/users/material-components/gists{/gist_id}","starred_url":"https://api.github.com/users/material-components/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/material-components/subscriptions","organizations_url":"https://api.github.com/users/material-components/orgs","repos_url":"https://api.github.com/users/material-components/repos","events_url":"https://api.github.com/users/material-components/events{/privacy}","received_events_url":"https://api.github.com/users/material-components/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/material-components/material-components-web-react","description":"Material Components for React (MDC React)","fork":false,"url":"https://api.github.com/repos/material-components/material-components-web-react","forks_url":"https://api.github.com/repos/material-components/material-components-web-react/forks","keys_url":"https://api.github.com/repos/material-components/material-components-web-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/material-components/material-components-web-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/material-components/material-components-web-react/teams","hooks_url":"https://api.github.com/repos/material-components/material-components-web-react/hooks","issue_events_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/events{/number}","events_url":"https://api.github.com/repos/material-components/material-components-web-react/events","assignees_url":"https://api.github.com/repos/material-components/material-components-web-react/assignees{/user}","branches_url":"https://api.github.com/repos/material-components/material-components-web-react/branches{/branch}","tags_url":"https://api.github.com/repos/material-components/material-components-web-react/tags","blobs_url":"https://api.github.com/repos/material-components/material-components-web-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/material-components/material-components-web-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/material-components/material-components-web-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/material-components/material-components-web-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/material-components/material-components-web-react/statuses/{sha}","languages_url":"https://api.github.com/repos/material-components/material-components-web-react/languages","stargazers_url":"https://api.github.com/repos/material-components/material-components-web-react/stargazers","contributors_url":"https://api.github.com/repos/material-components/material-components-web-react/contributors","subscribers_url":"https://api.github.com/repos/material-components/material-components-web-react/subscribers","subscription_url":"https://api.github.com/repos/material-components/material-components-web-react/subscription","commits_url":"https://api.github.com/repos/material-components/material-components-web-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/material-components/material-components-web-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/material-components/material-components-web-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/material-components/material-components-web-react/contents/{+path}","compare_url":"https://api.github.com/repos/material-components/material-components-web-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/material-components/material-components-web-react/merges","archive_url":"https://api.github.com/repos/material-components/material-components-web-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/material-components/material-components-web-react/downloads","issues_url":"https://api.github.com/repos/material-components/material-components-web-react/issues{/number}","pulls_url":"https://api.github.com/repos/material-components/material-components-web-react/pulls{/number}","milestones_url":"https://api.github.com/repos/material-components/material-components-web-react/milestones{/number}","notifications_url":"https://api.github.com/repos/material-components/material-components-web-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/material-components/material-components-web-react/labels{/name}","releases_url":"https://api.github.com/repos/material-components/material-components-web-react/releases{/id}","deployments_url":"https://api.github.com/repos/material-components/material-components-web-react/deployments","created_at":"2018-03-06T19:42:24Z","updated_at":"2018-03-20T17:47:24Z","pushed_at":"2018-03-22T20:54:09Z","git_url":"git://github.com/material-components/material-components-web-react.git","ssh_url":"git@github.com:material-components/material-components-web-react.git","clone_url":"https://github.com/material-components/material-components-web-react.git","svn_url":"https://github.com/material-components/material-components-web-react","homepage":"","size":255,"stargazers_count":17,"watchers_count":17,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":5,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0"},"forks":0,"open_issues":5,"watchers":17,"default_branch":"master"}},"base":{"label":"material-components:master","ref":"master","sha":"5fd6d862ebf51072c348e4a84fc17c9e8ddf421e","user":{"login":"material-components","id":19478152,"avatar_url":"https://avatars3.githubusercontent.com/u/19478152?v=4","gravatar_id":"","url":"https://api.github.com/users/material-components","html_url":"https://github.com/material-components","followers_url":"https://api.github.com/users/material-components/followers","following_url":"https://api.github.com/users/material-components/following{/other_user}","gists_url":"https://api.github.com/users/material-components/gists{/gist_id}","starred_url":"https://api.github.com/users/material-components/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/material-components/subscriptions","organizations_url":"https://api.github.com/users/material-components/orgs","repos_url":"https://api.github.com/users/material-components/repos","events_url":"https://api.github.com/users/material-components/events{/privacy}","received_events_url":"https://api.github.com/users/material-components/received_events","type":"Organization","site_admin":false},"repo":{"id":124129430,"name":"material-components-web-react","full_name":"material-components/material-components-web-react","owner":{"login":"material-components","id":19478152,"avatar_url":"https://avatars3.githubusercontent.com/u/19478152?v=4","gravatar_id":"","url":"https://api.github.com/users/material-components","html_url":"https://github.com/material-components","followers_url":"https://api.github.com/users/material-components/followers","following_url":"https://api.github.com/users/material-components/following{/other_user}","gists_url":"https://api.github.com/users/material-components/gists{/gist_id}","starred_url":"https://api.github.com/users/material-components/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/material-components/subscriptions","organizations_url":"https://api.github.com/users/material-components/orgs","repos_url":"https://api.github.com/users/material-components/repos","events_url":"https://api.github.com/users/material-components/events{/privacy}","received_events_url":"https://api.github.com/users/material-components/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/material-components/material-components-web-react","description":"Material Components for React (MDC React)","fork":false,"url":"https://api.github.com/repos/material-components/material-components-web-react","forks_url":"https://api.github.com/repos/material-components/material-components-web-react/forks","keys_url":"https://api.github.com/repos/material-components/material-components-web-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/material-components/material-components-web-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/material-components/material-components-web-react/teams","hooks_url":"https://api.github.com/repos/material-components/material-components-web-react/hooks","issue_events_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/events{/number}","events_url":"https://api.github.com/repos/material-components/material-components-web-react/events","assignees_url":"https://api.github.com/repos/material-components/material-components-web-react/assignees{/user}","branches_url":"https://api.github.com/repos/material-components/material-components-web-react/branches{/branch}","tags_url":"https://api.github.com/repos/material-components/material-components-web-react/tags","blobs_url":"https://api.github.com/repos/material-components/material-components-web-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/material-components/material-components-web-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/material-components/material-components-web-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/material-components/material-components-web-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/material-components/material-components-web-react/statuses/{sha}","languages_url":"https://api.github.com/repos/material-components/material-components-web-react/languages","stargazers_url":"https://api.github.com/repos/material-components/material-components-web-react/stargazers","contributors_url":"https://api.github.com/repos/material-components/material-components-web-react/contributors","subscribers_url":"https://api.github.com/repos/material-components/material-components-web-react/subscribers","subscription_url":"https://api.github.com/repos/material-components/material-components-web-react/subscription","commits_url":"https://api.github.com/repos/material-components/material-components-web-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/material-components/material-components-web-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/material-components/material-components-web-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/material-components/material-components-web-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/material-components/material-components-web-react/contents/{+path}","compare_url":"https://api.github.com/repos/material-components/material-components-web-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/material-components/material-components-web-react/merges","archive_url":"https://api.github.com/repos/material-components/material-components-web-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/material-components/material-components-web-react/downloads","issues_url":"https://api.github.com/repos/material-components/material-components-web-react/issues{/number}","pulls_url":"https://api.github.com/repos/material-components/material-components-web-react/pulls{/number}","milestones_url":"https://api.github.com/repos/material-components/material-components-web-react/milestones{/number}","notifications_url":"https://api.github.com/repos/material-components/material-components-web-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/material-components/material-components-web-react/labels{/name}","releases_url":"https://api.github.com/repos/material-components/material-components-web-react/releases{/id}","deployments_url":"https://api.github.com/repos/material-components/material-components-web-react/deployments","created_at":"2018-03-06T19:42:24Z","updated_at":"2018-03-20T17:47:24Z","pushed_at":"2018-03-22T20:54:09Z","git_url":"git://github.com/material-components/material-components-web-react.git","ssh_url":"git@github.com:material-components/material-components-web-react.git","clone_url":"https://github.com/material-components/material-components-web-react.git","svn_url":"https://github.com/material-components/material-components-web-react","homepage":"","size":255,"stargazers_count":17,"watchers_count":17,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":5,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0"},"forks":0,"open_issues":5,"watchers":17,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12"},"html":{"href":"https://github.com/material-components/material-components-web-react/pull/12"},"issue":{"href":"https://api.github.com/repos/material-components/material-components-web-react/issues/12"},"comments":{"href":"https://api.github.com/repos/material-components/material-components-web-react/issues/12/comments"},"review_comments":{"href":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12/comments"},"review_comment":{"href":"https://api.github.com/repos/material-components/material-components-web-react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/material-components/material-components-web-react/pulls/12/commits"},"statuses":{"href":"https://api.github.com/repos/material-components/material-components-web-react/statuses/a508d1d6100669ae813ecd40970d2c659e8d1e6b"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"acdvorak"}}