Hello World!
16 | {/template} 17 | ``` 18 | 19 | ### JSX 20 | 21 | You can also use React's [JSX syntax](https://facebook.github.io/jsx/) using this 22 | [Babel plugin](https://github.com/babel-plugins/babel-plugin-incremental-dom). 23 | 24 | ```js 25 | function render() { 26 | returnHello World
27 | } 28 | ``` 29 | 30 | ### superviews.js 31 | 32 | [superviews.js](https://github.com/davidjamesstone/superviews.js) is a template language that closely maps to the incremental-dom API. It includes conditionals, iteration, interpolation and supported output for both ES6 and CommonJS. 33 | 34 | Try it out [live in your browser](http://davidjamesstone.github.io/superviews.js/playground/) 35 | 36 | ```html 37 |38 | {name} 39 |
40 | ``` 41 | 42 | ### starplate 43 | 44 | [starplate](https://github.com/littlstar/starplate) is a fast template and view engine built on top of the incremental-dom API. It makes use of ES6 template strings for interpolation, [parse5](https://github.com/inikulin/parse5) for DOM traversal, and incremental-dom for DOM patches. 45 | 46 | Consider the following rudimentary example for rendering and updating a clock. 47 | 48 | ```js 49 | import {View} from 'starplate'; 50 | const clock = new View('Hello!
89 | 90 |${ value.title }
93 |${ value.text }
94 | 95 |Welcome boss
190 | 191 |Welcome {{ this.user.name }}
192 | 193 |Welcome visitor
194 | 195 | 196 |-
197 |
- 198 | {{ user.name }} 199 | 200 | 201 | 202 | 203 |
- 204 | {{ index }}- {{ user.name }} 205 | 206 | 207 |
- ... 208 |
23 | The text of the zero-th item is updated and the highlighted item changes. 24 | A small wrapper, using native webcomponents, is used to create a React-like 25 | lifecycle is used to only diff an item that might have changes. 26 |
27 | 28 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /demo/demo_utils.js: -------------------------------------------------------------------------------- 1 | export function before(obj, fnName, cb) { 2 | var old = obj[fnName]; 3 | 4 | obj[fnName] = function() { 5 | cb(); 6 | return old.apply(this, arguments); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /demo/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 |Hello world
A string with more than 4 characters10 | Incremental DOM can update an existing DOM tree. In this demo, the page 11 | contains the initial DOM. After a simulated delay of 500ms, Incremental 12 | DOM performs an initial diff of the subtree. 13 |
14 | 15 | 16 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /demo/keys.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /demo/reorder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo/reorder/reorder_list.js: -------------------------------------------------------------------------------- 1 | // Based on https://github.com/joshwcomeau/react-flip-move/blob/master/src/FlipMove.js 2 | const { 3 | elementOpen, 4 | elementClose, 5 | currentElement, 6 | } = IncrementalDOM; 7 | 8 | const locations = new WeakMap(); 9 | const initializedEls = new WeakSet(); 10 | 11 | function updateOffset(node) { 12 | const rect = node.getBoundingClientRect(); 13 | const lastLocation = locations.get(node); 14 | const newLocation = { 15 | top: rect.top 16 | }; 17 | 18 | locations.set(node, newLocation); 19 | 20 | if (!lastLocation) { 21 | return; 22 | } 23 | 24 | const deltaY = lastLocation.top - newLocation.top; 25 | node.style.transitionDuration = '0ms'; 26 | node.style.transform = `translate(0, ${deltaY}px)`; 27 | } 28 | 29 | function triggerAnimation(nodes) { 30 | requestAnimationFrame(_ => { 31 | requestAnimationFrame(_ => { 32 | nodes.forEach(node => { 33 | node.style.transitionDuration = ''; 34 | node.style.transform = ''; 35 | }); 36 | }); 37 | }); 38 | } 39 | 40 | function attachList(el) { 41 | if (initializedEls.has(el)) { 42 | return; 43 | } 44 | 45 | new MutationObserver(_ => { 46 | const children = [...el.childNodes]; 47 | children.forEach(updateOffset); 48 | triggerAnimation(children); 49 | }).observe(el, {childList: true}); 50 | 51 | initializedEls.add(el); 52 | } 53 | 54 | export function reorderList(fn) { 55 | // Treating element as a component, so it should have a custom tag so 56 | // that the mutation observer we create is never reused with a different 57 | // logical element. 58 | elementOpen('x-reorderlist'); 59 | attachList(currentElement()); 60 | fn(); 61 | elementClose('x-reorderlist'); 62 | }; 63 | -------------------------------------------------------------------------------- /incremental-dom.iml: -------------------------------------------------------------------------------- 1 | 2 |`). The attribute value, if it exists, is then used
7 | * as the default key when importing an element.
8 | * If null, no attribute value is used as the default key.
9 | */
10 | let keyAttributeName: string | null = "key";
11 |
12 | function getKeyAttributeName() {
13 | return keyAttributeName;
14 | }
15 |
16 | function setKeyAttributeName(name: string | null) {
17 | keyAttributeName = name;
18 | }
19 |
20 | export { DEBUG } from "./debug";
21 | export { getKeyAttributeName, setKeyAttributeName };
22 |
--------------------------------------------------------------------------------
/src/node_data.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import { Key, NameOrCtorDef } from "./types";
5 | import { assert } from "./assertions";
6 | import { createArray } from "./util";
7 | import { isElement } from "./dom_util";
8 | import { getKeyAttributeName } from "./global";
9 |
10 | declare global {
11 | interface Node {
12 | __incrementalDOMData: NodeData | null;
13 | }
14 | }
15 |
16 | /**
17 | * Keeps track of information needed to perform diffs for a given DOM node.
18 | */
19 | export class NodeData {
20 | /**
21 | * An array of attribute name/value pairs, used for quickly diffing the
22 | * incomming attributes to see if the DOM node's attributes need to be
23 | * updated.
24 | */
25 | private _attrsArr: Array | null = null;
26 |
27 | /**
28 | * Whether or not the statics have been applied for the node yet.
29 | */
30 | public staticsApplied = false;
31 |
32 | /**
33 | * The key used to identify this node, used to preserve DOM nodes when they
34 | * move within their parent.
35 | */
36 | public readonly key: Key;
37 |
38 | /**
39 | * The previous text value, for Text nodes.
40 | */
41 | public text: string | undefined;
42 |
43 | /**
44 | * The nodeName or contructor for the Node.
45 | */
46 | public readonly nameOrCtor: NameOrCtorDef;
47 |
48 | public alwaysDiffAttributes = false;
49 |
50 | public constructor(
51 | nameOrCtor: NameOrCtorDef,
52 | key: Key,
53 | text: string | undefined
54 | ) {
55 | this.nameOrCtor = nameOrCtor;
56 | this.key = key;
57 | this.text = text;
58 | }
59 |
60 | public hasEmptyAttrsArr(): boolean {
61 | const attrs = this._attrsArr;
62 | return !attrs || !attrs.length;
63 | }
64 |
65 | public getAttrsArr(length: number): Array {
66 | return this._attrsArr || (this._attrsArr = createArray(length));
67 | }
68 | }
69 |
70 | /**
71 | * Initializes a NodeData object for a Node.
72 | * @param node The Node to initialized data for.
73 | * @param nameOrCtor The NameOrCtorDef to use when diffing.
74 | * @param key The Key for the Node.
75 | * @param text The data of a Text node, if importing a Text node.
76 | * @returns A NodeData object with the existing attributes initialized.
77 | */
78 | function initData(
79 | node: Node,
80 | nameOrCtor: NameOrCtorDef,
81 | key: Key,
82 | text?: string | undefined
83 | ): NodeData {
84 | const data = new NodeData(nameOrCtor, key, text);
85 | node["__incrementalDOMData"] = data;
86 | return data;
87 | }
88 |
89 | /**
90 | * @param node The node to check.
91 | * @returns True if the NodeData already exists, false otherwise.
92 | */
93 | function isDataInitialized(node: Node): boolean {
94 | return Boolean(node["__incrementalDOMData"]);
95 | }
96 |
97 | /**
98 | * Records the element's attributes.
99 | * @param node The Element that may have attributes
100 | * @param data The Element's data
101 | */
102 | function recordAttributes(node: Element, data: NodeData) {
103 | const attributes = node.attributes;
104 | const length = attributes.length;
105 | if (!length) {
106 | return;
107 | }
108 |
109 | const attrsArr = data.getAttrsArr(length);
110 |
111 | // Use a cached length. The attributes array is really a live NamedNodeMap,
112 | // which exists as a DOM "Host Object" (probably as C++ code). This makes the
113 | // usual constant length iteration very difficult to optimize in JITs.
114 | for (let i = 0, j = 0; i < length; i += 1, j += 2) {
115 | const attr = attributes[i];
116 | const name = attr.name;
117 | const value = attr.value;
118 |
119 | attrsArr[j] = name;
120 | attrsArr[j + 1] = value;
121 | }
122 | }
123 |
124 | /**
125 | * Imports single node and its subtree, initializing caches, if it has not
126 | * already been imported.
127 | * @param node The node to import.
128 | * @param fallbackKey A key to use if importing and no key was specified.
129 | * Useful when not transmitting keys from serverside render and doing an
130 | * immediate no-op diff.
131 | * @returns The NodeData for the node.
132 | */
133 | function importSingleNode(node: Node, fallbackKey?: Key): NodeData {
134 | if (node["__incrementalDOMData"]) {
135 | return node["__incrementalDOMData"];
136 | }
137 |
138 | const nodeName = isElement(node) ? node.localName : node.nodeName;
139 | const keyAttrName = getKeyAttributeName();
140 | const keyAttr =
141 | isElement(node) && keyAttrName != null
142 | ? node.getAttribute(keyAttrName)
143 | : null;
144 | const key = isElement(node) ? keyAttr || fallbackKey : null;
145 | const data = initData(node, nodeName, key);
146 |
147 | if (isElement(node)) {
148 | recordAttributes(node, data);
149 | }
150 |
151 | return data;
152 | }
153 |
154 | /**
155 | * Imports node and its subtree, initializing caches.
156 | * @param node The Node to import.
157 | */
158 | function importNode(node: Node) {
159 | importSingleNode(node);
160 |
161 | for (
162 | let child: Node | null = node.firstChild;
163 | child;
164 | child = child.nextSibling
165 | ) {
166 | importNode(child);
167 | }
168 | }
169 |
170 | /**
171 | * Retrieves the NodeData object for a Node, creating it if necessary.
172 | * @param node The node to get data for.
173 | * @param fallbackKey A key to use if importing and no key was specified.
174 | * Useful when not transmitting keys from serverside render and doing an
175 | * immediate no-op diff.
176 | * @returns The NodeData for the node.
177 | */
178 | function getData(node: Node, fallbackKey?: Key) {
179 | return importSingleNode(node, fallbackKey);
180 | }
181 |
182 | /**
183 | * Gets the key for a Node. note that the Node should have been imported
184 | * by now.
185 | * @param node The node to check.
186 | * @returns The key used to create the node.
187 | */
188 | function getKey(node: Node) {
189 | assert(node["__incrementalDOMData"]);
190 | return getData(node).key;
191 | }
192 |
193 | /**
194 | * Clears all caches from a node and all of its children.
195 | * @param node The Node to clear the cache for.
196 | */
197 | function clearCache(node: Node) {
198 | node["__incrementalDOMData"] = null;
199 |
200 | for (
201 | let child: Node | null = node.firstChild;
202 | child;
203 | child = child.nextSibling
204 | ) {
205 | clearCache(child);
206 | }
207 | }
208 |
209 | export { getData, getKey, initData, importNode, isDataInitialized, clearCache };
210 |
--------------------------------------------------------------------------------
/src/nodes.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import { getData, initData } from "./node_data";
5 | import { Key, NameOrCtorDef } from "./types";
6 |
7 | /**
8 | * Gets the namespace to create an element (of a given tag) in.
9 | * @param tag The tag to get the namespace for.
10 | * @param parent The current parent Node, if any.
11 | * @returns The namespace to use.
12 | */
13 | function getNamespaceForTag(tag: string, parent: Node | null) {
14 | if (tag === "svg") {
15 | return "http://www.w3.org/2000/svg";
16 | }
17 |
18 | if (tag === "math") {
19 | return "http://www.w3.org/1998/Math/MathML";
20 | }
21 |
22 | if (parent == null) {
23 | return null;
24 | }
25 |
26 | if (getData(parent).nameOrCtor === "foreignObject") {
27 | return null;
28 | }
29 |
30 | // Since TypeScript 4.4 namespaceURI is only defined for Attr and Element
31 | // nodes. Checking for Element nodes here seems reasonable but breaks SVG
32 | // rendering in Chrome in certain cases. The cast to any should be removed
33 | // once we know why this happens.
34 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
35 | return (parent as any).namespaceURI;
36 | }
37 |
38 | /**
39 | * Creates an Element and initializes the NodeData.
40 | * @param doc The document with which to create the Element.
41 | * @param parent The parent of new Element.
42 | * @param nameOrCtor The tag or constructor for the Element.
43 | * @param key A key to identify the Element.
44 | * @returns The newly created Element.
45 | */
46 | function createElement(
47 | doc: Document,
48 | parent: Node | null,
49 | nameOrCtor: NameOrCtorDef,
50 | key: Key
51 | ): Element {
52 | let el;
53 |
54 | if (typeof nameOrCtor === "function") {
55 | el = new nameOrCtor();
56 | } else {
57 | const namespace = getNamespaceForTag(nameOrCtor, parent);
58 |
59 | if (namespace) {
60 | el = doc.createElementNS(namespace, nameOrCtor);
61 | } else {
62 | el = doc.createElement(nameOrCtor);
63 | }
64 | }
65 |
66 | initData(el, nameOrCtor, key);
67 |
68 | return el;
69 | }
70 |
71 | /**
72 | * Creates a Text Node.
73 | * @param doc The document with which to create the Element.
74 | * @returns The newly created Text.
75 | */
76 | function createText(doc: Document): Text {
77 | const node = doc.createTextNode("");
78 | initData(node, "#text", null);
79 | return node;
80 | }
81 |
82 | export { createElement, createText };
83 |
--------------------------------------------------------------------------------
/src/notifications.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | export type NodeFunction = (n: Array) => void;
5 |
6 | export interface Notifications {
7 | /**
8 | * Called after patch has completed with any Nodes that have been created
9 | * and added to the DOM.
10 | */
11 | nodesCreated: NodeFunction | null;
12 | /**
13 | * Called after patch has completed with any Nodes that have been removed
14 | * from the DOM.
15 | * Note it's an application's responsibility to handle any childNodes.
16 | */
17 | nodesDeleted: NodeFunction | null;
18 | }
19 |
20 | export const notifications: Notifications = {
21 | nodesCreated: null,
22 | nodesDeleted: null
23 | };
24 |
--------------------------------------------------------------------------------
/src/symbols.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | const symbols = {
5 | default: "__default"
6 | };
7 |
8 | export { symbols };
9 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | export interface ElementConstructor {
5 | new (): Element;
6 | }
7 |
8 | export type AttrMutator = (a: Element, b: string, c: any) => void;
9 |
10 | export interface AttrMutatorConfig {
11 | [x: string]: AttrMutator;
12 | }
13 |
14 | export type NameOrCtorDef = string | ElementConstructor;
15 |
16 | export type Key = string | number | null | undefined;
17 |
18 | export type Statics = Array<{}> | null | undefined;
19 |
20 | export type PatchFunction = (
21 | node: Element | DocumentFragment,
22 | template: (a: T | undefined) => void,
23 | data?: T | undefined
24 | ) => R;
25 |
26 | export type MatchFnDef = (
27 | matchNode: Node,
28 | nameOrCtor: NameOrCtorDef,
29 | expectedNameOrCtor: NameOrCtorDef,
30 | key: Key,
31 | expectedKey: Key
32 | ) => boolean;
33 |
34 | export interface PatchConfig {
35 | matches?: MatchFnDef;
36 | }
37 |
--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | /**
5 | * A cached reference to the hasOwnProperty function.
6 | */
7 | const hasOwnProperty = Object.prototype.hasOwnProperty;
8 |
9 | /**
10 | * A constructor function that will create blank objects.
11 | */
12 | function Blank() {}
13 |
14 | Blank.prototype = Object.create(null);
15 |
16 | /**
17 | * Used to prevent property collisions between our "map" and its prototype.
18 | * @param map The map to check.
19 | * @param property The property to check.
20 | * @return Whether map has property.
21 | */
22 | function has(map: object, property: string): boolean {
23 | return hasOwnProperty.call(map, property);
24 | }
25 |
26 | /**
27 | * Creates an map object without a prototype.
28 | * @returns An Object that can be used as a map.
29 | */
30 | function createMap(): any {
31 | return new (Blank as any)();
32 | }
33 |
34 | /**
35 | * Truncates an array, removing items up until length.
36 | * @param arr The array to truncate.
37 | * @param length The new length of the array.
38 | */
39 | function truncateArray(arr: Array<{} | null | undefined>, length: number) {
40 | while (arr.length > length) {
41 | arr.pop();
42 | }
43 | }
44 |
45 | /**
46 | * Creates an array for a desired initial size. Note that the array will still
47 | * be empty.
48 | * @param initialAllocationSize The initial size to allocate.
49 | * @returns An empty array, with an initial allocation for the desired size.
50 | */
51 | function createArray(initialAllocationSize: number): Array {
52 | const arr = new Array(initialAllocationSize);
53 | truncateArray(arr, 0);
54 | return arr;
55 | }
56 |
57 | export { createArray, createMap, has, truncateArray };
58 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../.eslintrc",
3 | "globals": {
4 | "describe": true,
5 | "it": true,
6 | "beforeEach": true,
7 | "afterEach": true,
8 | "expect": true,
9 | "sinon": true
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/test/BUILD:
--------------------------------------------------------------------------------
1 | load("@npm//@bazel/concatjs:index.bzl", "karma_web_test")
2 | load("@npm//@bazel/typescript:index.bzl", "ts_library")
3 |
4 | ts_library(
5 | name = "test_lib",
6 | srcs = glob(["**/*.ts"]),
7 | deps = [
8 | "//:dev",
9 | "//src",
10 | "@npm//@types",
11 | ],
12 | )
13 |
14 | karma_web_test(
15 | name = "unit_tests",
16 | # chai and sinon-chai are not require()d in the code, we expect them to be globals
17 | # bootstrap their distro first on the page.
18 | bootstrap = [
19 | "util/globals.js",
20 | "@npm//:node_modules/chai/chai.js",
21 | "@npm//:node_modules/sinon-chai/lib/sinon-chai.js",
22 | ],
23 | deps = [
24 | # sinon is a dep because we have a require("sinon") in our code
25 | # we need the bazel-generated UMD bundle so there's a matching define("sinon") in the concatjs bundle
26 | "@npm//sinon:sinon__umd",
27 | ":test_lib",
28 | ],
29 | config_file = "karma.conf.js",
30 | )
31 |
--------------------------------------------------------------------------------
/test/functional/applyStatics_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import {applyStatics, close, open, patch} from '../../index';
5 | const {expect} = chai;
6 |
7 | /**
8 | * @param container
9 | */
10 | function createMutationObserver(container: Element): MutationObserver {
11 | const mo = new MutationObserver(() => {});
12 | mo.observe(container, {
13 | attributes: true,
14 | subtree: true,
15 | });
16 |
17 | return mo;
18 | }
19 |
20 | describe('applyStatics', () => {
21 | let container: HTMLElement;
22 |
23 | beforeEach(() => {
24 | container = document.createElement('div');
25 | document.body.appendChild(container);
26 | });
27 |
28 | afterEach(() => {
29 | document.body.removeChild(container);
30 | });
31 |
32 | it('should add attributes to the current element when created', () => {
33 | patch(container, () => {
34 | open('div');
35 | applyStatics(['nameOne', 'valueOne', 'nameTwo', 'valueTwo']);
36 | close();
37 | });
38 |
39 | const firstChild = container.children[0];
40 | expect(firstChild.attributes).to.have.length(2);
41 | expect(firstChild.getAttribute('nameOne')).to.equal('valueOne');
42 | expect(firstChild.getAttribute('nameTwo')).to.equal('valueTwo');
43 | });
44 |
45 | it('should add attributes if called after a subtree', () => {
46 | patch(container, () => {
47 | open('div');
48 | open('span');
49 | close();
50 |
51 | applyStatics(['nameOne', 'valueOne', 'nameTwo', 'valueTwo']);
52 | close();
53 | });
54 |
55 | const firstChild = container.children[0];
56 | expect(firstChild.attributes).to.have.length(2);
57 | expect(firstChild.getAttribute('nameOne')).to.equal('valueOne');
58 | expect(firstChild.getAttribute('nameTwo')).to.equal('valueTwo');
59 | });
60 |
61 | it('should not re-apply if the statics changed', () => {
62 | patch(container, () => {
63 | open('div');
64 | applyStatics(['nameOne', 'valueOne', 'nameTwo', 'valueTwo']);
65 | close();
66 | });
67 |
68 | const mo = createMutationObserver(container);
69 |
70 | patch(container, () => {
71 | open('div');
72 | applyStatics(['nameOne', 'valueOneNew', 'nameThree', 'valueThree']);
73 | close();
74 | });
75 |
76 | expect(mo.takeRecords()).to.be.empty;
77 | });
78 | });
--------------------------------------------------------------------------------
/test/functional/buffered_attributes_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import {applyAttrs, attr, close, open, patch} from '../../index';
5 | const {expect} = chai;
6 |
7 | describe('buffered attributes', () => {
8 | let container: HTMLElement;
9 |
10 | beforeEach(() => {
11 | container = document.createElement('div');
12 | document.body.appendChild(container);
13 | });
14 |
15 | afterEach(() => {
16 | document.body.removeChild(container);
17 | });
18 |
19 | it('should add attributes to the current element', () => {
20 | patch(container, () => {
21 | open('div');
22 | attr('nameOne', 'valueOne');
23 | attr('nameTwo', 'valueTwo');
24 | applyAttrs();
25 | close();
26 |
27 | open('div');
28 | attr('nameThree', 'valueThree');
29 | applyAttrs();
30 | close();
31 | });
32 |
33 | const firstChild = container.children[0];
34 | const secondChild = container.children[1];
35 | expect(firstChild.attributes).to.have.length(2);
36 | expect(firstChild.getAttribute('nameOne')).to.equal('valueOne');
37 | expect(firstChild.getAttribute('nameTwo')).to.equal('valueTwo');
38 | expect(secondChild.attributes).to.have.length(1);
39 | expect(secondChild.getAttribute('nameThree')).to.equal('valueThree');
40 | });
41 |
42 | it('should add attributes even when a subtree has been open/closed', () => {
43 | patch(container, () => {
44 | open('div');
45 | open('span');
46 | close();
47 |
48 | attr('nameOne', 'valueOne');
49 | attr('nameTwo', 'valueTwo');
50 | applyAttrs();
51 | close();
52 | });
53 |
54 | const firstChild = container.children[0];
55 | expect(firstChild.attributes).to.have.length(2);
56 | expect(firstChild.getAttribute('nameOne')).to.equal('valueOne');
57 | expect(firstChild.getAttribute('nameTwo')).to.equal('valueTwo');
58 | });
59 |
60 | it('should not be left over between patches', () => {
61 | patch(container, () => {
62 | attr('nameOne', 'valueOne');
63 | attr('nameTwo', 'valueTwo');
64 | });
65 |
66 | patch(container, () => {
67 | open('div');
68 | attr('nameThree', 'valueThree');
69 | applyAttrs();
70 | close();
71 | });
72 |
73 | const firstChild = container.children[0];
74 | expect(firstChild.attributes).to.have.length(1);
75 | expect(firstChild.getAttribute('nameThree')).to.equal('valueThree');
76 | });
77 |
78 | it('should not carry over to nested patches', () => {
79 | const secondContainer = document.createElement('div');
80 |
81 | patch(container, () => {
82 | attr('nameOne', 'valueOne');
83 | attr('nameTwo', 'valueTwo');
84 |
85 | patch(secondContainer, () => {
86 | open('div');
87 | attr('nameThree', 'valueThree');
88 | applyAttrs();
89 | close();
90 | });
91 | });
92 |
93 | const firstChild = secondContainer.children[0];
94 | expect(firstChild.attributes).to.have.length(1);
95 | expect(firstChild.getAttribute('nameThree')).to.equal('valueThree');
96 | });
97 |
98 | it('should restore after nested patches', () => {
99 | const secondContainer = document.createElement('div');
100 |
101 | patch(container, () => {
102 | attr('nameOne', 'valueOne');
103 | attr('nameTwo', 'valueTwo');
104 |
105 | patch(secondContainer, () => {
106 | open('div');
107 | attr('nameThree', 'valueThree');
108 | applyAttrs();
109 | close();
110 | });
111 |
112 | open('div');
113 | applyAttrs();
114 | close();
115 | });
116 |
117 | const firstChild = container.children[0];
118 | expect(firstChild.attributes).to.have.length(2);
119 | expect(firstChild.getAttribute('nameOne')).to.equal('valueOne');
120 | expect(firstChild.getAttribute('nameTwo')).to.equal('valueTwo');
121 | });
122 | });
--------------------------------------------------------------------------------
/test/functional/conditional_rendering_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import {elementClose, elementOpen, elementVoid, patch} from '../../index';
5 | import {assertHTMLElement,} from '../util/dom';
6 | const {expect} = chai;
7 |
8 |
9 | describe('conditional rendering', () => {
10 | let container: HTMLElement;
11 |
12 | beforeEach(() => {
13 | container = document.createElement('div');
14 | document.body.appendChild(container);
15 | });
16 |
17 | afterEach(() => {
18 | document.body.removeChild(container);
19 | });
20 |
21 | describe('nodes', () => {
22 | function render(condition: boolean) {
23 | elementOpen('div', 'outer', ['id', 'outer']);
24 | elementVoid('div', 'one', ['id', 'one']);
25 |
26 | if (condition) {
27 | elementVoid('div', 'conditional-one', ['id', 'conditional-one']);
28 | elementVoid('div', 'conditional-two', ['id', 'conditional-two']);
29 | }
30 |
31 | elementVoid('span', 'two', ['id', 'two']);
32 | elementClose('div');
33 | }
34 |
35 | it('should un-render when the condition becomes false', () => {
36 | patch(container, () => render(true));
37 | patch(container, () => render(false));
38 | const outer = container.childNodes[0];
39 |
40 | expect(outer.childNodes).to.have.length(2);
41 | expect(assertHTMLElement(outer.childNodes[0]).id).to.equal('one');
42 | expect(assertHTMLElement(outer.childNodes[0]).tagName).to.equal('DIV');
43 | expect(assertHTMLElement(outer.childNodes[1]).id).to.equal('two');
44 | expect(assertHTMLElement(outer.childNodes[1]).tagName).to.equal('SPAN');
45 | });
46 |
47 | it('should not move non-keyed nodes', () => {
48 | function render(condition: boolean) {
49 | if (condition) {
50 | elementVoid('div');
51 | }
52 |
53 | elementVoid('span');
54 | elementVoid('div');
55 | }
56 |
57 | patch(container, () => render(false));
58 | const secondDiv = container.lastChild;
59 | patch(container, () => render(true));
60 | const firstChild = container.firstChild;
61 | const lastChild = container.lastChild;
62 |
63 | expect(container.childNodes).to.have.length(3);
64 | expect(firstChild).to.not.equal(secondDiv);
65 | expect(lastChild).to.equal(secondDiv);
66 | });
67 |
68 |
69 | it('should render when the condition becomes true', () => {
70 | patch(container, () => render(false));
71 | patch(container, () => render(true));
72 | const outer = container.childNodes[0];
73 |
74 | expect(outer.childNodes).to.have.length(4);
75 | expect(assertHTMLElement(outer.childNodes[0]).id).to.equal('one');
76 | expect(assertHTMLElement(outer.childNodes[0]).tagName).to.equal('DIV');
77 | expect(assertHTMLElement(outer.childNodes[1]).id)
78 | .to.equal('conditional-one');
79 | expect(assertHTMLElement(outer.childNodes[1]).tagName).to.equal('DIV');
80 | expect(assertHTMLElement(outer.childNodes[2]).id)
81 | .to.equal('conditional-two');
82 | expect(assertHTMLElement(outer.childNodes[2]).tagName).to.equal('DIV');
83 | expect(assertHTMLElement(outer.childNodes[3]).id).to.equal('two');
84 | expect(assertHTMLElement(outer.childNodes[3]).tagName).to.equal('SPAN');
85 | });
86 | });
87 |
88 | describe('with only conditional childNodes', () => {
89 | function render(condition: boolean) {
90 | elementOpen('div', 'outer', ['id', 'outer']);
91 |
92 | if (condition) {
93 | elementVoid('div', 'conditional-one', ['id', 'conditional-one']);
94 | elementVoid('div', 'conditional-two', ['id', 'conditional-two']);
95 | }
96 |
97 | elementClose('div');
98 | }
99 |
100 | it('should not leave any remaning nodes', () => {
101 | patch(container, () => render(true));
102 | patch(container, () => render(false));
103 | const outer = container.childNodes[0];
104 |
105 | expect(outer.childNodes).to.have.length(0);
106 | });
107 | });
108 |
109 | describe('nodes', () => {
110 | function render(condition: boolean) {
111 | elementOpen('div', null, null, 'id', 'outer');
112 | elementVoid('div', null, null, 'id', 'one');
113 |
114 | if (condition) {
115 | elementOpen(
116 | 'span', null, null, 'id', 'conditional-one', 'data-foo', 'foo');
117 | elementVoid('span');
118 | elementClose('span');
119 | }
120 |
121 | elementVoid('span', null, null, 'id', 'two');
122 | elementClose('div');
123 | }
124 |
125 | it('should strip children when a conflicting node is re-used', () => {
126 | patch(container, () => render(true));
127 | patch(container, () => render(false));
128 | const outer = container.childNodes[0];
129 |
130 | expect(outer.childNodes).to.have.length(2);
131 | expect(assertHTMLElement(outer.childNodes[0]).id).to.equal('one');
132 | expect(assertHTMLElement(outer.childNodes[0]).tagName).to.equal('DIV');
133 | expect(assertHTMLElement(outer.childNodes[1]).id).to.equal('two');
134 | expect(assertHTMLElement(outer.childNodes[1]).tagName).to.equal('SPAN');
135 | expect(assertHTMLElement(outer.childNodes[1]).children.length)
136 | .to.equal(0);
137 | });
138 |
139 | it('should strip attributes when a conflicting node is re-used', () => {
140 | patch(container, () => render(true));
141 | patch(container, () => render(false));
142 | const outer = container.childNodes[0];
143 |
144 | expect(assertHTMLElement(outer.childNodes[1]).getAttribute('data-foo'))
145 | .to.be.null;
146 | });
147 | });
148 | });
149 |
--------------------------------------------------------------------------------
/test/functional/constructors_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import * as Sinon from 'sinon';
5 |
6 | import {close, open, patch} from '../../index';
7 | import {assertHTMLElement,} from '../util/dom';
8 | const {expect} = chai;
9 |
10 | declare global {
11 | interface Window {
12 | // tslint:disable-next-line:no-any
13 | MyElementDefine: any;
14 | // tslint:disable-next-line:no-any
15 | MyElementRegister: any;
16 | }
17 | }
18 |
19 | describe('Element constructors', () => {
20 | const MyElementRegister = window.MyElementRegister;
21 | const MyElementDefine = window.MyElementDefine;
22 | let container: HTMLElement;
23 | const sandbox = Sinon.sandbox.create();
24 |
25 | beforeEach(() => {
26 | container = document.createElement('div');
27 | document.body.appendChild(container);
28 | });
29 |
30 | afterEach(() => {
31 | sandbox.restore();
32 | document.body.removeChild(container);
33 | });
34 |
35 | describe('element creation', () => {
36 | if (MyElementRegister) {
37 | it('should render when created with document.registerElement', () => {
38 | patch(container, () => {
39 | open(MyElementRegister);
40 | close();
41 | });
42 |
43 | const el = assertHTMLElement(container.firstChild);
44 | expect(el.localName).to.equal('my-element-register');
45 | expect(el.constructor).to.equal(MyElementRegister);
46 | });
47 | }
48 |
49 | if (MyElementDefine) {
50 | it('should render when created with customElements.define', () => {
51 | patch(container, () => {
52 | open(MyElementDefine);
53 | close();
54 | });
55 |
56 | const el = container.firstChild as HTMLElement;
57 | expect(el.localName).to.equal('my-element-define');
58 | expect(el.constructor).to.equal(MyElementDefine);
59 | });
60 | }
61 | });
62 |
63 | describe('updates', () => {
64 | if (MyElementRegister) {
65 | it('should re-use elements with the same constructor', () => {
66 | function render() {
67 | open(MyElementRegister);
68 | close();
69 | }
70 |
71 | patch(container, render);
72 | const el = container.firstChild;
73 | patch(container, render);
74 |
75 | expect(container.firstChild).to.equal(el);
76 | });
77 | }
78 | });
79 | });
80 |
81 |
--------------------------------------------------------------------------------
/test/functional/currentElement_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import {currentElement, elementClose, elementOpen, elementOpenEnd, elementOpenStart, elementVoid, patch} from '../../index';
5 | const {expect} = chai;
6 |
7 |
8 | describe('currentElement', () => {
9 | let container: HTMLElement;
10 | let el: Element|null;
11 |
12 | beforeEach(() => {
13 | container = document.createElement('div');
14 | document.body.appendChild(container);
15 | });
16 |
17 | afterEach(() => {
18 | document.body.removeChild(container);
19 | el = null;
20 | });
21 |
22 | it('should return the element from elementOpen', () => {
23 | patch(container, () => {
24 | elementOpen('div');
25 | el = currentElement();
26 | elementClose('div');
27 | });
28 | expect(el).to.equal(container.childNodes[0]);
29 | });
30 |
31 | it('should return the element from elementOpenEnd', () => {
32 | patch(container, () => {
33 | elementOpenStart('div');
34 | elementOpenEnd();
35 | el = currentElement();
36 | elementClose('div');
37 | });
38 |
39 | expect(el).to.equal(container.childNodes[0]);
40 | });
41 |
42 | it('should return the parent after elementClose', () => {
43 | patch(container, () => {
44 | elementOpen('div');
45 | elementClose('div');
46 | el = currentElement();
47 | });
48 |
49 | expect(el).to.equal(container);
50 | });
51 |
52 | it('should return the parent after elementVoid', () => {
53 | patch(container, () => {
54 | elementVoid('div');
55 | el = currentElement();
56 | });
57 |
58 | expect(el).to.equal(container);
59 | });
60 |
61 | it('should throw an error if not patching', () => {
62 | expect(currentElement).to.throw('Cannot call currentElement() unless in patch');
63 | });
64 |
65 | it('should throw an error if inside virtual attributes element', () => {
66 | expect(() => {
67 | patch(container, () => {
68 | elementOpenStart('div');
69 | el = currentElement();
70 | elementOpenEnd();
71 | elementClose('div');
72 | });
73 | }).to.throw('currentElement() can not be called between elementOpenStart() and elementOpenEnd().');
74 | });
75 | });
76 |
--------------------------------------------------------------------------------
/test/functional/currentPointer_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import {currentPointer, elementClose, elementOpenEnd, elementOpenStart, elementVoid, patch} from '../../index';
5 | import {assertHTMLElement,} from '../util/dom';
6 | const {expect} = chai;
7 |
8 | describe('currentPointer', () => {
9 | let container: HTMLElement;
10 | let firstChild: HTMLElement;
11 | let lastChild: HTMLElement;
12 |
13 | beforeEach(() => {
14 | container = document.createElement('div');
15 | container.innerHTML = ``;
16 |
17 | firstChild = assertHTMLElement(container.firstChild);
18 | lastChild = assertHTMLElement(container.lastChild);
19 |
20 | document.body.appendChild(container);
21 | });
22 |
23 | afterEach(() => {
24 | document.body.removeChild(container);
25 | });
26 |
27 | it('should return null if no children', () => {
28 | container.innerHTML = '';
29 |
30 | let el;
31 |
32 | patch(container, () => {
33 | el = currentPointer();
34 | });
35 |
36 | expect(el).to.equal(null);
37 | });
38 |
39 | it('should return the first child when an element was just opened', () => {
40 | let el;
41 |
42 | patch(container, () => {
43 | el = currentPointer();
44 | });
45 |
46 | expect(el).to.equal(firstChild);
47 | });
48 |
49 | it('should return the next node to evaluate', () => {
50 | let el;
51 |
52 | patch(container, () => {
53 | elementVoid('div');
54 | el = currentPointer();
55 | });
56 |
57 | expect(el).to.equal(lastChild);
58 | });
59 |
60 | it('should return null if past the end', () => {
61 | let el;
62 |
63 | patch(container, () => {
64 | elementVoid('div');
65 | elementVoid('span');
66 | el = currentPointer();
67 | });
68 |
69 | expect(el).to.equal(null);
70 | });
71 |
72 | it('should throw an error if not patching', () => {
73 | expect(currentPointer).to.throw('Cannot call currentPointer() unless in patch');
74 | });
75 |
76 | it('should throw an error if inside virtual attributes element', () => {
77 | expect(() => {
78 | patch(container, () => {
79 | elementOpenStart('div');
80 | currentPointer();
81 | elementOpenEnd();
82 | elementClose('div');
83 | });
84 | }).to.throw('currentPointer() can not be called between elementOpenStart() and elementOpenEnd().');
85 | });
86 | });
87 |
--------------------------------------------------------------------------------
/test/functional/element_creation_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import * as Sinon from 'sinon';
5 |
6 | import {elementClose, elementOpen, elementOpenEnd, elementOpenStart, elementVoid, patch} from '../../index';
7 | import {assertElement, assertHTMLElement,} from '../util/dom';
8 |
9 | const {expect} = chai;
10 |
11 |
12 | describe('element creation', () => {
13 | let container: HTMLElement;
14 | const sandbox = Sinon.sandbox.create();
15 |
16 | beforeEach(() => {
17 | container = document.createElement('div');
18 | document.body.appendChild(container);
19 | });
20 |
21 | afterEach(() => {
22 | sandbox.restore();
23 | document.body.removeChild(container);
24 | });
25 |
26 | describe('when creating a single node', () => {
27 | let el: HTMLElement;
28 |
29 | beforeEach(() => {
30 | patch(container, () => {
31 | elementVoid('div', 'key', ['id', 'someId', 'class', 'someClass', 'data-custom', 'custom'],
32 | 'data-foo', 'Hello',
33 | 'data-bar', 'World');
34 | });
35 |
36 | el = assertHTMLElement(container.childNodes[0]);
37 | });
38 |
39 | it('should render with the specified tag', () => {
40 | expect(el.tagName).to.equal('DIV');
41 | });
42 |
43 | it('should render with static attributes', () => {
44 | expect(el.id).to.equal('someId');
45 | expect(el.className).to.equal('someClass');
46 | expect(el.getAttribute('data-custom')).to.equal('custom');
47 | });
48 |
49 | it('should render with dynamic attributes', () => {
50 | expect(el.getAttribute('data-foo')).to.equal('Hello');
51 | expect(el.getAttribute('data-bar')).to.equal('World');
52 | });
53 |
54 | describe('should return DOM node', () => {
55 | beforeEach(() => {
56 | patch(container, () => {});
57 | });
58 |
59 | it('from elementOpen', () => {
60 | patch(container, () => {
61 | el = elementOpen('div');
62 | elementClose('div');
63 | });
64 |
65 | expect(el).to.equal(container.childNodes[0]);
66 | });
67 |
68 | it('from elementClose', () => {
69 | patch(container, () => {
70 | elementOpen('div');
71 | el = assertHTMLElement(elementClose('div'));
72 | });
73 |
74 | expect(el).to.equal(container.childNodes[0]);
75 | });
76 |
77 | it('from elementVoid', () => {
78 | patch(container, () => {
79 | el = assertHTMLElement(elementVoid('div'));
80 | });
81 |
82 | expect(el).to.equal(container.childNodes[0]);
83 | });
84 |
85 | it('from elementOpenEnd', () => {
86 | patch(container, () => {
87 | elementOpenStart('div');
88 | el = elementOpenEnd();
89 | elementClose('div');
90 | });
91 |
92 | expect(el).to.equal(container.childNodes[0]);
93 | });
94 | });
95 | });
96 |
97 | it('should allow creation without static attributes', () => {
98 | patch(container, () => {
99 | elementVoid('div', null, null,
100 | 'id', 'test');
101 | });
102 | const el = assertHTMLElement(container.childNodes[0]);
103 | expect(el.id).to.equal('test');
104 | });
105 |
106 | describe('for HTML elements', () => {
107 | it('should use the XHTML namespace', () => {
108 | patch(container, () => {
109 | elementVoid('div');
110 | });
111 |
112 | const el = container.childNodes[0];
113 | expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml');
114 | });
115 |
116 | it('should use createElement if no namespace has been specified', () => {
117 | const doc = container.ownerDocument!;
118 | const div = doc.createElement('div');
119 | let el: HTMLElement;
120 | sandbox.stub(doc, 'createElement').returns(div);
121 |
122 | patch(container, () => {
123 | elementOpen('svg');
124 | elementOpen('foreignObject');
125 | el = assertHTMLElement(elementVoid('div'));
126 | expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml');
127 | elementClose('foreignObject');
128 | elementClose('svg');
129 | });
130 |
131 | expect(doc.createElement).to.have.been.calledOnce;
132 | });
133 | });
134 |
135 | describe('for svg elements', () => {
136 | beforeEach(() => {
137 | patch(container, () => {
138 | elementOpen('svg');
139 | elementOpen('g');
140 | elementVoid('circle');
141 | elementClose('g');
142 | elementOpen('foreignObject');
143 | elementVoid('p');
144 | elementClose('foreignObject');
145 | elementVoid('path');
146 | elementClose('svg');
147 | });
148 | });
149 |
150 | it('should create svgs in the svg namespace', () => {
151 | const el = assertElement(container.querySelector('svg'));
152 | expect(el.namespaceURI).to.equal('http://www.w3.org/2000/svg');
153 | });
154 |
155 | it('should create descendants of svgs in the svg namespace', () => {
156 | const el = assertElement(container.querySelector('circle'));
157 | expect(el.namespaceURI).to.equal('http://www.w3.org/2000/svg');
158 | });
159 |
160 | it('should have the svg namespace for foreignObjects', () => {
161 | const el = assertElement(container.querySelector('svg')!.childNodes[1]);
162 | expect(el.namespaceURI).to.equal('http://www.w3.org/2000/svg');
163 | });
164 |
165 | it('should revert to the xhtml namespace when encounering a foreignObject',
166 | () => {
167 | const el = assertElement(container.querySelector('p'));
168 | expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml');
169 | });
170 |
171 | it('should reset to the previous namespace after exiting a forignObject',
172 | () => {
173 | const el = assertElement(container.querySelector('path'));
174 | expect(el.namespaceURI).to.equal('http://www.w3.org/2000/svg');
175 | });
176 |
177 | it('should create children in the svg namespace when patching an svg',
178 | () => {
179 | const svg = assertElement(container.querySelector('svg'));
180 | patch(svg, () => {
181 | elementVoid('rect');
182 | });
183 |
184 | const el = assertElement(svg.querySelector('rect'));
185 | expect(el.namespaceURI).to.equal('http://www.w3.org/2000/svg');
186 | });
187 | });
188 |
189 | describe('for math elements', () => {
190 | beforeEach(() => {
191 | patch(container, () => {
192 | elementOpen('math');
193 | elementOpen('semantics');
194 | elementOpen('mrow');
195 | elementVoid('mo');
196 | elementClose('mrow');
197 | elementClose('semantics');
198 | elementClose('math');
199 | elementVoid('p');
200 | });
201 | });
202 |
203 | it('should create equations in the MathML namespace', () => {
204 | const el = assertElement(container.querySelector('math'));
205 | expect(el.namespaceURI).to.equal('http://www.w3.org/1998/Math/MathML');
206 | });
207 |
208 | it('should create descendants of math in the MathML namespace', () => {
209 | const el = assertElement(container.querySelector('mo'));
210 | expect(el.namespaceURI).to.equal('http://www.w3.org/1998/Math/MathML');
211 | });
212 |
213 | it('should reset to the previous namespace after exiting math',
214 | () => {
215 | const el = assertElement(container.querySelector('p'));
216 | expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml');
217 | });
218 |
219 | it('should create children in the MathML namespace when patching an equation',
220 | () => {
221 | const mrow = assertElement(container.querySelector('mrow'));
222 | patch(mrow, () => {
223 | elementVoid('mi');
224 | });
225 |
226 | const el = assertElement(mrow.querySelector('mi'));
227 | expect(el.namespaceURI).to.equal('http://www.w3.org/1998/Math/MathML');
228 | });
229 | });
230 | });
231 |
--------------------------------------------------------------------------------
/test/functional/errors_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import * as Sinon from 'sinon';
5 |
6 | import {attr, currentElement, elementClose, elementOpen, elementOpenEnd, elementOpenStart, elementVoid, patch} from '../../index';
7 | const {expect} = chai;
8 |
9 | describe('Errors while rendering', () => {
10 | let container: HTMLElement;
11 | const sandbox = Sinon.sandbox.create();
12 |
13 | function patchWithUnclosedElement() {
14 | expect(() => {
15 | patch(currentElement(), () => {
16 | elementOpen('div');
17 | throw new Error('Never closed element!');
18 | });
19 | }).to.throw('Never closed element!');
20 | }
21 |
22 | beforeEach(() => {
23 | container = document.createElement('div');
24 | document.body.appendChild(container);
25 | });
26 |
27 | afterEach(() => {
28 | sandbox.restore();
29 | document.body.removeChild(container);
30 | });
31 |
32 | it('should continue patching', () => {
33 | patch(container, () => {
34 | elementOpen('div');
35 |
36 | elementOpen('div');
37 | patchWithUnclosedElement();
38 | elementClose('div');
39 |
40 | elementVoid('div');
41 | elementClose('div');
42 | });
43 |
44 | const el = container.children[0];
45 | expect(el.children).to.have.length(2);
46 | });
47 |
48 | it('should restore state while an element is open', () => {
49 | patch(container, () => {
50 | elementOpen('div');
51 |
52 | elementOpen('div');
53 | patchWithUnclosedElement();
54 | elementClose('div');
55 |
56 | elementVoid('span');
57 | elementClose('div');
58 | });
59 |
60 | const el = container.children[0];
61 | expect(el.children).to.have.length(2);
62 | expect(el.children[1].tagName).to.equal('SPAN');
63 | });
64 |
65 | it('should restore state while calling elementOpenStart', () => {
66 | patch(container, () => {
67 | const otherContainer = document.createElement('div');
68 |
69 | elementOpenStart('div');
70 | attr('parrentAttrOne', 'parrentAttrValOne');
71 |
72 | expect(() => {
73 | patch(otherContainer, () => {
74 | elementOpenStart('div');
75 | attr('childAttr', 'childAttrVal');
76 | throw new Error();
77 | });
78 | }).to.throw();
79 |
80 | attr('parrentAttrTwo', 'parrentAttrValTwo');
81 | elementOpenEnd();
82 |
83 | elementClose('div');
84 | });
85 |
86 | const attributes = container.children[0].attributes;
87 | expect(attributes).to.have.length(2);
88 | expect(attributes['parrentAttrOne'].value).to.equal('parrentAttrValOne');
89 | expect(attributes['parrentAttrTwo'].value).to.equal('parrentAttrValTwo');
90 | });
91 |
92 | it('should render any partial elements', () => {
93 | expect(() => {
94 | patch(container, () => {
95 | elementVoid('div');
96 | elementOpen('div');
97 | elementOpen('div');
98 | throw new Error();
99 | });
100 | }).to.throw();
101 |
102 | const el = container.children[1];
103 | expect(container.children).to.have.length(2);
104 | expect(el.children).to.have.length(1);
105 | });
106 | });
107 |
--------------------------------------------------------------------------------
/test/functional/formatters_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import * as Sinon from 'sinon';
5 |
6 | import {patch, text} from '../../index';
7 | const {expect} = chai;
8 |
9 | describe('formatters', () => {
10 | let container: HTMLElement;
11 |
12 | beforeEach(() => {
13 | container = document.createElement('div');
14 | document.body.appendChild(container);
15 | });
16 |
17 | afterEach(() => {
18 | document.body.removeChild(container);
19 | });
20 |
21 | describe('for newly created Text nodes', () => {
22 | function sliceOne(str: {}): string {
23 | return ('' + str).slice(1);
24 | }
25 |
26 | function prefixQuote(str: {}): string {
27 | return '\'' + str;
28 | }
29 |
30 | it('should render with the specified formatted value', () => {
31 | patch(container, () => {
32 | text('hello world!', sliceOne, prefixQuote);
33 | });
34 | const node = container.childNodes[0];
35 |
36 | expect(node.textContent).to.equal('\'ello world!');
37 | });
38 | });
39 |
40 | describe('for updated Text nodes', () => {
41 | let stub: Sinon.SinonStub;
42 |
43 | function render(value: string) {
44 | text(value, stub);
45 | }
46 |
47 | beforeEach(() => {
48 | stub = Sinon.stub();
49 | stub.onFirstCall().returns('stubValueOne');
50 | stub.onSecondCall().returns('stubValueTwo');
51 | });
52 |
53 | it('should not call the formatter for unchanged values', () => {
54 | patch(container, () => render('hello'));
55 | patch(container, () => render('hello'));
56 | const node = container.childNodes[0];
57 |
58 | expect(node.textContent).to.equal('stubValueOne');
59 | expect(stub).to.have.been.calledOnce;
60 | });
61 |
62 | it('should call the formatter when the value changes', () => {
63 | patch(container, () => render('hello'));
64 | patch(container, () => render('world'));
65 | const node = container.childNodes[0];
66 |
67 | expect(node.textContent).to.equal('stubValueTwo');
68 | expect(stub).to.have.been.calledTwice;
69 | });
70 |
71 | it('should call the formatter even if the initial value matches', () => {
72 | container.textContent = 'test';
73 |
74 | patch(container, () => {
75 | text('test', s => s + 'Z');
76 | });
77 |
78 | expect(container.textContent).to.equal('testZ');
79 | });
80 | });
81 |
82 | it('should not leak the arguments object', () => {
83 | const stub = Sinon.stub().returns('value');
84 | patch(container, () => text('value', stub));
85 |
86 | expect(stub).to.not.have.been.calledOn(['value', stub]);
87 | });
88 | });
89 |
--------------------------------------------------------------------------------
/test/functional/hooks_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import * as Sinon from 'sinon';
5 |
6 | import {attributes, elementVoid, notifications, patch, symbols, text} from '../../index';
7 | const {expect} = chai;
8 |
9 | describe('library hooks', () => {
10 | const sandbox = Sinon.sandbox.create();
11 | let container: HTMLElement;
12 | let allSpy: Sinon.SinonSpy;
13 | let stub: Sinon.SinonStub;
14 |
15 | beforeEach(() => {
16 | container = document.createElement('div');
17 | document.body.appendChild(container);
18 | });
19 |
20 | afterEach(() => {
21 | document.body.removeChild(container);
22 | sandbox.restore();
23 | });
24 |
25 | describe('for deciding how attributes are set', () => {
26 | // tslint:disable-next-line:no-any
27 | function render(dynamicValue: any) {
28 | elementVoid(
29 | 'div', 'key', ['staticName', 'staticValue'], 'dynamicName',
30 | dynamicValue);
31 | }
32 |
33 | function stubOut(mutator: string) {
34 | stub = sandbox.stub();
35 | attributes[mutator] = stub;
36 | }
37 |
38 | beforeEach(() => {
39 | allSpy = sandbox.spy(attributes, symbols.default);
40 | });
41 |
42 | afterEach(() => {
43 | for (const mutator in attributes) {
44 | if (mutator !== symbols.default && mutator !== 'style') {
45 | delete attributes[mutator];
46 | }
47 | }
48 | });
49 |
50 |
51 | describe('for static attributes', () => {
52 | it('should call specific setter', () => {
53 | stubOut('staticName');
54 |
55 | patch(container, render, 'dynamicValue');
56 | const el = container.childNodes[0];
57 |
58 | expect(stub).to.have.been.calledOnce;
59 | expect(stub).to.have.been.calledWith(el, 'staticName', 'staticValue');
60 | });
61 |
62 | it('should call generic setter', () => {
63 | patch(container, render, 'dynamicValue');
64 | const el = container.childNodes[0];
65 |
66 | expect(allSpy).to.have.been.calledWith(el, 'staticName', 'staticValue');
67 | });
68 |
69 | it('should prioritize specific setter over generic', () => {
70 | stubOut('staticName');
71 |
72 | patch(container, render, 'dynamicValue');
73 | const el = container.childNodes[0];
74 |
75 | expect(stub).to.have.been.calledOnce;
76 | expect(allSpy).to.have.been.calledOnce;
77 | expect(allSpy).to.have.been.calledWith(
78 | el, 'dynamicName', 'dynamicValue');
79 | });
80 | });
81 |
82 | describe('for specific dynamic attributes', () => {
83 | beforeEach(() => {
84 | stubOut('dynamicName');
85 | });
86 |
87 | it('should be called for dynamic attributes', () => {
88 | patch(container, render, 'dynamicValue');
89 | const el = container.childNodes[0];
90 |
91 | expect(stub).to.have.been.calledOnce;
92 | expect(stub).to.have.been.calledWith(el, 'dynamicName', 'dynamicValue');
93 | });
94 |
95 | it('should be called on attribute update', () => {
96 | patch(container, render, 'dynamicValueOne');
97 | patch(container, render, 'dynamicValueTwo');
98 | const el = container.childNodes[0];
99 |
100 | expect(stub).to.have.been.calledTwice;
101 | expect(stub).to.have.been.calledWith(
102 | el, 'dynamicName', 'dynamicValueTwo');
103 | });
104 |
105 | it('should only be called when attributes change', () => {
106 | patch(container, render, 'dynamicValue');
107 | patch(container, render, 'dynamicValue');
108 | const el = container.childNodes[0];
109 |
110 | expect(stub).to.have.been.calledOnce;
111 | expect(stub).to.have.been.calledWith(el, 'dynamicName', 'dynamicValue');
112 | });
113 |
114 | it('should prioritize specific setter over generic', () => {
115 | patch(container, render, 'dynamicValue');
116 | const el = container.childNodes[0];
117 |
118 | expect(stub).to.have.been.calledOnce;
119 | expect(allSpy).to.have.been.calledOnce;
120 | expect(allSpy).to.have.been.calledWith(el, 'staticName', 'staticValue');
121 | });
122 | });
123 |
124 | describe('for generic dynamic attributes', () => {
125 | it('should be called for dynamic attributes', () => {
126 | patch(container, render, 'dynamicValue');
127 | const el = container.childNodes[0];
128 |
129 | expect(allSpy).to.have.been.calledWith(
130 | el, 'dynamicName', 'dynamicValue');
131 | });
132 |
133 | it('should be called on attribute update', () => {
134 | patch(container, render, 'dynamicValueOne');
135 | patch(container, render, 'dynamicValueTwo');
136 | const el = container.childNodes[0];
137 |
138 | expect(allSpy).to.have.been.calledWith(
139 | el, 'dynamicName', 'dynamicValueTwo');
140 | });
141 |
142 | it('should only be called when attributes change', () => {
143 | patch(container, render, 'dynamicValue');
144 | patch(container, render, 'dynamicValue');
145 | const el = container.childNodes[0];
146 |
147 | expect(allSpy).to.have.been.calledTwice;
148 | expect(allSpy).to.have.been.calledWith(el, 'staticName', 'staticValue');
149 | expect(allSpy).to.have.been.calledWith(
150 | el, 'dynamicName', 'dynamicValue');
151 | });
152 | });
153 | });
154 |
155 | describe('for being notified when nodes are created and added to DOM', () => {
156 | beforeEach(() => {
157 | notifications.nodesCreated = sandbox.spy((nodes) => {
158 | expect(nodes[0].parentNode).to.not.equal(null);
159 | });
160 | });
161 |
162 | afterEach(() => {
163 | notifications.nodesCreated = null;
164 | });
165 |
166 | it('should be called for elements', () => {
167 | patch(container, function render() {
168 | elementVoid('div', 'key', ['staticName', 'staticValue']);
169 | });
170 | const el = container.childNodes[0];
171 |
172 | expect(notifications.nodesCreated).to.have.been.calledOnce;
173 | expect(notifications.nodesCreated).calledWith([el]);
174 | });
175 |
176 | it('should be called for text', () => {
177 | patch(container, function render() {
178 | text('hello');
179 | });
180 | const el = container.childNodes[0];
181 |
182 | expect(notifications.nodesCreated).to.have.been.calledOnce;
183 | expect(notifications.nodesCreated).calledWith([el]);
184 | });
185 | });
186 |
187 | describe('for being notified when nodes are deleted from the DOM', () => {
188 | function render(withTxt) {
189 | if (withTxt) {
190 | text('hello');
191 | } else {
192 | elementVoid('div', 'key2', ['staticName', 'staticValue']);
193 | }
194 | }
195 |
196 | function empty() {}
197 |
198 | beforeEach(() => {
199 | notifications.nodesDeleted = sandbox.spy((nodes) => {
200 | expect(nodes[0].parentNode).to.equal(null);
201 | });
202 | });
203 |
204 | afterEach(() => {
205 | notifications.nodesDeleted = null;
206 | });
207 |
208 | it('should be called for detached element', () => {
209 | patch(container, render, false);
210 | const el = container.childNodes[0];
211 | patch(container, empty);
212 |
213 | expect(notifications.nodesDeleted).to.have.been.calledOnce;
214 | expect(notifications.nodesDeleted).calledWith([el]);
215 | });
216 |
217 | it('should be called for detached text', () => {
218 | patch(container, render, true);
219 | const el = container.childNodes[0];
220 | patch(container, empty);
221 |
222 | expect(notifications.nodesDeleted).to.have.been.calledOnce;
223 | expect(notifications.nodesDeleted).calledWith([el]);
224 | });
225 |
226 | it('should be called for replaced element', () => {
227 | patch(container, render, false);
228 | const el = container.childNodes[0];
229 | patch(container, render, true);
230 |
231 | expect(notifications.nodesDeleted).to.have.been.calledOnce;
232 | expect(notifications.nodesDeleted).calledWith([el]);
233 | });
234 |
235 | it('should be called for removed text', () => {
236 | patch(container, render, true);
237 | const el = container.childNodes[0];
238 | patch(container, render, false);
239 |
240 | expect(notifications.nodesDeleted).to.have.been.calledOnce;
241 | expect(notifications.nodesDeleted).calledWith([el]);
242 | });
243 | });
244 |
245 | describe('for not being notified when Elements are reordered', () => {
246 | function render(first) {
247 | if (first) {
248 | elementVoid('div', 'keyA', ['staticName', 'staticValue']);
249 | }
250 | elementVoid('div', 'keyB');
251 | if (!first) {
252 | elementVoid('div', 'keyA', ['staticName', 'staticValue']);
253 | }
254 | }
255 |
256 | beforeEach(() => {
257 | notifications.nodesDeleted = sandbox.spy();
258 | });
259 |
260 | afterEach(() => {
261 | notifications.nodesDeleted = null;
262 | });
263 |
264 | it('should not call the nodesDeleted callback', () => {
265 | patch(container, render, true);
266 | patch(container, render, false);
267 | expect(notifications.nodesDeleted).to.have.callCount(0);
268 | });
269 | });
270 | });
271 |
--------------------------------------------------------------------------------
/test/functional/importing_element_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 |
7 | import * as Sinon from 'sinon';
8 |
9 | import {elementClose, elementOpen, elementVoid, importNode, patch} from '../../index';
10 | const {expect} = chai;
11 |
12 | describe('importing element', () => {
13 | let container: HTMLElement;
14 | const sandbox = Sinon.sandbox.create();
15 |
16 | beforeEach(() => {
17 | container = document.createElement('div');
18 | document.body.appendChild(container);
19 | });
20 |
21 | afterEach(() => {
22 | sandbox.restore();
23 | document.body.removeChild(container);
24 | });
25 |
26 | describe('in HTML', () => {
27 | it('handles normal nodeName capitalization', () => {
28 | container.innerHTML = '';
29 | importNode(container);
30 |
31 | const el = container.firstChild;
32 | patch(container, () => elementVoid('div'));
33 | expect(container.firstChild).to.equal(el);
34 | });
35 |
36 | it('handles odd nodeName capitalization', () => {
37 | container.innerHTML = '';
38 | importNode(container);
39 |
40 | const el = container.firstChild;
41 | patch(container, () => elementVoid('div'));
42 | expect(container.firstChild).to.equal(el);
43 | });
44 | });
45 |
46 | describe('in SVG', () => {
47 | it('handles normal nodeName capitalization', () => {
48 | container.innerHTML = '';
49 | importNode(container);
50 |
51 | const foreign = container.firstChild!.firstChild;
52 | patch(container, () => {
53 | elementOpen('svg');
54 | elementVoid('foreignObject');
55 | elementClose('svg');
56 | });
57 | expect(container.firstChild!.firstChild).to.equal(foreign);
58 | });
59 |
60 | it('handles odd nodeName capitalization', () => {
61 | container.innerHTML = '';
62 | importNode(container);
63 |
64 | const foreign = container.firstChild!.firstChild;
65 | patch(container, () => {
66 | elementOpen('svg');
67 | elementVoid('foreignObject');
68 | elementClose('svg');
69 | });
70 | expect(container.firstChild!.firstChild).to.equal(foreign);
71 | });
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/test/functional/patchConfig_matches_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 |
7 | import {
8 | elementVoid,
9 | createPatchInner,
10 | createPatchOuter,
11 | patchInner,
12 | } from '../../index';
13 | import { text, elementOpen, elementClose } from '../../src/virtual_elements';
14 | const {expect} = chai;
15 |
16 | describe('patchConfig\'s matches option', () => {
17 | let container: HTMLElement;
18 |
19 | beforeEach(() => {
20 | container = document.createElement('div');
21 | document.body.appendChild(container);
22 | });
23 |
24 | afterEach(() => {
25 | document.body.removeChild(container);
26 | });
27 |
28 | describe('default matches', () => {
29 | describe('for createPatchInner', () => {
30 | it('should match with the same key and node name', () => {
31 | const patch = createPatchInner();
32 |
33 | patch(container, () => elementVoid('div', 'foo'));
34 | const postPatchOneChild = container.firstChild;
35 | patch(container, () => elementVoid('div', 'foo'));
36 |
37 | expect(container.childNodes).to.have.length(1);
38 | expect(container.firstChild).to.equal(postPatchOneChild);
39 | });
40 |
41 | it('should match for text nodes', () => {
42 | const patch = createPatchInner();
43 |
44 | patch(container, () => text('foo'));
45 | const postPatchOneChild = container.firstChild;
46 | patch(container, () => text('foo'));
47 |
48 | expect(container.childNodes).to.have.length(1);
49 | expect(container.firstChild).to.equal(postPatchOneChild);
50 | });
51 |
52 | it('should not match with different tags', () => {
53 | const patch = createPatchInner();
54 |
55 | patch(container, () => elementVoid('div', 'foo'));
56 | const postPatchOneChild = container.firstChild;
57 | patch(container, () => elementVoid('span', 'foo'));
58 |
59 | expect(container.childNodes).to.have.length(1);
60 | expect(container.firstChild).to.not.equal(postPatchOneChild);
61 | });
62 |
63 | it('should not match with different keys', () => {
64 | const patch = createPatchInner();
65 |
66 | patch(container, () => elementVoid('div', 'foo'));
67 | const postPatchOneChild = container.firstChild;
68 | patch(container, () => elementVoid('div', 'bar'));
69 |
70 | expect(container.childNodes).to.have.length(1);
71 | expect(container.firstChild).to.not.equal(postPatchOneChild);
72 | });
73 |
74 | it('should default when a config is specified', () => {
75 | const patch = createPatchInner({});
76 |
77 | patch(container, () => elementVoid('div', 'foo'));
78 | const postPatchOneChild = container.firstChild;
79 | patch(container, () => elementVoid('div', 'foo'));
80 |
81 | expect(container.childNodes).to.have.length(1);
82 | expect(container.firstChild).to.equal(postPatchOneChild);
83 | });
84 | });
85 |
86 | describe('for createPatchOuter', () => {
87 | it('should match with the same key and node name', () => {
88 | const patch = createPatchOuter();
89 |
90 | patch(container, () => {
91 | elementOpen('div');
92 | elementVoid('div', 'foo');
93 | elementClose('div');
94 | });
95 | const postPatchOneChild = container.firstChild;
96 | patch(container, () => {
97 | elementOpen('div');
98 | elementVoid('div', 'foo');
99 | elementClose('div');
100 | });
101 |
102 | expect(container.childNodes).to.have.length(1);
103 | expect(container.firstChild).to.equal(postPatchOneChild);
104 | });
105 | });
106 | });
107 |
108 | describe('custom matches', () => {
109 | // For the sake of example, uses a matches function
110 | const patchTripleEquals = createPatchInner({
111 | matches: (node, nameOrCtor, expectedNameOrCtor, key, expectedKey) => {
112 | return nameOrCtor == expectedNameOrCtor && key === expectedKey;
113 | },
114 | });
115 |
116 | it('should reuse nodes when matching', () => {
117 | patchTripleEquals(container, () => elementVoid('div', null));
118 | const postPatchOneChild = container.firstChild;
119 | patchTripleEquals(container, () => elementVoid('div', null));
120 |
121 | expect(container.childNodes).to.have.length(1);
122 | expect(container.firstChild).to.equal(postPatchOneChild);
123 | });
124 |
125 | it('should reuse nodes when matching', () => {
126 | patchTripleEquals(container, () => elementVoid('div', null));
127 | const postPatchOneChild = container.firstChild;
128 | patchTripleEquals(container, () => elementVoid('div', undefined));
129 |
130 | expect(container.childNodes).to.have.length(1);
131 | expect(container.firstChild).to.not.equal(postPatchOneChild);
132 | });
133 |
134 | it('should not effect the default patcher', () => {
135 | patchTripleEquals(container, () => elementVoid('div', null));
136 | const postPatchOneChild = container.firstChild;
137 | patchInner(container, () => elementVoid('div', undefined));
138 |
139 | expect(container.childNodes).to.have.length(1);
140 | expect(container.firstChild).to.equal(postPatchOneChild);
141 | });
142 |
143 | it('should not effect other patchers', () => {
144 | const patchNeverEquals = createPatchInner({
145 | matches: () => false,
146 | });
147 |
148 | patchTripleEquals(container, () => elementVoid('div', null));
149 | const postPatchOneChild = container.firstChild;
150 | patchNeverEquals(container, () => elementVoid('div', null));
151 |
152 | expect(container.childNodes).to.have.length(1);
153 | expect(container.firstChild).to.not.equal(postPatchOneChild);
154 | });
155 | });
156 | });
157 |
--------------------------------------------------------------------------------
/test/functional/patchinner_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2015 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: chai from //third_party/javascript/typings/chai
5 |
6 | import {
7 | patch,
8 | patchInner,
9 | elementOpen,
10 | elementOpenStart,
11 | elementOpenEnd,
12 | elementClose,
13 | elementVoid,
14 | text
15 | } from '../../index';
16 | import {
17 | assertHTMLElement,
18 | } from '../util/dom';
19 | import * as sinon from 'sinon';
20 | const {expect} = chai;
21 |
22 |
23 | describe('patching an element\'s children', () => {
24 | let container:HTMLElement;
25 |
26 | beforeEach(() => {
27 | container = document.createElement('div');
28 | document.body.appendChild(container);
29 | });
30 |
31 | afterEach(() => {
32 | document.body.removeChild(container);
33 | });
34 |
35 | describe('with an existing document tree', () => {
36 | let div:HTMLElement;
37 |
38 | function render() {
39 | elementVoid('div', null, null,
40 | 'tabindex', '0');
41 | }
42 |
43 | beforeEach(function() {
44 | div = document.createElement('div');
45 | div.setAttribute('tabindex', '-1');
46 | container.appendChild(div);
47 | });
48 |
49 | it('should preserve existing nodes', () => {
50 | patchInner(container, render);
51 | const child = container.childNodes[0];
52 |
53 | expect(child).to.equal(div);
54 | });
55 |
56 | describe('should return DOM node', () => {
57 | let node:HTMLElement;
58 |
59 | it('from elementOpen', () => {
60 | patchInner(container, () => {
61 | node = elementOpen('div');
62 | elementClose('div');
63 | });
64 |
65 | expect(node).to.equal(div);
66 | });
67 |
68 | it('from elementClose', () => {
69 | patchInner(container, () => {
70 | elementOpen('div');
71 | node = assertHTMLElement(elementClose('div'));
72 | });
73 |
74 | expect(node).to.equal(div);
75 | });
76 |
77 | it('from elementVoid', () => {
78 | patchInner(container, () => {
79 | node = assertHTMLElement(elementVoid('div'));
80 | });
81 |
82 | expect(node).to.equal(div);
83 | });
84 |
85 | it('from elementOpenEnd', () => {
86 | patchInner(container, () => {
87 | elementOpenStart('div');
88 | node = elementOpenEnd();
89 | elementClose('div');
90 | });
91 |
92 | expect(node).to.equal(div);
93 | });
94 | });
95 | });
96 |
97 | it('should be re-entrant', function() {
98 | const containerOne = document.createElement('div');
99 | const containerTwo = document.createElement('div');
100 |
101 | function renderOne() {
102 | elementOpen('div');
103 | patchInner(containerTwo, renderTwo);
104 | text('hello');
105 | elementClose('div');
106 | }
107 |
108 | function renderTwo() {
109 | text('foobar');
110 | }
111 |
112 | patchInner(containerOne, renderOne);
113 |
114 | expect(containerOne.textContent).to.equal('hello');
115 | expect(containerTwo.textContent).to.equal('foobar');
116 | });
117 |
118 | it('should pass third argument to render function', () => {
119 |
120 | function render(content:unknown) {
121 | text(content as string);
122 | }
123 |
124 | patchInner(container, render, 'foobar');
125 |
126 | expect(container.textContent).to.equal('foobar');
127 | });
128 |
129 | it('should patch a detached node', () => {
130 | const container = document.createElement('div');
131 | function render() {
132 | elementVoid('span');
133 | }
134 |
135 | patchInner(container, render);
136 |
137 | expect(assertHTMLElement(container.firstChild).tagName).to.equal('SPAN');
138 | });
139 |
140 | it('should throw when an element is unclosed', function() {
141 | expect(() => {
142 | patch(container, () => {
143 | elementOpen('div');
144 | });
145 | }).to.throw('One or more tags were not closed:\ndiv');
146 | });
147 | });
148 |
149 | describe('patching a documentFragment', function() {
150 | it('should create the required DOM nodes', function() {
151 | const frag = document.createDocumentFragment();
152 |
153 | patchInner(frag, function() {
154 | elementOpen('div', null, null,
155 | 'id', 'aDiv');
156 | elementClose('div');
157 | });
158 |
159 | expect(assertHTMLElement(frag.childNodes[0]).id).to.equal('aDiv');
160 | });
161 | });
162 |
163 | describe('patch', () => {
164 | it('should alias patchInner', () => {
165 | expect(patch).to.equal(patchInner);
166 | });
167 | });
168 |
--------------------------------------------------------------------------------
/test/functional/patchouter_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 | import {elementClose, elementOpen, elementVoid, patchOuter, text} from '../../index';
7 | const {expect} = chai;
8 |
9 |
10 | describe('patching an element', () => {
11 | let container;
12 |
13 | beforeEach(() => {
14 | container = document.createElement('div');
15 | document.body.appendChild(container);
16 | });
17 |
18 | afterEach(() => {
19 | document.body.removeChild(container);
20 | });
21 |
22 | it('should update attributes', () => {
23 | function render() {
24 | elementVoid('div', null, null, 'tabindex', '0');
25 | }
26 |
27 | patchOuter(container, render);
28 |
29 | expect(container.getAttribute('tabindex')).to.equal('0');
30 | });
31 |
32 | it('should return the DOM node', () => {
33 | function render() {
34 | elementVoid('div');
35 | }
36 |
37 | const result = patchOuter(container, render);
38 |
39 | expect(result).to.equal(container);
40 | });
41 |
42 | it('should update children', () => {
43 | function render() {
44 | elementOpen('div');
45 | elementVoid('span');
46 | elementClose('div');
47 | }
48 |
49 | patchOuter(container, render);
50 |
51 | expect(container.firstChild.tagName).to.equal('SPAN');
52 | });
53 |
54 | it('should be re-entrant', function() {
55 | const containerOne = container.appendChild(document.createElement('div'));
56 | const containerTwo = container.appendChild(document.createElement('div'));
57 |
58 | function renderOne() {
59 | elementOpen('div');
60 | patchOuter(containerTwo, renderTwo);
61 | text('hello');
62 | elementClose('div');
63 | }
64 |
65 | function renderTwo() {
66 | elementOpen('div');
67 | text('foobar');
68 | elementClose('div');
69 | }
70 |
71 | patchOuter(containerOne, renderOne);
72 |
73 | expect(containerOne.textContent).to.equal('hello');
74 | expect(containerTwo.textContent).to.equal('foobar');
75 | });
76 |
77 | it('should pass third argument to render function', () => {
78 | function render(content) {
79 | elementOpen('div');
80 | text(content);
81 | elementClose('div');
82 | }
83 |
84 | patchOuter(container, render, 'foobar');
85 |
86 | expect(container.textContent).to.equal('foobar');
87 | });
88 |
89 | describe('with an empty patch', () => {
90 | let div;
91 | let prev;
92 | let next;
93 | let result;
94 |
95 | beforeEach(() => {
96 | prev = container.appendChild(document.createElement('div'));
97 | div = container.appendChild(document.createElement('div'));
98 | next = container.appendChild(document.createElement('div'));
99 |
100 | result = patchOuter(div, () => {});
101 | });
102 |
103 | it('should remove the DOM node', () => {
104 | expect(div.parentNode).to.be.null;
105 | expect(container.children).to.have.length(2);
106 | });
107 |
108 | it('should leave prior nodes alone', () => {
109 | expect(container.firstChild).to.equal(prev);
110 | });
111 |
112 | it('should leaving following nodes alone', () => {
113 | expect(container.lastChild).to.equal(next);
114 | });
115 |
116 | it('should return null on an empty patch', () => {
117 | expect(result).to.be.null;
118 | });
119 | });
120 |
121 | describe('with a matching node', () => {
122 | let div;
123 | let prev;
124 | let next;
125 | let result;
126 |
127 | function render() {
128 | elementVoid('div');
129 | }
130 |
131 | beforeEach(() => {
132 | prev = container.appendChild(document.createElement('div'));
133 | div = container.appendChild(document.createElement('div'));
134 | next = container.appendChild(document.createElement('div'));
135 |
136 | result = patchOuter(div, render);
137 | });
138 |
139 | it('should leave the patched node alone', () => {
140 | expect(container.children).to.have.length(3);
141 | expect(container.children[1]).to.equal(div);
142 | });
143 |
144 | it('should leave prior nodes alone', () => {
145 | expect(container.firstChild).to.equal(prev);
146 | });
147 |
148 | it('should leaving following nodes alone', () => {
149 | expect(container.lastChild).to.equal(next);
150 | });
151 |
152 | it('should return the patched node', () => {
153 | expect(result).to.equal(div);
154 | });
155 | });
156 |
157 | describe('with a different tag', () => {
158 | describe('without a key', () => {
159 | let div;
160 | let span;
161 | let prev;
162 | let next;
163 | let result;
164 |
165 | function render() {
166 | elementVoid('span');
167 | }
168 |
169 | beforeEach(() => {
170 | prev = container.appendChild(document.createElement('div'));
171 | div = container.appendChild(document.createElement('div'));
172 | next = container.appendChild(document.createElement('div'));
173 |
174 | result = patchOuter(div, render);
175 | span = container.querySelector('span');
176 | });
177 |
178 | it('should replace the DOM node', () => {
179 | expect(container.children).to.have.length(3);
180 | expect(container.children[1]).to.equal(span);
181 | });
182 |
183 | it('should leave prior nodes alone', () => {
184 | expect(container.firstChild).to.equal(prev);
185 | });
186 |
187 | it('should leaving following nodes alone', () => {
188 | expect(container.lastChild).to.equal(next);
189 | });
190 |
191 | it('should return the new DOM node', () => {
192 | expect(result).to.equal(span);
193 | });
194 | });
195 |
196 | describe('with a different key', () => {
197 | let div;
198 | let prev;
199 | let next;
200 | let el;
201 |
202 | function render(data) {
203 | el = elementVoid(data.tag, data.key);
204 | }
205 |
206 | beforeEach(() => {
207 | prev = container.appendChild(document.createElement('div'));
208 | div = container.appendChild(document.createElement('div'));
209 | next = container.appendChild(document.createElement('div'));
210 | });
211 |
212 | describe('when a key changes', () => {
213 | beforeEach(() => {
214 | div.setAttribute('key', 'key0');
215 | patchOuter(div, render, {tag: 'span', key: 'key1'});
216 | });
217 |
218 | it('should replace the DOM node', () => {
219 | expect(container.children).to.have.length(3);
220 | expect(container.children[1]).to.equal(el);
221 | });
222 |
223 | it('should leave prior nodes alone', () => {
224 | expect(container.firstChild).to.equal(prev);
225 | });
226 |
227 | it('should leaving following nodes alone', () => {
228 | expect(container.lastChild).to.equal(next);
229 | });
230 | });
231 |
232 | describe('when a key is removed', () => {
233 | beforeEach(() => {
234 | div.setAttribute('key', 'key0');
235 | patchOuter(div, render, {tag: 'span'});
236 | });
237 |
238 | it('should replace the DOM node', () => {
239 | expect(container.children).to.have.length(3);
240 | expect(container.children[1].tagName).to.equal('SPAN');
241 | expect(container.children[1]).to.equal(el);
242 | });
243 |
244 | it('should leave prior nodes alone', () => {
245 | expect(container.firstChild).to.equal(prev);
246 | });
247 |
248 | it('should leaving following nodes alone', () => {
249 | expect(container.lastChild).to.equal(next);
250 | });
251 | });
252 |
253 | describe('when a key is added', () => {
254 | beforeEach(() => {
255 | patchOuter(div, render, {tag: 'span', key: 'key2'});
256 | });
257 |
258 | it('should replace the DOM node', () => {
259 | expect(container.children).to.have.length(3);
260 | expect(container.children[1]).to.equal(el);
261 | });
262 |
263 | it('should leave prior nodes alone', () => {
264 | expect(container.firstChild).to.equal(prev);
265 | });
266 |
267 | it('should leaving following nodes alone', () => {
268 | expect(container.lastChild).to.equal(next);
269 | });
270 | });
271 | });
272 | });
273 |
274 | it('should not hang on to removed elements with keys', () => {
275 | function render() {
276 | elementVoid('div', 'key');
277 | }
278 |
279 | const divOne = container.appendChild(document.createElement('div'));
280 | patchOuter(divOne, render);
281 | const el = container.firstChild;
282 | patchOuter(el, () => {});
283 | const divTwo = container.appendChild(document.createElement('div'));
284 | patchOuter(divTwo, render);
285 |
286 | expect(container.children).to.have.length(1);
287 | expect(container.firstChild).to.not.equal(el);
288 | });
289 |
290 | it('should throw an error when patching too many elements', () => {
291 | const div = container.appendChild(document.createElement('div'));
292 | function render() {
293 | elementVoid('div');
294 | elementVoid('div');
295 | }
296 |
297 | expect(() => patchOuter(div, render))
298 | .to.throw(
299 | 'There must be ' +
300 | 'exactly one top level call corresponding to the patched element.');
301 | });
302 | });
303 |
--------------------------------------------------------------------------------
/test/functional/skipNode_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 | import {elementVoid, patch, skipNode} from '../../index';
7 | const {expect} = chai;
8 |
9 |
10 | describe('skip', () => {
11 | let container;
12 | let firstChild;
13 | let lastChild;
14 |
15 | beforeEach(() => {
16 | container = document.createElement('div');
17 | container.innerHTML = '';
18 |
19 | firstChild = container.firstChild;
20 | lastChild = container.lastChild;
21 |
22 | document.body.appendChild(container);
23 | });
24 |
25 | afterEach(() => {
26 | document.body.removeChild(container);
27 | });
28 |
29 | it('should keep nodes that were skipped at the start', () => {
30 | patch(container, () => {
31 | skipNode();
32 | elementVoid('span');
33 | });
34 |
35 | expect(container.firstChild).to.equal(firstChild);
36 | expect(container.lastChild).to.equal(lastChild);
37 | });
38 |
39 | it('should keep nodes that were skipped', () => {
40 | patch(container, () => {
41 | elementVoid('div');
42 | skipNode();
43 | });
44 |
45 | expect(container.lastChild).to.equal(lastChild);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/test/functional/skip_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 |
7 | import {alignWithDOM, elementClose, elementOpen, elementVoid, patch, skip, text, skipNode} from '../../index';
8 | const {expect} = chai;
9 |
10 | describe('skip', () => {
11 | let container;
12 |
13 | beforeEach(() => {
14 | container = document.createElement('div');
15 | document.body.appendChild(container);
16 | });
17 |
18 | afterEach(() => {
19 | document.body.removeChild(container);
20 | });
21 |
22 | function render(data) {
23 | elementOpen('div');
24 | if (data.skip) {
25 | skip();
26 | } else {
27 | text('some ');
28 | text('text');
29 | }
30 | elementClose('div');
31 | }
32 |
33 | it('should keep any DOM nodes in the subtree', () => {
34 | patch(container, render, {skip: false});
35 | patch(container, render, {skip: true});
36 |
37 | expect(container.textContent).to.equal('some text');
38 | });
39 |
40 | it('should throw if an element is declared after skipping', () => {
41 | expect(() => {
42 | patch(container, () => {
43 | skip();
44 | elementOpen('div');
45 | elementClose('div');
46 | });
47 | })
48 | .to.throw(
49 | 'elementOpen() may not be called inside an element' +
50 | ' that has called skip().');
51 | });
52 |
53 | it('should throw if a text is declared after skipping', () => {
54 | expect(() => {
55 | patch(container, () => {
56 | skip();
57 | text('text');
58 | });
59 | })
60 | .to.throw(
61 | 'text() may not be called inside an element that has called skip().');
62 | });
63 |
64 | it('should throw skip is called after declaring an element', () => {
65 | expect(() => {
66 | patch(container, () => {
67 | elementVoid('div');
68 | skip();
69 | });
70 | })
71 | .to.throw(
72 | 'skip() must come before any child declarations inside' +
73 | ' the current element.');
74 | });
75 |
76 | it('should throw skip is called after declaring a text', () => {
77 | expect(() => {
78 | patch(container, () => {
79 | text('text');
80 | skip();
81 | });
82 | })
83 | .to.throw(
84 | 'skip() must come before any child declarations' +
85 | ' inside the current element.');
86 | });
87 | });
88 |
89 | describe('alignWithDOM', () => {
90 | let container:HTMLElement;
91 |
92 | beforeEach(() => {
93 | container = document.createElement('div');
94 | document.body.appendChild(container);
95 | });
96 |
97 | afterEach(() => {
98 | document.body.removeChild(container);
99 | });
100 |
101 | function render(condition: boolean, shouldSkip: boolean) {
102 | if (condition) {
103 | elementVoid('img');
104 | }
105 | if (shouldSkip) {
106 | alignWithDOM('div', 1);
107 | } else {
108 | elementOpen('div', 1);
109 | text('Hello');
110 | elementClose('div');
111 | }
112 | }
113 | it('should skip the correct element when used with conditional elements', () => {
114 | patch(container, () => {
115 | render(true, false);
116 | });
117 | expect(container.children[1]!.innerHTML).to.equal('Hello');
118 | container.children[1]!.innerHTML = 'Hola';
119 | patch(container, () => {
120 | render(false, true);
121 | });
122 | expect(container.childElementCount).to.equal(1);
123 | // When condition is false, the current node will be at ![]()
124 | // alignWithDOM will then pull the second
up to the
125 | // current position and diff it. The ![]()
will then be deleted.
126 | expect(container.children[0]!.innerHTML).to.equal('Hola');
127 | });
128 | });
--------------------------------------------------------------------------------
/test/functional/styles_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 | import {elementVoid, patch} from '../../index';
7 | const {expect} = chai;
8 |
9 | describe('style updates', () => {
10 | let container;
11 |
12 | beforeEach(() => {
13 | container = document.createElement('div');
14 | document.body.appendChild(container);
15 | });
16 |
17 | afterEach(() => {
18 | document.body.removeChild(container);
19 | });
20 |
21 | function browserSupportsCssCustomProperties() {
22 | const style = document.createElement('div').style;
23 | style.setProperty('--prop', 'value');
24 | return style.getPropertyValue('--prop') === 'value';
25 | }
26 |
27 | function render(style) {
28 | elementVoid('div', null, null, 'style', style);
29 | }
30 |
31 | it('should render with the correct style properties for objects', () => {
32 | patch(container, () => render({color: 'white', backgroundColor: 'red'}));
33 | const el = container.childNodes[0];
34 |
35 | expect(el.style.color).to.equal('white');
36 | expect(el.style.backgroundColor).to.equal('red');
37 | });
38 |
39 | if (browserSupportsCssCustomProperties()) {
40 | it('should apply custom properties', () => {
41 | patch(container, () => render({'--some-var': 'blue'}));
42 | const el = container.childNodes[0];
43 |
44 | expect(el.style.getPropertyValue('--some-var')).to.equal('blue');
45 | });
46 | }
47 |
48 | it('should handle dashes in property names', () => {
49 | patch(container, () => render({'background-color': 'red'}));
50 | const el = container.childNodes[0];
51 |
52 | expect(el.style.backgroundColor).to.equal('red');
53 | });
54 |
55 | it('should update the correct style properties', () => {
56 | patch(container, () => render({color: 'white'}));
57 | patch(container, () => render({color: 'red'}));
58 | const el = container.childNodes[0];
59 |
60 | expect(el.style.color).to.equal('red');
61 | });
62 |
63 | it('should remove properties not present in the new object', () => {
64 | patch(container, () => render({color: 'white'}));
65 | patch(container, () => render({backgroundColor: 'red'}));
66 | const el = container.childNodes[0];
67 |
68 | expect(el.style.color).to.equal('');
69 | expect(el.style.backgroundColor).to.equal('red');
70 | });
71 |
72 | it('should render with the correct style properties for strings', () => {
73 | patch(container, () => render('color: white; background-color: red;'));
74 | const el = container.childNodes[0];
75 |
76 | expect(el.style.color).to.equal('white');
77 | expect(el.style.backgroundColor).to.equal('red');
78 | });
79 | });
80 |
--------------------------------------------------------------------------------
/test/functional/text_nodes_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: mocha from //third_party/javascript/typings/mocha
5 | // taze: chai from //third_party/javascript/typings/chai
6 | import {elementOpenStart, patch, text} from '../../index';
7 | const {expect} = chai;
8 |
9 |
10 | describe('text nodes', () => {
11 | let container: HTMLDivElement;
12 |
13 | beforeEach(() => {
14 | container = document.createElement('div');
15 | document.body.appendChild(container);
16 | });
17 |
18 | afterEach(() => {
19 | document.body.removeChild(container);
20 | });
21 |
22 | describe('when created', () => {
23 | it('should render a text node with the specified value', () => {
24 | patch(container, () => {
25 | text('Hello world!');
26 | });
27 | const node = container.childNodes[0];
28 |
29 | expect(node.textContent).to.equal('Hello world!');
30 | expect(node).to.be.instanceof(Text);
31 | });
32 |
33 | it('should allow for multiple text nodes under one parent element', () => {
34 | patch(container, () => {
35 | text('Hello ');
36 | text('World');
37 | text('!');
38 | });
39 |
40 | expect(container.textContent).to.equal('Hello World!');
41 | });
42 |
43 | it('should throw when inside virtual attributes element', () => {
44 | expect(() => {
45 | patch(container, () => {
46 | elementOpenStart('div');
47 | text('Hello');
48 | });
49 | })
50 | .to.throw(
51 | 'text() can not be called between elementOpenStart()' +
52 | ' and elementOpenEnd().');
53 | });
54 | });
55 |
56 | describe('when updated after the DOM is updated', () => {
57 | // This avoids an Edge bug; see
58 | // https://github.com/google/incremental-dom/pull/398#issuecomment-497339108
59 | it('should do nothng', () => {
60 | patch(container, () => text('Hello'));
61 |
62 | container.firstChild!.nodeValue = 'Hello World!';
63 |
64 | const mo = new MutationObserver(() => {});
65 | mo.observe(container, {subtree: true, characterData: true});
66 |
67 | patch(container, () => text('Hello World!'));
68 | expect(mo.takeRecords()).to.be.empty;
69 | expect(container.textContent).to.equal('Hello World!');
70 | });
71 | });
72 |
73 | describe('with conditional text', () => {
74 | function render(data) {
75 | text(data);
76 | }
77 |
78 | it('should update the DOM when the text is updated', () => {
79 | patch(container, () => render('Hello'));
80 | patch(container, () => render('Hello World!'));
81 | const node = container.childNodes[0];
82 |
83 | expect(node.textContent).to.equal('Hello World!');
84 | });
85 | });
86 | });
87 |
--------------------------------------------------------------------------------
/test/functional/virtual_attributes_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: chai from //third_party/javascript/typings/chai
5 | import {attr, elementClose, elementOpen, elementOpenEnd, elementOpenStart, patch} from '../../index';
6 | const {expect} = chai;
7 |
8 | describe('virtual attribute updates', () => {
9 | let container;
10 |
11 | beforeEach(() => {
12 | container = document.createElement('div');
13 | document.body.appendChild(container);
14 | });
15 |
16 | afterEach(() => {
17 | document.body.removeChild(container);
18 | });
19 |
20 | describe('for conditional attributes', () => {
21 | function render(obj) {
22 | elementOpenStart('div');
23 | if (obj.key) {
24 | attr('data-expanded', obj.key);
25 | }
26 | elementOpenEnd();
27 | elementClose('div');
28 | }
29 |
30 | it('should be present when specified', () => {
31 | patch(container, () => render({key: 'hello'}));
32 | const el = container.childNodes[0];
33 |
34 | expect(el.getAttribute('data-expanded')).to.equal('hello');
35 | });
36 |
37 | it('should be not present when not specified', () => {
38 | patch(container, () => render({key: false}));
39 | const el = container.childNodes[0];
40 |
41 | expect(el.getAttribute('data-expanded')).to.equal(null);
42 | });
43 |
44 | it('should update the DOM when they change', () => {
45 | patch(container, () => render({key: 'foo'}));
46 | patch(container, () => render({key: 'bar'}));
47 | const el = container.childNodes[0];
48 |
49 | expect(el.getAttribute('data-expanded')).to.equal('bar');
50 | });
51 |
52 | it('should correctly apply attributes during nested patches', () => {
53 | const otherContainer = document.createElement('div');
54 |
55 | patch(container, () => {
56 | elementOpenStart('div');
57 | attr('parrentAttrOne', 'pOne');
58 |
59 | patch(otherContainer, () => {
60 | elementOpenStart('div');
61 | attr('childAttrOne', 'cOne');
62 | elementOpenEnd();
63 | elementClose('div');
64 | });
65 |
66 | attr('parrentAttrTwo', 'pTwo');
67 | elementOpenEnd();
68 |
69 | elementClose('div');
70 | });
71 |
72 | const parentAttributes = container.children[0].attributes;
73 | expect(parentAttributes).to.have.length(2);
74 | expect(parentAttributes['parrentAttrOne'].value).to.equal('pOne');
75 | expect(parentAttributes['parrentAttrTwo'].value).to.equal('pTwo');
76 | const childAttributes = otherContainer.children[0].attributes;
77 | expect(childAttributes).to.have.length(1);
78 | expect(childAttributes['childAttrOne'].value).to.equal('cOne');
79 | });
80 | });
81 |
82 | it('should throw when a virtual attributes element is unclosed', () => {
83 | expect(() => {
84 | patch(container, () => {
85 | elementOpenStart('div');
86 | });
87 | })
88 | .to.throw(
89 | 'elementOpenEnd() must be called after calling' +
90 | ' elementOpenStart().');
91 | });
92 |
93 | it(`should throw when virtual attributes element is
94 | closed without being opened`,
95 | () => {
96 | expect(() => {
97 | patch(container, () => {
98 | elementOpenEnd();
99 | });
100 | })
101 | .to.throw(
102 | 'elementOpenEnd() can only be called' +
103 | ' after calling elementOpenStart().');
104 | });
105 |
106 | it('should throw when opening an element inside a virtual attributes element',
107 | () => {
108 | expect(() => {
109 | patch(container, () => {
110 | elementOpenStart('div');
111 | elementOpen('div');
112 | });
113 | })
114 | .to.throw(
115 | 'elementOpen() can not be called between' +
116 | ' elementOpenStart() and elementOpenEnd().');
117 | });
118 |
119 | it('should throw when opening a virtual attributes element' +
120 | ' inside a virtual attributes element',
121 | () => {
122 | expect(() => {
123 | patch(container, () => {
124 | elementOpenStart('div');
125 | elementOpenStart('div');
126 | });
127 | })
128 | .to.throw(
129 | 'elementOpenStart() can not be called between' +
130 | ' elementOpenStart() and elementOpenEnd().');
131 | });
132 |
133 | it('should throw when closing an element inside a virtual attributes element',
134 | () => {
135 | expect(() => {
136 | patch(container, () => {
137 | elementOpenStart('div');
138 | elementClose('div');
139 | });
140 | })
141 | .to.throw(
142 | 'elementClose() can not be called between' +
143 | ' elementOpenStart() and elementOpenEnd().');
144 | });
145 | });
146 |
--------------------------------------------------------------------------------
/test/integration/keyed_items_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | import {elementOpen, elementClose, patch} from '../../index';
5 | import * as Sinon from 'sinon';
6 |
7 | const {expect} = chai;
8 |
9 | /*
10 | * These tests just capture the current state of mutations that occur when
11 | * changing the items. These could change in the future.
12 | */
13 | describe('keyed items', () => {
14 | let container: HTMLElement;
15 | const sandbox = Sinon.sandbox.create();
16 | const mutationObserverConfig = {
17 | childList: true,
18 | subtree: true,
19 | };
20 |
21 | beforeEach(() => {
22 | container = document.createElement('div');
23 | document.body.appendChild(container);
24 | });
25 |
26 | afterEach(() => {
27 | sandbox.restore();
28 | document.body.removeChild(container);
29 | });
30 |
31 | /**
32 | * @param container
33 | */
34 | function createMutationObserver(container: Element): MutationObserver {
35 | const mo = new MutationObserver(() => {});
36 | mo.observe(container, mutationObserverConfig);
37 |
38 | return mo;
39 | }
40 |
41 | /**
42 | * @param keys
43 | */
44 | function render(keys: number[]) {
45 | keys.forEach((key) => {
46 | elementOpen('div', key);
47 | elementClose('div');
48 | });
49 | }
50 |
51 | it('should cause no mutations when the items stay the same', () => {
52 | patch(container, () => render([1, 2, 3]));
53 |
54 | const mo = createMutationObserver(container);
55 | patch(container, () => render([1, 2, 3]));
56 |
57 | const records = mo.takeRecords();
58 | expect(records).to.be.empty;
59 | });
60 |
61 | it('causes only one mutation when adding a new item', () => {
62 | patch(container, () => render([1, 2, 3]));
63 |
64 | const mo = createMutationObserver(container);
65 | patch(container, () => render([0, 1, 2, 3]));
66 |
67 | const records = mo.takeRecords();
68 | expect(records).to.have.length(1);
69 | });
70 |
71 | it('cause a removal and addition when moving forwards', () => {
72 | patch(container, () => render([1, 2, 3]));
73 |
74 | const mo = createMutationObserver(container);
75 | patch(container, () => render([3, 1, 2]));
76 |
77 | const records = mo.takeRecords();
78 | expect(records).to.have.length(2);
79 | expect(records[0].addedNodes).to.have.length(0);
80 | expect(records[0].removedNodes).to.have.length(1);
81 | expect(records[1].addedNodes).to.have.length(1);
82 | expect(records[1].removedNodes).to.have.length(0);
83 | });
84 |
85 | it('causes mutations for each item when removing from the start', () => {
86 | patch(container, () => render([1, 2, 3, 4]));
87 |
88 | const mo = createMutationObserver(container);
89 | patch(container, () => render([2, 3, 4]));
90 |
91 | const records = mo.takeRecords();
92 | // 7 Mutations: two for each of the nodes moving forward and one for the
93 | // removal.
94 | expect(records).to.have.length(7);
95 | });
96 | });
97 |
--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config) {
2 | // Karma tests fail with a Chrome sandbox error on macOS, so disable the
3 | // sandbox.
4 | if (process.platform === 'darwin') {
5 | config.set({
6 | browsers: ['ChromeHeadless_macos_fixed'],
7 | customLaunchers: {
8 | ChromeHeadless_macos_fixed: {
9 | base: 'ChromeHeadless',
10 | flags: [
11 | '--no-sandbox',
12 | ],
13 | },
14 | },
15 | });
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/test/unit/changes_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: chai from //third_party/javascript/typings/chai
5 |
6 | import * as Sinon from 'sinon';
7 |
8 | import {flush, queueChange} from '../../src/changes';
9 |
10 | const {expect} = chai;
11 |
12 | describe('changes', () => {
13 | it('should call the update functions for all changes', () => {
14 | const spyOne = Sinon.spy();
15 | const spyTwo = Sinon.spy();
16 |
17 | queueChange(spyOne, 'a', 'b', 'c', 'd');
18 | queueChange(spyTwo, 'd', 'e', 'f', 'g');
19 | flush();
20 |
21 | expect(spyOne).to.have.been.calledOnce.to.have.been.calledWith(
22 | 'a', 'b', 'c', 'd');
23 | expect(spyTwo).to.have.been.calledOnce.to.have.been.calledWith(
24 | 'd', 'e', 'f', 'g');
25 | });
26 |
27 | it('should clear the changes after flush', () => {
28 | const spy = Sinon.spy();
29 | queueChange(spy, 'a', 'b', 'c', 'd');
30 | flush();
31 | flush();
32 |
33 | expect(spy).to.have.been.calledOnce.to.have.been.calledWith('a', 'b', 'c', 'd');
34 | });
35 |
36 | it('should allow re-entrant usage', () => {
37 | const innerSpy = Sinon.spy();
38 | const outerSpyOne = Sinon.spy(() => {
39 | queueChange(innerSpy, 'd', 'e', 'f', 'g');
40 | queueChange(innerSpy, 'g', 'h', 'i', 'j');
41 | flush();
42 | });
43 | const outerSpyTwo = Sinon.spy();
44 |
45 | queueChange(outerSpyOne, 'a', 'b', 'c', 'd');
46 |
47 | queueChange(outerSpyTwo, 'j', 'k', 'l', 'm');
48 | flush();
49 |
50 | expect(innerSpy)
51 | .to.have.been.calledTwice.to.have.been.calledWith('d', 'e', 'f', 'g')
52 | .to.have.been.calledWith('g', 'h', 'i', 'j');
53 | expect(outerSpyOne)
54 | .to.have.been.calledOnce.to.have.been.calledWith('a', 'b', 'c', 'd');
55 | expect(outerSpyTwo)
56 | .to.have.been.calledOnce.to.have.been.calledWith('j', 'k', 'l', 'm');
57 | });
58 | });
59 |
--------------------------------------------------------------------------------
/test/unit/diff_spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // taze: chai from //third_party/javascript/typings/chai
5 | import * as Sinon from 'sinon';
6 | import {calculateDiff} from '../../src/diff';
7 | import {attributes} from '../../src/attributes';
8 | const {expect} = chai;
9 |
10 | describe('calculateDiff', () => {
11 | const updateCtx = {};
12 | let updateFn: Sinon.SinonSpy;
13 |
14 | beforeEach(() => {
15 | updateFn = Sinon.spy();
16 | });
17 |
18 | it('should call the update function for added items', () => {
19 | const prev: string[] = [];
20 | const next = ['name1', 'value1', 'name2', 'value2'];
21 |
22 | calculateDiff(prev, next, updateCtx, updateFn, attributes);
23 |
24 | expect(updateFn)
25 | .to.have.been.calledTwice.to.have.been
26 | .calledWith(updateCtx, 'name1', 'value1')
27 | .to.have.been.calledWith(updateCtx, 'name2', 'value2');
28 | });
29 |
30 | it('should call the update function for removed items', () => {
31 | const prev = ['name1', 'value1', 'name2', 'value2'];
32 | const next: string[] = [];
33 |
34 | calculateDiff(prev, next, updateCtx, updateFn, attributes);
35 |
36 | expect(updateFn)
37 | .to.have.been.calledTwice.to.have.been
38 | .calledWith(updateCtx, 'name1', undefined)
39 | .to.have.been.calledWith(updateCtx, 'name2', undefined);
40 | });
41 |
42 | it('should not call the update function if there are no changes', () => {
43 | const prev = ['name', 'value'];
44 | const next = ['name', 'value'];
45 |
46 | calculateDiff(prev, next, updateCtx, updateFn, attributes);
47 |
48 | expect(updateFn).to.have.been.not.called;
49 | });
50 |
51 | it('should handle items appearing earlier', () => {
52 | const prev = ['name1', 'value1'];
53 | const next = ['name2', 'value2', 'name1', 'value1'];
54 |
55 | calculateDiff(prev, next, updateCtx, updateFn, attributes);
56 |
57 | expect(updateFn).to.have.been.calledOnce.to.have.been.calledWith(
58 | updateCtx, 'name2', 'value2');
59 | });
60 |
61 | it('should handle changed item ordering', () => {
62 | const prev = ['name1', 'value1', 'name2', 'value2'];
63 | const next = ['name2', 'value2', 'name1', 'value1'];
64 |
65 | calculateDiff(prev, next, updateCtx, updateFn, attributes);
66 |
67 | expect(updateFn).to.have.been.not.called;
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/test/util/dom.ts:
--------------------------------------------------------------------------------
1 | // Copyright 2018 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | const BROWSER_SUPPORTS_SHADOW_DOM = 'ShadowRoot' in window;
5 |
6 |
7 | const attachShadow = (el: HTMLElement) => {
8 | return el.attachShadow ? el.attachShadow({mode: 'closed'}) :
9 | // tslint:disable:no-any
10 | (el as any).createShadowRoot();
11 | };
12 |
13 | function assertElement(el: Node|null): Element {
14 | if (el instanceof Element) {
15 | return el;
16 | }
17 | throw new Error('Expected element to be Element');
18 | }
19 |
20 | function assertHTMLElement(el: Node|null): HTMLElement {
21 | if (el instanceof HTMLElement) {
22 | return el;
23 | }
24 | throw new Error('Expected element to be HTMLElement');
25 | }
26 |
27 |
28 | export {
29 | BROWSER_SUPPORTS_SHADOW_DOM,
30 | assertElement,
31 | assertHTMLElement,
32 | attachShadow
33 | };
34 |
--------------------------------------------------------------------------------
/test/util/globals.js:
--------------------------------------------------------------------------------
1 | // Copyright 2017 The Incremental DOM Authors. All Rights Reserved.
2 | /** @license SPDX-License-Identifier: Apache-2.0 */
3 |
4 | // This is in a separate file as a global to prevent Babel from transpiling
5 | // classes. Transpiled classes do not work with customElements.define.
6 | if (window.customElements) {
7 | window.MyElementDefine = class extends HTMLElement {
8 | constructor() {
9 | super();
10 | }
11 | };
12 |
13 | window.customElements.define('my-element-define', window.MyElementDefine);
14 | }
15 |
16 | if (document.registerElement) {
17 | window.MyElementRegister = document.registerElement('my-element-register', {
18 | prototype: Object.create(HTMLElement.prototype)
19 | });
20 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": ".",
4 | "outDir": "genfiles",
5 | "allowSyntheticDefaultImports": false,
6 | "allowUnreachableCode": false,
7 | "allowUnusedLabels": false,
8 | "declaration": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noFallthroughCasesInSwitch": true,
11 | "noEmitOnError": true,
12 | "noImplicitAny": false,
13 | "noImplicitReturns": true,
14 | "pretty": true,
15 | "strict": true,
16 | "module": "commonjs",
17 | "target": "es5",
18 | "lib": ["es2015", "dom"],
19 | "sourceMap": true
20 | },
21 | "include": [
22 | "index.ts",
23 | "src/*.ts",
24 | "test/*.ts",
25 | "test/**/*.ts"
26 | ],
27 | "exclude": [
28 | "node_modules"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------