Merge pull request #375 from toasted-nutbread/document-tests

Document tests
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2020-03-01 14:41:17 -0500
committer: GitHub <noreply@github.com> 2020-03-01 14:41:17 -0500
commit: 7c615244f40222584984157223944e6aa6448d13 (patch)
tree: dee98802eeb1c6ca82e06fe0ec0cda12f38e3605 /test
parent: 314c567a47cd07dee7d6cda785257b2109afcad5 (diff)
parent: bdb86e1713a196c9539306166d8dc4238adefc0d (diff)
4 files changed, 552 insertions, 0 deletions
diff --git a/test/data/html/test-document1.html b/test/data/html/test-document1.html
new file mode 100644
index 00000000..0754a314
--- /dev/null
+++ b/test/data/html/test-document1.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>Yomichan Tests</title>
+        <link rel="icon" type="image/gif" href="data:image/gif;base64,R0lGODlhEAAQAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAQABAAAAImFI6Zpt0B4YkS0TCpq07xbmEgcGVRUpLaI46ZG7ppalY0jDCwUAAAOw==" />
+        <link rel="stylesheet" href="test-stylesheet.css" />
+    </head>
+<body>
+
+    <h1>Yomichan Tests</h1>
+
+    <div
+        class="test"
+        data-test-type="scan"
+        data-element-from-point-selector="span"
+        data-caret-range-from-point-selector="span"
+        data-start-node-selector="span"
+        data-start-offset="0"
+        data-end-node-selector="span"
+        data-end-offset="0"
+        data-result-type="TextSourceRange",
+        data-sentence-extent="100"
+        data-sentence="真白「心配してくださって、ありがとございます」"
+    >
+        <span>真白「心配してくださって、ありがとございます」</span>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="scan"
+        data-element-from-point-selector="span"
+        data-caret-range-from-point-selector="span"
+        data-start-node-selector="span"
+        data-start-offset="5"
+        data-end-node-selector="span"
+        data-end-offset="5"
+        data-result-type="TextSourceRange",
+        data-sentence-extent="100"
+        data-sentence="心配してくださって、ありがとございます"
+    >
+        <span>真白「心配してくださって、ありがとございます」</span>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="scan"
+        data-element-from-point-selector="input"
+        data-caret-range-from-point-selector="input"
+        data-start-node-selector="input"
+        data-start-offset="0"
+        data-end-node-selector="input"
+        data-end-offset="0"
+        data-result-type="TextSourceRange",
+        data-sentence-extent="100"
+        data-sentence="真白「心配してくださって、ありがとございます」"
+        data-has-imposter="true"
+    >
+        <input type="text" value="真白「心配してくださって、ありがとございます」" style="width: 100%; box-sizing: border-box; font-family: inherit; font-size: inherit; border: 1px solid #d8d8d8; padding: 0.2em;" />
+    </div>
+
+    <div
+        class="test"
+        data-test-type="scan"
+        data-element-from-point-selector="textarea"
+        data-caret-range-from-point-selector="textarea"
+        data-start-node-selector="textarea"
+        data-start-offset="0"
+        data-end-node-selector="textarea"
+        data-end-offset="0"
+        data-result-type="TextSourceRange",
+        data-sentence-extent="100"
+        data-sentence="真白「心配してくださって、ありがとございます」"
+        data-has-imposter="true"
+    >
+        <textarea style="width: 100%; height: 3em; box-sizing: border-box; font-family: inherit; font-size: inherit; border: 1px solid #d8d8d8; padding: 0.2em;">真白「心配してくださって、ありがとございます」</textarea>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="scan"
+        data-element-from-point-selector="button"
+        data-caret-range-from-point-selector="button"
+        data-start-node-selector="button"
+        data-start-offset="0"
+        data-end-node-selector="button"
+        data-end-offset="0"
+        data-result-type="TextSourceElement",
+        data-sentence-extent="100"
+        data-sentence="よみちゃん"
+    >
+        <button style="width: 100%; box-sizing: border-box; font-family: inherit; font-size: inherit; border: 1px solid #d8d8d8; background-color: #f0f0f0; padding: 0.2em;">よみちゃん</button>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="scan"
+        data-element-from-point-selector="img"
+        data-caret-range-from-point-selector="img"
+        data-start-node-selector="img"
+        data-start-offset="0"
+        data-end-node-selector="img"
+        data-end-offset="0"
+        data-result-type="TextSourceElement"
+        data-sentence="よみちゃん"
+    >
+        <img src="data:image/gif;base64,R0lGODdhBwAHAIABAAAAAP///ywAAAAABwAHAAACDIRvEaC32FpCbEkKCgA7" alt="よみちゃん" title="よみちゃん" style="width: 70px; height: 70px; image-rendering: crisp-edges; image-rendering: pixelated; display: block;" />
+    </div>
+
+    <div
+        class="test"
+        data-test-type="text-source-range-seek"
+        data-seek-node-selector="span:nth-of-type(1)"
+        data-seek-node-is-text="true"
+        data-seek-offset="0"
+        data-seek-length="149"
+        data-seek-direction="forward"
+        data-expected-result-node-selector="span:nth-of-type(1)"
+        data-expected-result-node-is-text="true"
+        data-expected-result-offset="149"
+        data-expected-result-content="
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        "
+    >
+        <span>
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        </span><span>trailing content</span>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="text-source-range-seek"
+        data-seek-node-selector="span:nth-of-type(1)"
+        data-seek-node-is-text="true"
+        data-seek-offset="149"
+        data-seek-length="149"
+        data-seek-direction="backward"
+        data-expected-result-node-selector="span:nth-of-type(1)"
+        data-expected-result-node-is-text="true"
+        data-expected-result-offset="0"
+        data-expected-result-content="
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        "
+    >
+        <span>
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        </span><span>trailing content</span>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="text-source-range-seek"
+        data-seek-node-selector="span:nth-of-type(1)"
+        data-seek-node-is-text="true"
+        data-seek-offset="0"
+        data-seek-length="150"
+        data-seek-direction="forward"
+        data-expected-result-node-selector="span:nth-of-type(2)"
+        data-expected-result-node-is-text="true"
+        data-expected-result-offset="1"
+        data-expected-result-content="
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        t"
+    >
+        <span>
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        </span><span>trailing content</span>
+    </div>
+
+    <div
+        class="test"
+        data-test-type="text-source-range-seek"
+        data-seek-node-selector="span:nth-of-type(2)"
+        data-seek-node-is-text="true"
+        data-seek-offset="1"
+        data-seek-length="150"
+        data-seek-direction="backward"
+        data-expected-result-node-selector="span:nth-of-type(1)"
+        data-expected-result-node-is-text="true"
+        data-expected-result-offset="0"
+        data-expected-result-content="
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        t"
+    >
+        <span>
+        あいうえお
+        かきくけこ
+        さしすせそ
+        たちつてと
+        なにぬねの
+        はひふへほ
+        まみむめも
+        や&#x3000;ゆ&#x3000;よ
+        らりるれろ
+        わゐ&#x3000;ゑを
+        </span><span>trailing content</span>
+    </div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/test/data/html/test-stylesheet.css b/test/data/html/test-stylesheet.css
new file mode 100644
index 00000000..ab25732e
--- /dev/null
+++ b/test/data/html/test-stylesheet.css
@@ -0,0 +1,32 @@
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    max-width: 680px;
+    padding: 0 1em;
+    box-sizing: border-box;
+    margin: 0 auto;
+    background-color: #f8f8f8;
+    counter-reset: test-id;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+.test {
+    background-color: #ffffff;
+    margin: 1em 0;
+    padding: 0.5em;
+    box-shadow: rgba(64, 64, 64, 0.3) 0px 1px 2px 0px, rgba(64, 64, 64, 0.15) 0px 1px 3px 1px;
+    border-radius: 4px;
+}
+
+.test:before {
+    content: "Test " counter(test-id);
+    display: block;
+    counter-increment: test-id;
+    margin-bottom: 0.5em;
+    border-bottom: 1px solid #d8d8d8;
+    font-weight: bold;
+}
diff --git a/test/test-document.js b/test/test-document.js
new file mode 100644
index 00000000..edf6bbea
--- /dev/null
+++ b/test/test-document.js
@@ -0,0 +1,224 @@
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+const {JSDOM} = require('jsdom');
+const yomichanTest = require('./yomichan-test');
+
+
+// DOMRect class definition
+class DOMRect {
+    constructor(x, y, width, height) {
+        this._x = x;
+        this._y = y;
+        this._width = width;
+        this._height = height;
+    }
+
+    get x() { return this._x; }
+    get y() { return this._y; }
+    get width() { return this._width; }
+    get height() { return this._height; }
+    get left() { return this._x + Math.min(0, this._width); }
+    get right() { return this._x + Math.max(0, this._width); }
+    get top() { return this._y + Math.min(0, this._height); }
+    get bottom() { return this._y + Math.max(0, this._height); }
+}
+
+
+function createJSDOM(fileName) {
+    const domSource = fs.readFileSync(fileName, {encoding: 'utf8'});
+    const dom = new JSDOM(domSource);
+    const document = dom.window.document;
+    const window = dom.window;
+
+    // Define innerText setter as an alias for textContent setter
+    Object.defineProperty(window.HTMLDivElement.prototype, 'innerText', {
+        set(value) { this.textContent = value; }
+    });
+
+    // Placeholder for feature detection
+    document.caretRangeFromPoint = () => null;
+
+    return dom;
+}
+
+function querySelectorChildOrSelf(element, selector) {
+    return selector ? element.querySelector(selector) : element;
+}
+
+function getChildTextNodeOrSelf(dom, node) {
+    if (node === null) { return null; }
+    const Node = dom.window.Node;
+    const childNode = node.firstChild;
+    return (childNode !== null && childNode.nodeType === Node.TEXT_NODE ? childNode : node);
+}
+
+function getPrototypeOfOrNull(value) {
+    try {
+        return Object.getPrototypeOf(value);
+    } catch (e) {
+        return null;
+    }
+}
+
+function findImposterElement(document) {
+    // Finds the imposter element based on it's z-index style
+    return document.querySelector('div[style*="2147483646"]>*');
+}
+
+
+async function testDocument1() {
+    const dom = createJSDOM(path.join(__dirname, 'data', 'html', 'test-document1.html'));
+    const window = dom.window;
+    const document = window.document;
+    const Node = window.Node;
+    const Range = window.Range;
+
+    const {DOM} = yomichanTest.requireScript(
+        'ext/mixed/js/dom.js',
+        ['DOM']
+    );
+    const {TextSourceRange, TextSourceElement} = yomichanTest.requireScript(
+        'ext/fg/js/source.js',
+        ['TextSourceRange', 'TextSourceElement'],
+        {document, window, Range, Node}
+    );
+    const {docRangeFromPoint, docSentenceExtract} = yomichanTest.requireScript(
+        'ext/fg/js/document.js',
+        ['docRangeFromPoint', 'docSentenceExtract'],
+        {document, window, Node, TextSourceElement, TextSourceRange, DOM}
+    );
+
+    try {
+        await testDocumentTextScanningFunctions(dom, {docRangeFromPoint, docSentenceExtract, TextSourceRange, TextSourceElement});
+        await testTextSourceRangeSeekFunctions(dom, {TextSourceRange});
+    } finally {
+        window.close();
+    }
+}
+
+async function testDocumentTextScanningFunctions(dom, {docRangeFromPoint, docSentenceExtract, TextSourceRange, TextSourceElement}) {
+    const document = dom.window.document;
+
+    for (const testElement of document.querySelectorAll('.test[data-test-type=scan]')) {
+        // Get test parameters
+        let {
+            elementFromPointSelector,
+            caretRangeFromPointSelector,
+            startNodeSelector,
+            startOffset,
+            endNodeSelector,
+            endOffset,
+            resultType,
+            sentenceExtent,
+            sentence,
+            hasImposter
+        } = testElement.dataset;
+
+        const elementFromPointValue = querySelectorChildOrSelf(testElement, elementFromPointSelector);
+        const caretRangeFromPointValue = querySelectorChildOrSelf(testElement, caretRangeFromPointSelector);
+        const startNode = getChildTextNodeOrSelf(dom, querySelectorChildOrSelf(testElement, startNodeSelector));
+        const endNode = getChildTextNodeOrSelf(dom, querySelectorChildOrSelf(testElement, endNodeSelector));
+
+        startOffset = parseInt(startOffset, 10);
+        endOffset = parseInt(endOffset, 10);
+        sentenceExtent = parseInt(sentenceExtent, 10);
+
+        assert.notStrictEqual(elementFromPointValue, null);
+        assert.notStrictEqual(caretRangeFromPointValue, null);
+        assert.notStrictEqual(startNode, null);
+        assert.notStrictEqual(endNode, null);
+
+        // Setup functions
+        document.elementFromPoint = () => elementFromPointValue;
+
+        document.caretRangeFromPoint = (x, y) => {
+            const imposter = getChildTextNodeOrSelf(dom, findImposterElement(document));
+            assert.strictEqual(!!imposter, hasImposter === 'true');
+
+            const range = document.createRange();
+            range.setStart(imposter ? imposter : startNode, startOffset);
+            range.setEnd(imposter ? imposter : startNode, endOffset);
+
+            // Override getClientRects to return a rect guaranteed to contain (x, y)
+            range.getClientRects = () => [new DOMRect(x - 1, y - 1, 2, 2)];
+            return range;
+        };
+
+        // Test docRangeFromPoint
+        const source = docRangeFromPoint(0, 0, false);
+        switch (resultType) {
+            case 'TextSourceRange':
+                assert.strictEqual(getPrototypeOfOrNull(source), TextSourceRange.prototype);
+                break;
+            case 'TextSourceElement':
+                assert.strictEqual(getPrototypeOfOrNull(source), TextSourceElement.prototype);
+                break;
+            case 'null':
+                assert.strictEqual(source, null);
+                break;
+            default:
+                assert.ok(false);
+                break;
+        }
+        if (source === null) { continue; }
+
+        // Test docSentenceExtract
+        const sentenceActual = docSentenceExtract(source, sentenceExtent).text;
+        assert.strictEqual(sentenceActual, sentence);
+
+        // Clean
+        source.cleanup();
+    }
+}
+
+async function testTextSourceRangeSeekFunctions(dom, {TextSourceRange}) {
+    const document = dom.window.document;
+
+    for (const testElement of document.querySelectorAll('.test[data-test-type=text-source-range-seek]')) {
+        // Get test parameters
+        let {
+            seekNodeSelector,
+            seekNodeIsText,
+            seekOffset,
+            seekLength,
+            seekDirection,
+            expectedResultNodeSelector,
+            expectedResultNodeIsText,
+            expectedResultOffset,
+            expectedResultContent
+        } = testElement.dataset;
+
+        seekOffset = parseInt(seekOffset, 10);
+        seekLength = parseInt(seekLength, 10);
+        expectedResultOffset = parseInt(expectedResultOffset, 10);
+
+        let seekNode = testElement.querySelector(seekNodeSelector);
+        if (seekNodeIsText === 'true') {
+            seekNode = seekNode.firstChild;
+        }
+
+        let expectedResultNode = testElement.querySelector(expectedResultNodeSelector);
+        if (expectedResultNodeIsText === 'true') {
+            expectedResultNode = expectedResultNode.firstChild;
+        }
+
+        const {node, offset, content} = (
+            seekDirection === 'forward' ?
+            TextSourceRange.seekForward(seekNode, seekOffset, seekLength) :
+            TextSourceRange.seekBackward(seekNode, seekOffset, seekLength)
+        );
+
+        assert.strictEqual(node, expectedResultNode);
+        assert.strictEqual(offset, expectedResultOffset);
+        assert.strictEqual(content, expectedResultContent);
+    }
+}
+
+
+async function main() {
+    await testDocument1();
+}
+
+
+if (require.main === module) { main(); }
diff --git a/test/test-stylesheet.css b/test/test-stylesheet.css
new file mode 100644
index 00000000..ab25732e
--- /dev/null
+++ b/test/test-stylesheet.css
@@ -0,0 +1,32 @@
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    max-width: 680px;
+    padding: 0 1em;
+    box-sizing: border-box;
+    margin: 0 auto;
+    background-color: #f8f8f8;
+    counter-reset: test-id;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+.test {
+    background-color: #ffffff;
+    margin: 1em 0;
+    padding: 0.5em;
+    box-shadow: rgba(64, 64, 64, 0.3) 0px 1px 2px 0px, rgba(64, 64, 64, 0.15) 0px 1px 3px 1px;
+    border-radius: 4px;
+}
+
+.test:before {
+    content: "Test " counter(test-id);
+    display: block;
+    counter-increment: test-id;
+    margin-bottom: 0.5em;
+    border-bottom: 1px solid #d8d8d8;
+    font-weight: bold;
+}
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2020-03-01 14:41:17 -0500
committer	GitHub <noreply@github.com>	2020-03-01 14:41:17 -0500
commit	7c615244f40222584984157223944e6aa6448d13 (patch)
tree	dee98802eeb1c6ca82e06fe0ec0cda12f38e3605 /test
parent	314c567a47cd07dee7d6cda785257b2109afcad5 (diff)
parent	bdb86e1713a196c9539306166d8dc4238adefc0d (diff)