refactor: update code to Vue 3 and refresh test cases

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+  },
+  setupFilesAfterEnv: ['./jest.setup.js'],
+}

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package.json

@@ -5,23 +5,43 @@
   "scripts": {
     "serve": "vue-cli-service build --mode development --watch",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit __tests__/.*.spec.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@medv/finder": "1.1.2",
+    "@tailwindcss/postcss7-compat": "2.0.2",
+    "@vueuse/core": "4.0.8",
+    "autoprefixer": "9",
     "core-js": "3.6.5",
-    "vue": "3.0.0"
+    "postcss": "7",
+    "tailwindcss": "npm:@tailwindcss/[email protected]",
+    "vue": "3.0.6",
+    "vue3-highlightjs": "1.0.5"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "5.12.0",
     "@vue/cli-plugin-babel": "4.5.0",
     "@vue/cli-plugin-eslint": "4.5.0",
+    "@vue/cli-plugin-unit-jest": "4.5.12",
     "@vue/cli-service": "4.5.0",
     "@vue/compiler-sfc": "3.0.0",
     "@vue/eslint-config-prettier": "6.0.0",
+    "@vue/test-utils": "2.0.0-rc.6",
     "babel-eslint": "10.1.0",
     "eslint": "6.7.2",
     "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-vue": "7.0.0-0",
+    "eslint-plugin-vue": "7.10.0",
+    "jest": "26.6.3",
+    "jest-vue-preprocessor": "1.7.1",
+    "node-sass": "5.0.0",
+    "playwright": "1.10.0",
     "prettier": "1.19.1",
-    "vue-cli-plugin-browser-extension": "0.25.1"
+    "puppeteer": "9.0.0",
+    "sass-loader": "10.1.1",
+    "typescript": "3.9.3",
+    "vue-cli-plugin-browser-extension": "0.25.1",
+    "vue-cli-plugin-tailwind": "2.0.6",
+    "vue-jest": "5.0.0-alpha.9"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

src/__e2e-tests__/build.spec.js

@@ -0,0 +1,10 @@
+import puppeteer from "puppeteer";
+import { launchPuppeteerWithExtension } from "./helpers";
+
+describe("install", () => {
+  test("it installs the extension", async () => {
+    const browser = await launchPuppeteerWithExtension(puppeteer);
+    expect(browser).toBeTruthy();
+    browser.close();
+  }, 5000);
+});

src/__e2e-tests__/helpers.js

@@ -0,0 +1,30 @@
+import path from "path";
+import { scripts } from "../../package.json";
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+
+const extensionPath = path.join(__dirname, "../../dist");
+
+export const launchPuppeteerWithExtension = function(puppeteer) {
+  const options = {
+    headless: false,
+    ignoreHTTPSErrors: true,
+    devtools: true,
+    args: [
+      `--disable-extensions-except=${extensionPath}`,
+      `--load-extension=${extensionPath}`,
+      "--no-sandbox",
+      "--disable-setuid-sandbox"
+    ]
+  };
+
+  if (process.env.CI) {
+    options.executablePath = process.env.PUPPETEER_EXEC_PATH; // Set by docker on github actions
+  }
+
+  return puppeteer.launch(options);
+};
+
+export const runBuild = function() {
+  return exec(scripts.build);
+};