Merge pull request #568 from ueokande/add-e2e-tests

Add e2e tests

QA.md

@@ -18,40 +18,13 @@ The behaviors of the console are tested in [Console section](#consoles).
 - [ ] Notify to users on add-on updated at first time.
 - [ ] Reopen tab on *only current window* by <kbd>u</kbd>
 
-### Following links
-
-- [ ] Show hints on following on a page containing `<frame>`/`<iframe>`
-- [ ] Show hints only inside viewport of the frame on following on a page containing `<frame>`/`<iframe>`
-- [ ] Show hints only inside top window on following on a page containing `<frame>`/`<iframe>`
-- [ ] Select link and open it in the frame in `<iframe>`/`<frame`> on following by <kbd>f</kbd>
-- [ ] Select link and open it in new tab in `<iframe>`/`<frame`> on following by <kbd>F</kbd>
-- [ ] Select link and open it in `<area>` tags, for <kbd>f</kbd> and <kbd>F</kbd>
-- [ ] Open new tab in background by `"background": true`
-- [ ] Opened tabs is in child on Tree Style Tab
-
-### Consoles
-
-#### Exec a command
-
-- [ ] `<EMPTY>`: do nothing
-
-#### Misc
-
-- [ ] Select next item by <kbd>Tab</kbd> and previous item by <kbd>Shift</kbd>+<kbd>Tab</kbd>
-
 ### Properties
 
 - [ ] Configure custom hint character by `:set hintchars=012345678`
-- [ ] Configure custom hint character by settings `"hintchars": "012345678"` in add-on preferences
-
 - [ ] Smooth scroll by `:set smoothscroll`
 - [ ] Non-smooth scroll by `:set nosmoothscroll`
 - [ ] Configure smooth scroll by settings `"smoothscroll": true`, `"smoothscroll": false`
 
-- [ ] Show search engine, bookmark and history items in order by `:set complete=sbh`
-- [ ] Show bookmark, search engine, and search engine items in order by `:set complete=bss`
-- [ ] Configure completion items by setting `"complete": "sbh"`, `"complete": "bss"`
-
 ### Settings
 
 #### JSON Settings

e2e/completion_open.test.js

@@ -129,4 +129,127 @@ describe("completion on open/tabopen/winopen commands", () => {
       assert(items.every(x => x.includes('https://')));
     });
   })
+
+  it('should display only specified items in "complete" property by set command', async() => {
+    let c = new Console(session);
+
+    const execCommand = async(line) => {
+      await body.sendKeys(':');
+      await session.switchToFrame(0);
+      await c.sendKeys(line, Key.Enter);
+      await session.switchToParentFrame();
+    }
+
+    const typeCommand = async(...keys) => {
+      await body.sendKeys(':');
+      await session.switchToFrame(0);
+      await c.sendKeys(...keys);
+    }
+
+    const cancel = async() => {
+      await c.sendKeys(Key.Escape);
+      await session.switchToParentFrame();
+    }
+
+    await execCommand('set complete=sbh');
+    await typeCommand('open ');
+
+    await eventually(async() => {
+      let completions = await c.getCompletions();
+      let titles = completions.filter(x => x.type === 'title').map(x => x.text);
+      assert.deepEqual(titles, ['Search Engines', 'Bookmarks', 'History'])
+    });
+
+    await cancel();
+    await execCommand('set complete=bss');
+    await typeCommand('open ');
+
+    await eventually(async() => {
+      let completions = await c.getCompletions();
+      let titles = completions.filter(x => x.type === 'title').map(x => x.text);
+      assert.deepEqual(titles, ['Bookmarks', 'Search Engines', 'Search Engines'])
+    });
+  })
+
+  it('should display only specified items in "complete" property by setting', async() => {
+    const settings = {
+      source: 'json',
+      json: `{
+        "keymaps": {
+          ":": { "type": "command.show" }
+        },
+        "search": {
+          "default": "google",
+          "engines": { "google": "https://google.com/search?q={}" }
+        },
+        "properties": {
+          "complete": "sbh"
+        }
+      }`,
+    };
+    await browser.storage.local.set({ settings, });
+
+    let c = new Console(session);
+
+    const typeCommand = async(...keys) => {
+      await body.sendKeys(':');
+      await session.switchToFrame(0);
+      await c.sendKeys(...keys);
+    }
+
+    const cancel = async() => {
+      await c.sendKeys(Key.Escape);
+      await session.switchToParentFrame();
+    }
+
+    await browser.storage.local.set({ settings: {
+      source: 'json',
+      json: `{
+        "keymaps": {
+          ":": { "type": "command.show" }
+        },
+        "search": {
+          "default": "google",
+          "engines": { "google": "https://google.com/search?q={}" }
+        },
+        "properties": {
+          "complete": "sbh"
+        }
+      }`,
+    }});
+    await typeCommand('open ');
+
+    await eventually(async() => {
+      let completions = await c.getCompletions();
+      let titles = completions.filter(x => x.type === 'title').map(x => x.text);
+      assert.deepEqual(titles, ['Search Engines', 'Bookmarks', 'History'])
+    });
+
+    await cancel();
+
+    await browser.storage.local.set({ settings: {
+      source: 'json',
+      json: `{
+        "keymaps": {
+          ":": { "type": "command.show" }
+        },
+        "search": {
+          "default": "google",
+          "engines": { "google": "https://google.com/search?q={}" }
+        },
+        "properties": {
+          "complete": "bss"
+        }
+      }`,
+    }});
+    await typeCommand('open ');
+
+    await eventually(async() => {
+      let completions = await c.getCompletions();
+      let titles = completions.filter(x => x.type === 'title').map(x => x.text);
+      assert.deepEqual(titles, ['Bookmarks', 'Search Engines', 'Search Engines'])
+    });
+
+
+  })
 });

