(tests) tests for OmnitableRepeaterMixin

Neovici · Mar 19, 2019 · 5ee7daf · 5ee7daf
1 parent 52baaab
commit 5ee7daf
Show file tree

Hide file tree

Showing 6 changed files with 293 additions and 5 deletions.
diff --git a/cosmoz-omnitable-repeater-mixin.html b/cosmoz-omnitable-repeater-mixin.html
@@ -66,7 +66,7 @@
 		 */
 		stopTrackingColumns() {
 			if (!this._columnsObserver) {
-				throw new Error('The columns were not tracked.');
+				throw new Error('The columns are not tracked.');
 			}
 
 			this._removePropertyEffect('columns', this.PROPERTY_EFFECT_TYPES.OBSERVE, this._columnsObserver);

diff --git a/test/helpers/basic-column-fixture.html → test/helpers/fixtures/basic-column.html b/test/helpers/basic-column-fixture.html → test/helpers/fixtures/basic-column.html
@@ -6,15 +6,15 @@
 
 		static get template() {
 			return Polymer.html`
-					<template class="cell">
+					<template class="cell" strip-whitespace>
 						<span class="basic-column-cell">[[ getString(item, valuePath) ]]</span>
 					</template>
 
-					<template class="edit-cell">
+					<template class="edit-cell" strip-whitespace>
 						<span class="basic-column-cell">Edit: [[ getString(item, valuePath) ]]</span>
 					</template>
 
-					<template class="header">
+					<template class="header" strip-whitespace>
 						<span class="basic-column-header">Header</span>
 					</template>
 			`;

diff --git a/test/helpers/fixtures/basic-row.html b/test/helpers/fixtures/basic-row.html
@@ -0,0 +1,72 @@
+<link rel="import" href="../shadycss/apply-shim.html">
+<link rel="import" href="../polymer/polymer-element.html"/>
+
+<link rel="import" href="cosmoz-omnitable-repeater-mixin.html" />
+
+<script>
+	window.Cosmoz = window.Cosmoz || {};
+
+	/**
+	 * @polymer
+	 * @customElement
+	 * @appliesMixin Cosmoz.OmnitableRepeaterMixin
+	 */
+	class BasicRow extends Cosmoz.OmnitableRepeaterMixin(Polymer.Element) {
+		static get is() {
+			return 'basic-row';
+		}
+
+		static get properties() {
+			return {
+				item: {
+					type: Object
+				}
+			};
+		}
+
+		static get observers() {
+			return [
+				'_itemUpdated(item.*)'
+			];
+		}
+
+		static get template() {
+			return Polymer.html`<slot name="item-cell"></slot>`;
+		}
+
+		get _elementType() {
+			return this.__elementType || 'div';
+		}
+
+		set _elementType(value) {
+			this.__elementType = value;
+		}
+
+		get _slotName() {
+			return this.__slotName || 'item-cell';
+		}
+
+		set _slotName(value) {
+			this.__slotName = value;
+		}
+
+		/**
+		 * @inheritdoc
+		 */
+		_getTemplateInstance(column) {
+			return column.getTemplateInstance(
+				column.editable
+					? Cosmoz.OmnitableTemplatizeMixin.EDIT_TEMPLATE
+					: Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+				{item: this.item}
+			);
+		}
+
+		_itemUpdated(changeRecord) {
+			this.forwardPathChange(changeRecord);
+		}
+	}
+	customElements.define(BasicRow.is, BasicRow);
+
+	Cosmoz.BasicRow = BasicRow;
+</script>
diff --git a/test/index.html b/test/index.html
@@ -19,6 +19,7 @@
 				'fit-dropdowns.html',
 				'group.html',
 				'templatize.html',
+				'repeater.html'
 			],
 			suites = [],
 			i;

diff --git a/test/repeater.html b/test/repeater.html
@@ -0,0 +1,215 @@
+<!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">
+	<link rel="import" href="./helpers/fixtures/basic-row.html">
+</head>
+<body>
+	<test-fixture id="basic">
+		<template strip-whitespace>
+			<basic-row></basic-row>
+			<div>
+				<basic-column value-path="id"></basic-column>
+				<basic-column>
+					<template class="cell" strip-whitespace>[[ item.complexData.someKey ]]</template>
+				</basic-column>
+			</div>
+			<div>
+				<basic-column>
+					<template class="cell" strip-whitespace>Id: [[ item.id ]]</template>
+				</basic-column>
+			</div>
+		</template>
+	</test-fixture>
+
+	<script>
+	(function () {
+		'use strict';
+
+		describe('OmnitableRepeaterMixin', () => {
+			context('columns configuration is missing', () => {
+				it('does not render anything', () => {
+					const [row] = fixture('basic');
+					row.columns = [];
+					row.renderCells();
+					expect(row.children).to.have.lengthOf(0);
+				});
+			});
+
+			context('columns configuration is present', () => {
+				let row,
+					columns,
+					otherColumns;
+
+				beforeEach(() => {
+					[row, {children: columns}, {children: otherColumns}] = fixture('basic');
+
+					columns = Array.from(columns);
+					otherColumns = Array.from(otherColumns);
+
+					row.item = { id: 1, complexData: {someKey: 'aaa'} };
+					row.columns = columns;
+				});
+
+				describe('renderCells', () => {
+					it('renders cells', () => {
+						row.renderCells();
+
+						expect(row.children).to.have.lengthOf(2);
+						expect(row.textContent).to.equal('1aaa');
+					});
+
+					it('configures cells according to the row configuration', () => {
+						row._elementType = 'span';
+						row._slotName = 'some-slot';
+						row.renderCells();
+
+						expect(row.children).to.have.lengthOf(2);
+						Array.from(row.children).forEach(cell => {
+							expect(cell.nodeName).to.equal('SPAN');
+							expect(cell.slot).to.equal('some-slot');
+						});
+					});
+				});
+
+				describe('destroyCells', () => {
+					it('destroys rendered cells', () => {
+						row.renderCells();
+						row.destroyCells();
+
+						expect(row.children).to.have.lengthOf(0);
+					});
+				});
+
+				describe('forEachElement', () => {
+					it('runs code on each rendered element', () => {
+						row.renderCells();
+						row.forEachElement(element => {
+							element.classList.add('ok');
+						});
+
+						Array.from(row.children).forEach(cell => {
+							expect(cell.classList.toString()).to.equal('ok');
+						});
+					});
+				});
+
+				describe('forwardChange', () => {
+					it('forwards simple changes to rendered elements', () => {
+						row.renderCells();
+
+						row.item = {id: 2, complexData: {someKey: 'bbb'}};
+						expect(row.textContent).to.equal('2bbb');
+					});
+				});
+
+				describe('forwardPathChange', () => {
+					it('forwards complex changes to rendered elements', () => {
+						row.renderCells();
+
+						row.set('item.complexData.someKey', 'abc');
+						expect(row.textContent).to.equal('1abc');
+					});
+				});
+
+				describe('trackColumns', () => {
+					it('tracks configuration changes', () => {
+						row.trackColumns();
+
+						row.columns = otherColumns;
+						expect(row.textContent).to.equal('Id: 1');
+
+						row.set('columns', columns);
+						expect(row.textContent).to.equal('1aaa');
+
+						row.push('columns', columns[0]);
+						expect(row.textContent).to.equal('1aaa1');
+					});
+
+					it('tracks column\'s editable state', () => {
+						row.trackColumns();
+
+						row.set('columns.0.editable', true);
+						expect(row.textContent).to.equal('Edit: 1aaa');
+
+						row.set('columns.0.editable', false);
+						expect(row.textContent).to.equal('1aaa');
+					});
+
+					it('ensures that configuration tracking is used correctly', () => {
+						row.trackColumns();
+						expect(() => row.trackColumns()).to.throw('The columns are already tracked.');
+					});
+				});
+
+				describe('stopTrackingColumns', () => {
+					it('can stop tracking configuration changes', () => {
+						row.trackColumns();
+
+						row.set('columns', otherColumns);
+						expect(row.textContent).to.equal('Id: 1');
+
+						row.stopTrackingColumns();
+
+						row.set('columns', columns);
+						expect(row.textContent).to.equal('Id: 1');
+					});
+
+					it('ensures that configuration tracking is used correctly', () => {
+						expect(() => row.stopTrackingColumns()).to.throw('The columns are not tracked.');
+
+						row.trackColumns();
+
+						row.stopTrackingColumns();
+						expect(() => row.stopTrackingColumns()).to.throw('The columns are not tracked.');
+					});
+				});
+
+				describe('groupOnColumn', () => {
+					it('hides cells that belong to the column that the data is grouped on', () => {
+						row.renderCells();
+
+						row.groupOnColumn = columns[0];
+						expect(row.children[0].hidden).to.be.true;
+						expect(row.children[1].hidden).to.be.false;
+					});
+
+					it('handles group on column changes', () => {
+						row.renderCells();
+						row.groupOnColumn = columns[0];
+
+						row.groupOnColumn = columns[1];
+						expect(row.children[0].hidden).to.be.false;
+						expect(row.children[1].hidden).to.be.true;
+
+						row.groupOnColumn = null;
+						expect(row.children[0].hidden).to.be.false;
+						expect(row.children[1].hidden).to.be.false;
+					});
+					it('ignores grouping on columns other than those configured', () => {
+						row.renderCells();
+
+						row.groupOnColumn = otherColumns[0];
+						expect(row.children[0].hidden).to.be.false;
+						expect(row.children[1].hidden).to.be.false;
+					});
+
+				});
+			});
+		});
+	})();
+	</script>
+</html>
diff --git a/test/templatize.html b/test/templatize.html
@@ -14,7 +14,7 @@
 	<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/basic-column-fixture.html">
+	<link rel="import" href="./helpers/fixtures/basic-column.html">
 </head>
 <body>
 	<test-fixture id="basic">