tests and eye dropper

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;

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);
+	});
+});

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;
+	}
+}

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);
+	});
+});

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 () => {

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 () => {

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>`;
 	}
 }