visual-regression-testing.yml

name: Visual Regression Tests

on:
  pull_request:
    types: [labeled]
  pull_request_review:
    types: [submitted]
  push:
    branches:
      - "main"
jobs:
  visual_regression_tests:
    name: Percy CI
    if: (github.event_name == 'push' && github.event.ref == 'refs/heads/main') || (github.event_name == 'pull_request' && github.event.label.name == 'run visual regression tests') || (github.event_name == 'pull_request_review' && github.event.review.state == 'approved')
    runs-on: ubuntu-20.04
    services:
      postgres:
        image: postgres:13.2
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: network
        ports:
          - 5432:5432
        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
    env:
      ALLOWED_HOSTS: 127.0.0.1,localhost,mozfest.localhost,default-site.com,secondary-site.com
      CONTENT_TYPE_NO_SNIFF: True
      CORS_ALLOWED_ORIGINS: "*"
      CSP_CHILD_SRC: " 'self' https://www.youtube.com https://www.youtube-nocookie.com "
      CSP_CONNECT_SRC: " * "
      CSP_DEFAULT_SRC: " 'none' "
      CSP_FONT_SRC: " 'self' https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/ https://*.fundraiseup.com https://*.stripe.com "
      CSP_FRAME_ANCESTORS: " 'self' "
      CSP_FRAME_SRC: " 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com "
      CSP_IMG_SRC: " * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com "
      CSP_MEDIA_SRC: " 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ "
      CSP_SCRIPT_SRC: " 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com "
      CSP_STYLE_SRC: " 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css "
      CSP_INCLUDE_NONCE_IN: "script-src"
      DATABASE_URL: postgres://postgres:postgres@localhost:5432/network
      DEBUG: True
      DJANGO_SECRET_KEY: secret
      DOMAIN_REDIRECT_MIDDLEWARE_ENABLED: False
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      PIPENV_VERBOSITY: -1
      PULSE_API_DOMAIN: https://network-pulse-api-production.herokuapp.com
      PULSE_DOMAIN: https://www.mozillapulse.org
      RANDOM_SEED: 530910203
      SECURE_CROSS_ORIGIN_OPENER_POLICY: "same-origin-allow-popups"
      SET_HSTS: False
      SSL_REDIRECT: False
      TARGET_DOMAINS: foundation.mozilla.org
      USE_S3: False
      X_FRAME_OPTIONS: DENY
      XSS_PROTECTION: True
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-python@v4
        with:
          python-version: 3.11
          cache: "pip"
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: "npm"
      - name: Install Python Dependencies
        run: pip install -r requirements.txt -r dev-requirements.txt
      - name: Install Node Dependencies
        run: npm ci
      - name: Install additional tooling
        run: |
          sudo apt-get update
          sudo apt-get install -y gettext libgconf-2-4
      - name: Install Playwright
        run: npm run playwright:install
      - name: Preroll
        run: |
          npm run build
          python network-api/manage.py collectstatic --no-input --verbosity 0
          python network-api/manage.py migrate --no-input
          python network-api/manage.py block_inventory
          python network-api/manage.py load_fake_data
      - name: Percy Test
        run: npm run percy
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}