Front End Testing with GitHub Actions

Why test?

kapers.dev/fender-testing

Why GitHub Actions?

Manual tests are 🤷‍♀️

Automation adds consistency

Why GitHub Actions?

github.com/features/actions
Workflow Files

.github/workflows/test.yml (yay yaml/yml 🙄)

name: Build and Test

on:
  pull_request:
    types: [opened, reopened, synchronize]
    branches: [prod]

jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout Repo Code
		uses: actions/checkout@v3

	  - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 16
- name: Setup Node
  uses: actions/setup-node@v3
  with:
    node-version: 16

- name: Install Node Modules
  run: npm install
#!/bin/bash

COMMAND="netlify deploy --build --site ${SITE_ID} --auth ${TOKEN} --json"

OUTPUT=$($COMMAND)

NETLIFY_URL=$(jq -r '.deploy_url' <<<"${OUTPUT}")
NETLIFY_LOGS=$(jq -r '.logs' <<<"${OUTPUT}")
DEPLOY_ID=$(jq -r '.deploy_id' <<<"${OUTPUT}")
SITE_NAME=$(jq -r '.site_name' <<<"${OUTPUT}")

echo "NETLIFY_URL=${NETLIFY_URL}" >> $GITHUB_OUTPUT
- name: Deploy to Netlify
  id: build_site
  env:
    TOKEN: ${{ secrets.TOKEN }}
	SITE_ID: ${{ secrets.SITE_ID }}
  run: ./_actions/netlify_deploy.sh

- uses: actions/github-script@v6
  with:
	script: |
	  github.rest.issues.createComment({
		issue_number: context.issue.number,
		owner: context.repo.owner,
		repo: context.repo.repo,
		body: 'URL: ${{steps.build_site.outputs.NETLIFY_URL}}'
	  })
- name: Deploy to Netlify
  id: build_site
  env:
    TOKEN: ${{ secrets.TOKEN }}
	SITE_ID: ${{ secrets.SITE_ID }}
  run: ./_actions/netlify_deploy.sh

- name: Build And Deploy
  id: azure_builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_TOKEN }}
    repo_token: ${{ secrets.GITHUB_TOKEN }} # 
    action: "upload"
    app_location: "/"
    api_location: ""
    output_location: "dist"
jobs:
  build:
	runs-on: ubuntu-22.04
	outputs:
	  deploy_url: ${{steps.build_site.outputs.NETLIFY_URL}}
	steps:
	  # Previous build steps here

  test:
	runs-on: ubuntu-22.04
	needs: build
	steps:
	  - name: Checkout Repo Code
		uses: actions/checkout@v3
Settings → Secrets and variables → Actions
#!/bin/bash

while getopts p: flag
do
	case "${flag}" in
		p) prod=${OPTARG};;
	esac
done

COMMAND="netlify deploy --build --site ${NETLIFY_SITE_ID} --auth ${NETLIFY_AUTH_TOKEN} --json"

if [ "$prod" = "true" ]; then
	COMMAND="$COMMAND --prod"
fi

OUTPUT=$($COMMAND)

NETLIFY_URL=$(jq -r '.deploy_url' <<<"${OUTPUT}")
NETLIFY_LOGS=$(jq -r '.logs' <<<"${OUTPUT}")
DEPLOY_ID=$(jq -r '.deploy_id' <<<"${OUTPUT}")
SITE_NAME=$(jq -r '.site_name' <<<"${OUTPUT}")

echo "NETLIFY_URL=${NETLIFY_URL}" >> $GITHUB_OUTPUT
blog.amyskapers.dev/front-end-testing-with-github-actions
kapers.dev/fender-testing

kapers.dev/feedback