menu

ZEIT

Our mission is to make cloud computing as easy and accessible as mobile computing. You can find our Next.js community here.

Channels
Team

How to properly E2E test using Next.js and Now auto deploy to a branch?

January 30, 2020 at 10:47pm

How to properly E2E test using Next.js and Now auto deploy to a branch?

January 30, 2020 at 10:47pm (Edited 1 month ago)

I'm in love with Next.js and Now... last time I felt like this was with Socket.io 👍

So I'm wondering, what is the best practice to E2E tests API endpoints using Next.js + Now considering the Github hook that automatically creates a unique Preview URL to your PR?

Should I run a local server inside the test runner or there's a way to get that unique URL and test against it?


January 30, 2020 at 11:01pm

We are glad you like our platform and Next.js. Currently, we use Checkly for out front-end tests and it integrates pretty nicely with both the platform and Next.js. They recognize ZEIT Now as a platform so you don't have to do any configuration... If you want to play with GitHub actions or a CI/CD solution, you can take a look at the GitHub api for deployments: https://developer.github.com/v3/repos/deployments/. GitHub will fire "deployment_status" and you can go from there. Using the CLI with GitHubs action is also possible but not advised... You can get inspiration from https://github.com/zeit/nextdiff/blob/master/screenshot.js made by

like-fill
1
  • reply
  • like

Awesome Paulo!!! Thanks for your help!

It looks like the last link isn't working, or it's a private project? I can't find "nextdiff" in the zeit org 👍

  • reply
  • like

It is indeed. Sorry! It was archived and moved to another repo... Here is the relevant piece of code:

const { Toolkit } = require('actions-toolkit')
const payload = require(process.env.GITHUB_EVENT_PATH)
const state = payload.deployment_status.state
const url = payload.deployment_status.target_url
const sha = payload.deployment.sha
const [owner, repo] = process.env.GITHUB_REPOSITORY.split('/')
const tools = new Toolkit({
event: ['deployment_status'],
secrets: ['GITHUB_TOKEN', 'ZEIT_TOKEN']
})
like-fill
1
  • reply
  • like

Another nice one:

jobs:
test:
if: github.event.deployment_status.state == 'success'
name: Smoke tests
runs-on: ubuntu-latest
env:
DEPLOY_URL: ${{ github.event.deployment_status.target_url }}
Edited
  • reply
  • like

You are awesome Paulo!!!!!! 🤝 😍

  • reply
  • like

February 21, 2020 at 6:38am

Paulo, I'm almost there to make this happen :) but somehow, I can't make my Github Job wait for Now deploy Check. On the Checks section of the Pull Request, both Now and Github Action runs in parallel, and Github Action quickly checks for the if condition of the test job which by that specific time won't be success... actually it won't have deployment_status... make sense, because by that time Now is still deploying. I found another Action that waits for another Check, but I couldn't make it work also.

So I'm wondering, maybe it's a good idea to use zeit-now-deployment Action instead, and then configure everything in one Github Workflow? Currently I'm using that automagically integration Zeit dashboard offers.

  • reply
  • like

February 21, 2020 at 6:38pm

By now, my solution is to on: deployment_status post directly to Github's API, for example:

steps:
- name: Trigger pending status event
run: |
curl -L -X POST \
--url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }} \
--header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
--header 'content-type: application/json' \
--data '{ "state": "pending" }'
  • reply
  • like

February 25, 2020 at 12:51pm

Paulo, I'm almost there to make this happen :) but somehow, I can't make my Github Job wait for Now deploy Check. On the Checks section of the Pull Request, both Now and Github Action runs in parallel, and Github Action quickly checks for the if condition of the test job which by that specific time won't be success... actually it won't have deployment_status... make sense, because by that time Now is still deploying. I found another Action that waits for another Check, but I couldn't make it work also.

So I'm wondering, maybe it's a good idea to use zeit-now-deployment Action instead, and then configure everything in one Github Workflow? Currently I'm using that automagically integration Zeit dashboard offers.

I don't recommend that you use that action since it can create problems. We can only control new features in our own integration.

  • reply
  • like

Ok no problem 👍

  • reply
  • like