test: add cypress docs/api test

.github/CYPRESS_ISSUE_TEMPLATE.md

@@ -0,0 +1,9 @@
+---
+name: maas.io e2e test failed
+about: ''
+title: 'maas.io/docs links test failed on {{ env.BRANCH_NAME }}'
+assignees: ''
+
+---
+
+[maas.io e2e test failed](<https://github.com/{{> env.REPO }}/actions/runs/{{ env.RUN_ID }}) on the {{ env.BRANCH_NAME }} branch.

.github/workflows/api-docs.yaml

@@ -0,0 +1,28 @@
+name: API Docs
+on:
+  schedule:
+    - cron: "0 10 * * 1-5" # At 10:00 every day-of-week from Monday through Friday.
+jobs:
+  api-docs:
+    name: maas.io/docs/api
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@main
+      - name: Get branch name
+        uses: nelonoel/[email protected]
+      - name: Run Cypress docs tests
+        uses: cypress-io/github-action@v4
+        with:
+          browser: chrome
+          config: baseUrl=http://maas.io/
+          spec: "cypress/e2e/**/*.{js,jsx,ts,tsx}"
+      - name: Create issue on failure
+        if: failure()
+        uses: JasonEtco/create-an-issue@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPO: ${{ github.repository }}
+          RUN_ID: ${{ github.run_id }}
+        with:
+          filename: .github/CYPRESS_ISSUE_TEMPLATE.md
+          update_existing: true

.gitignore

@@ -72,5 +72,7 @@ bzr-repo/
 .venv
 .dotrun.json
 
+cypress/screenshots/**/*.png
+
 # JS modules copied from node_modules
 static/js/modules/*

Dockerfile

@@ -10,7 +10,7 @@ RUN --mount=type=cache,target=/root/.cache/pip pip3 install --user --requirement
 
 # Build stage: Install yarn dependencies
 # ===
-FROM node:12 AS yarn-dependencies
+FROM node:14 AS yarn-dependencies
 WORKDIR /srv
 COPY . .
 RUN --mount=type=cache,target=/usr/local/share/.cache/yarn yarn install --production

cypress.config.js

@@ -0,0 +1,8 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: "https://maas.io/",
+    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
+  },
+});

cypress/e2e/apiDocs.spec.js

@@ -0,0 +1,22 @@
+
+context("/docs/api", () => {
+  beforeEach(() => {
+    cy.setCookie("_cookies_accepted", "all");
+    cy.visit("/docs/api");
+  });
+
+  it("displays side navigation correctly", () => {
+    cy.get(".p-side-navigation__drawer").should("not.be.visible");
+    cy.findByRole("link", { name: /Toggle side navigation/ }).click();
+    cy.get(".p-side-navigation__drawer").should("be.visible");
+    cy.get(".p-side-navigation__drawer")
+      .findAllByRole("link")
+      .should("have.length.least", 1);
+  });
+
+  it("displays content correctly", () => {
+    cy.visit("/docs/api");
+    cy.findByRole("heading", { level: 1, name: "MAAS API" }).should("exist");
+    cy.findByRole("heading", { level: 2, name: "Operations" }).should("exist");
+  });
+});

cypress/support/e2e.js

@@ -0,0 +1 @@
+import "@testing-library/cypress/add-commands";

package.json

@@ -24,16 +24,18 @@
   "author": "Canonical webteam",
   "license": "LGPL v3",
   "devDependencies": {
+    "@testing-library/cypress": "9.0.0",
+    "cypress": "12.12.0",
     "stylelint": "14.16.1",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0"
   },
   "dependencies": {
-    "autoprefixer": "10.4.13",
     "@canonical/cookie-policy": "3.4.0",
+    "@canonical/discourse-rad-parser": "^1.0.1",
     "@canonical/global-nav": "3.2.4",
     "@canonical/latest-news": "1.4.1",
-    "@canonical/discourse-rad-parser": "1.0.1",
+    "autoprefixer": "10.4.13",
     "postcss": "8.4.20",
     "postcss-cli": "9.1.0",
     "sass": "1.57.1",