From e0c9244079e19d9879fa0648e7068526033fff0f Mon Sep 17 00:00:00 2001
From: Koji Ishii <kojiishi@gmail.com>
Date: Mon, 25 Apr 2022 16:41:14 +0900
Subject: [PATCH] Add JavaScript `HTMLProcessor` class (#58)

This class provides extended capabilities when applying to DOM,
but with larger code size. Please see the JSDoc for more details.

* tushuhei review
---
 javascript/README.md                    |  19 ++
 javascript/src/html_processor.ts        | 420 ++++++++++++++++++++++++
 javascript/tests/test_html_processor.ts | 259 +++++++++++++++
 3 files changed, 698 insertions(+)
 create mode 100644 javascript/src/html_processor.ts
 create mode 100644 javascript/tests/test_html_processor.ts

diff --git a/javascript/README.md b/javascript/README.md
index ac4c7a74..7216fca8 100644
--- a/javascript/README.md
+++ b/javascript/README.md
@@ -63,6 +63,25 @@ console.log(ele.outerHTML);
 // <p class="budou-this" style="word-break: keep-all; overflow-wrap: break-word;">今日は<b><wbr>とても<wbr>天気</b>です。</p>
 ```
 
+There is another way to apply the process to an HTML element.
+
+```javascript
+import { HTMLProcessor } from 'budoux';
+const ele = document.querySelector('p.budou-this');
+const applier = new HTMLProcessor(parser);
+applier.applyToElement(ele);
+```
+
+The [`HTMLProcessor`] class
+recognizes separate or nested paragraphs more correctly,
+its output is generally more memory efficient for browsers,
+and it can customize its output such as inserting a space at boundaries
+which is often useful for accessibility,
+but the bundle code size is larger.
+Please see the JSDoc for more details.
+
+[`HTMLProcessor`]: https://github.com/google/budoux/blob/main/javascript/src/html_processor.ts
+
 ### Loading a custom model
 
 You can load your own custom model as follows.
diff --git a/javascript/src/html_processor.ts b/javascript/src/html_processor.ts
new file mode 100644
index 00000000..6c8b16d9
--- /dev/null
+++ b/javascript/src/html_processor.ts
@@ -0,0 +1,420 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Parser, DEFAULT_THRES} from './parser';
+
+const assert = console.assert;
+
+const ZWSP = '\u200B'; // U+200B ZERO WIDTH SPACE
+
+// We could use `Node.TEXT_NODE` and `Node.ELEMENT_NODE` in a browser context,
+// but we define the same here for Node.js environments.
+const NodeType = {
+  ELEMENT_NODE: 1,
+  TEXT_NODE: 3,
+};
+
+const DomAction = {
+  Inline: 0,
+  Block: 1,
+  Skip: 2,
+  Break: 3,
+} as const;
+type DomAction = typeof DomAction[keyof typeof DomAction];
+
+/**
+ * Determines the action from an element name, as defined in
+ * {@link https://html.spec.whatwg.org/multipage/rendering.html HTML Rendering}.
+ * See also {@link actionForElement}.
+ */
+const domActions: {[name: string]: DomAction} = {
+  // Hidden elements
+  // https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
+  AREA: DomAction.Skip,
+  BASE: DomAction.Skip,
+  BASEFONT: DomAction.Skip,
+  DATALIST: DomAction.Skip,
+  HEAD: DomAction.Skip,
+  LINK: DomAction.Skip,
+  META: DomAction.Skip,
+  NOEMBED: DomAction.Skip,
+  NOFRAMES: DomAction.Skip,
+  PARAM: DomAction.Skip,
+  RP: DomAction.Skip,
+  SCRIPT: DomAction.Skip,
+  STYLE: DomAction.Skip,
+  TEMPLATE: DomAction.Skip,
+  TITLE: DomAction.Skip,
+  NOSCRIPT: DomAction.Skip,
+
+  // Flow content
+  // https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
+  HR: DomAction.Break,
+  // Disable if `white-space: pre`.
+  LISTING: DomAction.Skip,
+  PLAINTEXT: DomAction.Skip,
+  PRE: DomAction.Skip,
+  XMP: DomAction.Skip,
+
+  // Phrasing content
+  // https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3
+  BR: DomAction.Break,
+  RT: DomAction.Skip,
+
+  // Form controls
+  // https://html.spec.whatwg.org/multipage/rendering.html#form-controls
+  INPUT: DomAction.Skip,
+  SELECT: DomAction.Skip,
+  BUTTON: DomAction.Skip,
+  TEXTAREA: DomAction.Skip,
+
+  // Other elements where the phrase-based line breaking should be disabled.
+  // https://github.com/google/budoux/blob/main/budoux/skip_nodes.json
+  ABBR: DomAction.Skip,
+  CODE: DomAction.Skip,
+  IFRAME: DomAction.Skip,
+  TIME: DomAction.Skip,
+  VAR: DomAction.Skip,
+};
+
+/**
+ * Determine the action for an element.
+ * @param element An element to determine the action for.
+ * @returns The {@link domActions} for the element.
+ */
+function actionForElement(element: Element): DomAction {
+  const action = domActions[element.nodeName];
+  if (action !== undefined) return action;
+
+  // jsdom does not have `getComputedStyle`.
+  if (typeof getComputedStyle === 'function') {
+    const style = getComputedStyle(element);
+    switch (style.whiteSpace) {
+      case 'nowrap':
+      case 'pre':
+        return DomAction.Skip;
+    }
+
+    const display = style.display;
+    assert(display);
+    if (display !== 'inline') return DomAction.Block;
+  }
+  return DomAction.Inline;
+}
+
+/**
+ * Represents a "paragraph", broken by block boundaries or forced breaks.
+ *
+ * A CSS
+ * {@link https://drafts.csswg.org/css2/#inline-formatting inline formatting context}
+ * is usually a "paragraph", but it can be broken into multiple paragraphs by
+ * forced breaks such as `<br>`.
+ */
+class Paragraph {
+  element: HTMLElement;
+  textNodes: Text[] = [];
+
+  constructor(element: HTMLElement) {
+    this.element = element;
+  }
+
+  hasText(): boolean {
+    return this.textNodes.length > 0;
+  }
+}
+
+/**
+ * Options for {@link HTMLProcessor}.
+ */
+export interface HTMLProcessorOptions {
+  /**
+   * This class name is added to the containing block
+   * when the BudouX is applied.
+   *
+   * The caller is responsible for defining the class.
+   * {@link defineClassAs} can append a `<style>` element
+   * that defines the default styles as a class.
+   *
+   * When falsy, an inline style is set instead.
+   */
+  className?: string;
+  /**
+   * The separator to insert at each semantics boundary.
+   * The default value is U+200B ZERO WIDTH SPACE.
+   *
+   * When falsy, a `<wbr>` element is inserted.
+   */
+  separator?: string;
+  /**
+   * The threshold score to control the granularity of chunks.
+   * See {@link Parser.parse}.
+   */
+  threshold?: number;
+}
+
+/**
+ * Applies the BudouX to the given DOM.
+ *
+ * This class has following advantages over
+ * {@link Parser.applyElement}.
+ * * It recognizes paragraphs and applies the BudouX for each
+ *   paragraph separately.
+ * * It can customize how to insert break opportunities.
+ *   See {@link separator} for more details.
+ * * It is generally faster and more memory efficient, but the
+ *   code size is larger.
+ */
+export class HTMLProcessor {
+  private parser_: Parser;
+  /** See {@link HTMLProcessorOptions.className}. */
+  className?: string;
+  /** See {@link HTMLProcessorOptions.separator}. */
+  separator?: string = ZWSP;
+  /** See {@link HTMLProcessorOptions.threshold}. */
+  threshold: number = DEFAULT_THRES;
+
+  /**
+   * @param parser A BudouX {@link Parser} to compute semantic line breaks.
+   */
+  constructor(parser: Parser, options?: HTMLProcessorOptions) {
+    this.parser_ = parser;
+    if (options !== undefined) {
+      if (options.className !== undefined) this.className = options.className;
+      if (options.separator !== undefined) this.separator = options.separator;
+      if (options.threshold !== undefined) this.threshold = options.threshold;
+    }
+  }
+
+  /**
+   * Applies markups for semantic line breaks to the given HTML element.
+   *
+   * It breaks descendant nodes into paragraphs,
+   * and applies the BudouX to each paragraph.
+   * @param element The input element.
+   */
+  applyToElement(element: HTMLElement) {
+    for (const block of this.getBlocks(element)) {
+      assert(block.hasText());
+      this.applyToParagraph(block);
+    }
+  }
+
+  /**
+   * Find paragraphs from a given HTML element.
+   * @param element The root element to find paragraphs.
+   * @param parent The parent {@link Paragraph} if any.
+   * @returns A list of {@link Paragraph}s.
+   */
+  *getBlocks(
+    element: HTMLElement,
+    parent?: Paragraph
+  ): IterableIterator<Paragraph> {
+    assert(element.nodeType === NodeType.ELEMENT_NODE);
+
+    // Skip if it was once applied to this element.
+    if (this.className && element.classList.contains(this.className)) return;
+
+    const action = actionForElement(element);
+    if (action === DomAction.Skip) return;
+
+    if (action === DomAction.Break) {
+      if (parent && parent.hasText()) {
+        yield parent;
+        parent.textNodes = [];
+      }
+      assert(!element.firstChild);
+      return;
+    }
+
+    // Determine if this element creates a new inline formatting context, or if
+    // this element belongs to the parent inline formatting context.
+    assert(action === DomAction.Block || action === DomAction.Inline);
+    const isNewBlock = !parent || action === DomAction.Block;
+    const block = isNewBlock ? new Paragraph(element) : parent;
+    assert(block);
+
+    // Collect all text nodes in this inline formatting context, while searching
+    // descendant elements recursively.
+    for (const child of element.childNodes) {
+      switch (child.nodeType) {
+        case NodeType.ELEMENT_NODE:
+          for (const childBlock of this.getBlocks(child as HTMLElement, block))
+            yield childBlock;
+          break;
+        case NodeType.TEXT_NODE:
+          block.textNodes.push(child as Text);
+          break;
+      }
+    }
+
+    // Apply if this is an inline formatting context.
+    if (isNewBlock && block.hasText()) yield block;
+  }
+
+  /**
+   * Apply the BudouX to the given {@link Paragraph}.
+   * @param paragraph The {@link Paragraph} to apply.
+   */
+  applyToParagraph(paragraph: Paragraph): void {
+    const textNodes = paragraph.textNodes;
+    assert(textNodes.length > 0);
+    const texts = textNodes.map(node => node.nodeValue);
+    const text = texts.join('');
+    // No changes if whitespace-only.
+    if (/^\s*$/.test(text)) return;
+
+    // Split the text into a list of phrases.
+    const phrases = this.parser_.parse(text, this.threshold);
+    assert(phrases.length > 0);
+    assert(
+      phrases.reduce((sum, phrase) => sum + phrase.length, 0) === text.length
+    );
+    // No changes if single phrase.
+    if (phrases.length <= 1) return;
+
+    // Compute the boundary indices from the list of phrase strings.
+    const boundaries = [];
+    let char_index = 0;
+    for (const phrase of phrases) {
+      assert(phrase.length > 0);
+      char_index += phrase.length;
+      boundaries.push(char_index);
+    }
+
+    // The break opportunity at the end of a block is not needed. Instead of
+    // removing it, turn it to a sentinel for `splitTextNodesAtBoundaries` by
+    // making it larger than the text length.
+    assert(boundaries[0] > 0);
+    assert(boundaries[boundaries.length - 1] === text.length);
+    ++boundaries[boundaries.length - 1];
+    assert(boundaries.length > 1);
+
+    this.splitTextNodes(textNodes, boundaries);
+    this.applyBlockStyle(paragraph.element);
+  }
+
+  /**
+   * Split {@link Text} nodes at the specified boundaries.
+   * @param textNodes A list of {@link Text}.
+   * @param boundaries A list of indices of the text to split at.
+   */
+  splitTextNodes(textNodes: Text[], boundaries: number[]): void {
+    assert(boundaries.length > 0);
+    const textLen = textNodes.reduce(
+      (sum, node) => sum + (node.nodeValue ? node.nodeValue.length : 0),
+      0
+    );
+    // The last boundary must be a sentinel.
+    assert(boundaries[boundaries.length - 1] > textLen);
+
+    let boundary_index = 0;
+    let boundary = boundaries[0];
+    assert(boundary > 0);
+    let nodeStart = 0; // the start index of the `nodeText` in the whole text.
+    for (const node of textNodes) {
+      const nodeText = node.nodeValue;
+      if (!nodeText) continue;
+
+      // Check if the next boundary is in this `node`.
+      const nodeEnd = nodeStart + nodeText.length;
+      if (boundary >= nodeEnd) {
+        nodeStart = nodeEnd;
+        continue;
+      }
+
+      // Compute the boundary indices in the `nodeText`.
+      const chunks = [];
+      let chunkStartInNode = 0;
+      while (boundary < nodeEnd) {
+        const boundaryInNode = boundary - nodeStart;
+        assert(boundaryInNode >= chunkStartInNode);
+        chunks.push(nodeText.substring(chunkStartInNode, boundaryInNode));
+        chunkStartInNode = boundaryInNode;
+        ++boundary_index;
+        assert(boundaries[boundary_index] > boundary);
+        boundary = boundaries[boundary_index];
+      }
+      assert(chunks.length > 0);
+
+      // Add the rest of the `nodeText` and split the `node`.
+      if (chunkStartInNode < nodeText.length)
+        chunks.push(nodeText.substring(chunkStartInNode));
+      this.splitTextNode(node, chunks);
+
+      nodeStart = nodeEnd;
+    }
+
+    // Check if all nodes and boundaries are consumed.
+    assert(nodeStart === textLen);
+    assert(boundary_index < boundaries.length);
+    assert(boundaries[boundary_index] >= textLen);
+  }
+
+  /**
+   * Split a {@link Text} node in the same way as the given chunks.
+   * @param node A {@link Text} node to split.
+   * @param chunks A list of {@link string} specifying where to split.
+   * Joining all {@link chunks} must be equal to {@link node.nodeValue}.
+   */
+  splitTextNode(node: Text, chunks: string[]): void {
+    assert(chunks.length > 1);
+    assert(node.nodeValue === chunks.join(''));
+
+    // If the `separator` string is specified, insert it at each boundary.
+    if (this.separator) {
+      node.nodeValue = chunks.join(this.separator);
+      return;
+    }
+
+    // Otherwise create a `Text` node for each chunk, with `<wbr>` between them,
+    // and replace the `node` with them.
+    const document = node.ownerDocument;
+    let nodes = [];
+    for (const chunk of chunks) {
+      if (chunk) nodes.push(document.createTextNode(chunk));
+      nodes.push(null);
+    }
+    nodes.pop();
+    nodes = nodes.map(n => (n ? n : document.createElement('wbr')));
+    node.replaceWith(...nodes);
+  }
+
+  /**
+   * Applies the block style to the given element.
+   * @param element The element to apply the block style.
+   */
+  applyBlockStyle(element: HTMLElement): void {
+    if (this.className) {
+      element.classList.add(this.className);
+      return;
+    }
+
+    const style = element.style;
+    style.wordBreak = 'keep-all';
+    style.overflowWrap = 'break-word';
+  }
+
+  /**
+   * Append a `<style>` element that defines the default styles as a class.
+   * @param document The document to append to.
+   * @param className The CSS class name.
+   */
+  static defineClassAs(document: Document, className: string): void {
+    const style = document.createElement('style');
+    style.textContent = `.${className} { word-break: keep-all; overflow-wrap: break-word; }`;
+    document.head.appendChild(style);
+  }
+}
diff --git a/javascript/tests/test_html_processor.ts b/javascript/tests/test_html_processor.ts
new file mode 100644
index 00000000..ae8f70cc
--- /dev/null
+++ b/javascript/tests/test_html_processor.ts
@@ -0,0 +1,259 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'jasmine';
+import {JSDOM} from 'jsdom';
+import {loadDefaultJapaneseParser} from '../src/parser';
+import {HTMLProcessor, HTMLProcessorOptions} from '../src/html_processor';
+
+// Browser compatibilities.
+console.assert(!('getComputedStyle' in global));
+global.getComputedStyle = (element: Element) => {
+  const window = element.ownerDocument.defaultView;
+  console.assert(window);
+  const style = window!.getComputedStyle(element);
+  // jsdom does not compute unspecified properties.
+  if (!style.display) {
+    const blockify = style.float || style.position;
+    style.display = blockify ? 'block' : 'inline';
+  }
+  return style;
+};
+
+const parser = loadDefaultJapaneseParser();
+
+class MockHTMLProcessorBase extends HTMLProcessor {
+  constructor(options?: HTMLProcessorOptions) {
+    super(parser, options);
+  }
+}
+
+describe('HTMLProcessor.applyToElement', () => {
+  function apply(html: string) {
+    const dom = new JSDOM(html);
+    const processor = new MockHTMLProcessorBase({
+      separator: '/',
+      className: 'applied',
+    });
+    processor.applyToElement(dom.window.document.body);
+    return dom.window.document.body.innerHTML;
+  }
+
+  for (const test of [
+    {
+      in: '<div>晴れ</div>',
+      out: '<div>晴れ</div>',
+    },
+    {
+      in: '<div>今日は晴れです</div>',
+      out: '<div class="applied">今日は/晴れです</div>',
+    },
+    {
+      in: '<div><span>今日は</span>晴れです</div>',
+      out: '<div class="applied"><span>今日は</span>/晴れです</div>',
+    },
+    {
+      in: '<div><span>今日は晴れ</span>です</div>',
+      out: '<div class="applied"><span>今日は/晴れ</span>です</div>',
+    },
+    {
+      in: '<textarea>今日は晴れです</textarea>',
+      out: '<textarea>今日は晴れです</textarea>',
+    },
+    {
+      in: '<div>今日は<code>code</code>晴れです</div>',
+      out: '<div class="applied">今日は<code>code</code>/晴れです</div>',
+    },
+  ]) {
+    it(test.in, () => {
+      expect(apply(test.in)).toEqual(test.out);
+    });
+  }
+});
+
+describe('HTMLProcessor.getBlocks', () => {
+  const getBlocks = (html: string) => {
+    const dom = new JSDOM(html);
+    const processor = new MockHTMLProcessorBase();
+    const blocks = processor.getBlocks(dom.window.document.body);
+    const texts = Array.from(
+      (function* (blocks) {
+        for (const block of blocks)
+          yield block.textNodes.map(node => node.nodeValue).join('');
+      })(blocks)
+    );
+    return texts;
+  };
+
+  it('should collect all text of a simple block', () => {
+    expect(getBlocks('<div>123</div>')).toEqual(['123']);
+  });
+
+  it('should collect two blocks separately', () => {
+    expect(getBlocks('<div>123</div><div>456</div>')).toEqual(['123', '456']);
+  });
+
+  it('should break at <br> elements', () => {
+    expect(getBlocks('<div>123<br>456</div>')).toEqual(['123', '456']);
+  });
+
+  it('should break at <br> elements inside a span', () => {
+    expect(getBlocks('<div>1<span>23<br>45</span>6</div>')).toEqual([
+      '123',
+      '456',
+    ]);
+  });
+
+  it('should collect inline boxes as part of the block', () => {
+    expect(getBlocks('<div>123<span>456</span>789</div>')).toEqual([
+      '123456789',
+    ]);
+  });
+
+  it('should collect nested blocks separately from the parent block', () => {
+    expect(getBlocks('<div>123<div>456</div>789</div>')).toEqual([
+      '456',
+      '123789',
+    ]);
+  });
+
+  it('should collect inline-blocks separately from the parent block', () => {
+    expect(
+      getBlocks('<div>123<div style="display: inline-block">456</div>789</div>')
+    ).toEqual(['456', '123789']);
+    expect(
+      getBlocks(
+        '<div>123<span style="display: inline-block">456</span>789</div>'
+      )
+    ).toEqual(['456', '123789']);
+  });
+
+  it('should skip textarea elements', () => {
+    expect(getBlocks('<textarea>123</textarea>')).toEqual([]);
+  });
+
+  it('should skip <rt> and <rp> elements for <ruby>', () => {
+    expect(
+      getBlocks('before<ruby>b1<rp>(</rp><rt>r1</rt>b2<rt>r2</rt></ruby>after')
+    ).toEqual(['beforeb1b2after']);
+  });
+});
+
+describe('HTMLProcessor.splitTextNodes', () => {
+  class MockText {
+    nodeValue: string;
+
+    constructor(text: string) {
+      this.nodeValue = text;
+    }
+  }
+  const node123 = new MockText('123') as Text;
+  const node456 = new MockText('456') as Text;
+
+  interface NodeAndChunks {
+    node: Text;
+    chunks: string[];
+  }
+
+  class MockHTMLProcessor extends MockHTMLProcessorBase {
+    nodeAndChunks: NodeAndChunks[] = [];
+
+    splitTextNode(node: Text, chunks: string[]) {
+      this.nodeAndChunks.push({node: node, chunks: chunks});
+    }
+  }
+
+  function split(nodes: Text[], boundaries: number[]) {
+    const processor = new MockHTMLProcessor();
+    processor.splitTextNodes(nodes, boundaries);
+    return processor.nodeAndChunks;
+  }
+
+  it('should not split nodes', () => {
+    expect(split([node123], [4])).toEqual([]);
+  });
+
+  it('should not split single node at the end', () => {
+    expect(split([node123], [3, 4])).toEqual([]);
+  });
+
+  it('should not split two nodes at the end', () => {
+    expect(split([node123, node456], [6, 7])).toEqual([]);
+  });
+
+  it('should split single node at the middle', () => {
+    expect(split([node123], [2, 4])).toEqual([
+      {node: node123, chunks: ['12', '3']},
+    ]);
+  });
+
+  it('should split the first node twice', () => {
+    expect(split([node123], [1, 2, 4])).toEqual([
+      {node: node123, chunks: ['1', '2', '3']},
+    ]);
+  });
+
+  it('should split the first node at the middle', () => {
+    expect(split([node123, node456], [2, 7])).toEqual([
+      {node: node123, chunks: ['12', '3']},
+    ]);
+  });
+
+  it('should split the first node twice', () => {
+    expect(split([node123, node456], [1, 2, 7])).toEqual([
+      {node: node123, chunks: ['1', '2', '3']},
+    ]);
+  });
+
+  it('should split the second node at the start', () => {
+    expect(split([node123, node456], [3, 7])).toEqual([
+      {node: node456, chunks: ['', '456']},
+    ]);
+  });
+
+  it('should split the second node at the middle', () => {
+    expect(split([node123, node456], [5, 7])).toEqual([
+      {node: node456, chunks: ['45', '6']},
+    ]);
+  });
+
+  it('should split the second node twice', () => {
+    expect(split([node123, node456], [4, 5, 7])).toEqual([
+      {node: node456, chunks: ['4', '5', '6']},
+    ]);
+  });
+
+  it('should split both nodes at the middle', () => {
+    expect(split([node123, node456], [2, 5, 7])).toEqual([
+      {node: node123, chunks: ['12', '3']},
+      {node: node456, chunks: ['45', '6']},
+    ]);
+  });
+
+  it('should split both nodes twice', () => {
+    expect(split([node123, node456], [1, 2, 4, 5, 7])).toEqual([
+      {node: node123, chunks: ['1', '2', '3']},
+      {node: node456, chunks: ['4', '5', '6']},
+    ]);
+  });
+
+  it('should split at every character', () => {
+    expect(split([node123, node456], [1, 2, 3, 4, 5, 7])).toEqual([
+      {node: node123, chunks: ['1', '2', '3']},
+      {node: node456, chunks: ['', '4', '5', '6']},
+    ]);
+  });
+});