Add an automatic workflow to update backstop reference screenshots. (#…

…463)

* Add an automatic workflow to update backstop reference screenshots.

* Run on push

* debug

* try with github expression syntax

* Use branch name

* Use a static branch name

* [approval-workflow] try: print branch via GH ref

* [approval-workflow] fix: move run

* [approval-workflow] chore: add step for clarity

* [approval-workflow] fix: rm pipe

* [approval-workflow] try: no run key

* [approval-workflow] try: old debug

* [approval-workflow] fix: change order

* [approval-workflow] try: reorder again

* [approval-workflow] try: new string

* [approval-workflow] try: remove run key

* [approval-workflow] try: remove all

* [approval-workflow] try: found error

* [approval-workflow] try: add ref const to branch name

* [approval-workflow] try: single quotes

* [approval-workflow] debug: rm some functionality for speed

* [approval-workflow] chore: change add for debug

* [approval-workflow] try: rm quotes

* [approval-workflow] try: other way of getting branch name

* [approval-workflow] try: debug branch name

* [approval-workflow] try: env variable

* [approval-workflow] try: different syntax

* [approval-workflow] try: remove interp syntax in env

* [approval-workflow] try: add dollar

* [approval-workflow] try: different constant

* [approval-workflow] try: use GH env var

* GITHUB_REF_NAME

* $ GITHUB_REF_NAME

* Try same thing with the branch

* env . mustache syntax

* Try it with quotes

* Try env in quotes

* add new branch as an output

* Dont use the env syntax on the output.

* Add run to commit results.

* Use a slash instead.

* Restore the actual logic to make the reference screenshots.

* Create PR when you run this action.

* Restore debug code; try setting original branch as base.

* Fix missing quote.

* Put on two lines.

* Remove the PR logic; restore workflow-dispatch.

* Update documentation about how to update visual regression references.

* Name task better, restore debug to test.

* Put back to workflow dispatch

Co-authored-by: laras126 <[email protected]>

.github/workflows/approval.yml

@@ -0,0 +1,41 @@
+name: Update visual regression tests
+
+on: [workflow_dispatch]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Install Dependencies
+      run: |
+        npm install -g backstopjs --unsafe-perm=true --allow-root
+        npm ci
+        ./node_modules/.bin/lerna bootstrap
+    - name: Generate new reference screenshots
+      run: |
+        nohup npm run larva > /dev/null 2>&1 &
+        sleep 5
+        npm run backstop -- reference
+      env:
+        CI: true
+    - name: Set new branch name
+      run: |
+        echo ::set-output name=NEW_BRANCH::"$GITHUB_REF_NAME--update-backstop-reference"
+      id: set-output-new-branch
+    - name: Commit results
+      uses: EndBug/add-and-commit@v8
+      with:
+        add: 'backstop_data'
+        message: 'chore: updated backstop reference screenshots'
+        new_branch: ${{ steps.set-output-new-branch.outputs.NEW_BRANCH }}
+

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unpublished
 * larva-patterns - Add `article-callout` module.
 * larva-patterns - Update `c-email-field` component and 'newsletter' module to improve label and input accessibility.
+* all - Add github action on workflow-dispatch to update the visual regression tests in the same environment in which they are run
+
 
 ## 0.5.6 - 03-29-2022
 * larva-tokens - Add desktop_xl token values in typography.json

README.md

@@ -4,7 +4,7 @@ This is the mono-repo for PMC's design system, Larva. It contains Larva features
 
 ## Usage
 
-Consult each package's README for a description and directions for use. 
+Consult each package's README for a description and directions for use.
 Consult [the How-To Guides in Confluence](https://confluence.pmcdev.io/x/UBOeAw)
 for details on using Larva in consuming projects. When upgrading a consuming
 project, consult [UPGRADING.md](./UPGRADING.md) for breaking changes and other
@@ -54,13 +54,7 @@ To manually run visual regression tests, use the following command:
 npm run backstop -- test
 ```
 
-If the tests contain changes that are correct, you can generate new reference screenshots with the following command:
-
-```
-npm run backstop -- reference
-```
-
-Then, commit the updated screenshots.
+If the tests contain changes that are correct, you can generate new reference screenshots. To do this, you should [visit the Github repo](https://github.com/penske-media-corp/pmc-larva/actions/workflows/approval.yml) and [run the workflow action](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/) to update the visual regression tests. This will create a new branch with the suffix `--update-backstop-reference` appended to your current branch name. You should then make a pull request into your current branch from that branch after reviewing the updated screenshots.
 
 ## Contributing To and Building Assets