Add snapshot update yml, trigger snapshot update from pr label (#648)

* Add snapshot update yml

* Update rush command

* Updating automation snapshots

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nan Jiang <jinan@microsoft.com>
Co-authored-by: communication-ui-bot <88542272+communication-ui-bot@users.noreply.github.com>

.github/workflows/ci.yml

@@ -143,7 +143,7 @@ jobs:
         run: rush test -o chat
 
   build_static_html_composites_sample:
-    name: Build Static HTML Composites Sample
+    name: Build And Test Static HTML Composites Sample
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -159,10 +159,73 @@ jobs:
         run: rush install
       - name: Build
         run: rush build -t sample-static-html-composites
-      - name: Tests
-        run: rush test -o sample-static-html-composites
+      - name: Visual Regression Tests
+        run: |
+          cd samples/StaticHtmlComposites
+          rushx test:e2e
         env:
           CONNECTION_STRING: ${{ secrets.CONNECTION_STRING }}
+      - name: Upload snapshot diff
+        if: failure()
+        uses: actions/upload-artifact@v2
+        with:
+          name: snapshots
+          path: samples/StaticHtmlComposites/test-results/ # or path/to/artifact
+      - name: Comment on PR
+        if: ${{ github.event_name == 'pull_request' && failure() && !contains( github.event.pull_request.labels.*.name, 'ui change') }}
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot.'
+            })
+
+  update_snapshot_static_html_composites_sample:
+    if: ${{ github.event_name == 'pull_request' && contains( github.event.pull_request.labels.*.name, 'ui change') }}
+    name: Build And Update Snapshot of Static HTML Composites Sample
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          # Use a machine account when checking out. This is to workaround the issue were GitHub
+          # actions, when using the default account, cannot trigger other actions.
+          # This machine account is only for this PAT, pwd was created and thrown away
+          # If any update needed, create a new account, add access to the repo and generate a new PAT.
+          token: ${{ secrets.MACHINE_ACCOUNT_PAT }}
+      - name: Use Node.js v14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Install rush
+        run: npm install -g @microsoft/rush@5.47.0
+      - name: Install dependencies
+        run: rush install
+      - name: Build
+        run: rush build -t sample-static-html-composites
+      - name: Update snapshot
+        run: |
+          cd samples/StaticHtmlComposites
+          rushx update:snapshot
+        env:
+          CONNECTION_STRING: ${{ secrets.CONNECTION_STRING }}
+      # Setup bot information for pushing new changes
+      # Here we use the id from the github actions bot: https://api.github.com/users/better-informatics%5Bbot%5D
+      - name: Setup bot git information
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+      # Commit changes to snapshot files.
+      - name: Commit new snapshots
+        run: >
+          git diff --exit-code --quiet -- samples/StaticHtmlComposites/tests || 
+          (git add samples/StaticHtmlComposites/tests && 
+          git commit -m 'Updating automation snapshots' && 
+          git push origin HEAD:${{ github.head_ref }})
 
   check_failure:
     runs-on: ubuntu-latest

.github/workflows/update-snapshot.yml

@@ -0,0 +1,62 @@
+name: Update snapshots
+
+on:
+  # Run any time when a new label added to the PR 
+  pull_request:
+    types: [labeled]
+
+jobs:
+  update_snapshot:
+    name: Update snapshot by label
+    # This job will only run if the comment was on a pull requests and matches the label
+    if: ${{ github.event.label.name == 'ui change' }}
+    runs-on: ubuntu-latest
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE so job can access it
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          # Use a machine account when checking out. This is to workaround the issue were GitHub
+          # actions, when using the default account, cannot trigger other actions.
+          # This machine account is only for this PAT, pwd was created and thrown away
+          # If any update needed, create a new account, add access to the repo and generate a new PAT
+          token: ${{ secrets.MACHINE_ACCOUNT_PAT }}
+      # Ensure node version is great enough
+      - name: Use Node.js v14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      # Try get node_modules from cache
+      - name: Restore node_modules from cache
+        uses: actions/cache@v2
+        with:
+          path: common/temp/pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('common/config/rush/pnpm-lock.yaml') }}
+      # Install dependencies
+      - name: Install rush
+        run: npm install -g @microsoft/rush@5.47.0
+      - name: Install dependencies
+        run: rush install
+      - name: Build Packages
+        run: rush build -t @azure/communication-react
+      - name: Build
+        run: rush build -t sample-static-html-composites
+      - name: Update snapshot
+        run: |
+          cd samples/StaticHtmlComposites
+          rushx update:snapshot
+        env:
+          CONNECTION_STRING: ${{ secrets.CONNECTION_STRING }}
+      # Setup bot information for pushing new changes
+      # Here we use the id from the github actions bot: https://api.github.com/users/better-informatics%5Bbot%5D
+      - name: Setup bot git information
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+      # Commit changes to snapshot files.
+      - name: Commit new snapshots
+        run: >
+          git diff --exit-code --quiet -- samples/StaticHtmlComposites/tests || 
+          (git add samples/StaticHtmlComposites/tests && 
+          git commit -m 'Updating automation snapshots' && 
+          git push origin HEAD:${{ github.head_ref }})

docs/contributing-guide/6. submitting-a-pr.md

@@ -43,6 +43,16 @@ It will ask you these questions for each package you have made changes in.
 
 Once that is done, commit these change files and include them in your PR.
 
+### Generating new snapshot for your UI changes
+If you are making an ui change in your PR, you might invalidate some screen snapshot in our automation visual tests. 
+
+1. Check the failing github actions to see if that is a desired UI change 
+   
+   ![screenshot showing downloadable snapshot artifacts in a failed github action](../images/check-snapshots.png)
+1. Add 'ui change' label to the PR
+1. Wait github actions to generate new snapshot for your PR
+1. Validation pipeline will re-run after new snapshot gets generated
+   
 ### Submitting your PR
 
 You're ready to submit your PR! 🚀 Thank you for your contribution!

samples/StaticHtmlComposites/package.json

@@ -7,7 +7,8 @@
     "build": "webpack --mode=production",
     "start": "concurrently \"cd ../Server && rushx start:dev\" \"rushx start:app\"",
     "start:app": "webpack serve",
-    "test": "playwright test tests",
+    "test": "echo skip",
+    "test:e2e": "playwright test tests",
     "update:snapshot": "playwright test tests --update-snapshots",
     "lint": "echo skip",
     "lint:fix": "echo skip",

samples/StaticHtmlComposites/playwright.config.ts

@@ -8,7 +8,7 @@ const config: PlaywrightTestConfig = {
   },
   // Add an extra retry to mitigate network issues.
   // This can be removed if we switch to using a mock ACS service.
-  retries: 1,
+  retries: 2,
   workers: 1,
   projects: [
     {