From 50050b8324b8db2cb7a88b9d2e98753005aca098 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 25 Jan 2019 14:28:33 +0300 Subject: [PATCH 01/14] Upgrade resemblejs to v3 v2 uses outdated canvas, which does not build on latest Ubuntu --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f1bf59294..e2fe2a75e 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "react-dom": "^16.4.2", "react-router-dom": "^4.3.1", "remap-istanbul": "^0.12.0", - "resemblejs": "^2.10.3", + "resemblejs": "^3.0.1", "sass-loader": "^6.0.7", "testdouble": "^3.6.0", "ts-loader": "^3.5.0", From fea57326612ff99fa04dc023a6159c4bd828de40 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Sat, 26 Jan 2019 15:37:04 +0300 Subject: [PATCH 02/14] Run screenshot tests locally --- package.json | 2 ++ test/screenshot/screenshot.tsx | 34 ++++++++++++++++++++++++---------- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index e2fe2a75e..833649945 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "test:unit-ci": "karma start karma.ci.js --single-run", "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --require ts-node/register --require babel-core/register --ui tdd --timeout 30000 test/screenshot/diff-suite.tsx", "test:screenshots": "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 checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 35s; npm run test:image-diff'", + "test:local-screenshots": "./test/screenshot/start.sh && sleep 35s && npm run test:image-diff", "upload:screenshots": "node ./test/screenshot/upload-screenshots.js" }, "config": { @@ -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", diff --git a/test/screenshot/screenshot.tsx b/test/screenshot/screenshot.tsx index 7becc4d47..8caf43934 100644 --- a/test/screenshot/screenshot.tsx +++ b/test/screenshot/screenshot.tsx @@ -9,6 +9,7 @@ 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'; const readFilePromise = promisify(readFile); const writeFilePromise = promisify(writeFile); const serviceAccountKey: string = process.env.MDC_GCLOUD_SERVICE_ACCOUNT_KEY || ''; @@ -21,11 +22,15 @@ const defaultMetadata = { branch: branchName, }; -const storage = new Storage({ - credentials: JSON.parse(serviceAccountKey), -}); +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 +95,12 @@ 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), + ]); + } return assert.equal(Number(data.misMatchPercentage), 0); }); } @@ -141,8 +148,13 @@ 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', + }); + console.log(gcsFilePath); + return response.data } /** * Saves the golden hash @@ -165,6 +177,8 @@ 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(); From da84c2f43072a2d6e7df17b2b3511f3b24405094 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 11:35:04 +0300 Subject: [PATCH 03/14] Run screenshot test in travis for pull requests --- package.json | 1 + test/screenshot/screenshot.tsx | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index 833649945..70a1e97ef 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,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", diff --git a/test/screenshot/screenshot.tsx b/test/screenshot/screenshot.tsx index 8caf43934..2693be0bb 100644 --- a/test/screenshot/screenshot.tsx +++ b/test/screenshot/screenshot.tsx @@ -10,6 +10,9 @@ 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 || ''; @@ -101,6 +104,10 @@ export default class Screenshot { this.saveImage_(diffPath, diff, metadata), ]); } + if (Number(data.misMatchPercentage) > 0) { + mkdirp.sync(path.dirname('no_match/' + diffPath)) + await writeFilePromise('no_match/' + diffPath, diff); + } return assert.equal(Number(data.misMatchPercentage), 0); }); } From 6eb5ddb0a9bc4c27e8a32c6d974ee1dc5b6555c9 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 11:36:28 +0300 Subject: [PATCH 04/14] Run in custom branches --- .travis.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 07d6db0e6..093cc03f7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,11 +5,6 @@ git: dist: trusty sudo: required -branches: - only: - - master - - rc0.10.0 - matrix: include: - node_js: 10 From b3cdaca2b62ff48eb6e166e79e8df4f4171bf7d3 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 11:57:52 +0300 Subject: [PATCH 05/14] Use pull requester's repo --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 093cc03f7..3c91bb2dd 100644 --- a/.travis.yml +++ b/.travis.yml @@ -33,4 +33,4 @@ matrix: - 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 TRAVIS_REPO_SLUG="${TRAVIS_REPO_SLUG}" mdcreact/screenshots /bin/sh -c "git remote rm origin; git remote add origin https://github.com/${TRAVIS_REPO_SLUG}; 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" From 66a6c303bd0454f9f9ea010179c4053b42ac92d5 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 12:02:30 +0300 Subject: [PATCH 06/14] Fix lint issues --- test/screenshot/screenshot.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/test/screenshot/screenshot.tsx b/test/screenshot/screenshot.tsx index 2693be0bb..1982d2cca 100644 --- a/test/screenshot/screenshot.tsx +++ b/test/screenshot/screenshot.tsx @@ -28,11 +28,11 @@ const defaultMetadata = { let storage: Storage|null = null; let bucket: Storage.Bucket|null = null; if (serviceAccountKey) { - storage = new Storage({ - credentials: JSON.parse(serviceAccountKey), - }); + storage = new Storage({ + credentials: JSON.parse(serviceAccountKey), + }); - bucket = storage.bucket(bucketName); + bucket = storage.bucket(bucketName); } export default class Screenshot { @@ -98,14 +98,14 @@ export default class Screenshot { return; } // Save the snapshot and the diff - if (storage) { + 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/' + diffPath)) + mkdirp.sync(path.dirname('no_match/' + diffPath)); await writeFilePromise('no_match/' + diffPath, diff); } return assert.equal(Number(data.misMatchPercentage), 0); @@ -161,7 +161,7 @@ export default class Screenshot { responseType: 'arraybuffer', }); console.log(gcsFilePath); - return response.data + return response.data; } /** * Saves the golden hash @@ -184,8 +184,9 @@ export default class Screenshot { */ async saveImage_(imagePath: string, imageBuffer: Buffer, customMetadata: Storage.CustomFileMetadata = {}) { const metadata: Storage.CustomFileMetadata = Object.assign({}, defaultMetadata, customMetadata); - if (!bucket) + 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(); From f22e21b0d89e4867c1265117d7943a375a4e2e25 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 12:24:13 +0300 Subject: [PATCH 07/14] support pull requests as well --- .travis.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 3c91bb2dd..7ba3f03b8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -29,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}" -e TRAVIS_REPO_SLUG="${TRAVIS_REPO_SLUG}" mdcreact/screenshots /bin/sh -c "git remote rm origin; git remote add origin https://github.com/${TRAVIS_REPO_SLUG}; 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 35s; npm run test:image-diff" From 43b28840714d21615fc0d7ae791e8e4c054689d6 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 13:53:22 +0300 Subject: [PATCH 08/14] Update docs --- docs/screenshot-tests.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/screenshot-tests.md b/docs/screenshot-tests.md index 67f00915b..8b4d18b2d 100644 --- a/docs/screenshot-tests.md +++ b/docs/screenshot-tests.md @@ -94,6 +94,14 @@ Then commit and push this change to your PR! > _NOTE_: If you have two-factor authentication turned on for your GitHub account, you'll need to use a [Personal Access Token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/) to push. +## Running tests without docker + +If you have google-chrome-unstable package available, you can just run + +``` +npm run test:local-screenshots +``` + ## Troubleshooting ### Building New Docker Image @@ -128,4 +136,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). \ No newline at end of file +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). From 2cf8c492fcac308f500cfa34c4fcbae439ec0228 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 28 Jan 2019 23:51:09 +0300 Subject: [PATCH 09/14] Remove debug logging --- test/screenshot/screenshot.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/test/screenshot/screenshot.tsx b/test/screenshot/screenshot.tsx index 1982d2cca..e36607ab5 100644 --- a/test/screenshot/screenshot.tsx +++ b/test/screenshot/screenshot.tsx @@ -160,7 +160,6 @@ export default class Screenshot { url, responseType: 'arraybuffer', }); - console.log(gcsFilePath); return response.data; } /** From 0424a8901584131333f4bcb22d6a8e9076ba0200 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Tue, 29 Jan 2019 00:17:44 +0300 Subject: [PATCH 10/14] Timeout 35 seconds => 40 seconds --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 7ba3f03b8..3facb425a 100644 --- a/.travis.yml +++ b/.travis.yml @@ -34,4 +34,4 @@ matrix: - 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}" -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 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" From 4a67593f4f6035b851c2fe4220ff0df8d74c0ab8 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Tue, 29 Jan 2019 00:39:09 +0300 Subject: [PATCH 11/14] Make no_match directory a constant --- test/screenshot/screenshot.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/test/screenshot/screenshot.tsx b/test/screenshot/screenshot.tsx index e36607ab5..db1dd23fb 100644 --- a/test/screenshot/screenshot.tsx +++ b/test/screenshot/screenshot.tsx @@ -25,6 +25,8 @@ const defaultMetadata = { branch: branchName, }; +const NO_MATCH_DIRECTORY = 'no_match'; + let storage: Storage|null = null; let bucket: Storage.Bucket|null = null; if (serviceAccountKey) { @@ -105,8 +107,8 @@ export default class Screenshot { ]); } if (Number(data.misMatchPercentage) > 0) { - mkdirp.sync(path.dirname('no_match/' + diffPath)); - await writeFilePromise('no_match/' + diffPath, diff); + mkdirp.sync(path.dirname(`${NO_MATCH_DIRECTORY}/${diffPath}`)); + await writeFilePromise(`${NO_MATCH_DIRECTORY}/${diffPath}`, diff); } return assert.equal(Number(data.misMatchPercentage), 0); }); From 365682d825951c99d7298ade1b2ce384ffc3f014 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Tue, 29 Jan 2019 00:59:44 +0300 Subject: [PATCH 12/14] Remove test:local-screenshots --- docs/screenshot-tests.md | 8 -------- package.json | 1 - 2 files changed, 9 deletions(-) diff --git a/docs/screenshot-tests.md b/docs/screenshot-tests.md index 8b4d18b2d..e8e594740 100644 --- a/docs/screenshot-tests.md +++ b/docs/screenshot-tests.md @@ -94,14 +94,6 @@ Then commit and push this change to your PR! > _NOTE_: If you have two-factor authentication turned on for your GitHub account, you'll need to use a [Personal Access Token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/) to push. -## Running tests without docker - -If you have google-chrome-unstable package available, you can just run - -``` -npm run test:local-screenshots -``` - ## Troubleshooting ### Building New Docker Image diff --git a/package.json b/package.json index 70a1e97ef..6ab2d31dd 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "test:unit-ci": "karma start karma.ci.js --single-run", "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --require ts-node/register --require babel-core/register --ui tdd --timeout 30000 test/screenshot/diff-suite.tsx", "test:screenshots": "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 checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 35s; npm run test:image-diff'", - "test:local-screenshots": "./test/screenshot/start.sh && sleep 35s && npm run test:image-diff", "upload:screenshots": "node ./test/screenshot/upload-screenshots.js" }, "config": { From daaa157078f16ba2222d8ea3789fe6302c5a561e Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Tue, 29 Jan 2019 19:53:30 +0300 Subject: [PATCH 13/14] Remove travis.yml updating in master --- docs/release.md | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/docs/release.md b/docs/release.md index 53ea8e860..2bd85cf15 100644 --- a/docs/release.md +++ b/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 ``` From 59f249847ee02e5953a7e658d36cb4dda126c2b5 Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Tue, 29 Jan 2019 09:42:44 -0800 Subject: [PATCH 14/14] Update release.md --- docs/release.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/docs/release.md b/docs/release.md index 2bd85cf15..5a061bfa3 100644 --- a/docs/release.md +++ b/docs/release.md @@ -126,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 - ```