Screenshot Testing - golden screenshots should be in repo about material-components-web-react HOT 10 CLOSED

The golden.png files are stored in Google Cloud Storage and visible publicly via this URL:

https://storage.googleapis.com/screenshot-uploads/<path>/<to>/<file>.html/<golden-screenshot-hash>.golden.png

where <golden-screenshot-hash> is found in the golden.json file, and <path>/<to>/<file> is the path to the HTML file relative to the /test/screenshot folder.

Check out the newly updated screenshot tests doc for more details!

from material-components-web-react.

@bmihelac we originally had them checked in, but Git will actually keep each image in its history if it detects a file change. As we commit new images, we actually increase the repo size even if the photos are not physically there.

We realize it would be ideal to have them committed would make screenshot testing easier, but we also foresee our Github repo becoming unmanageable. Do you have any suggestions to solve this issue?

from material-components-web-react.

@moog16 I am not familiar what would be best practices regarding this. I came across looking trying to fill another issue.

from material-components-web-react.

What about zipping the screenshots and including them via Git LFS? This way the repo would stay small and manageable while including the versioned screenshots.

from material-components-web-react.

@schliflo I hadn't heard of LFS...it looks promising. I'm going to look into it. Its not high on the priority list right now since it is working, but it would enable the OSS to run the tests which would be awesome.

from material-components-web-react.

@schliflo have you used LFS before? Would you be able to show us what that would look like in code?

from material-components-web-react.

@moog16 I've made an example repo with some LFS tracked files in a different branch: https://github.com/schliflo/lfs-demo
These files are only downloaded when checking out the branch containing the LFS references - which I guess is ideal for the reference screenshots.
To implement this for the screenshots here you have to remove *.golden.png from .gitignore, run git lfs install, git lfs track "*.golden.png", git add ./**/*.golden.png and check with git lfs ls-files if the correct files are tracked via LFS before committing them.

from material-components-web-react.

The intention of LFS is to store the binary files completely separate from the repository (typically even on a remote server), and only store text pointers within the repository. Storing the files on another branch is defeating the point of Git LFS, as the binary files would still be in the main repository, leading to the bloat issue which Matt referenced.

from material-components-web-react.

@kfranqueiro storing the files in another branch was just for demo purposes -> repo size stays small, even though big files are in there (or referenced via LFS). To solve the issue here, the references would of course be stored in the master branch. The big benefit would be that updating these references would not bloat the repo as the binary is stored via LFS.

from material-components-web-react.

@schliflo I think we can actually make the images publicly available for download. Then you and others will be able to download the images and run tests against them. You just wouldn't be able to upload images. But we could do that when/if there are changes that require that step.

Also we noticed that some of the verbiage in the https://github.com/material-components/material-components-web-react/tree/master/test/screenshot/README.md is not accurate. We will update!

from material-components-web-react.