test: implement readability tests

.github/workflows/checkly.yaml

@@ -0,0 +1,52 @@
+name: "Checkly E2E"
+on: [deployment_status]
+
+# Set the necessary credentials and export variables we can use to instrument our test run. Use the ENVIRONMENT_URL
+# to run your checks against staging, preview or production.
+env:
+  CHECKLY_API_KEY: ${{ secrets.CHECKLY_API_KEY }}
+  CHECKLY_ACCOUNT_ID: ${{ vars.CHECKLY_ACCOUNT_ID }}
+  ENVIRONMENT_URL: ${{ github.event.deployment_status.environment_url }}
+  CHECKLY_TEST_ENVIRONMENT: ${{ github.event.deployment_status.environment }}
+jobs:
+  test-e2e:
+    if: github.event.deployment_status.state == 'success' # Only run when the deployment was successful.
+    name: Test E2E on Checkly
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: "${{ github.event.deployment_status.deployment.ref }}"
+          fetch-depth: 0
+      - name: Set branch name # workaround to detect branch name in "deployment_status" actions
+        run:
+          echo "CHECKLY_TEST_REPO_BRANCH=$(git show -s --pretty=%D HEAD | tr -s
+          ',' '\n' | sed 's/^ //' | grep -e 'origin/' | head -1 | sed
+          's/\origin\///g')" >> $GITHUB_ENV
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - name: Restore or cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: npm ci
+        env:
+          GITHUB_NPM_TOKEN: ${{ secrets.GH_NPM_PACKAGE_READ_TOKEN }}
+      - name: Run checks # run the checks passing in the ENVIRONMENT_URL and recording a test session.
+        id: run-checks
+        run: npx checkly test -e ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL }}
+          --reporter=github --record
+      - name: Create summary # export the markdown report to the job summary.
+        id: create-summary
+        run: cat checkly-github-report.md > $GITHUB_STEP_SUMMARY
+      - name: Deploy checks # if the test run was successful and we are on Production, deploy the checks
+        id: deploy-checks
+        if: steps.run-checks.outcome == 'success' &&
+          github.event.deployment_status.environment == 'Production'
+        run: npx checkly deploy --force

__checks__/app/articles/api-keys.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("API Keys", () => {
+  [
+    { name: "Overview", href: "/articles/api-key-management" },
+    { name: "Authentication", href: "/articles/api-key-authentication" },
+    { name: "End User Access", href: "/articles/api-key-end-users" },
+    { name: "Using the API", href: "/articles/api-key-api" },
+    { name: "React Component", href: "/articles/api-key-react-component" },
+    { name: "Leak Detection", href: "/articles/api-key-leak-detection" },
+    { name: "Service Limits", href: "/articles/api-key-service-limits" },
+    { name: "Buckets & Environments", href: "/articles/api-key-buckets" }
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  })
+});

__checks__/app/articles/getting-started.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Getting Started", () => {
+  [
+    { name: "Step 1", href: "/articles/step-1-setup-basic-gateway" },
+    { name: "Step 2", href: "/articles/step-2-add-api-key-auth" },
+    { name: "Step 3", href: "/articles/step-3-add-rate-limiting" },
+    { name: "Step 4", href: "/articles/step-4-deploying-to-the-edge" }
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  })
+});

__checks__/app/articles/getting-to-production.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Getting To Production", () => {
+  [
+    { name: "Environments", href: "/articles/environments" },
+    { name: "GitHub Integration", href: "/articles/source-control" },
+    { name: "Securing your backend", href: "/articles/securing-your-backend" },
+    { name: "Custom Domains", href: "/articles/custom-domains" },
+    { name: "Testing", href: "/articles/testing" },
+    { name: "Zuplo in your stack", href: "/articles/zuplo-in-your-stack" },
+    { name: "Log Plugins", href: "/articles/log-plugins" },
+    { name: "Metrics Plugins", href: "/articles/metrics-plugins" }
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  })
+});

__checks__/app/articles/introduction.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Introduction", () => {
+  [
+    { name: "What is Zuplo?", href: "/articles/what-is-zuplo" },
+    { name: "Who uses Zuplo, and why?", href: "/articles/who-uses-and-why" },
+    { name: "Zuplo in your stack", href: "/articles/zuplo-in-your-stack" }
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  })
+});

__checks__/app/articles/open-api.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Open API Page", () => {
+  test("Visitable", async ({ page }) => {
+    const response = await page.goto(appUrl("/articles/open-api"));
+    expect(response?.status()).toBeLessThan(400);
+  })
+});

