Merge pull request #797 from CityOfBoston/chore-adds-percy

(develop) Chore - adds percy to patterns repo

.github/percy/percy_config.yml

@@ -0,0 +1,15 @@
+# @file(yaml)
+# Global Configurations for Percy CLI
+version: 2
+snapshot:
+  widths: [390,1280]
+  minHeight: 1024
+  percyCSS: ""
+discovery:
+  allowedHostnames: []
+  disallowedHostnames: []
+  networkIdleTimeout: 100
+upload:
+  files: "**/*.{png,jpg,jpeg}"
+  ignore: ""
+  stripExtensions: false

.github/percy/snapshot_config.yml

@@ -0,0 +1,106 @@
+
+
+- name: Article with ALL components
+  url: https://d8-dev.boston.gov/departments/digital-team/test-page
+  waitForTimeout: 5000
+  execute: |
+    jQuery('.paragraphs-item-events-and-notices').addClass("hidden");
+
+- name: Event (basic) - WEST END COMMUNITY PRESERVATION
+  url: https://d8-dev.boston.gov/node/61556
+
+- name: Event (with header) - MAYOR ON MAIN TROLLEY TOUR
+  url: https://d8-dev.boston.gov/node/45361
+
+- name: Listing Page - PAY AND APPLY
+  url: https://d8-dev.boston.gov/node/32906
+
+- name: Listing Page - PARKS AND PLAYGROUNDS
+  url: https://d8-dev.boston.gov/node/32946
+
+- name: Place Profile - ANIMAL CARE AND CONTROL CENTER
+  url: https://d8-dev.boston.gov/node/2191
+
+- name: Place Profile - BAY VILLAGE HISTORIC DISTRICT
+  url: https://d8-dev.boston.gov/node/3251
+
+- name: Person Profile - MARK CIOMMO
+  url: https://d8-dev.boston.gov/node/401
+
+- name: Person Profile - KIM JANEY
+  url: https://d8-dev.boston.gov/node/38046
+
+- name: Program Initiative Page - MY BROTHERS KEEPER BOSTON
+  url: https://d8-dev.boston.gov/node/7396
+
+- name: Program Initiative Page - AGE-FRIENDLY BOSTON
+  url: https://d8-dev.boston.gov/node/25396
+
+- name: Post - BIKE SHARE
+  url: https://d8-dev.boston.gov/node/1741
+
+- name: Post - RODENT AND PEST CONTROL
+  url: http://d8-dev.boston.gov/node/63036
+
+- name: How To - CPR TRAINING
+  url: https://d8-dev.boston.gov/node/3606
+  execute: |
+    jQuery('.dr-tr:last()').click();
+# Expands last drawer on page
+
+- name: How To - FILE FOR A PROPERTY TAX ABATEMENT
+  url: https://d8-dev.boston.gov/node/12806
+  execute: |
+    jQuery('.dr-tr:last()').click();
+# Expands last drawer on page
+
+- name: Article - PARKING METERS
+  url: https://d8-dev.boston.gov/node/551
+
+- name: Article - MAYORS OFFICE OF HOUSING
+  url: https://d8-dev.boston.gov/node/2726
+
+- name: Department - INSPECTIONAL SERVICES
+  url: https://d8-dev.boston.gov/node/151
+  execute: |
+    jQuery('.paragraphs-item-events-and-notices').addClass("hidden");
+# Hides dynamic content on page to reduce false positives for changes
+
+- name: Department - HUMAN RESOURCES
+  url: https://d8-dev.boston.gov/node/216
+  execute: |
+    jQuery('.dr-c:first()').;
+# Expands first drawer on page
+
+- name: Public Notice - PUBLIC FACILITIES COMMISSION MEETING
+  url: https://d8-dev.boston.gov/node/64966
+
+- name: Guide - GETTING AROUND BOSTON
+  url: https://d8-dev.boston.gov/node/506
+
+- name: Guide - HAVING A CAR IN BOSTON
+  url: https://d8-dev.boston.gov/node/6
+
+- name: Landing Page - HOMEPAGE
+  url: https://d8-dev.boston.gov/node/21
+  execute: |
+    jQuery('.dr-tr:last()').click();
+# Expands first drawer on page
+
+- name: Landing Page - CAREER CENTER
+  url: https://d8-dev.boston.gov/node/19261
+  execute: |
+    jQuery('.paragraphs-item-grid-of-cards:first()').addClass("hidden");
+  # Hides dynamic content on page to reduce false positives for changes
+
+- name: Procurement - INSPECTIONAL SERVICES RELATIVE TO ...
+  url: https://d8-dev.boston.gov/node/15920681
+
+- name: Procurement - BFD THERMAL IMAGING CAMERAS ...
+  url: https://d8-dev.boston.gov/node/15920521
+
+- name: Map Verification - 30 Westville St (BH)
+  url: https://d8-dev.boston.gov/buildinghousing/30-westville-st
+
+- name: Drawers Example - DRAWERS (INSPECTION SERVICES)
+  url: https://d8-dev.boston.gov/node/3921

