Merge pull request #23 from isinstock/puppeteer

Puppeteer

.devcontainer/Dockerfile

@@ -0,0 +1,44 @@
+# Use the specific version of the image that suits your needs
+FROM mcr.microsoft.com/devcontainers/typescript-node
+
+# Install Puppeteer dependencies
+RUN apt-get update && apt-get install -y \
+  ca-certificates \
+  chromium \
+  fonts-liberation \
+  libasound2 \
+  libatk-bridge2.0-0 \
+  libatk1.0-0 \
+  libc6 \
+  libcairo2 \
+  libcups2 \
+  libdbus-1-3 \
+  libexpat1 \
+  libfontconfig1 \
+  libgbm1 \
+  libgcc1 \
+  libglib2.0-0 \
+  libgtk-3-0 \
+  libnspr4 \
+  libnss3 \
+  libpango-1.0-0 \
+  libpangocairo-1.0-0 \
+  libstdc++6 \
+  libx11-6 \
+  libx11-xcb1 \
+  libxcb1 \
+  libxcomposite1 \
+  libxcursor1 \
+  libxdamage1 \
+  libxext6 \
+  libxfixes3 \
+  libxi6 \
+  libxrandr2 \
+  libxrender1 \
+  libxss1 \
+  libxtst6 \
+  lsb-release \
+  wget \
+  xdg-utils \
+  xvfb \
+  && rm -rf /var/lib/apt/lists/*

.devcontainer/devcontainer.json

@@ -1,9 +1,27 @@
 {
-  "image": "mcr.microsoft.com/devcontainers/typescript-node",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": {
+      "--platform": "linux/amd64"
+    }
+  },
+  "capAdd": ["SYS_ADMIN"],
+  "containerEnv": {
+    "DISPLAY": ":99",
+    "PUPPETEER_EXECUTABLE_PATH": "/usr/bin/chromium",
+    "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD": "true"
+  },
+  "postStartCommand": "Xvfb :99 -ac -screen 0 1280x720x16 -nolisten tcp -nolisten unix &",
   "customizations": {
     "vscode": {
-      "extensions": ["dbaeumer.vscode-eslint"]
+      "extensions": [
+        "bradlc.vscode-tailwindcss",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "GitHub.copilot",
+        "Orta.vscode-jest"
+      ]
     }
   },
-  "forwardPorts": [8888]
+  "forwardPorts": [21222]
 }

.eslintrc.json

@@ -6,7 +6,8 @@
     "project": ["./tsconfig.json"]
   },
   "env": {
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "plugins": [
     "@typescript-eslint",

.github/workflows/tests.yml

@@ -14,4 +14,5 @@ jobs:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
+      - run: npm run build -- --production
       - run: npm run test

.vscode/extensions.json

@@ -1,3 +1,9 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "bradlc.vscode-tailwindcss", "GitHub.copilot"]
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "GitHub.copilot",
+    "Orta.vscode-jest",
+  ]
 }

.vscode/settings.json

@@ -14,8 +14,6 @@
   },
   "search.exclude": {
     "**/node_modules": true,
-    "**/bower_components": true,
-    "**/*.code-search": true,
     "**/dist": true
   },
   "eslint.validate": ["javascript", "javascriptreact", "html", "typescript", "typescriptreact"],

.vscode/tasks.json

@@ -7,21 +7,30 @@
       {
           "label": "install",
           "type": "shell",
+          "group": "build",
           "command": "npm",
           "args": ["install"]
       },
       {
           "label": "update",
           "type": "shell",
+          "group": "build",
           "command": "npm",
           "args": ["update"]
       },
       {
-          "label": "test",
+          "label": "run tests",
           "type": "shell",
+          "group": "build",
           "command": "npm",
           "args": ["run", "test"]
       },
+      {
+          "label": "run tests on host",
+          "type": "process",
+          "group": "build",
+          "command": "CHROME_DEVTOOLS_ID=${input:chromeDevtoolsID} npm run test",
+      },
       {
           "label": "development - build",
           "type": "shell",
@@ -50,5 +59,12 @@
           "command": "npm",
           "args": ["run", "watch", "--", "--production"]
       }
+  ],
+  "inputs": [
+    {
+        "id": "chromeDevtoolsID",
+        "description": "Chrome Devtools ID: e3c7f5e3-c1e5-4b81-bda1-4633c5c5f7f7",
+        "type": "promptString"
+    },
   ]
 }

README.md

@@ -44,3 +44,15 @@ npm run watch -- --production
 - ✅ JSON-LD
 - ✅ RDFa
 - ✅ Microdata
