From 4a446793212b97dc16f87c99f99def6fb5fcd1d2 Mon Sep 17 00:00:00 2001 From: chocolateboy Date: Fri, 17 Nov 2017 19:02:13 +0000 Subject: improve #linkPrev and #linkNext: - add support for elements - match if there's more than one rel e.g. ... - more tests --- test/content/navigates.test.js | 156 +++++++++++++++++++++++++++++++---------- 1 file changed, 119 insertions(+), 37 deletions(-) (limited to 'test/content/navigates.test.js') diff --git a/test/content/navigates.test.js b/test/content/navigates.test.js index b5144e9..d8a3316 100644 --- a/test/content/navigates.test.js +++ b/test/content/navigates.test.js @@ -1,56 +1,138 @@ -import { expect } from "chai"; +import { expect } from 'chai'; import * as navigates from 'content/navigates'; +const testRel = (done, rel, html) => { + const method = rel === 'prev' ? 'linkPrev' : 'linkNext'; + document.body.innerHTML = html; + navigates[method](window); + 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); + describe('navigates module', () => { describe('#linkPrev', () => { - it('clicks prev link by text content', (done) => { - document.body.innerHTML = 'xprevx go to prev'; - navigates.linkPrev(window); - setTimeout(() => { - expect(document.location.hash).to.equal('#prev'); - done(); - }, 0); - }); + it('navigates to elements whose rel attribute is "prev"', testPrev( + '' + )); - it('clicks a[rel=prev] element preferentially', (done) => { - document.body.innerHTML = 'prev '; - navigates.linkPrev(window); - setTimeout(() => { - expect(document.location.hash).to.equal('#prev'); - done(); - }, 0); - }); - }); + it('navigates to elements whose rel attribute starts with "prev"', testPrev( + '' + )); + + it('navigates to elements whose rel attribute ends with "prev"', testPrev( + '' + )); + + it('navigates to elements whose rel attribute contains "prev"', testPrev( + '' + )); + + it('navigates to elements whose rel attribute is "prev"', testPrev( + '' + )); + + it('navigates to elements whose rel attribute starts with "prev"', testPrev( + 'click me' + )); + + it('navigates to elements whose rel attribute ends with "prev"', testPrev( + 'click me' + )); + + it('navigates to elements whose rel attribute contains "prev"', testPrev( + 'click me' + )); + + it('navigates to elements whose text matches "prev"', testPrev( + 'previewgo to prev' + )); + + it('navigates to elements whose text matches "previous"', testPrev( + 'previewgo to previous' + )); + + it('navigates to elements whose decoded text matches "<<"', testPrev( + 'click me<<' + )); + + it('navigates to matching elements by clicking', testPrev( + `` + )); + + it('prefers link[rel~=prev] to a[rel~=prev]', testPrev( + '' + )); + it('prefers a[rel~=prev] to a::text(pattern)', testPrev( + 'go to prev' + )); + }); describe('#linkNext', () => { - it('clicks next link by text content', (done) => { - document.body.innerHTML = 'xnextx go to next'; - navigates.linkNext(window); - setTimeout(() => { - expect(document.location.hash).to.equal('#next'); - done(); - }, 0); - }); + it('navigates to elements whose rel attribute is "next"', testNext( + '' + )); - it('clicks a[rel=next] element preferentially', (done) => { - document.body.innerHTML = 'next '; - navigates.linkNext(window); - setTimeout(() => { - expect(document.location.hash).to.equal('#next'); - done(); - }, 0); - }); + it('navigates to elements whose rel attribute starts with "next"', testNext( + '' + )); + + it('navigates to elements whose rel attribute ends with "next"', testNext( + '' + )); + + it('navigates to elements whose rel attribute contains "next"', testNext( + '' + )); + + it('navigates to elements whose rel attribute is "next"', testNext( + '' + )); + + it('navigates to elements whose rel attribute starts with "next"', testNext( + 'click me' + )); + + it('navigates to elements whose rel attribute ends with "next"', testNext( + 'click me' + )); + + it('navigates to elements whose rel attribute contains "next"', testNext( + 'click me' + )); + + it('navigates to elements whose text matches "next"', testNext( + 'inextricablego to next' + )); + + it('navigates to elements whose decoded text matches ">>"', testNext( + 'click me>>' + )); + + it('navigates to matching elements by clicking', testNext( + `` + )); + + it('prefers link[rel~=next] to a[rel~=next]', testNext( + 'go to next' + )); }); describe('#parent', () => { // NOTE: not able to test location it('removes hash', () => { - window.location.hash = "#section-1"; + window.location.hash = '#section-1'; navigates.parent(window); expect(document.location.hash).to.be.empty; }); }); }); - - -- cgit v1.2.3 From ee3cd3faabbe64265746ef39d419f63db24d11ba Mon Sep 17 00:00:00 2001 From: chocolateboy Date: Thu, 23 Nov 2017 14:10:36 +0000 Subject: pagination tweaks and fixes: - fallback links: - select the last matching link rather than the first - use `innerText` rather than `textContent` - use a single regex for each pattern rather than an array - fix markup typo in test --- src/content/navigates.js | 49 +++++++++++++++++++++++------------------- test/content/navigates.test.js | 6 +++--- 2 files changed, 30 insertions(+), 25 deletions(-) (limited to 'test/content/navigates.test.js') diff --git a/src/content/navigates.js b/src/content/navigates.js index 3e12a6f..c9baa30 100644 --- a/src/content/navigates.js +++ b/src/content/navigates.js @@ -1,18 +1,18 @@ -const PREV_LINK_PATTERNS = [ - /\bprev\b/i, /\bprevious\b/i, /\bback\b/i, - //, /\u203a/, /\u2192/, /\xbb/, /\u226b/, />>/ -]; - -const findLinkByPatterns = (win, patterns) => { - const links = win.document.getElementsByTagName('a'); - return Array.prototype.find.call(links, (link) => { - return patterns.some(ptn => ptn.test(link.textContent)); - }); +const REL_PATTERN = { + prev: /^(?:prev(?:ious)?|older)\b|\u2039|\u2190|\xab|\u226a|<>/i, +}; + +// Return the last element in the document matching the supplied selector +// and the optional filter, or null if there are no matches. +const selectLast = (win, selector, filter) => { + let nodes = win.document.querySelectorAll(selector); + + if (filter) { + nodes = Array.from(nodes).filter(filter); + } + + return nodes.length ? nodes[nodes.length - 1] : null; }; const historyPrev = (win) => { @@ -23,16 +23,21 @@ const historyNext = (win) => { win.history.forward(); }; -const linkCommon = (win, rel, patterns) => { - let link = win.document.querySelector(`link[rel~=${rel}][href]`); +// Code common to linkPrev and linkNext which navigates to the specified page. +const linkRel = (win, rel) => { + let link = selectLast(win, `link[rel~=${rel}][href]`); if (link) { - win.location = link.getAttribute('href'); + win.location = link.href; return; } - link = win.document.querySelector(`a[rel~=${rel}]`) || - findLinkByPatterns(win, patterns); + const pattern = REL_PATTERN[rel]; + + link = selectLast(win, `a[rel~=${rel}][href]`) || + // `innerText` is much slower than `textContent`, but produces much better + // (i.e. less unexpected) results + selectLast(win, 'a[href]', lnk => pattern.test(lnk.innerText)); if (link) { link.click(); @@ -40,11 +45,11 @@ const linkCommon = (win, rel, patterns) => { }; const linkPrev = (win) => { - linkCommon(win, 'prev', PREV_LINK_PATTERNS); + linkRel(win, 'prev'); }; const linkNext = (win) => { - linkCommon(win, 'next', NEXT_LINK_PATTERNS); + linkRel(win, 'next'); }; const parent = (win) => { diff --git a/test/content/navigates.test.js b/test/content/navigates.test.js index d8a3316..f1f0741 100644 --- a/test/content/navigates.test.js +++ b/test/content/navigates.test.js @@ -53,7 +53,7 @@ describe('navigates module', () => { )); it('navigates to elements whose text matches "previous"', testPrev( - 'previewgo to previous' + 'previouslyprevious page' )); it('navigates to elements whose decoded text matches "<<"', testPrev( @@ -119,11 +119,11 @@ describe('navigates module', () => { )); it('prefers link[rel~=next] to a[rel~=next]', testNext( - '' )); it('prefers a[rel~=next] to a::text(pattern)', testNext( - 'go to next' + 'next page' )); }); -- cgit v1.2.3