__checks__/app/articles/security.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Security Page", () => {
+  test("Visitable", async ({ page }) => {
+    const response = await page.goto(appUrl("/articles/security"));
+    expect(response?.status()).toBeLessThan(400);
+  })
+});

__checks__/app/articles/support.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Support Page", () => {
+  test("Visitable", async ({ page }) => {
+    const response = await page.goto(appUrl("/articles/support"));
+    expect(response?.status()).toBeLessThan(400);
+  })
+});

__checks__/app/cli/cli.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("CLI", () => {
+  test.describe("Root Page", () => {
+    test("Visitable", async ({ page }) => {
+      const response = await page.goto(appUrl("/cli"));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  });
+
+  [
+    { name: "Analytics", href: "/cli/analytics" },
+    { name: "Authentication", href: "/cli/authentication" },
+    { name: "Conversion Commands", href: "/cli/convert" },
+    { name: "Deployment Commands", href: "/cli/deployments" },
+    { name: "Installing the Zuplo CLI", href: "/cli/installation" },
+    { name: "Local Development Commands", href: "/cli/local-development" },
+    { name: "Project Commands", href: "/cli/project" },
+    { name: "Test Command", href: "/cli/test" },
+    { name: "Tunnel Commands", href: "/cli/tunnels" },
+    { name: "Environment Variables Commands", href: "/cli/variables" },
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  })
+});

__checks__/app/conferences/conferences.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Conferences", () => {
+  [
+    { name: "Conference Prize Terms", href: "/conferences/conference-prize-terms" },
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  })
+});

__checks__/app/handlers/handlers.spec.ts

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Handlers", () => {
+  test.describe("Root Page", () => {
+    test("Visitable", async ({ page }) => {
+      const response = await page.goto(appUrl("/handlers"));
+      expect(response?.status()).toBeLessThan(400);
+    });
+
+    test("Content loaded", async ({ page }) => {
+      await page.goto(appUrl("/handlers"));
+
+      const handlers = await page.getByTestId("handlers-grid").getByTestId("handler-card").all();
+      expect(handlers.length).toBeGreaterThan(0);
+
+      const firstHandler = handlers[0];
+      const firstHandlerName = await firstHandler.getByRole('heading').textContent();
+      const firstHandlerHref = await firstHandler.getAttribute('href');
+      expect(firstHandlerName).toBeTruthy();
+      expect(firstHandlerHref).toBeTruthy();
+      firstHandler.click();
+
+      const response = await page.goto(appUrl(firstHandlerHref!));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  });
+
+  [
+    { name: "AWS Lambda Handler", href: "/handlers/aws-lambda" },
+    { name: "Custom Request Handlers", href: "/handlers/custom-handler" },
+    { name: "OpenAPI Spec Handler", href: "/handlers/openapi" },
+    { name: "Redirect Handler", href: "/handlers/redirect" },
+    { name: "Internal Route Handlers", href: "/handlers/system-handlers" },
+    { name: "URL Forward Handler", href: "/handlers/url-forward" },
+    { name: "URL Rewrite Handler", href: "/handlers/url-rewrite" },
+    { name: "WebSocket Handler", href: "/handlers/websocket-handler" }
+  ].forEach(({ name, href }) => {
+    test(`${name} Page Visitable`, async ({ page }) => {
+      const response = await page.goto(appUrl(href));
+      expect(response?.status()).toBeLessThan(400);
+    });
+  });
+});

__checks__/app/intro/intro.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Intro Page", () => {
+  test("Visitable", async ({ page }) => {
+    const response = await page.goto(appUrl("/intro"));
+    expect(response?.status()).toBeLessThan(400);
+  })
+});

__checks__/app/policies/async-and-archival.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies", () => {
+  test.describe("Async & Archival", () => {
+    [
+      { name: "Archive Request to Azure Storage", href: "/policies/archive-request-azure-storage-inbound" },
+      { name: "Archive Request to AWS S3", href: "/policies/archive-request-aws-s3-inbound" },
+      { name: "Archive Response to Azure Storage", href: "/policies/archive-response-azure-storage-outbound" },
+      { name: "Archive Response to AWS S3", href: "/policies/archive-response-aws-s3-outbound" }
+    ].forEach(({ name, href }) => {
+      test(`${name} Page Visitable`, async ({ page }) => {
+        const response = await page.goto(appUrl(href));
+        expect(response?.status()).toBeLessThan(400);
+      });
+    });
+  });
+});

