feat(infrastructure): Fix screenshot tests for external contributors …

…and pull requests (#638)

.travis.yml

@@ -5,11 +5,6 @@ git:
 dist: trusty
 sudo: required
 
-branches:
-  only:
-    - master
-    - rc0.10.0
-
 matrix:
   include:
     - node_js: 10
@@ -34,8 +29,9 @@ matrix:
       env:
         - TEST_SUITE=screenshots
         - CURRENT_BRANCH=$(if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then echo $TRAVIS_BRANCH; else echo $TRAVIS_PULL_REQUEST_BRANCH; fi)
+        - CURRENT_SLUG=$(if [ "x$TRAVIS_PULL_REQUEST_SLUG" == "x" ]; then echo $TRAVIS_REPO_SLUG; else echo $TRAVIS_PULL_REQUEST_SLUG; fi) 
       before_install:
         - docker pull mdcreact/screenshots
         - docker image ls
       script:
-        - docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY="${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}" mdcreact/screenshots /bin/sh -c "git checkout .; git fetch; git checkout \"${CURRENT_BRANCH}\"; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 35s; npm run test:image-diff"
+        - docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY="${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}" -e CURRENT_SLUG="${CURRENT_SLUG}" mdcreact/screenshots /bin/sh -c "git remote rm origin; git remote add origin https://github.com/${CURRENT_SLUG}; git checkout .; git fetch; git checkout \"${CURRENT_BRANCH}\"; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 40s; npm run test:image-diff"

docs/release.md

@@ -70,27 +70,6 @@ conventional-changelog -p angular -i CHANGELOG.md -s -r 0
 
 The `CHANGELOG.md` will also be updated with the new version's changes. You will need to edit the header of the file at the very least. If you need to **edit** any other parts of the `CHANGELOG.md`, now is the time.
 
-#### Update .travis.yml config
-
-The `.travis.yml` file will need to be updated before merging into master. Remove the RC branch from the `branches` property in the config.
-
-Original:
-
-```
-branches:
-  only:
-    - master
-    - rc0.7.x # remove this
-```
-
-Updated:
-
-```
-branches:
-  only:
-    - master
-```
-
 #### Commit Changes
 
 ```
@@ -147,12 +126,3 @@ If it hasn't already been done, you will need to create a new RC branch. If the
     * `Include administrators`
     * `Restrict who can push to matching branches`
     * Should look like this:  ![protectionrule](https://user-images.githubusercontent.com/579873/48811016-b4814400-ece0-11e8-9a7e-1a9838ecf764.png)
-
-* [ ] Update the `.travis.yml` config
-  * Add the RC branch to the `branches` property in the config.
-  * ```
-    branches:
-      only:
-        - master
-        - rc0.8.0 # add this
-  ```

docs/screenshot-tests.md

@@ -128,4 +128,4 @@ Now you're ready to share the image with the world!
 
 ## About pixel perfect comparison
 
-Our screenshot comparison ignores anti-aliasing differences between the golden screenshots and your snapshots. This is to ensure that OS-level differences between how subpixels are rendered don't cause test failures. It also ensures that we can have a single source of truth for the goldens instead of one golden per OS. You can read more about subpixel rendering [here](https://en.wikipedia.org/wiki/Subpixel_rendering).
+Our screenshot comparison ignores anti-aliasing differences between the golden screenshots and your snapshots. This is to ensure that OS-level differences between how subpixels are rendered don't cause test failures. It also ensures that we can have a single source of truth for the goldens instead of one golden per OS. You can read more about subpixel rendering [here](https://en.wikipedia.org/wiki/Subpixel_rendering).

package.json

@@ -91,6 +91,7 @@
     "@types/enzyme": "^3.1.15",
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/google-cloud__storage": "^1.7.2",
+    "@types/mkdirp": "^0.5.2",
     "@types/mocha": "^5.2.5",
     "@types/prop-types": "^15.5.6",
     "@types/puppeteer": "^1.11.1",
@@ -100,6 +101,7 @@
     "@types/uuid": "^3.4.4",
     "@types/webpack-env": "^1.13.6",
     "autoprefixer": "^8.5.1",
+    "axios": "^0.18.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.4",

test/screenshot/screenshot.tsx

@@ -9,6 +9,10 @@ import {test} from 'mocha';
 import {assert} from 'chai';
 import * as Storage from '@google-cloud/storage';
 import comparisonOptions from './screenshot-comparison-options';
+import axios from 'axios';
+import * as path from 'path';
+import * as mkdirp from 'mkdirp';
+
 const readFilePromise = promisify(readFile);
 const writeFilePromise = promisify(writeFile);
 const serviceAccountKey: string = process.env.MDC_GCLOUD_SERVICE_ACCOUNT_KEY || '';
@@ -21,11 +25,17 @@ const defaultMetadata = {
   branch: branchName,
 };
 
-const storage = new Storage({
-  credentials: JSON.parse(serviceAccountKey),
-});
+const NO_MATCH_DIRECTORY = 'no_match';
+
+let storage: Storage|null = null;
+let bucket: Storage.Bucket|null = null;
+if (serviceAccountKey) {
+  storage = new Storage({
+    credentials: JSON.parse(serviceAccountKey),
+  });
 
-const bucket = storage.bucket(bucketName);
+  bucket = storage.bucket(bucketName);
+}
 
 export default class Screenshot {
   urlPath_: string;
@@ -90,10 +100,16 @@ export default class Screenshot {
         return;
       }
       // Save the snapshot and the diff
-      await Promise.all([
-        this.saveImage_(snapshotPath, snapshot, metadata),
-        this.saveImage_(diffPath, diff, metadata),
-      ]);
+      if (storage) {
+        await Promise.all([
+          this.saveImage_(snapshotPath, snapshot, metadata),
+          this.saveImage_(diffPath, diff, metadata),
+        ]);
+      }
+      if (Number(data.misMatchPercentage) > 0) {
+        mkdirp.sync(path.dirname(`${NO_MATCH_DIRECTORY}/${diffPath}`));
+        await writeFilePromise(`${NO_MATCH_DIRECTORY}/${diffPath}`, diff);
+      }
       return assert.equal(Number(data.misMatchPercentage), 0);
     });
   }
@@ -141,8 +157,12 @@ export default class Screenshot {
    * @private
    */
   async readImage_(gcsFilePath: string) {
-    const data = await bucket.file(gcsFilePath).download();
-    return data[0];
+    const url = `https://storage.googleapis.com/screenshot-uploads/${gcsFilePath}`;
+    const response = await axios.request({
+      url,
+      responseType: 'arraybuffer',
+    });
+    return response.data;
   }
   /**
    * Saves the golden hash
@@ -165,6 +185,9 @@ export default class Screenshot {
    */
   async saveImage_(imagePath: string, imageBuffer: Buffer, customMetadata: Storage.CustomFileMetadata = {}) {
     const metadata: Storage.CustomFileMetadata = Object.assign({}, defaultMetadata, customMetadata);
+    if (!bucket) {
+      throw new Error('GCS is not configured');
+    }
     const file = bucket.file(imagePath);
     // Check if file exists and exit if it does
     const [exists] = await file.exists();