feat(infrastructure): Upload compiled screenshot test assets to GCS #2500
Conversation
New NPM command: `screenshot:upload-assets`. First, run: ```bash npm start ``` Then, in another terminal, run: ```bash npm run screenshot:upload-assets ``` All files are uploaded to a directory containing a random UUID to prevent collisions between developers.
Codecov Report
@@ Coverage Diff @@
## master #2500 +/- ##
=======================================
Coverage 98.82% 98.82%
=======================================
Files 102 102
Lines 4079 4079
Branches 511 511
=======================================
Hits 4031 4031
Misses 48 48Continue to review full report at Codecov.
|
test/screenshot/asset-uploader.js
Outdated
| const relativeLocalFilePaths = glob.sync(path.join(LOCAL_DIRECTORY_PREFIX, '**/*.*')); | ||
|
|
||
| relativeLocalFilePaths.forEach((relativeLocalFilePath) => { | ||
| const fileContents = fs.readFileSync(relativeLocalFilePath); |
There was a problem hiding this comment.
readFileSync to avoid having too many open files at once?
There was a problem hiding this comment.
No, it's to ensure that upload() doesn't immediately return an empty array.
I tried several different approaches first, but they were all more convoluted and harder to read, so I went with readFileSync() cuz it was the simplest.
test/screenshot/asset-uploader.js
Outdated
| } | ||
|
|
||
| function handleUploadFailure(absoluteGcsBaseDir, relativeGcsFilePath, err) { | ||
| console.error(`❌︎ FAILED to upload ${GCLOUD_STORAGE_BASE_URL}${absoluteGcsBaseDir}${relativeGcsFilePath}:\n`, err); |
There was a problem hiding this comment.
What icon is this? I only see a square.
There was a problem hiding this comment.
Good catch! Changed to ✗ (Ballot X)
test/screenshot/run-upload-assets.js
Outdated
| console.log('\n\nDONE!\n\n'); | ||
| console.log(htmlFileUrls.join('\n')); | ||
| }, | ||
| (err) => { |
There was a problem hiding this comment.
Nit: Use .catch instead. It's 100% a personal preference but I find it much more obvious what the function is doing.
E.g.: `advorak/2018/04/03/23_00_32_993/5ca514fe/assets/`
test/screenshot/asset-uploader.js
Outdated
| promises.push( | ||
| file.save(fileContents, fileOptions).then( | ||
| () => handleUploadSuccess(baseGcsDir, relativeGcsFilePath), | ||
| (err) => handleUploadFailure(baseGcsDir, relativeGcsFilePath, err) |
There was a problem hiding this comment.
SUPER NIT: use .catch here, too. Gonna LGTM this without because this is just me being obscenely picky.
Resolves #1996
New NPM command:
screenshot:upload-assets.First, run:
Then, in another terminal, run:
export MDC_GCLOUD_SERVICE_ACCOUNT_KEY_FILE_PATH=path/to/gcloud-service-account-key.json npm run screenshot:upload-assetsTo avoid collisions between developers, every batch of files is uploaded to a directory with the following format:
E.g.:
/mdc-web-screenshot-tests/advorak/2018/04/03/23_00_32_993/5ca514fe/assets/.Sample output:
mdc-button/classes/baseline.htmlmdc-button/classes/dense.htmlmdc-button/mixins/container-fill-color.htmlmdc-button/mixins/corner-radius.htmlmdc-button/mixins/filled-accessible.htmlmdc-button/mixins/horizontal-padding-baseline.htmlmdc-button/mixins/horizontal-padding-dense.htmlmdc-button/mixins/icon-color.htmlmdc-button/mixins/ink-color.htmlmdc-button/mixins/stroke-color.htmlmdc-button/mixins/stroke-width.html