feat: ✨ Add ability to snapshot a directory of static images #353
Conversation
It currently uploads 0 snapshots and needs to be investigated
| import BuildService from './build-service' | ||
| import PercyClientService from './percy-client-service' | ||
|
|
||
| const ALLOWED_IMAGE_TYPES = /\.(png|jpg|jpeg)$/i |
There was a problem hiding this comment.
Would we want to add anything like webp here too? 🤷🏻♂️
| const paths = await globby(globs, { cwd: this.configuration.path }) | ||
|
|
||
| if (!paths.length) { | ||
| logger.error(`no files found in '${this.configuration.path}' matching '${this.configuration.files}'`) |
| } | ||
|
|
||
| await this.buildService.create() | ||
| logger.debug('uploading snapshots of static images') |
There was a problem hiding this comment.
Do we have a URL at this point from the build service? 🤔
There was a problem hiding this comment.
Ah, this is a debug log. Nvm
|
To answer your log questions: https://app.circleci.com/jobs/github/percy/percy-agent/3133/parallel-runs/0/steps/0-110 I briefly though of more image formats, but then that would involve adding a mime-type map or adding a mime-type library. I figured we could support the most common for now and add any other types if they ever get requested. The image size library works with these image types, so we have some room to add more if needed in the future. |
| @@ -20,10 +20,15 @@ export default class Upload extends Command { | |||
|
|
|||
| static flags = { | |||
| files: flags.string({ | |||
| char: 's', | |||
| char: 'f', | |||
There was a problem hiding this comment.
I'm glad I manually ran the oclif readme command or I wouldn't have caught this
There was a problem hiding this comment.
🏁 this is dope. I agree about the mime-type package. I briefly added one for the redirected assets stuff (before I got the contentType from the headers). The good news is our transitive deps already use that package a TON so we won't really be "adding a new dep" since it already gets added
|
Nice with the transitive dep! That mime-type package will also come in handy when we update our tests to use a more simple static server. |
# [0.16.0](v0.15.2...v0.16.0) (2019-09-25) ### Features * ✨ Add ability to snapshot a directory of static images ([#353](#353)) ([96f1ed5](96f1ed5))
Purpose
When somebody wants to use Percy with a native application, they must capture their own screenshots to send to Percy. In order to send those screenshots to Percy, they must wrap each and every image in DOM, with the proper styling, and then use agent to upload the DOM and perform asset discovery. The asset discovery is largely unnecessary since the only assets are known in advance, and the DOM creation can be easily automated.
This PR adds an
uploadcommand that will upload a directory of static images by performing said DOM creation automatically. Within this command we can avoid unnecessary asset discovery by simply not spinning up a typical agent service and interacting with percy-client directly.Approach
Most of this work was done while I was interviewing at Percy. The
uploadcommand is a simple wrapper around a new image-snapshot service. Initial inspiration was drawn from the static-snapshot service, but without spinning up an agent server for asset discovery. Additionally, some methods that may be similar to other services were duplicated and adjusted to be independent of those other services (mainlymakeLocalCopyfrom the resource service, andcreateSnapshotfrom the snapshot service). This is to avoid many extra nested services unnecessarily getting created for small utility methods.This library is used to determine the dimensions of an image so we can automatically set the
widthsandminimumHeightoptions per-snapshot. I don't necessarily like adding more deps, but this library is pretty small and does not rely on GraphicsMagick or ImageMagick. It instead reads the header bytes from the buffer of the file itself.While adding a new CI step to test this command, I noticed that the static-snapshot command is also untested despite having a test script. I added this to the CI as well along with adjusting the script, however it results in 0 snapshots being uploaded. Until that can be investigated further, I commented out that step in the config file.
TODO