From f9c64488d40beb5768ea3500a9c4b7b03ea31541 Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Tue, 22 Sep 2020 21:58:57 +0300
Subject: [PATCH] fix(cosmoz-tab): correct getIcon

---
 lib/render.js                   |  5 +++--
 lib/utils.js                    | 26 +++-----------------------
 test/cosmoz-tabs-basic.test.js  | 10 +++++++++-
 test/cosmoz-tabs-events.test.js |  2 --
 test/utils.test.js              | 16 ----------------
 5 files changed, 15 insertions(+), 44 deletions(-)
 delete mode 100644 test/utils.test.js

diff --git a/lib/render.js b/lib/render.js
index 03d8438..f85e352 100644
--- a/lib/render.js
+++ b/lib/render.js
@@ -95,10 +95,11 @@ const style = `
 		elected,
 		onElect
 	}) => tab => {
-		const icon = getIcon(tab);
+		const isSelected = elected === tab,
+			icon = getIcon(tab, isSelected);
 		return html`<a class="tab" tabindex="-1" role="tab"
 			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
-			?aria-selected=${ elected === tab }
+			?aria-selected=${ isSelected }
 			@click=${ onElect }
 			.tab=${ tab }
 		>
diff --git a/lib/utils.js b/lib/utils.js
index 6730443..180d5a4 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -1,14 +1,13 @@
-const isInvalid = tab => tab.hidden || tab.disabled,
-
-	isValid = tab => !isInvalid(tab),
+const isValid = tab => !tab.hidden && !tab.disabled,
 
 	/**
 	 * Gets the element icon name.
 	 *
 	 * @param {HTMLElement} tab The tab to compute icon for
+	 * @param {boolean} isSelected Is the tab selected
 	 * @returns {string} Name of the element icon.
 	 */
-	getIcon = tab => tab.isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
+	getIcon = (tab, isSelected) => isSelected ? tab.selectedIcon ?? tab.icon : tab.icon,
 
 	/**
 	 * Gets the element icon style property and value if icon color is
@@ -23,23 +22,6 @@ const isInvalid = tab => tab.hidden || tab.disabled,
 			.join(';');
 	},
 
-	encloses = (ancestor, descendant, _limits = []) => {
-		const limits = [..._limits, document.body];
-		let parent = descendant;
-		while (parent && !limits.includes(parent)) {
-			if (parent === ancestor) {
-				return true;
-			}
-			const nextParent = parent.parentNode;
-			if (nextParent == null && parent instanceof ShadowRoot) {
-				parent = parent.host;
-				continue;
-			}
-			parent = nextParent;
-
-		}
-		return false;
-	},
 	elect = (tabs, selected) => {
 		if (selected == null) {
 			return tabs.find(isValid);
@@ -50,9 +32,7 @@ const isInvalid = tab => tab.hidden || tab.disabled,
 
 
 export {
-	encloses,
 	elect,
-	isInvalid,
 	isValid,
 	getIcon,
 	getIconStyle
diff --git a/test/cosmoz-tabs-basic.test.js b/test/cosmoz-tabs-basic.test.js
index a836433..cc6d66a 100644
--- a/test/cosmoz-tabs-basic.test.js
+++ b/test/cosmoz-tabs-basic.test.js
@@ -11,7 +11,7 @@ suite('cosmoz-tabs', () => {
 		tabs = await fixture(html`
 			<cosmoz-tabs>
 				<cosmoz-tab name="tab0" heading="Tab0">1</cosmoz-tab>
-				<cosmoz-tab name="tab1" heading="Tab1" badge="2">2</cosmoz-tab>
+				<cosmoz-tab name="tab1" heading="Tab1" badge="2" icon="radio-button-unchecked" selected-icon="radio-button-checked">2</cosmoz-tab>
 				<cosmoz-tab name="tab2" hidden>3</cosmoz-tab>
 				<cosmoz-tab name="tab3" heading="Tab3" disabled>3</cosmoz-tab>
 			</cosmoz-tabs>
@@ -35,6 +35,14 @@ suite('cosmoz-tabs', () => {
 		assert.lengthOf(tabs.shadowRoot.querySelectorAll('[role=tab]'), tabs.querySelectorAll('cosmoz-tab').length);
 	});
 
+	test('sets icon inside tab', async () => {
+		const icon = tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon');
+		assert.equal(icon.getAttribute('icon'), 'radio-button-unchecked');
+		tabs.selected = 'tab1';
+		await nextFrame();
+		assert.equal(tabs.shadowRoot.querySelectorAll('[role="tab"]')[1].querySelector('iron-icon').getAttribute('icon'), 'radio-button-checked');
+	});
+
 	test('sets heading inside tab', () => {
 		assert.deepEqual(
 			Array.from(tabs.shadowRoot.querySelectorAll('[role=tab]>span')).map(e => e.innerText),
diff --git a/test/cosmoz-tabs-events.test.js b/test/cosmoz-tabs-events.test.js
index b1f5b67..5d1ddfc 100644
--- a/test/cosmoz-tabs-events.test.js
+++ b/test/cosmoz-tabs-events.test.js
@@ -2,8 +2,6 @@ import {
 	assert,
 	html,
 	fixtureSync,
-	fixture,
-	nextFrame,
 	oneEvent
 } from '@open-wc/testing';
 import {
diff --git a/test/utils.test.js b/test/utils.test.js
deleted file mode 100644
index 9e0ac95..0000000
--- a/test/utils.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-	assert, html, fixture
-} from '@open-wc/testing';
-import { component } from 'haunted';
-import { encloses } from '../lib/utils';
-import '../cosmoz-tab';
-
-customElements.define('test-encloses', component(() => html`<div id="enclosed"></div>`));
-
-suite('utils', () => {
-	test('encloses', async () => {
-		const tab = await fixture(html`<cosmoz-tab name="tab0"><test-encloses><test-encloses></cosmoz-tab>`),
-			enclosed = tab.querySelector('test-encloses').shadowRoot.querySelector('#enclosed');
-		assert.isTrue(encloses(tab, enclosed));
-	});
-});