CI/CD Pipeline

Diagram:

Our pipeline consists of 4 major parts: code style, tests, pull requests, and manual code review.

We use Jest with Puppeteer for testing, ESLint for linting, Prettier for code styling, and JSDoc for documentation generation.

All of the github actions can be found in the Workflows Directory of the main repo. Some notable processes in our Pipeline:

End to End Testing Framework

Cloudflare

In order to have end to end tests run against the correct push or hereby dubbed build it is intending to test, we make use of Cloudflare pages. Cloudflare pages allows us to push multiple different builds of a site, and thus we can point the corresponding tests to the correct builds.

We make use of Wrangler, the Cloudflare development API for our deployment. To this, we first must populate two repository secrets: CLOUDFLARE_ACCOUNT_ID and CLOUDFLARE_API_TOKEN, with the latter being generated specifically for this pipeline. We then deploy off of our src/ folder. Once this is complete, we are able to obtain the deployment url, which we echo into the .env file located at the root of our repo. (Note while we could have just used environment variables of the github action, this seems more robust).

Testing

In our tests, we use the dotenv package to read our .env file variables into the environment, and can use a conditional in each of our e2e test files:

if (process.env.DEPLOYMENT_URL) {
  url = process.env.DEPLOYMENT_URL;
}

which lets us change the url based on the deployment location (local or published). A special jest-e2e-config.json file lives within the end-to-end test directory, which informs Jest to run with Puppeteer, which is our e2e testing runner.

A note to developers:

When testing locally, adding the code snippet below to the package.json makes the testing process viewable, in case you are running into any testing issues.

"jest-puppeteer": {
    launch: {
        headless: false,
        slowMo: 25
  }
}

Deployment

Deployment is fairly simple - we make use of Cloudflare Pages automatic deployment. Like above, we specifically deploy on the src/ folder and treat it to be our root folder. On any push to our main branch (which is our "Production" branch in Cloudflare), Cloudflare will automatically build the site for us using Jekyll.

Documentation

Our code documentation is automatically generated using JSDoc, which follows from proper comment formatting in the javascript code itself. We then take this documentation and deploy it to Cloudflare, noting that documentation only will exist for dev (for internal use) and main branches, the latter of the two being treated as the "official" documentation for the code.