.github/percy/snapshot_config_stage.yml

@@ -0,0 +1,101 @@
+- name: Article with ALL components
+  url: https://d8-stg.boston.gov/departments/digital-team/test-page
+  waitForTimeout: 5000
+  execute: |
+    jQuery('.paragraphs-item-events-and-notices').addClass("hidden");
+
+- name: Event (basic) - WEST END COMMUNITY PRESERVATION
+  url: https://d8-stg.boston.gov/node/61556
+
+- name: Event (with header) - MAYOR ON MAIN TROLLEY TOUR
+  url: https://d8-stg.boston.gov/node/45361
+
+- name: Listing Page - PAY AND APPLY
+  url: https://d8-stg.boston.gov/node/32906
+
+- name: Listing Page - PARKS AND PLAYGROUNDS
+  url: https://d8-stg.boston.gov/node/32946
+
+- name: Place Profile - ANIMAL CARE AND CONTROL CENTER
+  url: https://d8-stg.boston.gov/node/2191
+
+- name: Place Profile - BAY VILLAGE HISTORIC DISTRICT
+  url: https://d8-stg.boston.gov/node/3251
+
+- name: Person Profile - MARK CIOMMO
+  url: https://d8-stg.boston.gov/node/401
+
+- name: Person Profile - KIM JANEY
+  url: https://d8-stg.boston.gov/node/38046
+
+- name: Program Initiative Page - MY BROTHERS KEEPER BOSTON
+  url: https://d8-stg.boston.gov/node/7396
+
+- name: Program Initiative Page - AGE-FRIENDLY BOSTON
+  url: https://d8-stg.boston.gov/node/25396
+
+- name: Post - BIKE SHARE
+  url: https://d8-stg.boston.gov/node/1741
+
+- name: Post - RODENT AND PEST CONTROL
+  url: http://d8-stg.boston.gov/node/63036
+
+- name: How To - CPR TRAINING
+  url: https://d8-stg.boston.gov/node/3606
+  execute: |
+    jQuery('.dr-tr:last()').click();
+# Expands last drawer on page
+
+- name: How To - FILE FOR A PROPERTY TAX ABATEMENT
+  url: https://d8-stg.boston.gov/node/12806
+  execute: |
+    jQuery('.dr-tr:last()').click();
+# Expands last drawer on page
+
+- name: Article - PARKING METERS
+  url: https://d8-stg.boston.gov/node/551
+
+- name: Article - MAYORS OFFICE OF HOUSING
+  url: https://d8-stg.boston.gov/node/2726
+
+- name: Department - INSPECTIONAL SERVICES
+  url: https://d8-stg.boston.gov/node/151
+  execute: |
+    jQuery('.paragraphs-item-events-and-notices').addClass("hidden");
+# Hides dynamic content on page to reduce false positives for changes
+
+- name: Department - HUMAN RESOURCES
+  url: https://d8-stg.boston.gov/node/216
+  execute: |
+    jQuery('.dr-c:first()').;
+# Expands first drawer on page
+
+- name: Public Notice - PUBLIC FACILITIES COMMISSION MEETING
+  url: https://d8-stg.boston.gov/node/64966
+
+- name: Guide - GETTING AROUND BOSTON
+  url: https://d8-stg.boston.gov/node/506
+
+- name: Guide - HAVING A CAR IN BOSTON
+  url: https://d8-stg.boston.gov/node/6
+
+- name: Landing Page - HOMEPAGE
+  url: https://d8-stg.boston.gov/node/21
+  execute: |
+    jQuery('.dr-tr:last()').click();
+# Expands first drawer on page
+
+- name: Landing Page - CAREER CENTER
+  url: https://d8-stg.boston.gov/node/19261
+  execute: |
+    jQuery('.paragraphs-item-grid-of-cards:first()').addClass("hidden");
+  # Hides dynamic content on page to reduce false positives for changes
+
+- name: Procurement - INSPECTIONAL SERVICES RELATIVE TO ...
+  url: https://d8-stg.boston.gov/node/15920681
+
+- name: Procurement - BFD THERMAL IMAGING CAMERAS ...
+  url: https://d8-stg.boston.gov/node/15920521
+
+- name: Map Verification - 30 Westville St (BH)
+  url: https://d8-stg.boston.gov/buildinghousing/30-westville-st

