Merge pull request #587 from ueokande/refactor-content

Refactor content scripts

3 files changed, 303 insertions, 0 deletions

diff --git a/test/content/presenters/Hint.test.html b/test/content/presenters/Hint.test.html
new file mode 100644
index 0000000..b50c5fe
--- /dev/null
+++ b/test/content/presenters/Hint.test.html
@@ -0,0 +1 @@
+<a id='test-link' href='javascript:window.vimvixenTest="hello"' >link</a>
diff --git a/test/content/presenters/Hint.test.ts b/test/content/presenters/Hint.test.ts
new file mode 100644
index 0000000..7994788
--- /dev/null
+++ b/test/content/presenters/Hint.test.ts
@@ -0,0 +1,158 @@
+import AbstractHint, { LinkHint, InputHint } from '../../../src/content/presenters/Hint';
+import { expect } from 'chai';
+
+class Hint extends AbstractHint {
+}
+
+describe('Hint', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `<a id='test-link' href='#'>link</a>`;
+  });
+
+  describe('#constructor', () => {
+    it('creates a hint element with tag name', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+
+      let elem = document.querySelector('.vimvixen-hint');
+      expect(elem.textContent.trim()).to.be.equal('abc');
+    });
+  });
+
+  describe('#show', () => {
+    it('shows an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+      hint.show();
+
+      let elem = document.querySelector('.vimvixen-hint') as HTMLElement;
+      expect(elem.style.display).to.not.equal('none');
+    });
+  });
+
+  describe('#hide', () => {
+    it('hides an element', () => {
+      let link = document.getElementById('test-link') as HTMLElement;
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+
+      let elem = document.querySelector('.vimvixen-hint') as HTMLElement;
+      expect(elem.style.display).to.equal('none');
+    });
+  });
+
+  describe('#remove', () => {
+    it('removes an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+
+      let elem = document.querySelector('.vimvixen-hint');
+      expect(elem.parentElement).to.not.be.null;
+      hint.remove();
+      expect(elem.parentElement).to.be.null;
+    });
+  });
+});
+
+describe('LinkHint', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+<a id='test-link1' href='https://google.com/'>link</a>
+<a id='test-link2' href='https://yahoo.com/' target='_blank'>link</a>
+<a id='test-link3' href='#' target='_blank'>link</a>
+`;
+  });
+
+  describe('#getLink()', () => {
+    it('returns value of "href" attribute', () => {
+      let link = document.getElementById('test-link1') as HTMLAnchorElement;
+      let hint = new LinkHint(link, 'abc');
+
+      expect(hint.getLink()).to.equal('https://google.com/');
+    });
+  });
+
+  describe('#getLinkTarget()', () => {
+    it('returns value of "target" attribute', () => {
+      let link = document.getElementById('test-link1') as HTMLAnchorElement;
+      let hint = new LinkHint(link, 'abc');
+
+      expect(hint.getLinkTarget()).to.be.null;
+
+      link = document.getElementById('test-link2') as HTMLAnchorElement;
+      hint = new LinkHint(link, 'abc');
+
+      expect(hint.getLinkTarget()).to.equal('_blank');
+    });
+  });
+
+  describe('#click()', () => {
+    it('clicks a element', (done) => {
+      let link = document.getElementById('test-link3') as HTMLAnchorElement;
+      let hint = new LinkHint(link, 'abc');
+      link.onclick = () => { done() };
+
+      hint.click();
+    });
+  });
+});
+
+describe('InputHint', () => {
+  describe('#activate()', () => {
+    context('<input>', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<input id='test-input'></input>`;
+      });
+
+      it('focuses to the input', () => {
+        let input = document.getElementById('test-input') as HTMLInputElement;
+        let hint = new InputHint(input, 'abc');
+        hint.activate();
+
+        expect(document.activeElement).to.equal(input);
+      });
+    });
+
+    context('<input type="checkbox">', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<input type="checkbox" id='test-input'></input>`;
+      });
+
+      it('checks and focuses to the input', () => {
+        let input = document.getElementById('test-input') as HTMLInputElement;
+        let hint = new InputHint(input, 'abc');
+        hint.activate();
+
+        expect(input.checked).to.be.true;
+      });
+    });
+    context('<textarea>', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<textarea id='test-textarea'></textarea>`;
+      });
+
+      it('focuses to the textarea', () => {
+        let textarea = document.getElementById('test-textarea') as HTMLTextAreaElement;
+        let hint = new InputHint(textarea, 'abc');
+        hint.activate();
+
+        expect(document.activeElement).to.equal(textarea);
+      });
+    });
+
+    context('<button>', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<button id='test-button'></button>`;
+      });
+
+      it('clicks the button', (done) => {
+        let button = document.getElementById('test-button') as HTMLButtonElement;
+        button.onclick = () => { done() };
+
+        let hint = new InputHint(button, 'abc');
+        hint.activate();
+      });
+    });
+  });
+});
diff --git a/test/content/presenters/NavigationPresenter.test.ts b/test/content/presenters/NavigationPresenter.test.ts
new file mode 100644
index 0000000..c1aca9a
--- /dev/null
+++ b/test/content/presenters/NavigationPresenter.test.ts
@@ -0,0 +1,144 @@
+import NavigationPresenter, { NavigationPresenterImpl }
+  from '../../../src/content/presenters/NavigationPresenter';
+import { expect } from 'chai';
+
+describe('NavigationPresenter', () => {
+  let sut;
+
+  const testRel = (done, rel, html) => {
+    const method = rel === 'prev' ? sut.openLinkPrev.bind(sut) : sut.openLinkNext.bind(sut);
+    document.body.innerHTML = html;
+    method();
+    setTimeout(() => {
+      expect(document.location.hash).to.equal(`#${rel}`);
+      done();
+    }, 0);
+  };
+  const testPrev = html => done => testRel(done, 'prev', html);
+  const testNext = html => done => testRel(done, 'next', html);
+
+  before(() => {
+    sut = new NavigationPresenterImpl();
+  });
+
+  describe('#linkPrev', () => {
+    it('navigates to <link> elements whose rel attribute is "prev"', testPrev(
+      '<link rel="prev" href="#prev" />'
+    ));
+
+    it('navigates to <link> elements whose rel attribute starts with "prev"', testPrev(
+      '<link rel="prev bar" href="#prev" />'
+    ));
+
+    it('navigates to <link> elements whose rel attribute ends with "prev"', testPrev(
+      '<link rel="foo prev" href="#prev" />'
+    ));
+
+    it('navigates to <link> elements whose rel attribute contains "prev"', testPrev(
+      '<link rel="foo prev bar" href="#prev" />'
+    ));
+
+    it('navigates to <a> elements whose rel attribute is "prev"', testPrev(
+      '<a rel="prev" href="#prev">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose rel attribute starts with "prev"', testPrev(
+      '<a rel="prev bar" href="#prev">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose rel attribute ends with "prev"', testPrev(
+      '<a rel="foo prev" href="#prev">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose rel attribute contains "prev"', testPrev(
+      '<a rel="foo prev bar" href="#prev">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose text matches "prev"', testPrev(
+      '<a href="#dummy">preview</a><a href="#prev">go to prev</a>'
+    ));
+
+    it('navigates to <a> elements whose text matches "previous"', testPrev(
+      '<a href="#dummy">previously</a><a href="#prev">previous page</a>'
+    ));
+
+    it('navigates to <a> elements whose decoded text matches "<<"', testPrev(
+      '<a href="#dummy">click me</a><a href="#prev">&lt;&lt;</a>'
+    ));
+
+    it('navigates to matching <a> elements by clicking', testPrev(
+      `<a rel="prev" href="#dummy" onclick="return location = '#prev', false">go to prev</a>`
+    ));
+
+    it('prefers link[rel~=prev] to a[rel~=prev]', testPrev(
+      '<a rel="prev" href="#dummy">click me</a><link rel="prev" href="#prev" />'
+    ));
+
+    it('prefers a[rel~=prev] to a::text(pattern)', testPrev(
+      '<a href="#dummy">go to prev</a><a rel="prev" href="#prev">click me</a>'
+    ));
+  });
+
+  describe('#linkNext', () => {
+    it('navigates to <link> elements whose rel attribute is "next"', testNext(
+      '<link rel="next" href="#next" />'
+    ));
+
+    it('navigates to <link> elements whose rel attribute starts with "next"', testNext(
+      '<link rel="next bar" href="#next" />'
+    ));
+
+    it('navigates to <link> elements whose rel attribute ends with "next"', testNext(
+      '<link rel="foo next" href="#next" />'
+    ));
+
+    it('navigates to <link> elements whose rel attribute contains "next"', testNext(
+      '<link rel="foo next bar" href="#next" />'
+    ));
+
+    it('navigates to <a> elements whose rel attribute is "next"', testNext(
+      '<a rel="next" href="#next">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose rel attribute starts with "next"', testNext(
+      '<a rel="next bar" href="#next">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose rel attribute ends with "next"', testNext(
+      '<a rel="foo next" href="#next">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose rel attribute contains "next"', testNext(
+      '<a rel="foo next bar" href="#next">click me</a>'
+    ));
+
+    it('navigates to <a> elements whose text matches "next"', testNext(
+      '<a href="#dummy">inextricable</a><a href="#next">go to next</a>'
+    ));
+
+    it('navigates to <a> elements whose decoded text matches ">>"', testNext(
+      '<a href="#dummy">click me</a><a href="#next">&gt;&gt;</a>'
+    ));
+
+    it('navigates to matching <a> elements by clicking', testNext(
+      `<a rel="next" href="#dummy" onclick="return location = '#next', false">go to next</a>`
+    ));
+
+    it('prefers link[rel~=next] to a[rel~=next]', testNext(
+      '<a rel="next" href="#dummy">click me</a><link rel="next" href="#next" />'
+    ));
+
+    it('prefers a[rel~=next] to a::text(pattern)', testNext(
+      '<a href="#dummy">next page</a><a rel="next" href="#next">click me</a>'
+    ));
+  });
+
+  describe('#parent', () => {
+    // NOTE: not able to test location
+    it('removes hash', () => {
+      window.location.hash = '#section-1';
+      sut.openParent();
+      expect(document.location.hash).to.be.empty;
+    });
+  });
+});