From f0ab5ee4a82e393a8a04ad6292b54009d92055ff Mon Sep 17 00:00:00 2001
From: Nick Oliver <i@pixnbits.org>
Date: Sat, 18 May 2024 12:02:08 -0700
Subject: [PATCH] test(browsers): add devices CTA

---
 .gitattributes        |  1 +
 package.json          |  4 +++-
 playwright.config.ts  | 46 +++++++++++++++++++------------------------
 tests/example.spec.ts | 41 +++++++++++++++++++++++++++-----------
 4 files changed, 54 insertions(+), 38 deletions(-)
 create mode 100644 .gitattributes

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..4c2c9c00
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+tests/**/*.png filter=lfs diff=lfs merge=lfs -text
diff --git a/package.json b/package.json
index dfef3944..89c9adb1 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",
-    "check": "biome check .",
+    "test": "npm run test:static && npm run test:browsers",
+    "test:static": "biome check .",
+    "test:browsers": "playwright test",
     "preview": "vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
   },
diff --git a/playwright.config.ts b/playwright.config.ts
index 301801ee..dea3ae59 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,16 +1,10 @@
-import { defineConfig, devices } from '@playwright/test';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,32 +14,32 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: "http://127.0.0.1:5173",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
     // {
@@ -69,9 +63,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: "vite --host --port=5173",
+    url: "http://127.0.0.1:5173",
+    reuseExistingServer: !process.env.CI,
+  },
 });
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
index 54a906a4..92c34072 100644
--- a/tests/example.spec.ts
+++ b/tests/example.spec.ts
@@ -1,18 +1,37 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from "@playwright/test";
 
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test("Basic page load", async ({ page }) => {
+  await page.goto("/");
+  await expect(page).toHaveTitle("Meshtastic Web");
+});
+
+test("Prompts adding a new connection as the call to action when there are no devices", async ({page}) => {
+  await page.goto("/");
+
+  await expect(page).toHaveScreenshot();
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
+  await expect(page.getByRole("heading", { name: "No Devices" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "New Connection" })).toBeVisible();
 });
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test("Shows the protocols as the first step of adding a device", async ({page}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "New Connection" }).click();
+  await expect(page.getByRole("heading", { name: "Connect New Device" })).toBeVisible();
+  await expect(page).toHaveScreenshot();
+});
 
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+test("Requests the IP address or hostname as input when connecting over HTTP", async ({page}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "New Connection" }).click();
+  await page.getByRole("tab", { name: "HTTP" }).click();
+  await expect(page.getByRole('dialog')).toHaveScreenshot('connect-over-http.png');
+});
 
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+test("New Device button for the brower's dialog UI is presented when connecting over serial", async ({page}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "New Connection" }).click();
+  await page.getByRole("tab", { name: "Serial" }).click();
+  await expect(page.getByRole("button", { name: "New Device" })).toBeVisible();
+  await expect(page.getByRole('dialog')).toHaveScreenshot('connect-over-serial.png');
 });