__checks__/app/policies/authentication.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies", () => {
+  test.describe("Authentication", () => {
+    [
+      { name: "API Key Authentication", href: "/policies/api-key-inbound" },
+      { name: "Auth0 JWT Auth", href: "/policies/auth0-jwt-auth-inbound" },
+      { name: "Clerk JWT Auth", href: "/policies/clerk-jwt-auth-inbound" },
+      { name: "AWS Cognito JWT Auth", href: "/policies/cognito-jwt-auth-inbound" }
+    ].forEach(({ name, href }) => {
+      test(`${name} Page Visitable`, async ({ page }) => {
+        const response = await page.goto(appUrl(href));
+        expect(response?.status()).toBeLessThan(400);
+      });
+    });
+  });
+});

__checks__/app/policies/authorization.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies", () => {
+  test.describe("Authorization", () => {
+    [
+      { name: "Access Control List", href: "/policies/acl-policy-inbound" },
+      { name: "RBAC Authorization", href: "/policies/rbac-policy-inbound" },
+      { name: "Geo-location filtering", href: "/policies/geo-filter-inbound" },
+      { name: "IP Restriction", href: "/policies/ip-restriction-inbound" }
+    ].forEach(({ name, href }) => {
+      test(`${name} Page Visitable`, async ({ page }) => {
+        const response = await page.goto(appUrl(href));
+        expect(response?.status()).toBeLessThan(400);
+      });
+    });
+  });
+});

__checks__/app/policies/metrics-billings-quotas.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies", () => {
+  test.describe("Metrics, Billing & Quotas", () => {
+    [
+      { name: "Quota", href: "/policies/quota-inbound" },
+      { name: "Moesif Analytics & Billing", href: "/policies/moesif-inbound" },
+      { name: "Amberflo Metering / Billing", href: "/policies/amberflo-metering-inbound" },
+      { name: "Readme Metrics", href: "/policies/readme-metrics-inbound" }
+    ].forEach(({ name, href }) => {
+      test(`${name} Page Visitable`, async ({ page }) => {
+        const response = await page.goto(appUrl(href));
+        expect(response?.status()).toBeLessThan(400);
+      });
+    });
+  });
+});

__checks__/app/policies/other.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies", () => {
+  test.describe("Other", () => {
+    [
+      { name: "Composite Inbound", href: "/policies/composite-inbound" },
+      { name: "Brown Out", href: "/policies/brownout-inbound" },
+      { name: "Caching", href: "/policies/caching-inbound" },
+      { name: "Custom Code Inbound", href: "/policies/custom-code-inbound" },
+      { name: "Custom Code Outbound", href: "/policies/custom-code-outbound" }
+    ].forEach(({ name, href }) => {
+      test(`${name} Page Visitable`, async ({ page }) => {
+        const response = await page.goto(appUrl(href));
+        expect(response?.status()).toBeLessThan(400);
+      });
+    });
+  });
+});

__checks__/app/policies/page.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies Page", () => {
+  test("Visitable", async ({ page }) => {
+    const response = await page.goto(appUrl("/policies"));
+    expect(response?.status()).toBeLessThan(400);
+  });
+
+  test("Content loaded", async ({ page }) => {
+    await page.goto(appUrl("/policies"));
+
+    const policies = await page.getByTestId("policies-grid").getByTestId("policy-card").all();
+    expect(policies.length).toBeGreaterThan(0);
+
+    const firstPolicy = policies[0];
+    const firstPolicyName = await firstPolicy.getByRole('heading').textContent();
+    const firstPolicyHref = await firstPolicy.getAttribute('href');
+    expect(firstPolicyName).toBeTruthy();
+    expect(firstPolicyHref).toBeTruthy();
+    firstPolicy.click();
+
+    const response = await page.goto(appUrl(firstPolicyHref!));
+    expect(response?.status()).toBeLessThan(400);
+  });
+});

__checks__/app/policies/request-modification.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+import { appUrl } from '../../utils/app-url';
+
+test.describe("Policies", () => {
+  test.describe("Request Modification", () => {
+    [
+      { name: "Transform Request Body", href: "/policies/transform-body-inbound" },
+      { name: "Remove Request Headers", href: "/policies/remove-headers-inbound" },
+      { name: "Clear Request Headers", href: "/policies/clear-headers-inbound" },
+      { name: "Change Method", href: "/policies/change-method-inbound" }
+    ].forEach(({ name, href }) => {
+      test(`${name} Page Visitable`, async ({ page }) => {
+        const response = await page.goto(appUrl(href));
+        expect(response?.status()).toBeLessThan(400);
+      });
+    });
+  });
+});