Add playwright tests

jest.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1"
+  },
+  testMatch: ["**/__tests__/**/*.test.ts", "**/*.test.ts"],
   setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"] // Location of your setupTests file
 }

package.json

@@ -15,6 +15,7 @@
   },
   "description": "SwiftPaste is a Chrome extension that enhances your copy-paste workflow. It allows quick access to categorized clipboard data based on context, making tasks like form filling, coding, and communication more efficient. Contributions are welcomed. See the contributing guide for more details.",
   "devDependencies": {
+    "@playwright/test": "^1.35.1",
     "@tailwindcss/typography": "^0.5.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/chrome": "^0.0.237",
@@ -63,7 +64,8 @@
     "dev:watch": "webpack --watch --config webpack.dev.js",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "playwright": "playwright test"
   },
   "version": "0.1.0"
 }

playwright.config.ts

@@ -0,0 +1,8 @@
+import { PlaywrightTestConfig } from "@playwright/test"
+
+const config: PlaywrightTestConfig = {
+  testDir: "src", // Search for tests in this directory.
+  testMatch: "**/*.spec.ts" // Run files with this glob pattern.
+}
+
+export default config

src/fixtures.ts

@@ -0,0 +1,36 @@
+import { test as base, expect, chromium, type BrowserContext } from "@playwright/test"
+import path from "path"
+
+const test = base.extend<{
+  context: BrowserContext
+  extensionId: string
+}>({
+  context: async ({}, use) => {
+    const extensionPath = path.join(__dirname, "../dist")
+    const context = await chromium.launchPersistentContext("", {
+      headless: false,
+      args: [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`]
+    })
+    await use(context)
+    await context.close()
+  },
+  extensionId: async ({ context }, use) => {
+    /*
+    // for manifest v2:
+    let [background] = context.backgroundPages()
+    if (!background)
+      background = await context.waitForEvent('backgroundpage')
+    */
+
+    // for manifest v3:
+    let [background] = context.serviceWorkers()
+    if (!background) background = await context.waitForEvent("serviceworker")
+
+    const extensionId = background.url().split("/")[2]
+    await use(extensionId)
+  }
+})
+
+const extensionPath = "chrome-extension://dpeknedpgfglbbfknplheogdofhfmajm"
+
+export { test, expect, extensionPath }

src/options/options.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect, extensionPath } from "../fixtures"
+
+test("loads the extension", async ({ page }) => {
+  await page.goto(`${extensionPath}/options.html`)
+  const title = await page.title()
+  expect(title).toBe("SwiftPaste")
+})

src/popup/popup.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect, extensionPath } from "../fixtures"
+
+test("loads the extension", async ({ page }) => {
+  await page.goto(`${extensionPath}/popup.html`)
+  const title = await page.title()
+  expect(title).toBe("SwiftPaste")
+})

tsconfig.json

@@ -9,6 +9,9 @@
     "incremental": true,
     "downlevelIteration": true
   },
+  "paths": {
+    "@/*": ["./src/*"]
+  },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]
 }

yarn.lock

@@ -682,6 +682,16 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.35.1":
+  version "1.35.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.35.1.tgz#a596b61e15b980716696f149cc7a2002f003580c"
+  integrity sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.35.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -701,7 +711,7 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@tailwindcss/[email protected]":
+"@tailwindcss/typography@^0.5.9":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
   integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
@@ -1401,7 +1411,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.9.0:
+ajv@^8.0.0, ajv@^8.12.0, ajv@^8.9.0:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -2946,7 +2956,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, 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==
@@ -4770,6 +4780,11 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+[email protected]:
+  version "1.35.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.35.1.tgz#52c1e6ffaa6a8c29de1a5bdf8cce0ce290ffb81d"
+  integrity sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==
+
 postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"