e2e/follow.test.js

@@ -0,0 +1,257 @@
+const express = require('express');
+const lanthan = require('lanthan');
+const path = require('path');
+const assert = require('assert');
+const eventually = require('./eventually');
+
+const Key = lanthan.Key;
+
+const newApp = () => {
+  let app = express();
+
+  app.get('/', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body><a href="hello">hello</a></body>
+</html">`);
+  });
+
+  app.get('/follow-input', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body><input></body>
+</html">`);
+  });
+
+  app.get('/area', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body>
+    <img
+      width="256" height="256"  usemap="#map"
+      src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="
+    >
+    <map name="map">
+      <area shape="rect" coords="0,0,64,64" href="/">
+      <area shape="rect" coords="64,64,64,64" href="/">
+      <area shape="rect" coords="128,128,64,64" href="/">
+    </map>
+  </body>
+</html">`);
+  });
+  
+  /*
+   * test case: link2 is out of the viewport
+   * +-----------------+
+   * |   [link1]       |<--- window
+   * |                 |
+   * |=================|<--- viewport
+   * |   [link2]       |
+   * |                 |
+   * +-----------------+
+   */
+  app.get('/test1', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body>
+  <div><a href="link1">link1</a></div>
+  <div style="min-height:3000px"></div>
+  <div><a href="link2">link2</a></div>
+  </body>
+</html">`);
+  });
+
+/*
+ * test case 2: link2 and link3 are out of window of the frame
+ * +-----------------+
+ * | +-----------+   |
+ * | | [link1]   |   |
+ * |=================|
+ * | | [link2]   |   |
+ * | +-----------+   |
+ * |                 |
+ * +-----------------+
+ */
+  app.get('/test2', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body><iframe height="5000" src='/test2-frame'></body>
+</html">`);
+  });
+  app.get('/test2-frame', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body>
+  <div><a href="link1">link1</a></div>
+  <div style="min-height:3000px"></div>
+  <div><a href="link2">link2</a></div>
+  </body>
+</html">`);
+  });
+
+/* test case 3: link2 is out of window of the frame
+ * +-----------------+
+ * | +-----------+   |
+ * | | [link1]   |   |
+ * | +-----------+   |
+ * | : [link2]   :   |
+ * | + - - - - - +   |
+ * |                 |
+ * +-----------------+
+ */
+  app.get('/test3', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body><iframe src='/test3-frame'></body>
+</html">`);
+  });
+  app.get('/test3-frame', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body>
+  <div><a href="link1">link1</a></div>
+  <div style="min-height:3000px"></div>
+  <div><a href="link2">link2</a></div>
+  </body>
+</html">`);
+  });
+
+  return app;
+};
+
+const waitForHints = async(session) => {
+  await eventually(async() => {
+    let hints = await session.findElementsByCSS('.vimvixen-hint');
+    assert(hints.length > 0);
+  });
+};
+
+describe('follow test', () => {
+
+  const port = 12321;
+  let http;
+  let firefox;
+  let session;
+  let browser;
+
+  before(async() => {
+    http = newApp().listen(port);
+
+    firefox = await lanthan.firefox();
+    await firefox.session.installAddonFromPath(path.join(__dirname, '..'));
+    session = firefox.session;
+    browser = firefox.browser;
+  });
+
+  after(async() => {
+    if (firefox) {
+      await firefox.close();
+    }
+    http.close();
+  });
+
+  afterEach(async() => {
+    let tabs = await browser.tabs.query({});
+    for (let tab of tabs.slice(1)) {
+      await browser.tabs.remove(tab.id);
+    }
+  });
+
+  it('should focus an input by f', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/follow-input`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys('f');
+    await waitForHints(session);
+    await body.sendKeys('a');
+
+    let tagName = await session.executeScript(() => document.activeElement.tagName);
+    assert.equal(tagName.toLowerCase(), 'input');
+  });
+
+  it('should open a link by f', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys('f', 'a');
+
+    let hash = await session.executeScript('location.pathname');
+    await body.sendKeys(hash, '/hello');
+  });
+
+  it('should focus an input by F', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/follow-input`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys(Key.Shift, 'f');
+    await waitForHints(session);
+    await body.sendKeys('a');
+
+    let tagName = await session.executeScript(() => document.activeElement.tagName);
+    assert.equal(tagName.toLowerCase(), 'input');
+  });
+
+  it('should open a link to new tab by F', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys(Key.Shift, 'f');
+    await waitForHints(session);
+    await body.sendKeys('a');
+
+    await eventually(async() => {
+      let tabs = await browser.tabs.query({});
+      assert.equal(tabs.length, 2);
+      assert.equal(new URL(tabs[1].url).pathname, '/hello');
+      assert.equal(tabs[1].openerTabId, tabs[0].id);
+    });
+  });
+
+  it('should show hints of links in area', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/area`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys(Key.Shift, 'f');
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 3);
+    });
+  });
+
+  it('should shows hints only in viewport', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/test1`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys(Key.Shift, 'f');
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 1);
+    });
+  });
+
+  it('should shows hints only in window of the frame', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/test2`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys(Key.Shift, 'f');
+
+    await session.switchToFrame(0);
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 1);
+    });
+  });
+
+  it('should shows hints only in the frame', async () => {
+    await session.navigateTo(`http://127.0.0.1:${port}/test3`);
+
+    let body = await session.findElementByCSS('body');
+    await body.sendKeys(Key.Shift, 'f');
+
+    await session.switchToFrame(0);
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 1);
+    });
+  });
+});

