Add e2e test cases for following

QA.md

@@ -34,10 +34,6 @@ The behaviors of the console are tested in [Console section](#consoles).
 
 ### Following links
 
-- [ ] <kbd>f</kbd>: start following links
-- [ ] <kbd>F</kbd>: start following links and open in new tab
-- [ ] open link with target='_blank' in new tab by <kbd>f</kbd>
-- [ ] open link with target='_blank' in new tab by <kbd>F</kbd>
 - [ ] 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>`

e2e/contents/follow.test.js

@@ -0,0 +1,121 @@
+import * as windows from "../ambassador/src/client/windows";
+import * as tabs from "../ambassador/src/client/tabs";
+import * as keys from "../ambassador/src/client/keys";
+import { CLIENT_URL } from '../web-server/url';
+
+describe("tab test", () => {
+  let targetWindow;
+
+  beforeEach(() => {
+    return windows.create(CLIENT_URL).then((win) => {
+      targetWindow = win;
+    });
+  });
+
+  afterEach(() => {
+    return windows.remove(targetWindow.id);
+  });
+
+  it('follows link by `f`', () => {
+    let targetTab;
+    return tabs.create(targetWindow.id, CLIENT_URL + '/follow').then((tab) => {
+      targetTab = tab;
+      return keys.press(targetTab.id, 'f');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return keys.press(targetTab.id, 'a');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return tabs.get(targetTab.id);
+    }).then((tab) => {
+      expect(tab.url).to.be.equal(CLIENT_URL + '/follow#a');
+    });
+  });
+
+  it('follows link into new tab by `F`', () => {
+    let targetTab;
+    return tabs.create(targetWindow.id, CLIENT_URL + '/follow').then((tab) => {
+      targetTab = tab;
+      return keys.press(targetTab.id, 'F', { shiftKey: true });
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return keys.press(targetTab.id, 'a');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 500) });
+    }).then(() => {
+      return windows.get(targetWindow.id);
+    }).then((win) => {
+      let urls = win.tabs.map(t => t.url);
+      expect(urls).to.have.lengthOf(3);
+      expect(urls).to.include(CLIENT_URL + '/');
+      expect(urls).to.include(CLIENT_URL + '/follow');
+      expect(urls).to.include(CLIENT_URL + '/follow#a');
+    });
+  });
+
+  it('follows link with target=_blank into new tab by `f`', () => {
+    let targetTab;
+    return tabs.create(targetWindow.id, CLIENT_URL + '/follow').then((tab) => {
+      targetTab = tab;
+      return keys.press(targetTab.id, 'f');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return keys.press(targetTab.id, 'b');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 500) });
+    }).then(() => {
+      return windows.get(targetWindow.id);
+    }).then((win) => {
+      let urls = win.tabs.map(t => t.url);
+      expect(urls).to.have.lengthOf(3);
+      expect(urls).to.include(CLIENT_URL + '/');
+      expect(urls).to.include(CLIENT_URL + '/follow');
+      expect(urls).to.include(CLIENT_URL + '/follow#external');
+    });
+  });
+
+  it('follows link with target=_blank into new tab by `F`', () => {
+    let targetTab;
+    return tabs.create(targetWindow.id, CLIENT_URL + '/follow').then((tab) => {
+      targetTab = tab;
+      return keys.press(targetTab.id, 'F', { shiftKey: true });
+    }).then(() => {
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return keys.press(targetTab.id, 'b');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 500) });
+    }).then(() => {
+      return windows.get(targetWindow.id);
+    }).then((win) => {
+      let urls = win.tabs.map(t => t.url);
+      expect(urls).to.have.lengthOf(3);
+      expect(urls).to.include(CLIENT_URL + '/');
+      expect(urls).to.include(CLIENT_URL + '/follow');
+      expect(urls).to.include(CLIENT_URL + '/follow#external');
+    });
+  });
+
+  it('follows area by `F`', () => {
+    let targetTab;
+    return tabs.create(targetWindow.id, CLIENT_URL + '/follow').then((tab) => {
+      targetTab = tab;
+      return keys.press(targetTab.id, 'f');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return keys.press(targetTab.id, 'c');
+    }).then(() => {
+      return new Promise(resolve => { setTimeout(() => resolve(), 10) });
+    }).then(() => {
+      return tabs.get(targetTab.id);
+    }).then((tab) => {
+      expect(tab.url).to.be.equal(CLIENT_URL + '/follow#area');
+    });
+  });
+});

e2e/web-server/index.js

@@ -51,6 +51,15 @@ const handleLinkPagenation = (req, res) => {
   res.end('<!DOCTYPEhtml><html lang="en"><head>' + head + '</head><body"></body></html">');
 };
 
+const handleFollow = (req, res) => {
+  let body = '';
+  body += '<a href="#a">a</a>';
+  body += '<a href="#external" target="_blank">external</a>';
+  body += '<img width="320" height="240"  src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" usemap="#map"><map name="map"><area href="#area" shape="rect" coords="15,19,126,104"></map>'
+
+  res.writeHead(200, {'Content-Type': 'text/html'});
+  res.end('<!DOCTYPEhtml><html lang="en"><body">' + body + '</body></html">');
+}
 
 const handle404 = (req, res) => {
   res.writeHead(404, {'Content-Type': 'text/plain'});
@@ -69,6 +78,8 @@ http.createServer(function (req, res) {
     handleAPagenation(req, res);
   } else if (u.pathname === '/link-pagenation') {
     handleLinkPagenation(req, res);
+  } else if (u.pathname === '/follow') {
+    handleFollow(req, res);
   } else {
     handle404(req, res);
   }