(dev) templatize mixin: improve semantics and define specs

Neovici · Mar 19, 2019 · 2274fc5 · 2274fc5
1 parent 5ee7daf
commit 2274fc5
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 15 deletions.
diff --git a/cosmoz-omnitable-repeater-mixin.html b/cosmoz-omnitable-repeater-mixin.html
@@ -240,7 +240,7 @@
 			this._elements
 				.splice(start, removedColumns.length)
 				.forEach(element => {
-					element.__column.detachTemplateInstance(element.__instance);
+					element.__column.recycleInstance(element.__instance);
 					element.__instance = element.__column = element.column = null;
 					this.removeChild(element);
 				});

diff --git a/cosmoz-omnitable-templatize-mixin.html b/cosmoz-omnitable-templatize-mixin.html
@@ -3,7 +3,7 @@
 	'use strict';
 
 	/**
-	 * Prepares instances of templates
+	 * Prepares instances of templates and re-uses recycled instances.
 	 * @polymer
 	 * @mixinFunction
 	 */
@@ -13,7 +13,7 @@
 
 			this._templateCtors = {};
 			this._templateInstances = [];
-			this._reusableTemplateInstances = [];
+			this._recycledInstance = [];
 		}
 
 		/**
@@ -27,14 +27,14 @@
 		 * @return {TemplateInstance} the template instance
 		 */
 		getTemplateInstance(type, props) {
-			// first search in reusable instances pool
-			let instance = this._reusableTemplateInstances.find(i => i._type === type);
+			// first search in the recycled instances pool
+			let instance = this._recycledInstance.find(i => i._type === type);
 
 			if (instance) {
-				// reuse available instance
+				// reuse recycled instance
 				instance = this._reuseInstance(instance, props);
 			} else {
-				// if no reusable instance is available, create a new one
+				// if no recycled instance is available, create a new one
 				instance = this._createInstance(type, props);
 			}
 
@@ -44,31 +44,40 @@
 		}
 
 		/**
-		 * Detaches an instance.
+		 * Marks an instance for re-use.
 		 *
 		 * @param  {TemplateInstance} instance an instance
 		 * @return {TemplateInstance}          the detached instance
 		 */
-		detachTemplateInstance(instance) {
+		recycleInstance(instance) {
 			const index = this._templateInstances.indexOf(instance);
 			if (index < 0) {
 				return instance;
 			}
 
 			// remove from active instances pool
 			this._templateInstances.splice(index, 1);
-			this._reusableTemplateInstances.push(instance);
+			this._recycledInstance.push(instance);
 			return instance;
 		}
 
 		/**
-		 * Cleans up references to reusable instances when the element is detached.
+		 * Tests whether the instance is marked for re-use.
+		 * @param  {TemplateInstance}  instance an instance
+		 * @return {Boolean}                    true if instance is recycled
+		 */
+		isRecycledInstance(instance) {
+			return this._recycledInstance.includes(instance);
+		}
+
+		/**
+		 * Cleans up references to recycled instances when the element is detached.
 		 *
 		 * @return {void}
 		 */
 		disconnectedCallback() {
 			super.disconnectedCallback();
-			this._reusableTemplateInstances = [];
+			this._recycledInstance = [];
 		}
 
 		/**
@@ -79,8 +88,8 @@
 		 * @return {TemplateInstance}          the instance
 		 */
 		_reuseInstance(instance, props) {
-			// remove from reusable pool
-			this._reusableTemplateInstances.splice(this._reusableTemplateInstances.indexOf(instance), 1);
+			// remove from recycled pool
+			this._recycledInstance.splice(this._recycledInstance.indexOf(instance), 1);
 
 			// update props
 			this._forwardProperties(instance, props);

diff --git a/test/index.html b/test/index.html
@@ -19,7 +19,8 @@
 				'fit-dropdowns.html',
 				'group.html',
 				'templatize.html',
-				'repeater.html'
+				'repeater.html',
+				'templatize-mixin.html',
 			],
 			suites = [],
 			i;

diff --git a/test/templatize-mixin.html b/test/templatize-mixin.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+	<title>cosmoz-omnitable repeater mixin test</title>
+
+	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+	<script src="../../web-component-tester/browser.js"></script>
+	<script src="../../test-fixture/test-fixture-mocha.js"></script>
+	<script src="./helpers/utils.js"></script>
+
+	<link rel="import" href="../../test-fixture/test-fixture.html">
+	<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
+	<link rel="import" href="../cosmoz-omnitable.html">
+	<link rel="import" href="../cosmoz-omnitable-templatize-mixin.html">
+	<link rel="import" href="./helpers/fixtures/basic-column.html">
+</head>
+<body>
+	<test-fixture id="basic">
+		<template strip-whitespace>
+			<basic-column value-path="id"></basic-column>
+			<basic-column>
+				<template class="cell" strip-whitespace>
+					<span>ID: [[ item.id ]]</span>
+				</template>
+			</basic-column>
+		</template>
+	</test-fixture>
+
+	<script>
+	(function () {
+		'use strict';
+
+		describe('OmnitableTemplatizeMixin', () => {
+			describe('getTemplateInstance', () => {
+				it('creates new template instances by type');
+				it('initializes the instance with props');
+				it('supports overriding templates by type');
+				it('sets up instances so that host property changes are forwarded');
+				it('re-uses recycled instances');
+				it('properly updates the re-used instance props');
+			});
+
+			describe('recycleInstance', () => {
+				it('marks an instance for re-use');
+			});
+
+			describe('isRecycledInstance', () => {
+				it('tests whether the instance is marked for re-use');
+			});
+
+			describe('disconnectedCallback', () => {
+				it('cleans up references to recycled instances');
+			});
+		});
+	})();
+	</script>
+</html>