Add Extension tests with Puppeteer

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit --silent",
+    "test:all": "vue-cli-service build && vue-cli-service test:unit --testMatch='**/tests/**/*.spec.[jt]s'",
     "lint": "vue-cli-service lint",
     "build-watch": "vue-cli-service  --env.NODE_ENV=development build-watch --mode development"
   },
@@ -42,6 +43,7 @@
     "eslint-plugin-vue": "^9.4.0",
     "jest": "^27.0.5",
     "postcss": "^8.4.16",
+    "puppeteer": "^17.1.1",
     "sass": "^1.54.8",
     "sass-loader": "^13.0.2",
     "tailwindcss": "^3.1.8",

src/chrome/background.ts

@@ -11,13 +11,19 @@ const linksRepo = new LinkRepository({
 const bookmarks = new BookmarkRepository()
 
 function updateWithTab(tab?: chrome.tabs.Tab) {
-    const isChrome = tab?.url?.startsWith("chrome://") || tab?.pendingUrl?.startsWith("chrome://") || tab?.url?.startsWith("https://chrome.google.com")
+    const isTestExtension = tab?.url?.startsWith("chrome-extension://")
+    const isSettings = tab?.url?.startsWith("chrome://") || tab?.pendingUrl?.startsWith("chrome://") || tab?.url?.startsWith("https://chrome.google.com")
     const tabId = tab?.id
 
-    if (tabId == null || isChrome) {
+    if (isTestExtension) {
+        // for extension testing only, do not overwrite previous content
+        return
+    }
+
+    if (tabId == null || isSettings) {
         console.debug("tab has no content")
         setBadgeText(0, tabId)
-        chrome.storage.local.set({ pageData: { url: "" }, links: [] })
+        chrome.storage.local.set({ pageData: { url: "" }, linkRsp: {links: [] } })
         return
     }
 

src/manifest.production.json

@@ -21,7 +21,7 @@
         "default_popup": "logged_out.html"
     },
     "icons": {
-        "128": "icon_128.png"
+        "128": "logo_128.png"
     },
     "commands": {
         "_execute_action": {
@@ -41,4 +41,4 @@
             ]
         }
     ]
-}
+}

src/view/logged_in.vue

@@ -184,7 +184,6 @@ export default {
         refreshContent: function () {
             fetchPageData().then((data) => {
                 const page = data
-                console.debug("Setting page data:", page)
                 this.url = page.url
                 this.site_icon = page.iconURL
                 this.title = page.title
@@ -207,7 +206,6 @@ export default {
                 elem.setAttribute("src", this.site_icon)
                 elem.classList = "h-10 w-10"
                 imageHolder.replaceChildren(elem)
-                console.debug("replaced icon with image:", imageHolder.innerHTML)
             }
         },
         parseTags: function (e) {

src/view/logged_out.vue

@@ -25,6 +25,7 @@
 
                 <div class="flex flex-col space-y-2">
                     <a
+                        id="sign-up-button"
                         class="w-max group relative py-2 px-8 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                         href="https://everypost.in/features/?utm_source=extension+chrome"
                         target="_blank">
@@ -33,9 +34,11 @@
                     <div class="my-1 font-medium text-sm text-gray-700">
                         Already have an account?
                         <a
+                            id="sign-in-link"
                             class="font-medium text-blue-600 underline-offset-1 underline"
                             @click="authenticate"
-                            href="https://everypost.in/users/sign_in?utm_source=extension+chrome&extension=true">
+                            href="https://everypost.in/users/sign_in?utm_source=extension+chrome&extension=true"
+                            target="_blank">
                             Sign in
                         </a>
                     </div>

tests/integration/bootstrap.js

@@ -0,0 +1,35 @@
+const puppeteer = require('puppeteer');
+
+async function bootstrap(options = {}) {
+    const { extensionPage = "", devtools = false, slowMo = false, appUrl } = options;
+    const browser = await puppeteer.launch({
+        headless: false,
+        devtools,
+        args: [
+            '--disable-extensions-except=./dist',
+            '--load-extension=./dist',
+        ],
+        ...(slowMo && { slowMo }),
+    });
+
+    const appPage = await browser.newPage();
+    await appPage.goto(appUrl, { waitUntil: 'load' });
+
+    const targets = await browser.targets();
+    const extensionTarget = targets.find(target => target.type() === 'service_worker');
+    const partialExtensionUrl = extensionTarget.url() || '';
+    const [, , extensionId] = partialExtensionUrl.split('/');
+
+    const extPage = await browser.newPage();
+    const extensionUrl = `chrome-extension://${extensionId}/${extensionPage}`;
+    await extPage.goto(extensionUrl, { waitUntil: 'load' });
+
+    return {
+        appPage,
+        browser,
+        extensionUrl,
+        extPage,
+    };
+}
+
+module.exports = { bootstrap };

tests/integration/logged_out.spec.js

@@ -0,0 +1,42 @@
+const { bootstrap } = require('./bootstrap');
+
+describe('test logged out behavior', () => {
+    let extPage, appPage, browser;
+
+    beforeAll(async () => {
+        const context = await bootstrap({ appUrl: 'http://localhost:3000', extensionPage: 'logged_out.html' /*, slowMo: 50, devtools: true*/ });
+
+        extPage = context.extPage
+        appPage = context.appPage
+        browser = context.browser
+    });
+
+    it('should render sign-up / sign-in links', async () => {
+        await extPage.bringToFront()
+        const signUpButton = await extPage.$('a#sign-up-button')
+        await signUpButton.click()
+
+        const signUpTarget = await browser.waitForTarget(target => target.opener() === extPage.target())
+        const signUpPage = await signUpTarget.page();
+
+        expect(signUpPage.url()).toMatch("https://everypost.in/features/")
+
+        await signUpPage.close()
+    });
+
+    it('should render sign-in link', async () => {
+        await extPage.bringToFront()
+        const signInLink = await extPage.$('a#sign-in-link')
+        await signInLink.click()
+
+        const signInTarget = await browser.waitForTarget(target => target.opener() === extPage.target())
+        const signInPage = await signInTarget.page();
+        expect(signInPage.url()).toMatch("https://everypost.in/users/sign_in")
+
+        await signInPage.close()
+    });
+
+    afterAll(async () => {
+        await browser.close();
+    });
+});