fix: reuse code to avoid duplication (code climate)

Neovici · Apr 15, 2020 · 0f6f38d · 0f6f38d
1 parent 174cdd4
commit 0f6f38d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 101 deletions.
diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
@@ -124,7 +124,7 @@ class CosmozDataNav extends translatable(mixinBehaviors([IronResizableBehavior],
 			<template id="incompleteTemplate">
 				<cosmoz-bottom-bar-view active incomplete class="fit">
 					<div slot="scroller-content" class="flex layout horizontal center-justified center">
-						<paper-spinner-lite active=""></paper-spinner-lite>
+						<paper-spinner-lite active></paper-spinner-lite>
 						<div style="margin-left: 10px">
 							<h3><span>[[ _('Data is updating', t) ]]</span></h3>
 						</div>

diff --git a/demo/helpers/cosmoz-demo-view.js b/demo/helpers/cosmoz-demo-view.js
@@ -5,48 +5,31 @@ import '@polymer/iron-flex-layout/iron-flex-layout-classes';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from '@polymer/polymer/lib/utils/html-tag';
 
-class CosmozDemoView extends PolymerElement {
+import {
+	dataNavUserMixin
+} from '../../test/helpers/utils.js';
+
+class CosmozDemoView extends dataNavUserMixin(PolymerElement) {
 	static get template() {
 		return html`
-		<style>
-			.text {
-				font-size: 300px;
-				line-height: 360px;
-				text-align: center;
-			}
-		</style>
-		<div class="flex text">{{ item.id }}</div>
-		<div>
-			<paper-icon-button slot="actions" disabled$="[[ prevDisabled ]]" icon="chevron-left" cosmoz-data-nav-select="-1"></paper-icon-button>
-			<span>[[ index ]]</span>
-			<paper-icon-button slot="actions" disabled$="[[ nextDisabled ]]" icon="chevron-right" cosmoz-data-nav-select="+1"></paper-icon-button>
-			<paper-icon-button icon="refresh" on-tap="onReplace">Replace</paper-icon-button>
-		</div>
-`;
-	}
-
-	static get is() {
-		return 'cosmoz-demo-view';
-	}
-	static get properties() {
-		return {
-			item: {
-				type: Object,
-				notify: true
-			},
-			index: {
-				type: Number
-			},
-			prevDisabled: {
-				type: Boolean
-			},
-			nextDisabled: {
-				type: Boolean
-			}
-		};
+			<style>
+				.text {
+					font-size: 300px;
+					line-height: 360px;
+					text-align: center;
+				}
+			</style>
+			<div class="flex text">[[ item.id ]]</div>
+			<div>
+				<paper-icon-button slot="actions" disabled$="[[ prevDisabled ]]" icon="chevron-left" cosmoz-data-nav-select="-1"></paper-icon-button>
+				<span>[[ index ]]</span>
+				<paper-icon-button slot="actions" disabled$="[[ nextDisabled ]]" icon="chevron-right" cosmoz-data-nav-select="+1"></paper-icon-button>
+				<paper-icon-button icon="refresh" on-tap="onReplace">Replace</paper-icon-button>
+			</div>
+		`;
 	}
 	onReplace() {
 		this.item = { id: '--' };
 	}
 }
-customElements.define(CosmozDemoView.is, CosmozDemoView);
+customElements.define('cosmoz-demo-view', CosmozDemoView);
diff --git a/test/helpers/cosmoz-data-nav-resizable-view.js b/test/helpers/cosmoz-data-nav-resizable-view.js
@@ -1,49 +1,9 @@
-import '@polymer/paper-icon-button/paper-icon-button';
-import '@polymer/iron-flex-layout/iron-flex-layout';
-import '@polymer/iron-flex-layout/iron-flex-layout-classes';
-
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
-
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class';
 import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior';
 
-class CosmozDataNavResizableView extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
-	static get template() {
-		return html`
-			<style>
-				.text {
-					font-size: 300px;
-					line-height: 360px;
-					text-align: center;
-				}
-			</style>
-			<div class="flex text">{{ item.id }}</div>
-			<div>
-				<paper-icon-button slot="actions" disabled$="[[ prevDisabled ]]" icon="chevron-left" cosmoz-data-nav-select="-1"></paper-icon-button>
-				<span>[[ index ]]</span>
-				<paper-icon-button slot="actions" disabled$="[[ nextDisabled ]]" icon="chevron-right" cosmoz-data-nav-select="+1"></paper-icon-button>
-			</div>
-		`;
-	}
+import { CosmozDataNavTestView } from './cosmoz-data-nav-test-view.js';
 
-	static get properties() {
-		return {
-			item: {
-				type: Object,
-				notify: true
-			},
-			index: {
-				type: Number
-			},
-			prevDisabled: {
-				type: Boolean
-			},
-			nextDisabled: {
-				type: Boolean
-			}
-		};
-	}
+class CosmozDataNavResizableView extends mixinBehaviors([IronResizableBehavior], CosmozDataNavTestView) {
 	ready() {
 		this.addEventListener('iron-resize', this._onIronResize);
 		super.ready();

diff --git a/test/helpers/cosmoz-data-nav-test-view.js b/test/helpers/cosmoz-data-nav-test-view.js
@@ -5,7 +5,11 @@ import '@polymer/iron-flex-layout/iron-flex-layout-classes';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from '@polymer/polymer/lib/utils/html-tag';
 
-class CosmozDataNavTestView extends PolymerElement {
+import {
+	dataNavUserMixin
+} from './utils.js';
+
+class CosmozDataNavTestView extends dataNavUserMixin(PolymerElement) {
 	static get template() {
 		return html`
 			<style>
@@ -15,31 +19,17 @@ class CosmozDataNavTestView extends PolymerElement {
 					text-align: center;
 				}
 			</style>
-			<div class="flex text">{{ item.id }}</div>
+			<div class="flex text">[[ item.id ]]</div>
 			<div>
 				<paper-icon-button slot="actions" disabled$="[[ prevDisabled ]]" icon="chevron-left" cosmoz-data-nav-select="-1"></paper-icon-button>
 				<span>[[ index ]]</span>
 				<paper-icon-button slot="actions" disabled$="[[ nextDisabled ]]" icon="chevron-right" cosmoz-data-nav-select="+1"></paper-icon-button>
 			</div>
 		`;
 	}
-
-	static get properties() {
-		return {
-			item: {
-				type: Object,
-				notify: true
-			},
-			index: {
-				type: Number
-			},
-			prevDisabled: {
-				type: Boolean
-			},
-			nextDisabled: {
-				type: Boolean
-			}
-		};
-	}
 }
 customElements.define('cosmoz-data-nav-test-view', CosmozDataNavTestView);
+
+export {
+	CosmozDataNavTestView
+};
diff --git a/test/helpers/utils.js b/test/helpers/utils.js
@@ -1,4 +1,7 @@
 import { html } from '@open-wc/testing';
+import '@polymer/polymer/lib/elements/custom-style.js';
+import '@polymer/iron-flex-layout/iron-flex-layout.js';
+import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 
 export const
 	flushRenderQueue = nav => {
@@ -8,6 +11,25 @@ export const
 	},
 	selectedSlide = nav => nav.querySelector('div.selected .slide'),
 	isVisible = el => Boolean(el.offsetHeight || el.offsetWidth),
+	dataNavUserMixin = baseClass => class extends baseClass {
+		static get properties() {
+			return {
+				item: {
+					type: Object,
+					notify: true
+				},
+				index: {
+					type: Number
+				},
+				prevDisabled: {
+					type: Boolean
+				},
+				nextDisabled: {
+					type: Boolean
+				}
+			};
+		}
+	},
 	customStyle = html`
 		<custom-style>
 			<style include="iron-flex iron-positioning">