sts-sponsors team mailing list archive

[Peter Makowski <mp+437877@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~maas-committers/maas-site-manager/+git/maas-site-manager-frontend:setup-e2e-tests-MAASENG-1397 into ~maas-committers/maas-site-manager/+git/maas-site-manager-frontend:main.

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~maas-committers/maas-site-manager/+git/maas-site-manager-frontend/+merge/437877
-- 
Your team MAAS Committers is requested to review the proposed merge of ~maas-committers/maas-site-manager/+git/maas-site-manager-frontend:setup-e2e-tests-MAASENG-1397 into ~maas-committers/maas-site-manager/+git/maas-site-manager-frontend:main.

diff --git a/.env b/.env
new file mode 100644
index 0000000..22cb9fd
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+UI_PORT=8405
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 1dddc5f..2205c24 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,6 @@ __pycache__/
 
 /.tox
 /build
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/README.md b/README.md
index b260981..cdaa6a8 100644
--- a/README.md
+++ b/README.md
@@ -33,3 +33,11 @@ TODO, possibly edit an env/config file to point to a local backend
 
 TODO, sth like yarn && yarn run
 ```
+
+## How to run tests
+
+### End to end
+
+```bash
+yarn playwright test
+```
diff --git a/package.json b/package.json
index 48cab3d..cfa7539 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,13 @@
     "vanilla-framework": "3.11.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react-swc": "3.0.0",
+    "dotenv": "^16.0.3",
     "msw": "1.0.1",
     "sass": "1.58.1",
     "typescript": "4.9.3",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..cf34b9f
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,68 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+import dotenv from "dotenv";
+
+dotenv.config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* 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",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://localhost:${process.env.UI_PORT}`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
+    },
+  ],
+});
diff --git a/tests/index.spec.ts b/tests/index.spec.ts
new file mode 100644
index 0000000..68a5e3f
--- /dev/null
+++ b/tests/index.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+});
+
+test("displays a correct page title", async ({ page }) => {
+  await expect(page).toHaveTitle(/MAAS Site Manager/);
+});
diff --git a/vite.config.ts b/vite.config.ts
index d366e8c..f3fdf22 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,11 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import dotenv from "dotenv";
+
+dotenv.config();
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: { port: Number(process.env.UI_PORT) },
 });
diff --git a/yarn.lock b/yarn.lock
index 8ecf88b..959ae32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -229,6 +229,16 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca";
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
+"@playwright/test@^1.31.1":
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.31.1.tgz#39d6873dc46af135f12451d79707db7d1357455d";
+  integrity sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.31.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "@remix-run/router@1.3.2":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.2.tgz#58cd2bd25df2acc16c628e1b6f6150ea6c7455bc";
@@ -975,6 +985,11 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453";
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dotenv@^16.0.3:
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07";
+  integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb";
@@ -1136,7 +1151,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f";
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a";
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -1899,6 +1914,11 @@ pkg-types@^1.0.1:
     mlly "^1.0.0"
     pathe "^1.0.0"
 
+playwright-core@1.31.1:
+  version "1.31.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.31.1.tgz#4deeebbb8fb73b512593fe24bea206d8fd85ff7f";
+  integrity sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==
+
 postcss-cli@9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-9.1.0.tgz#1a86404cbe848e370127b4bdf5cd2be83bc45ebe";