From c159b99430cfe17478e51c2d64d332016006a555 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Feb 2023 16:21:56 +0100
Subject: [PATCH] tests and eye dropper

---
 .../color-picker/color-picker.element.ts      | 18 +++--------
 .../color-picker/color-picker.test.ts         | 18 +++++++++++
 .../eye-dropper/eye-dropper.element.ts        | 30 +++++++++++++++++++
 .../eye-dropper/eye-dropper.test.ts           | 18 +++++++++++
 .../input-document-picker.test.ts             |  2 +-
 .../input-media-picker.test.ts                |  2 +-
 .../property-editor-ui-eye-dropper.element.ts |  3 +-
 7 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts
index a329302f9f..7532076503 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.element.ts
@@ -1,23 +1,13 @@
-import { css, html, nothing } from 'lit';
+import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
-
-import { UmbLitElement } from '@umbraco-cms/element';
 import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
-
-import { ifDefined } from 'lit/directives/if-defined';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-color-picker')
 export class UmbColorPickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			#add-button {
-				width: 100%;
-			}
-		`,
-	];
+	static styles = [UUITextStyles];
 
 	@property({ type: Boolean })
 	showLabels = false;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts
new file mode 100644
index 0000000000..977ceb6a8a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/color-picker/color-picker.test.ts
@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbColorPickerElement } from './color-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+describe('UmbColorPickerElement', () => {
+	let element: UmbColorPickerElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-color-picker></umb-color-picker> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbColorPickerElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts
new file mode 100644
index 0000000000..49ade6527b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.element.ts
@@ -0,0 +1,30 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-eye-dropper')
+export class UmbEyeDropperElement extends FormControlMixin(UmbLitElement) {
+	static styles = [UUITextStyles];
+
+	constructor() {
+		super();
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	render() {
+		return html`<uui-color-picker></uui-color-picker> `;
+	}
+}
+
+export default UmbEyeDropperElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-eye-dropper': UmbEyeDropperElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts
new file mode 100644
index 0000000000..c147262812
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/eye-dropper/eye-dropper.test.ts
@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbEyeDropperElement } from './eye-dropper.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+describe('UmbEyeDropperElement', () => {
+	let element: UmbEyeDropperElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-eye-dropper></umb-eye-dropper> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbEyeDropperElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+	});
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts
index b8841ac2db..d7f33ff52c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.test.ts
@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { UmbInputDocumentPickerElement } from './input-document-picker.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('UmbPropertyEditorUINumberRangeElement', () => {
+describe('UmbInputDocumentPickerElement', () => {
 	let element: UmbInputDocumentPickerElement;
 
 	beforeEach(async () => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts
index c101ab99ae..29b81bd464 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.test.ts
@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { UmbInputMediaPickerElement } from './input-media-picker.element';
 import { defaultA11yConfig } from '@umbraco-cms/test-utils';
-describe('UmbPropertyEditorUINumberRangeElement', () => {
+describe('UmbInputMediaPickerElement', () => {
 	let element: UmbInputMediaPickerElement;
 
 	beforeEach(async () => {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
index 42a01d4448..a11ec4e6c8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UmbLitElement } from '@umbraco-cms/element';
+import '../../../components/eye-dropper/eye-dropper.element';
 
 /**
  * @element umb-property-editor-ui-eye-dropper
@@ -17,7 +18,7 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement {
 	public config = [];
 
 	render() {
-		return html`<div>umb-property-editor-ui-eye-dropper</div>`;
+		return html`<umb-eye-dropper></umb-eye-dropper>`;
 	}
 }