+
+## Testing
+
+### Google Chrome
+
+- Run `bin/launch-test-chrome` to run the test suite in Google Chrome.
+- Open the profile which has the installed extension.
+  - If you do not have the extension installed:
+    - run `npm run build -- --production` to build the extension
+    - Load it into Google Chrome by visiting `chrome://extensions`
+- You should see output similar to `DevTools listening on ws://127.0.0.1:21222/devtools/browser/e3c7f5e3-c1e5-4b81-bda1-4633c5c5f7f7`, copy the UUID portion of the URL which would be `e3c7f5e3-c1e5-4b81-bda1-4633c5c5f7f7` in this example.
+- Run `bin/integration-test "e3c7f5e3-c1e5-4b81-bda1-4633c5c5f7f7"`

bin/integration-test

@@ -0,0 +1,2 @@
+#/usr/bin sh
+CHROME_DEVTOOLS_ID="$1" npm run test

bin/launch-test-chrome

@@ -0,0 +1,2 @@
+#/usr/bin sh
+/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=21222

build.js

@@ -1,8 +1,10 @@
 const build = require('esbuild').build
 const copy = require('esbuild-plugin-copy').copy
-const postCssPlugin = require('esbuild-style-plugin')
+const postcss = require('postcss')
 const pkg = require('./package.json')
 const fs = require('fs')
+const tailwindcss = require('tailwindcss')
+const autoprefixer = require('autoprefixer')
 
 const isProduction = process.argv.includes('--production')
 const watch = process.argv.includes('--watch')
@@ -41,15 +43,24 @@ const copyFirefoxManifestPlugin = {
   },
 }
 
-// Chrome
-build({
+const cssAsStringPlugin = {
+  name: 'css-as-string',
+  setup(build) {
+    build.onLoad({filter: /\.css$/}, async args => {
+      const from = args.path
+      const cssContent = await fs.promises.readFile(from, 'utf8')
+      const result = await postcss([tailwindcss, autoprefixer]).process(cssContent, {from})
+      return {
+        contents: `export default ${JSON.stringify(result.css)}`,
+        loader: 'js',
+      }
+    })
+  },
+}
+
+const config = {
   logLevel: 'info',
-  entryPoints: [
-    './src/background.ts',
-    './src/content_scripts/content_script.tsx',
-    './src/elements/isinstock-button/style.css',
-  ],
-  outdir: 'dist/chrome',
+  entryPoints: ['./src/background.ts', './src/content_scripts/content_script.tsx'],
   bundle: true,
   sourcemap: !isProduction,
   watch,
@@ -65,12 +76,15 @@ build({
     '.png': 'dataurl',
     '.svg': 'dataurl',
   },
+  plugins: [cssAsStringPlugin],
+}
+
+// Chrome
+build({
+  ...config,
+  outdir: 'dist/chrome',
   plugins: [
-    postCssPlugin({
-      postcss: {
-        plugins: [require('tailwindcss'), require('autoprefixer')],
-      },
-    }),
+    ...config.plugins,
     copy({
       resolveFrom: 'cwd',
       assets: {
@@ -84,34 +98,10 @@ build({
 
 // Firefox
 build({
-  logLevel: 'info',
-  entryPoints: [
-    './src/background.ts',
-    './src/content_scripts/content_script.tsx',
-    './src/elements/isinstock-button/style.css',
-  ],
+  ...config,
   outdir: 'dist/firefox',
-  bundle: true,
-  sourcemap: !isProduction,
-  watch,
-  minify: isProduction,
-  target: ['ios15', 'chrome100', 'edge100', 'firefox100', 'safari15'],
-  define: {
-    VERSION: `"${pkg.version}"`,
-    ISINSTOCK_URL: isProduction ? '"https://isinstock.com"' : '"http://localhost:3000"',
-    CHROME_EXTENSION_ID: '"bnglflgcpflggbpbcbpgeaknekceeojd"',
-  },
-  drop: isProduction ? ['console'] : [],
-  loader: {
-    '.png': 'dataurl',
-    '.svg': 'dataurl',
-  },
   plugins: [
-    postCssPlugin({
-      postcss: {
-        plugins: [require('tailwindcss'), require('autoprefixer')],
-      },
-    }),
+    ...config.plugins,
     copy({
       resolveFrom: 'cwd',
       assets: {

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  testEnvironment: 'jsdom',
   roots: ['src'],
+  testTimeout: 30000,
   transform: {
     '^.+\\.ts$': ['ts-jest', {tsconfig: 'tsconfig.test.json'}],
   },