test-and-demo.yaml

# This workflow will do
# - a clean install of node dependencies
# - run tests
# - build and upload the storybook to a staging area
#
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

on:
  push:
    branches:
      - master
      - next
  pull_request:
name: Test and Deploy
jobs:

  setup:
    runs-on: ubuntu-latest
    outputs:
      visual: ${{ steps.filter.outputs.visual }}
      behavioral: ${{ steps.filter.outputs.behavioral }}
    steps:
    - name: Checkout
      uses: actions/checkout@v3
      with:
        fetch-depth: 0 # chromatic needs access to the history
    - name: Check Paths
      uses: dorny/paths-filter@v2
      id: filter
      with:
        filters: |
          visual:
            - 'tokens/**'
            - 'vue-components/**'
          behavioral:
            - 'vue-components/**'
    - name: Set up node
      uses: actions/setup-node@v3
      with:
        node-version: '16'
    - name: Cache dependencies
      uses: actions/cache@v3
      id: cache
      with:
        path: |
          node_modules
          */node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
    - name: Cache artifacts
      uses: actions/cache@v3
      id: dist
      with:
        path: |
          */dist
        key: ${{ runner.os }}-${{ github.sha }}
    - name: Install
      if: steps.cache.outputs.cache-hit != 'true'
      run: npm ci
    - name: Build  # only runs in case of cache hit, otherwise as part of npm ci
      if: steps.cache.outputs.cache-hit == 'true'
      run: npm run lerna bootstrap

  test:
    runs-on: ubuntu-latest
    needs: setup
    steps:
    - name: Checkout
      uses: actions/checkout@v3
      with:
        fetch-depth: 0 # chromatic needs access to the history
    - name: Set up node
      uses: actions/setup-node@v3
      with:
        node-version: '16'
    - name: Restore dependencies
      uses: actions/cache@v3
      with:
        path: |
          node_modules
          */node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
    - name: Test
      run: npm run test

  ui-review:
    runs-on: ubuntu-latest
    needs: setup
    if: ${{ needs.setup.outputs.visual == 'true' || github.ref == 'refs/heads/master' }}
    steps:
    - name: Checkout
      uses: actions/checkout@v3
      with:
        fetch-depth: 0 # chromatic needs access to the history
    - name: Set up node
      uses: actions/setup-node@v3
      with:
        node-version: '16'
    - name: Restore dependencies
      uses: actions/cache@v3
      with:
        path: |
          node_modules
          */node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
    - name: Restore artifacts
      uses: actions/cache@v3
      with:
        path: |
          */dist
        key: ${{ runner.os }}-${{ github.sha }}
    - name: Build Storybooks
      run: npm run build:storybook
    - name: Deploy Storybook
      run: npm run chromatic

  deploy:
    runs-on: ubuntu-latest
    needs: setup
    if: ${{ github.repository_owner == 'wmde' }}
    outputs:
      deploy_url: ${{ env.NETLIFY_DEPLOY_URL }}
    steps:
    - name: Checkout
      uses: actions/checkout@v3
    - name: Set up node
      uses: actions/setup-node@v3
      with:
        node-version: '16'
    - name: Restore dependencies
      uses: actions/cache@v3
      with:
        path: |
          node_modules
          */node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
    - name: Build Project
      run: npm run build:storybook
    - name: Deploy to netlify
      run: echo "NETLIFY_DEPLOY_URL=$(npx -p netlify-cli
        netlify deploy --dir=docs/dist --json
        --alias $(echo '${{ github.ref }}' | shasum | awk '{print $1}')
        | jq '.deploy_url' --raw-output)" >> $GITHUB_ENV
      env:
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
    - name: Print deploy URL
      run: echo ${{ env.NETLIFY_DEPLOY_URL }}

  browser-tests:
    runs-on: ubuntu-latest
    needs: [setup, deploy]
    if: ${{ needs.setup.outputs.behavioral == 'true' || github.ref == 'refs/heads/master' }}
    steps:
    - name: Checkout
      uses: actions/checkout@v3
    - name: Set up node
      uses: actions/setup-node@v3
      with:
        node-version: '16'
    - name: Restore dependencies
      uses: actions/cache@v3
      with:
        path: |
          node_modules
          */node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
    - name: Run e2e cross browser tests
      env:
        SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
        SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
        DEPLOY_URL: ${{ needs.deploy.outputs.deploy_url }}
      run: npm run test:e2e