Add e2e framework

Author: DustinBrett

.eslintrc.json

@@ -9,6 +9,7 @@
     "plugin:jest/recommended",
     "plugin:jest-dom/recommended",
     "plugin:jsx-a11y/recommended",
+    "plugin:playwright/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:sonarjs/recommended",
@@ -87,6 +88,10 @@
     "import/newline-after-import": "error",
     "import/no-cycle": "off",
     "import/no-duplicates": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      { "devDependencies": ["**/*.config.ts", "**/*.spec.ts", "**/*.spec.tsx"] }
+    ],
     "import/prefer-default-export": "off",
     "jsx-a11y/label-has-associated-control": [
       "error",

.github/workflows/main.yml

@@ -1,18 +1,25 @@
 name: Tests
 
-on: push
+on:
+  push:
+    branches: [main]
 
 jobs:
   tests:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - name: Install Modules
-        run: NODE_OPTIONS='--openssl-legacy-provider' yarn install
-      - name: Run Build
-        run: NODE_OPTIONS='--openssl-legacy-provider' yarn run build
-      - name: Run Tests
+      - name: Install Dependencies
+        run: NODE_OPTIONS='--openssl-legacy-provider' yarn
+      - name: Run Jest Unit Tests
         run: NODE_OPTIONS='--openssl-legacy-provider' yarn test
+      - name: Run Build & Start
+        run: NODE_OPTIONS='--openssl-legacy-provider' yarn start
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright E2E Tests
+        run: yarn e2e

.gitignore

@@ -3,6 +3,10 @@
 node_modules
 out
 
+test-results
+playwright-report
+playwright/.cache
+
 public/robots.txt
 public/sitemap.xml
 public/.index/*

e2e/components/system/StartMenu/Sidebar/index.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "@playwright/test";
+
+test("should open start menu and see apps & power buttons", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await page.getByLabel("Start").click();
+
+  await expect(page.getByLabel("All apps")).toBeVisible();
+  await expect(page.getByLabel("Power")).toBeVisible();
+});

e2e/components/system/StartMenu/index.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from "@playwright/test";
+
+test("should open start menu and see folders", async ({ page }) => {
+  await page.goto("/");
+
+  await page.getByLabel("Start").click();
+
+  await expect(page.getByLabel("Emulators")).toBeVisible();
+  await expect(page.getByLabel("Games")).toBeVisible();
+});

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = require("next/jest")()({
   moduleDirectories: ["<rootDir>", "node_modules"],
   testEnvironment: "jest-environment-jsdom",
+  testPathIgnorePatterns: ["<rootDir>/e2e/"],
 });

package.json

@@ -24,6 +24,7 @@
     "docker:build": "docker build -t daedalos .",
     "docker:run": "docker run -dp 3000:3000 --rm --name daedalos daedalos",
     "dev": "next dev",
+    "e2e": "playwright test",
     "eslint": "eslint --report-unused-disable-directives .",
     "export": "next export",
     "prepare": "husky install",
@@ -78,6 +79,7 @@
     "7z-wasm": "^1.0.2",
     "@next/bundle-analyzer": "^13.4.8",
     "@next/eslint-plugin-next": "^13.4.8",
+    "@playwright/test": "^1.36.0",
     "@testing-library/dom": "^9.3.1",
     "@types/gif.js": "^0.2.2",
     "@types/ini": "^1.3.31",
@@ -102,6 +104,7 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-dom": "^5.0.1",
+    "eslint-plugin-playwright": "^0.15.3",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.19.0",

playwright.config.ts

@@ -0,0 +1,41 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+const PORT = process.env.PORT || 3000;
+const baseURL = `http://localhost:${PORT}`;
+
+const config: PlaywrightTestConfig = {
+  fullyParallel: true,
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+  reporter: "html",
+  retries: process.env.CI ? 2 : 0,
+  testDir: "./e2e",
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command: "yarn dev",
+    reuseExistingServer: !process.env.CI,
+    url: baseURL,
+  },
+  workers: process.env.CI ? 1 : undefined,
+};
+
+// ts-prune-ignore-next
+export default config;

yarn.lock

@@ -1628,6 +1628,16 @@
     picocolors "^1.0.0"
     tslib "^2.5.0"
 
+"@playwright/test@^1.36.0":
+  version "1.36.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.36.0.tgz#df2c0b09bbd27016adf1892b0c3502c4ce88d307"
+  integrity sha512-yN+fvMYtiyLFDCQos+lWzoX4XW3DNuaxjBu68G0lkgLgC6BP+m/iTxJQoSicz/x2G5EsrqlZTqTIP9sTgLQerg==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.36.0"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -3620,6 +3630,11 @@ eslint-plugin-jsx-a11y@^6.5.1:
     object.fromentries "^2.0.6"
     semver "^6.3.0"
 
+eslint-plugin-playwright@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.15.3.tgz#9fd8753688351bcaf41797eb6a7df8807fd5eb1b"
+  integrity sha512-LQMW5y0DLK5Fnpya7JR1oAYL2/7Y9wDiYw6VZqlKqcRGSgjbVKNqxraphk7ra1U3Bb5EK444xMgUlQPbMg2M1g==
+
 eslint-plugin-prettier@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
@@ -4117,7 +4132,7 @@ fscreen@^1.0.2:
   resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.2.0.tgz#1a8c88e06bc16a07b473ad96196fb06d6657f59e"
   integrity sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+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==
@@ -6364,6 +6379,11 @@ playlist-parser@^0.0.12:
   dependencies:
     xmldom "0.1.16"
 
+[email protected]:
+  version "1.36.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.0.tgz#35d1ed5f364a31e58bc8f06688ab02d538b96eb6"
+  integrity sha512-7RTr8P6YJPAqB+8j5ATGHqD6LvLLM39sYVNsslh78g8QeLcBs5750c6+msjrHUwwGt+kEbczBj1XB22WMwn+WA==
+
 pluralize@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"