e2e/follow_properties.test.js

@@ -0,0 +1,146 @@
+const express = require('express');
+const lanthan = require('lanthan');
+const path = require('path');
+const assert = require('assert');
+const eventually = require('./eventually');
+
+const Key = lanthan.Key;
+
+const newApp = () => {
+  let app = express();
+
+  app.get('/', (req, res) => {
+    res.send(`<!DOCTYPEhtml>
+<html lang="en">
+  <body>
+    <a href="/">link1</a>
+    <a href="/">link2</a>
+    <a href="/">link3</a>
+    <a href="/">link4</a>
+    <a href="/">link5</a>
+  </body>
+</html">`);
+  });
+  return app;
+};
+
+const waitForHints = async(session) => {
+  await eventually(async() => {
+    let hints = await session.findElementsByCSS('.vimvixen-hint');
+    assert(hints.length > 0);
+  });
+};
+
+describe('follow properties test', () => {
+
+  const port = 12321;
+  let http;
+  let firefox;
+  let session;
+  let browser;
+  let body;
+
+  before(async() => {
+    http = newApp().listen(port);
+
+    firefox = await lanthan.firefox({
+      spy: path.join(__dirname, '..'),
+      builderf: (builder) => {
+        builder.addFile('build/settings.js');
+      },
+    });
+    session = firefox.session;
+    browser = firefox.browser;
+
+    await browser.storage.local.set({ settings: {
+      source: 'json',
+      json: `{
+        "keymaps": {
+          ":": { "type": "command.show" },
+          "f": { "type": "follow.start", "newTab": false },
+          "F": { "type": "follow.start", "newTab": true, "background": false },
+          "<C-F>": { "type": "follow.start", "newTab": true, "background": true }
+        },
+        "search": {
+          "default": "google",
+          "engines": { "google": "https://google.com/search?q={}" }
+        },
+        "properties": {
+          "hintchars": "jk"
+        }
+      }`,
+    }});
+  });
+
+  after(async() => {
+    if (firefox) {
+      await firefox.close();
+    }
+    http.close();
+  });
+
+  beforeEach(async() => {
+    await session.navigateTo(`http://127.0.0.1:${port}/`);
+    body = await session.findElementByCSS('body');
+  });
+
+  afterEach(async() => {
+    let tabs = await browser.tabs.query({});
+    for (let tab of tabs.slice(1)) {
+      await browser.tabs.remove(tab.id);
+    }
+  });
+
+  it('should show hints with hintchars by settings', async () => {
+    await body.sendKeys('f');
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 5);
+
+      assert.equal(await hints[0].getText(), 'J');
+      assert.equal(await hints[1].getText(), 'K');
+      assert.equal(await hints[2].getText(), 'JJ');
+      assert.equal(await hints[3].getText(), 'JK');
+      assert.equal(await hints[4].getText(), 'KJ');
+    });
+
+    await body.sendKeys('j');
+
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+
+      assert.equal(await hints[0].getStyle('display'), 'block');
+      assert.equal(await hints[1].getStyle('display'), 'none');
+      assert.equal(await hints[2].getStyle('display'), 'block');
+      assert.equal(await hints[3].getStyle('display'), 'block');
+      assert.equal(await hints[4].getStyle('display'), 'none');
+
+    });
+  });
+
+  it('should open tab in background by background:false', async () => {
+    await body.sendKeys(Key.Shift, 'f');
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 5);
+    });
+    await body.sendKeys('jj');
+
+    let tabs = await browser.tabs.query({});
+    assert.equal(tabs[0].active, false);
+    assert.equal(tabs[1].active, true);
+  });
+
+  it('should open tab in background by background:true', async () => {
+    await body.sendKeys(Key.Control, 'f');
+    await eventually(async() => {
+      let hints = await session.findElementsByCSS('.vimvixen-hint');
+      assert.equal(hints.length, 5);
+    });
+    await body.sendKeys('jj');
+
+    let tabs = await browser.tabs.query({});
+    assert.equal(tabs[0].active, true);
+    assert.equal(tabs[1].active, false);
+  });
+});

e2e/navigate.test.js

@@ -125,16 +125,20 @@ describe("navigate test", () => {
 
     await body.sendKeys(Key.Shift, 'h');
 
-    let tab = (await browser.tabs.query({}))[0];
+    await eventually(async() => {
-    let url = new URL(tab.url);
+      let tab = (await browser.tabs.query({}))[0];
-    assert.equal(url.pathname, `/first`)
+      let url = new URL(tab.url);
+      assert.equal(url.pathname, `/first`)
+    });
 
     body = await session.findElementByCSS('body');
     await body.sendKeys(Key.Shift, 'l');
 
-    tab = (await browser.tabs.query({}))[0];
+    await eventually(async() => {
-    url = new URL(tab.url);
+      tab = (await browser.tabs.query({}))[0];
-    assert.equal(url.pathname, `/second`)
+      url = new URL(tab.url);
+      assert.equal(url.pathname, `/second`)
+    });
   });
 
   it('should go previous and next page in <a> by [[ and ]]', async () => {