commerce/site/comments.md

Adding a config files to test the deployment

Create a config folder and two json files cypress/config/local.json, cypress/config/dev.json.

local.json file looks exactly like a copy of our root cypress.json.

{
  "baseUrl": "http://localhost:3000",
  "viewportHeight": 1000,
  "viewportWidth": 1280,
  "projectId": "pefcjb"
}

dev.json file has an updated baseUrl to represent our deployment.

{
  "baseUrl": "https://nextjs-cypress-j6ls5tggc-muratkeremozcan.vercel.app/",
  "viewportHeight": 1000,
  "viewportWidth": 1280,
  "projectId": "pefcjb"
}

(How I wish we could extend the base cypress.json, because unfortunately Gleb's cypress-extends plugin clashes with other plugins like cypress-grep)

We slightly modify our package.json scripts to use the respective config files:

"scripts": {
  "build": "turbo run build --scope=next-commerce --include-dependencies --no-deps",
  "dev": "turbo run dev",
  "start": "turbo run start",
  "types": "turbo run types",
  "prettier-fix": "prettier --write .",
  "cy:open-local": "cypress open --config-file cypress/config/local.json",
  "cy:run-local": "cypress run --config-file cypress/config/local.json",
  "cy:open-dev": "cypress open --config-file cypress/config/dev.json",
  "cy:run-dev": "cypress run --config-file cypress/config/dev.json"
},

We test the new scripts.

# on one tab
yarn dev
# on the second tab
yarn cy:open-local

# for the deployment, we do not need the app served, we just test the deployment
yarn cy:open-dev

Enhancing the CI pipeline architecture

We want local deployments to execute against the app being locally served.

In contrast, after the feature branch is merged, we want to execute e2e tests against the deployment.

For the app being locally served, in Github Actions, we can accomplish this task by using pull_request vs push. We also need to specify the config file we are using.

main.yml:

name: E2E on Chrome localhost:3000

on:
  pull_request:

jobs:
  install:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Cypress run
        uses: cypress-io/github-action@v3.0.4
        with:
          browser: chrome
          start: yarn dev
          # property to specify the config file we are using
          config-file: cypress/config/local.json
          wait-on: 'http://localhost:3000'
          wait-on-timeout: 120000
          record: true
        env:
          COMMERCE_PROVIDER: ${{ secrets.COMMERCE_PROVIDER }}
          NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN }}
          NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN }}
          NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED: true
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

For the deployment test, we need a new yml file, using push, and it will have slightly different settings so that it only runs on the main branch. Since we are testing the deployment, we do not need start and wait-on properties of the Cypress Github Action.

deployment.yml:

name: E2E on Chrome deployment

on:
  push:
    branches: ['main']

jobs:
  install:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Cypress run
        uses: cypress-io/github-action@v3.0.4
        with:
          browser: chrome
          record: true
          config-file: cypress/config/dev.json
        env:
          COMMERCE_PROVIDER: ${{ secrets.COMMERCE_PROVIDER }}
          NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN }}
          NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN }}
          NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED: true
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          # pass GitHub token to allow accurately detecting a build vs a re-run build
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}