Adding devmatch tests

.devmatch/example.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect, Page } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+});
+
+test.describe("New Todo", () => {
+  test("should allow me to add todo items", async ({ page }) => {
+    // Open the Start Menu
+    await page.locator("main > nav > button").click();
+
+    // Find the new menu
+    await expect(
+      page.locator("main > nav > ol > li > button > figure > figcaption", {
+        hasText: "Foo",
+      })
+    ).toHaveCount(1);
+
+    //
+    await expect(
+      page.locator("main > nav > ol > li > button > figure > figcaption", {
+        hasText: "Bar",
+      })
+    ).toHaveCount(0);
+    //.toContainText( currentYear + " All Rights Reserved.");
+  });
+});
+
+// async function createDefaultTodos(page: Page) {
+//   for (const item of TODO_ITEMS) {
+//     await page.locator('.new-todo').fill(item);
+//     await page.locator('.new-todo').press('Enter');
+//   }
+// }
+//
+// async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+//   return await page.waitForFunction(e => {
+//     return JSON.parse(localStorage['react-todos']).length === e;
+//   }, expected);
+// }
+//
+// async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+//   return await page.waitForFunction(e => {
+//     return JSON.parse(localStorage['react-todos']).filter(i => i.completed).length === e;
+//   }, expected);
+// }
+//
+// async function checkTodosInLocalStorage(page: Page, title: string) {
+//   return await page.waitForFunction(t => {
+//     return JSON.parse(localStorage['react-todos']).map(i => i.title).includes(t);
+//   }, title);
+// }

.eslintignore

@@ -5,3 +5,4 @@ out
 public
 scripts
 *.config.js
+.devmatch

.eslintrc.json

@@ -36,6 +36,10 @@
     "unused-imports"
   ],
   "rules": {
+    "import/no-extraneous-dependencies": [
+      "error",
+      { "devDependencies": ["playwright.config.ts"] }
+    ],
     "@next/next/no-img-element": "off",
     "@typescript-eslint/await-thenable": "error",
     "@typescript-eslint/consistent-indexed-object-style": "error",

.github/workflows/main.yml

@@ -1,15 +1,15 @@
-name: Tests
-
-on: push
-
-jobs:
-  tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Install Modules
-        run: yarn install
-      - name: Run Build
-        run: yarn run build
-      - name: Run Tests
-        run: yarn test
+#name: Tests
+#
+#on: push
+#
+#jobs:
+#  tests:
+#    runs-on: ubuntu-latest
+#    steps:
+#      - uses: actions/checkout@v2
+#      - name: Install Modules
+#        run: yarn install
+#      - name: Run Build
+#        run: yarn run build
+#      - name: Run Tests
+#        run: yarn test

.github/workflows/playwright.yml

@@ -0,0 +1,31 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -23,3 +23,5 @@ public/Users/Public/**
 !public/Users/Public/Videos
 !public/Users/Public/Videos/Make an OS with ReactJS & Next.js
 !public/Users/Public/Videos/Make an OS with ReactJS & Next.js/*.url
+test-results/
+playwright-report/

package.json

@@ -17,7 +17,7 @@
     "docker:build": "docker build -t daedalos .",
     "docker:run": "docker run -dp 3000:3000 --rm --name daedalos daedalos",
     "dev": "next dev",
-    "eslint": "eslint --report-unused-disable-directives .",
+    "eslint": "eslint --report-unused-disable-directives . ",
     "export": "next export",
     "prepare": "husky install",
     "prettier": "prettier --write .",
@@ -29,7 +29,7 @@
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",
     "*.{ts,tsx}": "stylelint --fix",
-    "*.{js,ts,tsx}": "eslint --fix"
+    "*.{js,ts,tsx}": "eslint --fix "
   },
   "resolutions": {
     "styled-components": "^5"
@@ -63,6 +63,7 @@
   "devDependencies": {
     "@next/bundle-analyzer": "^12.1.5",
     "@next/eslint-plugin-next": "12.1.5",
+    "@playwright/test": "^1.21.1",
     "@stylelint/postcss-css-in-js": "^0.37.2",
     "@types/gif.js": "^0.2.2",
     "@types/ini": "^1.3.31",

playwright.config.ts

@@ -0,0 +1,98 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+
+  testDir: "./.devmatch",
+
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+
+  /* 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:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;