Convert smoke tests to playwright

.github/workflows/smoke.yaml

@@ -21,12 +21,6 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Build images
-        run: yarn build
-
-      - name: Start app
-        run: yarn start -d
-
       - name: Run smoke tests
         run: yarn workspace test smoke
 

.gitignore

@@ -9,9 +9,7 @@
 !.yarn/versions
 
 build
-coverage
-videos
-screenshots
 node_modules
-storybook-static
+test/**/results
+test/**/coverage
 vitest.config.ts.timestamp*

README.md

@@ -19,7 +19,7 @@ thorough testing, and CI/CD.
 The only system dependencies are [node.js](https://nodejs.org/en/download/current) with [yarn](https://yarnpkg.com/getting-started/install) and [docker with docker-compose](https://docs.docker.com/desktop/)
 
 ```bash
-git clone git@github.com:kirkedev/mpr-dashboard.git
+git clone git@github.com:kirkedev/mpr.kirke.dev.git
 yarn install && yarn prepare
 ```
 
@@ -31,7 +31,7 @@ yarn dev
 
 Start the app in production mode. The app will be hosted at `http://localhost`
 ```bash
-yarn build && yarn start
+yarn start
 ```
 
 Shut down the app
@@ -51,9 +51,8 @@ yarn fix
 | `yarn workspace test unit`    | Run unit and integration tests. Does not require app to be running |
 | `yarn workspace test watch`   | Run unit and integration tests in watch mode                       |
 | `yarn workspace test ui`      | Open storybook                                                     |
-| `yarn workspace test e2e`     | Run end-to-end acceptance tests. App must be running in dev mode   |
-| `yarn workspace test cypress` | Open cypress for end-to-end acceptance tests                       |
-| `yarn workspace test smoke`   | Run smoke tests. App must be running locally in production mode    |
+| `yarn workspace test e2e`     | Run end-to-end acceptance tests                                    |
+| `yarn workspace test smoke`   | Run smoke tests                                                    |  
 
 ### CI/CD Workflows
 Add git hooks with `yarn prepare`

package.json

@@ -12,7 +12,7 @@
         "stop": "TAG=${TAG:-$(git describe --tags --match 'v*' --dirty --always)}; docker compose down --remove-orphans",
         "dev": "TAG=${TAG:-$(git describe --tags --match 'v*' --dirty --always)}; yarn stop && docker compose up --build",
         "build": "TAG=${TAG:-$(git describe --tags --match 'v*' --dirty --always)}; yarn workspace api build && yarn workspace app build",
-        "start": "TAG=${TAG:-$(git describe --tags --match 'v*' --dirty --always)}; yarn stop && docker compose -f docker-compose.yaml up"
+        "start": "TAG=${TAG:-$(git describe --tags --match 'v*' --dirty --always)}; yarn stop && yarn build && docker compose -f docker-compose.yml up"
     },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^7.0.1",

test/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "smoke": "playwright test smoke",
+        "smoke": "playwright test -c smoke",
         "unit": "vitest run --coverage",
         "watch": "vitest --coverage"
     },

test/smoke/playwright.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "playwright/test";
+
+export default defineConfig({
+    reporter: "list",
+    use: {
+        baseURL: "http://localhost"
+    },
+    webServer: {
+        command: "yarn run -T start",
+        url: "http://localhost",
+        reuseExistingServer: true,
+        stderr: "ignore"
+    },
+    outputDir: "results"
+});

test/smoke/smoke.spec.ts

@@ -1,31 +1,31 @@
-import "@testing-library/cypress/add-commands";
+import { test, expect } from "playwright/test";
 
-it("loads data from the api and renders charts and stats", function() {
+test("loads data from the api and renders charts and stats", async function({ page }) {
     const value = /\d{2,3}\.\d{2}/;
+    const path = /^.{100,}$/;
 
     // Page load
-    cy.visit("/");
-    cy.title().should("eq", "Mpr Dashboard");
-    cy.findByText("Error").should("not.exist");
-    cy.findByText("Time Period").should("exist");
-    cy.findByText("Cash Index").should("exist");
+    await page.goto("/");
+    await expect(page).toHaveTitle("Mpr Dashboard");
+    await expect(page.locator(".error")).not.toBeAttached();
+    await expect(page.locator(".reports")).toBeVisible();
 
     // Stats
-    cy.findByText("Cash Index").siblings().contains(value).should("exist");
-    cy.findByText("Cutout").siblings().contains(value).should("exist");
-    cy.findByText("Index").siblings().contains(value).should("exist");
-    cy.findByText("Formula").siblings().contains(value).should("exist");
-    cy.findByText("Belly").siblings().contains(value).should("exist");
-    cy.findByText("Ham").siblings().contains(value).should("exist");
-    cy.findByText("Loin").siblings().contains(value).should("exist");
-    cy.findByText("Butt").siblings().contains(value).should("exist");
-    cy.findByText("Rib").siblings().contains(value).should("exist");
-    cy.findByText("Picnic").siblings().contains(value).should("exist");
+    await expect(page.locator(".label:text-is(\"Cash Index\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Cutout\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Index\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Formula\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Belly\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Ham\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Loin\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Butt\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Rib\") + .value")).toContainText(value);
+    await expect(page.locator(".label:text-is(\"Picnic\") + .value")).toContainText(value);
 
     // Charts
-    cy.get("div[class*=cash] path.series").invoke("attr", "d").its("length").should("be.greaterThan", 100);
-    cy.get("div[class*=cutout] path.series").first().invoke("attr", "d").its("length").should("be.greaterThan", 100);
-    cy.get("div[class*=cutout] path.series").last().invoke("attr", "d").its("length").should("be.greaterThan", 100);
-    cy.get("div[class*=purchases] path.series").invoke("attr", "d").its("length").should("be.greaterThan", 100);
-    cy.get("div[class*=primal] path.series").invoke("attr", "d").its("length").should("be.greaterThan", 100);
+    await expect(page.locator("div[class*=cash] path.series")).toHaveAttribute("d", path);
+    await expect(page.locator("div[class*=cutout] path.series").first()).toHaveAttribute("d", path);
+    await expect(page.locator("div[class*=cutout] path.series").last()).toHaveAttribute("d", path);
+    await expect(page.locator("div[class*=purchases] path.series")).toHaveAttribute("d", path);
+    await expect(page.locator("div[class*=primal] path.series")).toHaveAttribute("d", path);
 });