Add option form page

QA.md

@@ -37,8 +37,6 @@ The behaviors of the console are tested in [Console section](#consoles).
 
 ##### `"blacklist"` section
 
-- [ ] able to add item
-- [ ] able to remove item
 - [ ] `github.com/a` blocks `github.com/a`, and not blocks `github.com/aa`
 
 ##### Updating
@@ -46,12 +44,6 @@ The behaviors of the console are tested in [Console section](#consoles).
 - [ ] keymap settings are applied to open tabs without reload
 - [ ] search settings are applied to open tabs without reload
 
-### Settings source
-
-- [ ] show confirmation dialog on switched from json to form
-- [ ] state is saved on source changed
-- [ ] on switching form -> json -> form, first and last form setting is equivalent to first one
-
 ## Find mode
 
 - [ ] open console with <kbd>/</kbd>
@@ -60,9 +52,3 @@ The behaviors of the console are tested in [Console section](#consoles).
 - [ ] Wrap search by <kbd>n</kbd>/<kbd>N</kbd>
 - [ ] Find with last keyword if keyword is empty
 - [ ] Find keyword last used on new tab opened
-
-## Misc
-
-- [ ] Work on `about:blank`
-- [ ] Able to map `<A-Z>` key.
-- [ ] Open file menu by <kbd>Alt</kbd>+<kbd>F</kbd> (Other than Mac OS)

e2e/options_form.test.js

@@ -0,0 +1,83 @@
+const lanthan = require('lanthan');
+const path = require('path');
+const assert = require('assert');
+
+describe("options form page", () => {
+  let firefox;
+  let session;
+  let browser;
+
+  beforeEach(async() => {
+    firefox = await lanthan.firefox({
+      spy: path.join(__dirname, '..'),
+      builderf: (builder) => {
+        builder.addFile('build/settings.js');
+        builder.addFile('build/settings.html');
+      },
+    });
+    await firefox.session.installAddonFromPath(path.join(__dirname, '..'));
+    session = firefox.session;
+    browser = firefox.browser;
+
+    let tabs = await browser.tabs.query({});
+    for (let tab of tabs.slice(1)) {
+      await browser.tabs.remove(tab.id);
+    }
+  })
+
+  afterEach(async() => {
+    if (firefox) {
+      await firefox.close();
+    }
+  })
+
+  const setBlacklistValue = async(nth, value) => {
+    let selector = '.form-blacklist-form .column-url';
+    let input = (await session.findElementsByCSS(selector))[nth];
+    await input.sendKeys(value);
+    await session.executeScript(`document.querySelectorAll('${selector}')[${nth}].blur()`);
+  }
+
+  it('switch to form settings', async () => {
+    let url = await browser.runtime.getURL("build/settings.html")
+    await session.navigateTo(url);
+
+    let useFormInput = await session.findElementByCSS('#setting-source-form');
+    await useFormInput.click();
+    await session.acceptAlert();
+
+    let { settings } = await browser.storage.local.get('settings');
+    assert.equal(settings.source, 'form')
+  })
+
+  it('add blacklist', async () => {
+    let url = await browser.runtime.getURL("build/settings.html")
+    await session.navigateTo(url);
+
+    let useFormInput = await session.findElementByCSS('#setting-source-form');
+    await useFormInput.click();
+    await session.acceptAlert();
+
+    let settings = (await browser.storage.local.get('settings')).settings;
+    assert.deepEqual(settings.form.blacklist, [])
+
+    let addButton = await session.findElementByCSS('.form-blacklist-form .ui-add-button');
+    await addButton.click();
+    await setBlacklistValue(0, 'google.com')
+
+    settings = (await browser.storage.local.get('settings')).settings;
+    assert.deepEqual(settings.form.blacklist, ['google.com'])
+
+    await addButton.click();
+    await setBlacklistValue(1, 'yahoo.com')
+
+    settings = (await browser.storage.local.get('settings')).settings;
+    assert.deepEqual(settings.form.blacklist, ['google.com', 'yahoo.com'])
+
+    let deleteButton = (await session.findElementsByCSS('.form-blacklist-form .ui-delete-button'))[0];
+    await deleteButton.click()
+
+    settings = (await browser.storage.local.get('settings')).settings;
+    assert.deepEqual(settings.form.blacklist, ['yahoo.com'])
+  });
+});