More options tests

mtusnio · Aug 25, 2024 · c5f5c4e · c5f5c4e
1 parent e95b287
commit c5f5c4e
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 29 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -20,7 +20,8 @@
                 "${jest.testFile}"
             ],
             "env": {
-                "HEADLESS": "false"
+                "HEADLESS": "false",
+                "DO_NOT_CLOSE": "true"
             },
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",

diff --git a/browser_tests/activate.test.js b/browser_tests/activate.test.js
@@ -1,3 +1,4 @@
+import path from 'path';
 import * as utils from "./utils";
 
 let browser = null;
@@ -10,14 +11,17 @@ beforeEach(async () => {
 });
 
 afterEach(async () => {
-    await browser.close();
-    browser = null;
-    worker = null
+    if (process.env["DO_NOT_CLOSE"] != "true") {
+        await browser.close();
+        browser = null;
+        worker = null
+    }
 });
 
 test("extension is disabled by default", async () => {
     const page = await browser.newPage();
-    await page.goto("https://www.google.com/", { waitUntil: ['domcontentloaded', "networkidle2"] });
+    await page.goto(`file://${path.resolve()}/browser_tests/testdata/plain.html`, { waitUntil: ['domcontentloaded', "networkidle2"] });
+
     await page.bringToFront();
 
     const status = await utils.getExtensionStatus(worker)
@@ -29,7 +33,8 @@ test("extension is disabled by default", async () => {
 
 test("toggling the extension on/off two times works", async () => {
     const page = await browser.newPage();
-    await page.goto("https://www.google.com/", { waitUntil: ['domcontentloaded', "networkidle2"] });
+    await page.goto(`file://${path.resolve()}/browser_tests/testdata/plain.html`, { waitUntil: ['domcontentloaded', "networkidle2"] });
+
     await page.bringToFront();
 
     for (let i = 0; i < 2; i++) {

diff --git a/browser_tests/options.test.js b/browser_tests/options.test.js
@@ -1,6 +1,8 @@
 'use strict';
 
+import path from 'path';
 import * as utils from "./utils";
+
 let browser = null;
 let worker = null
 
@@ -11,14 +13,81 @@ beforeEach(async () => {
 });
 
 afterEach(async () => {
-    await browser.close();
-    browser = null;
-    worker = null
+    if (process.env["DO_NOT_CLOSE"] != "true") {
+        await browser.close();
+        browser = null;
+        worker = null
+    }
 });
 
+async function testChecked(page, selector, expectedChecked) {
+    await page.waitForSelector(selector)
+    const isChecked = await page.$eval(selector, (input) => {
+        return input.checked;
+    });
+
+    expect(isChecked).toBe(expectedChecked)
+}
+
 describe("the options page", function () {
-    it("loads properly", async () => {
+    it("loads properly default page", async () => {
         const page = await browser.newPage();
         await page.goto(`chrome-extension://${utils.EXTENSION_ID}/options.html`);
+        await page.bringToFront();
+
+        await testChecked(page, "input[name='popupColor'][value='yellow']", true)
+        await testChecked(page, "input[name='fontSize'][value='small']", true)
+        await testChecked(page, "input[name='simpTrad'][value='classic']", true)
+        await testChecked(page, "input[name='zhuyin']", false)
+        await testChecked(page, "input[name='grammar']", true)
+        await testChecked(page, "input[name='pinyinEnabled']", true)
+        await testChecked(page, "input[name='toneColors'][value='standard']", true)
+        await testChecked(page, "input[name='jyutpingEnabled']", true)
+        await testChecked(page, "input[name='cantoneseEntriesEnabled']", true)
+        await testChecked(page, "input[name='saveToWordList'][value='allEntries']", true)
+        await testChecked(page, "input[name='skritterTLD'][value='com']", true)
+        await testChecked(page, "input[name='ttsEnabled']", false)
+    })
+
+    it("loads all values changed", async () => {
+        let page = await browser.newPage();
+        await page.goto(`file://${path.resolve()}/browser_tests/testdata/plain.html`, { waitUntil: ['domcontentloaded', "networkidle2"] });
+
+        await worker.evaluate(async () => {
+            await chrome.storage.local.set(
+                {
+                    "popupcolor": "blue",
+                    "fontSize": "large",
+                    "simpTrad": "auto",
+                    "zhuyin": "yes",
+                    "grammar": "no",
+                    "pinyinEnabled": "no",
+                    "tonecolors": "yes",
+                    "toneColorScheme": "pleco",
+                    "jyutpingEnabled": "no",
+                    "cantoneseEntriesEnabled": "no",
+                    "skritterTLD": "cn",
+                    "saveToWordList": "firstEntryOnly",
+                    "ttsEnabled": "yes",
+                })
+        })
+        await page.close()
+        page = await browser.newPage();
+        await page.bringToFront();
+
+        await page.goto(`chrome-extension://${utils.EXTENSION_ID}/options.html`);
+
+        await testChecked(page, "input[name='popupColor'][value='blue']", true)
+        await testChecked(page, "input[name='fontSize'][value='large']", true)
+        await testChecked(page, "input[name='simpTrad'][value='auto']", true)
+        await testChecked(page, "input[name='zhuyin']", true)
+        await testChecked(page, "input[name='grammar']", false)
+        await testChecked(page, "input[name='pinyinEnabled']", false)
+        await testChecked(page, "input[name='toneColors'][value='pleco']", true)
+        await testChecked(page, "input[name='jyutpingEnabled']", false)
+        await testChecked(page, "input[name='cantoneseEntriesEnabled']", false)
+        await testChecked(page, "input[name='saveToWordList'][value='firstEntryOnly']", true)
+        await testChecked(page, "input[name='skritterTLD'][value='cn']", true)
+        await testChecked(page, "input[name='ttsEnabled']", true)
     })
 })
diff --git a/browser_tests/popup.test.js b/browser_tests/popup.test.js
@@ -18,9 +18,11 @@ beforeEach(async () => {
 });
 
 afterEach(async () => {
-    await browser.close();
-    browser = null;
-    worker = null
+    if (process.env["DO_NOT_CLOSE"] != "true") {
+        await browser.close();
+        browser = null;
+        worker = null
+    }
 });
 
 test("if extension ENABLED, popup appears when hovering over text in plain html", async () => {

diff --git a/browser_tests/utils.js b/browser_tests/utils.js
@@ -5,14 +5,20 @@ const EXTENSION_ID = "aoofnmlljjgifabglpelnbmipdfnfflk"
 
 async function setupBrowser() {
     let headless = true
+    let dumpio = false
     if (process.env["HEADLESS"]) {
         headless = process.env["HEADLESS"] == "true"
     }
+    if (process.env["DUMPIO"]) {
+        dumpio = process.env["DUMPIO"] == "true"
+    }
+
 
     const browser = await puppeteer.launch({
         browser: "chrome",
         headless: headless,
         devTools: true,
+        dumpio: dumpio,
         args: [
             `--disable-extensions-except=${EXTENSION_PATH}`,
             `--load-extension=${EXTENSION_PATH}`,

diff --git a/js/options.js b/js/options.js
@@ -5,49 +5,66 @@
  */
 
 'use strict';
+async function getConfig() {
+    return await chrome.storage.local.get([
+        "popupcolor",
+        "tonecolors",
+        "fontSize",
+        "skritterTLD",
+        "zhuyin",
+        "grammar",
+        "simpTrad",
+        "toneColorScheme",
+        "cantoneseEntriesEnabled",
+        "jyutpingEnabled",
+        "pinyinEnabled",
+        "ttsEnabled",
+        "saveToWordList"
+    ]);
+}
 
-function loadVals() {
-
-    const popupColor = localStorage['popupcolor'] || 'yellow';
+async function loadVals() {
+    const config = await getConfig()
+    const popupColor = config['popupcolor'] || 'yellow';
     document.querySelector(`input[name="popupColor"][value="${popupColor}"]`).checked = true;
 
-    const toneColors = localStorage['tonecolors'] || 'yes';
+    const toneColors = config['tonecolors'] || 'yes';
     if (toneColors === 'no') {
         document.querySelector('#toneColorsNone').checked = true;
     } else {
-        const toneColorScheme = localStorage['toneColorScheme'] || 'standard';
+        const toneColorScheme = config['toneColorScheme'] || 'standard';
         document.querySelector(`input[name="toneColors"][value="${toneColorScheme}"]`).checked = true;
     }
 
-    const fontSize = localStorage['fontSize'] || 'small';
+    const fontSize = config['fontSize'] || 'small';
     document.querySelector(`input[name="fontSize"][value="${fontSize}"]`).checked = true;
 
-    const simpTrad = localStorage['simpTrad'] || 'classic';
+    const simpTrad = config['simpTrad'] || 'classic';
     document.querySelector(`input[name="simpTrad"][value="${simpTrad}"]`).checked = true;
 
-    const zhuyin = localStorage['zhuyin'] || 'no';
+    const zhuyin = config['zhuyin'] || 'no';
     document.querySelector('#zhuyin').checked = zhuyin === 'yes';
 
-    const grammar = localStorage['grammar'] || 'yes';
+    const grammar = config['grammar'] || 'yes';
     document.querySelector('#grammar').checked = grammar !== 'no';
 
-    const saveToWordList = localStorage['saveToWordList'] || 'allEntries';
+    const saveToWordList = config['saveToWordList'] || 'allEntries';
     document.querySelector(`input[name="saveToWordList"][value="${saveToWordList}"]`).checked = true;
 
-    const skritterTLD = localStorage['skritterTLD'] || 'com';
+    const skritterTLD = config['skritterTLD'] || 'com';
     document.querySelector(`input[name="skritterTLD"][value="${skritterTLD}"]`).checked = true;
 
-    const cantoneseEntriesEnabled = localStorage['cantoneseEntriesEnabled'] || 'yes';
+    const cantoneseEntriesEnabled = config['cantoneseEntriesEnabled'] || 'yes';
     document.querySelector('#cantoneseEntriesEnabled').checked = cantoneseEntriesEnabled === 'yes';
 
-    const jyutpingEnabled = localStorage['jyutpingEnabled'] || 'yes';
+    const jyutpingEnabled = config['jyutpingEnabled'] || 'yes';
     document.querySelector('#jyutpingEnabled').checked = jyutpingEnabled === 'yes';
 
-    const pinyinEnabled = localStorage['pinyinEnabled'] || 'yes';
+    const pinyinEnabled = config['pinyinEnabled'] || 'yes';
     document.querySelector('#pinyinEnabled').checked = pinyinEnabled === 'yes';
 
-    const ttsEnabled = localStorage['pinyinEnabled'] || 'no';
-    document.querySelector('#pinyinEnabled').checked = pinyinEnabled === 'yes';
+    const ttsEnabled = config['ttsEnabled'] || 'no';
+    document.querySelector('#ttsEnabled').checked = ttsEnabled === 'yes';
 }
 
 function setPopupColor(popupColor) {