diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
index 3b52746..7fa3ec1 100644
--- a/cosmoz-data-nav.js
+++ b/cosmoz-data-nav.js
@@ -240,6 +240,7 @@
 
 		constructor() {
 			super();
+			this._previouslySelectedItem = null;
 			this._cache = {};
 			this._preloadIdx = 0;
 			this._boundOnTemplatesChange = this._onTemplatesChange.bind(this);
@@ -268,6 +269,7 @@
 				this._selectDebouncer.cancel();
 			}
 
+			this._previouslySelectedItem = null;
 			this._cache = {};
 			this._indexRenderQueue = [];
 			window.removeEventListener('cosmoz-cache-purge', this._onCachePurgeHandler);
@@ -445,10 +447,11 @@
 		_itemsChanged(items) {
 			const length = items && items.length;
 
-			//Update readOnly queueLength
+			// update read-only properties
 			this._setQueueLength(length >> 0);
 			this._setHasItems(!!length);
 
+			// replace incomplete items with cached item data
 			if (length) {
 				items.forEach((item, index) => {
 					if (this.isIncompleteFn(item) && this._cache[item]) {
@@ -457,22 +460,31 @@
 				});
 			}
 
+			// synchronize `selected` with hash params
 			if (this._updateSelectedFromHash()) {
 				return;
 			}
 
+			// reset queue to 0 or maintain selection
 			let index = 0;
-			if (this.maintainSelection && this.selected > 0) {
-				const selectedId = this._getItemId(this.selectedItem);
-				index = Math.max(0, items.findIndex(item => this._getItemId(item) === selectedId));
-			}
+			if (this.maintainSelection && this._previouslySelectedItem != null) {
+				// search for previously selected item by reference
+				index = items.indexOf(this._previouslySelectedItem);
+
+				// if not found, search by id
+				if (index === -1) {
+					const prevId = this._getItemId(this._previouslySelectedItem);
+					index = items.findIndex(item => this._getItemId(item) === prevId);
+				}
 
-			if (this.selected === index) {
-				return this._updateSelected();
+				// if still not found, remain on the selected index, but force re-render
+				if (index === -1) {
+					return this._updateSelected();
+				}
 			}
 
-			this.selected = index;
-
+			// update selected or force re-render if selected did not change
+			return this.selected === index ? this._updateSelected() : this.selected = index;
 		}
 
 		/**
@@ -487,6 +499,7 @@
 			const position = selected < this.items.length ? selected : selected - 1;
 			this._setSelectedNext((position || 0) + 1);
 			this._preload(position);
+			this._previouslySelectedItem = this.items[position];
 
 			const element = this._getElement(position);
 
@@ -841,8 +854,8 @@
 			if (Polymer.flush) {
 				Polymer.flush();
 			}
-			const instance = new this._elementCtor({});
-			Object.assign(instance, { [this.as]: item }, this._getBaseProps(idx));
+			const props = Object.assign({ [this.as]: item }, this._getBaseProps(idx));
+			const instance = new this._elementCtor(props);
 
 			element.__instance = instance;
 			element.item = item;
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
index 328c2ce..0c6b7b9 100644
--- a/test/.eslintrc.json
+++ b/test/.eslintrc.json
@@ -13,5 +13,8 @@
 		"MockInteractions": false,
 		"sinon": true,
 		"WCT": false
+	},
+	"rules": {
+		"no-unused-expressions": "off"
 	}
 }
diff --git a/test/basic.html b/test/basic.html
index 0984573..aa7ae92 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -339,10 +339,12 @@
 					assert.isTrue(nav.animating);
 					assert.equal(nav.selected, 1);
 					// wait for animation to end and check animating is false
-					nav.addEventListener('transitionend', () => {
+					const once = () => {
+						nav.removeEventListener('transitionend', once);
 						assert.isFalse(nav.animating);
 						done();
-					});
+					};
+					nav.addEventListener('transitionend', once);
 				});
 			});
 
diff --git a/test/helpers/utils.js b/test/helpers/utils.js
new file mode 100644
index 0000000..99a62db
--- /dev/null
+++ b/test/helpers/utils.js
@@ -0,0 +1,11 @@
+(() => {
+	const flushRenderQueue = nav => {
+		while (nav._indexRenderQueue.length) {
+			nav._renderQueue();
+		}
+	};
+
+	Object.assign(window, {
+		flushRenderQueue
+	});
+})();
diff --git a/test/index.html b/test/index.html
index 89aaea2..a5f016e 100644
--- a/test/index.html
+++ b/test/index.html
@@ -9,7 +9,8 @@
 	<script>
 		WCT.loadSuites([
 			'basic.html',
-			'resizable.html'
+			'resizable.html',
+			'spec.html'
 		]);
 	</script>
 </body></html>
diff --git a/test/spec.html b/test/spec.html
new file mode 100644
index 0000000..8de7fc6
--- /dev/null
+++ b/test/spec.html
@@ -0,0 +1,338 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>cosmoz-data-nav-basic</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+	<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-data-nav.html">
+	<link rel="import" href="./helpers/cosmoz-data-nav-test-view.html">
+
+	<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+	<link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">
+
+	<custom-style>
+		<style include="iron-flex iron-positioning">
+			cosmoz-data-nav {
+				display: block;
+				width: 455px;
+				height: 400px;
+				position: relative;
+			}
+		</style>
+	</custom-style>
+</head>
+
+<body>
+	<test-fixture id="basic">
+		<template>
+			<cosmoz-data-nav>
+				<template strip-whitespace>
+					<span>id: [[ item.id ]],</span>
+					<span>index: [[ index ]]</span>
+					<span>[[ item.data ]]</span>
+					<input type="button" value="Next" cosmoz-data-nav-select="+1">
+					<input type="button" value="Prev" cosmoz-data-nav-select="-1">
+				</template>
+			</cosmoz-data-nav>
+		</template>
+	</test-fixture>
+
+	<script>
+		const {flushRenderQueue} = window;
+		describe('cosmoz-data-nav', () => {
+			describe('constructor', () => {
+				it('renders', () => {
+					fixture('basic');
+					expect(document.body.querySelector('cosmoz-data-nav')).to.exist;
+				});
+			});
+
+			describe('template', () => {
+				it('renders items using a template', () => {
+					const nav = fixture('basic');
+					nav._templatesObserver.flush();
+
+					nav.items = [{id: 1}, {id: 2}, {id: 3}];
+					flushRenderQueue(nav);
+
+					expect(nav.querySelector('div.selected').textContent).to.equal('id: 1,index: 0');
+				});
+
+				it('renders the wrong item if the templates observer runs after `items` is set [KNOWN BUG]', () => {
+					expect(() => {
+						const nav = fixture('basic');
+						nav.items = [{id: 1}, {id: 2}, {id: 3}];
+
+						nav._templatesObserver.flush();
+						flushRenderQueue(nav);
+
+						expect(nav.querySelector('div.selected').textContent).to.equal('id: 1,index: 0');
+					}).throws('expected \'id: 3,index: 2\' to equal \'id: 1,index: 0\'');
+				});
+
+				it('re-renders when the template changes');
+			});
+
+			context('properties', () => {
+				let nav;
+				beforeEach(() => {
+					nav = fixture('basic');
+					nav._templatesObserver.flush();
+					nav.items = [{id: 1}, {id: 2}, {id: 3}];
+					flushRenderQueue(nav);
+				});
+
+				describe('animating', () => {
+					it('is true if the element is currently animating');
+					it('controls whether the element should animate');
+				});
+
+				describe('as', () => {
+					it('defines the name used in the template for the item');
+				});
+
+				describe('elementsBuffer', () => {
+					it('defines the number of elements that are actually rendered');
+				});
+
+				describe('hashParam', () => {
+					it('defines the hash parameter to use for selecting an item');
+				});
+
+				describe('hasItems', () => {
+					it('is true if the data-nav has items', () => {
+						const nav = fixture('basic');
+
+						expect(nav.hasItems).to.be.false;
+
+						nav.items = [{id: 1}, {id: 2}, {id: 3}];
+
+						expect(nav.hasItems).to.be.true;
+					});
+				});
+
+				describe('hiddenRendering', () => {
+					it('controls whether the element should render items even if it is not visible');
+				});
+
+				describe('idPath', () => {
+					it('defines the path on the item to be used as id');
+				});
+
+				describe('indexAs', () => {
+					it('defines the name used in the template for the index of the item');
+				});
+
+				describe('isIncompleteFn', () => {
+					it('defines the function used to determine if an element is incomplete and nees to be preloaded');
+				});
+
+				describe('items', () => {
+					it('defines the items to render', () => {
+						nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
+						flushRenderQueue(nav);
+
+						expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0');
+					});
+
+					it('does not update the view when an item changes', () => {
+						const item = {id: 'a', data: 'somedata'};
+						nav.items = [item];
+						flushRenderQueue(nav);
+						expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0somedata');
+
+						// attempt #1: updating a reference directly does not update the view
+						// this is expected as the data-nav has no way of knowing that data was updated
+						item.data = 'newdata';
+						expect(nav.items[0]).to.have.property('data', 'newdata');
+
+						expect(() => {
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0newdata');
+						}).throws('expected \'id: a,index: 0somedata\' to equal \'id: a,index: 0newdata\'');
+
+
+						// attempt #2: modify item data using polymer manipulation features
+						// this could work, but is not implemented
+						// an observer for items.* should forward the path update down to the rendered template instances
+						nav.set('items.0.data', 'otherdata');
+						expect(nav.items[0]).to.have.property('data', 'otherdata');
+
+						expect(() => {
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0otherdata');
+						}).throws('expected \'id: a,index: 0somedata\' to equal \'id: a,index: 0otherdata\'');
+
+						// attempt #3: try to force render
+						// this does not work, because data-nav checks if it should re-render
+						// the template using a reference check. Because the already rendered
+						// item is the same by reference, the view is not updated.
+						item.data = 'freshdata';
+						expect(nav.items[0]).to.have.property('data', 'freshdata');
+
+						nav._updateSelected();
+						flushRenderQueue(nav);
+
+						expect(() => {
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0freshdata');
+						}).throws('expected \'id: a,index: 0somedata\' to equal \'id: a,index: 0freshdata\'');
+					});
+				});
+
+				describe('maintainSelection', () => {
+					context('when it is false', () => {
+						it('changes to `items` reset `selected` to 0', () => {
+							nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
+							nav.selected = 1;
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1');
+
+							nav.items = [{id: 'c'}, {id: 'd'}, {id: 'e'}];
+							expect(nav.selected).to.equal(0);
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: c,index: 0');
+						});
+					});
+
+					context('when it is true', () => {
+						beforeEach(() => {
+							nav.maintainSelection = true;
+						});
+
+						it('on `items` change, updates `selected` to match the last selected item, by reference', () => {
+							const item = {id: 'b', data: 'somedata'};
+							nav.items = [{id: 'a'}, item, {id: 'c'}];
+							nav.selected = 1;
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1somedata');
+
+							item.data = 'otherdata';
+							nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}, item];
+							expect(nav.selected).to.equal(3);
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 3otherdata');
+						});
+
+						it('on `items` change, updates `selected` to match the last selected item, by id', () => {
+							nav.items = [{id: 'a'}, {id: 'b', data: 'somedata'}, {id: 'c'}];
+							nav.selected = 1;
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1somedata');
+
+							nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}, {id: 'b', data: 'otherdata'}];
+							expect(nav.selected).to.equal(3);
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 3otherdata');
+						});
+
+						it('on `items` change, maintains `selected` to it\'s current value, if the last selected item is no longer present, by reference or by id', () => {
+							nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
+							nav.selected = 1;
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1');
+
+							nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}];
+							expect(nav.selected).to.equal(1);
+							flushRenderQueue(nav);
+							expect(nav.querySelector('div.selected').textContent).to.equal('id: d,index: 1');
+						});
+
+						context('when idPath is set', () => {
+							it('works as expected', () => {
+								nav.idPath = 'deep.id';
+								nav.items = [{deep: {id: 'a'}}, {deep: {id: 'b'}, data: 'somedata'}, {deep: {id: 'c'}}];
+								nav.selected = 1;
+								flushRenderQueue(nav);
+								expect(nav.querySelector('div.selected').textContent).to.equal('id: ,index: 1somedata');
+
+								nav.items = [{deep: {id: 'a'}}, {deep: {id: 'd'}}, {deep: {id: 'e'}}, {deep: {id: 'b'}, data: 'otherdata'}];
+								expect(nav.selected).to.equal(3);
+								flushRenderQueue(nav);
+								expect(nav.querySelector('div.selected').textContent).to.equal('id: ,index: 3otherdata');
+							});
+						});
+					});
+				});
+
+				describe('preload', () => {
+					it('defines the number of items after the currently selected one to preload');
+				});
+
+				describe('queueLength', () => {
+					it('exposes the length of the items array');
+				});
+
+				describe('reverse', () => {
+					it('is true if the index of the currently selected item is smaller than the previous one');
+				});
+
+				describe('selectAttribute', () => {
+					it('defines the name of the attribute that is used to control the direction of the navigation');
+				});
+
+				describe('selected', () => {
+					it('exposes the currently selected index', () => {
+						expect(nav.selected).to.equal(0);
+					});
+
+					it('controls the currently selected index', () => {
+						nav.selected = 1;
+
+						expect(nav.selected).to.equal(1);
+						expect(nav.querySelector('div.selected').textContent).to.equal('id: 2,index: 1');
+					});
+				});
+
+				describe('selectedElement', () => {
+					it('exposes the DOM element of the selected item', () => {
+						expect(nav.selectedElement).to.exist;
+						expect(nav.selectedElement).to.be.instanceOf(HTMLElement);
+						expect(nav.selectedElement).to.have.property('item', nav.items[0]);
+					});
+				});
+
+				describe('selectedInstance', () => {
+					it('exposes the instance of the selected item');
+					it('does not work properly [KNOWN BUG]', () => {
+						expect(() => {
+							expect(nav.selectedInstance).to.exist;
+						}).throws('expected undefined to exist');
+					});
+				});
+
+				describe('selectedItem', () => {
+					it('exposes the selected item');
+				});
+
+				describe('selectedNext', () => {
+					it('exposes the index of the selected item');
+				});
+			});
+
+			context('methods', () => {
+				describe('select', () => {
+					it('selects an items by index');
+				});
+
+				describe('selectById', () => {
+					it('selects item by id');
+				});
+
+				describe('setItemById', () => {
+					it('replaces an id in `items` with the full item');
+				});
+			});
+		});
+
+	</script>
+</body>
+
+</html>