mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 07:26:59 +00:00
139 lines
4.3 KiB
Markdown
139 lines
4.3 KiB
Markdown
## 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`.
|
|
|
|
```json
|
|
{
|
|
"baseUrl": "http://localhost:3000",
|
|
"viewportHeight": 1000,
|
|
"viewportWidth": 1280,
|
|
"projectId": "pefcjb"
|
|
}
|
|
```
|
|
|
|
`dev.json` file has an updated `baseUrl` to represent our deployment.
|
|
|
|
```json
|
|
{
|
|
"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:
|
|
|
|
```json
|
|
"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.
|
|
|
|
```bash
|
|
# 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.
|
|
|
|
> We will also add a group property to make things a bit more clear on the Cypress Dashboard.
|
|
|
|
`main.yml`:
|
|
|
|
```yml
|
|
name: E2E on Chrome localhost:3000
|
|
|
|
on:
|
|
pull_request:
|
|
|
|
jobs:
|
|
e2e:
|
|
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
|
|
group: local
|
|
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`:
|
|
|
|
```yml
|
|
name: E2E on Chrome deployment
|
|
|
|
on:
|
|
push:
|
|
branches: ['main']
|
|
|
|
jobs:
|
|
e2e:
|
|
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
|
|
group: deployment
|
|
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 }}
|
|
```
|
|
|
|
After the feature branch push, we can observe the tests running against the locally served app as usual. And after the merge, we can obj
|