.github/workflows/percy_snapshot.yml

@@ -0,0 +1,120 @@
+# @file(yaml)
+# == GITHUB ACTION ==
+# Percy screenshot scripting for patterns.boston.gov
+# Workflow monitors master branch and is triggered by a Pull Request.
+#   The action is triggered before the code reaches the environment, so the workflow compares screenshots taken
+#   from the lower environment.
+
+# Attached resources:
+# - GitHub SECRETS:
+#     -> local.PERCY_TOKEN_STAGE -> Notify people that release is ready.
+#     -> local.PERCY_TOKEN -> Notify people that release is ready.
+
+name: Percy Snapshot Regression Testing
+
+env:
+  PERCY_CONFIG: "$GITHUB_WORKSPACE/.github/percy/percy_config.yml"
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - production
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+
+  debug:
+    runs-on: ubuntu-latest
+    if: ${{ vars.DEBUG == 1 }}
+
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - name: Debug ENVARS
+        run: |
+          export
+
+      - name: Debug github context
+        env:
+          GITHUB_CONTEXT: ${{ toJSON(github) }}
+        run: |
+          echo $GITHUB_CONTEXT
+
+      - name: Debug github.event context
+        env:
+          EVENT_CONTEXT: ${{ toJSON(github.event) }}
+        run: |
+          echo $EVENT_CONTEXT
+
+
+  percy_manual:
+
+    if: github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+
+    env:
+      SNAPSHOT_CONFIG: "$GITHUB_WORKSPACE/.github/percy/snapshot_config.yml"
+
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - name: checkout percy files
+        uses: Bhacaz/checkout-files@v2
+        with:
+          files: .github/percy
+          branch: develop
+
+      - name: Setup Node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install Percy CLI
+        run: npm install --save-dev @percy/cli
+
+      - name: Compare Frontend Snapshots
+        run: |
+          npx @percy/cli snapshot --config  ${{ env.PERCY_CONFIG }} ${{ env.SNAPSHOT_CONFIG }}
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+
+  percy_production:
+
+    if: ${{ github.base_ref == 'production' }}
+    runs-on: ubuntu-latest
+
+    env:
+      SNAPSHOT_CONFIG: "$GITHUB_WORKSPACE/.github/percy/snapshot_config_stage.yml"
+
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - name: checkout percy files
+        uses: Bhacaz/checkout-files@v2
+        with:
+          files: .github/percy
+          branch: master
+
+      - name: Setup Node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install Percy CLI
+        run: npm install --save-dev @percy/cli
+
+      - name: Compare Frontend Snapshots
+        run: |
+          npx @percy/cli snapshot --config  ${{ env.PERCY_CONFIG }} ${{ env.SNAPSHOT_CONFIG }}
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_STAGE }}