Test App From Another Repo

I have created Cypress Network Testing Course with 90+ test exercises for anyone who wants to learn cy.intercept, cy.request, and other Cypress commands. The starting exercise specs are in the repo bahmutov/fastify-example-tests. Each exercise is a test to be filled out by the user, something like this:

cypress/integration/spec.js

it('shows the fruit returned by the server', () => {
  // spy on the network call the application makes
  // tip: use https://on.cypress.io/intercept
  //
  // visit the page
  // https://on.cypress.io/visit
  //
  // wait for the app to make the network call
  // (there might be a delay)
  // https://on.cypress.io/wait
  //
  // from the network call, get the response body
  // and the name of the fruit and confirm
  // the fruit is shown on the page
  // https://on.cypress.io/its
  // https://on.cypress.io/then
  // https://on.cypress.io/contains
})

Each lesson has a video showing how I implement the above starting code until it really does what the comments say. To make sure all answers are correct I have another repository with answers to each lesson. That repo bahmutov/fastify-example-answers is private, of course. I don't want everyone to just look at the answer and say "Yeah, this is how I would write this test". How do I know the answers are correct, especially as I upgrade Cypress version?

I run them against the application using cypress run, of course! The test application lives in the repo bahmutov/fastify-example, luckily it is easy to check out both repos using GitHub Actions. Here is my workflow file from fastify-example-answers repo that checks out both repos, installs the app's dependencies, starts the application in the background, and runs all Cypress tests.

.github/workflows/ci.yml

name: ci
on: push
jobs:
  test:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout this repo 🛎
        uses: actions/checkout@v3

      - name: Checkout the application repo 🛎
        uses: actions/checkout@v3
        with:
          repository: bahmutov/fastify-example
          path: app

      - name: Install app dependencies 📦
        uses: bahmutov/npm-install@v1
        with:
          working-directory: app

      - name: Start the application 🎬
        run: |
          cd app
          npm run start &

      - name: Run tests 🧪
        # https://github.com/cypress-io/github-action
        uses: cypress-io/github-action@v3

Every time I push a commit to fastify-example-answers, it is tested by the CI. The current status is shown in the README badge.

Bonus: the Cypress version badge is created by my own little utility dependency-version-badge. Here is the GitHub Actions workflow that periodically updates it and pushes the changed README.md file if needed.

.github/workflows/badges.yml

name: badges
on:
  push:
    # update README badge only if the README file changes
    # or if the package.json file changes, or this file changes
    branches:
      - main
    paths:
      - README.md
      - package.json
      - .github/workflows/badges.yml
  schedule:
    # update badges every night
    # because we have a few badges that are linked
    # to the external repositories
    - cron: '0 5 * * *'

jobs:
  badges:
    name: Badges
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout 🛎
        uses: actions/checkout@v3

      - name: Update version badges 🏷
        run: npx -p dependency-version-badge update-badge cypress

      - name: Commit any changed files 💾
        uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: Updated badges
          branch: main
          file_pattern: README.md

Read the blog post Keep Examples Up To Date to learn more about dependencies and version badges.