Merge branch 'main' of https://github.com/umbraco/Umbraco.CMS.Backoffice

src/Umbraco.Web.UI.Client/src/app.ts

@@ -1,4 +1,4 @@
-import '@umbraco-ui/uui';
+import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import '@umbraco-ui/uui-css/dist/uui-css.css';
 
 // TODO: lazy load these
@@ -55,6 +55,8 @@ export class UmbApp extends UmbContextProviderMixin(LitElement) {
     }
   `;
 
+  private _iconRegistry: UUIIconRegistryEssential = new UUIIconRegistryEssential();
+
   private _isInstalled = false;
 
   private _view?: HTMLElement;
@@ -64,10 +66,8 @@ export class UmbApp extends UmbContextProviderMixin(LitElement) {
   constructor() {
     super();
     this.addEventListener(umbRouterBeforeEnterEventType, this._onBeforeEnter);
-  }
+    this._iconRegistry.attach(this);
 
-  connectedCallback(): void {
-    super.connectedCallback();
     const { extensionRegistry } = window.Umbraco;
 
     this.provideContext('umbExtensionRegistry', window.Umbraco.extensionRegistry);

src/Umbraco.Web.UI.Client/src/core/context/context-consumer.test.ts

@@ -19,16 +19,17 @@ describe('UmbContextConsumer', () => {
 
   describe('Public API', () => {
     describe('methods', () => {
-      it('has a dispatchRequest method', () => {
-        expect(consumer).to.have.property('dispatchRequest').that.is.a('function');
+      it('has a request method', () => {
+        expect(consumer).to.have.property('request').that.is.a('function');
       });
     });
 
     describe('events', () => {
-      it('dispatches request context event when constructed', async () => {
+      it('dispatches context request event when constructed', async () => {
         const listener = oneEvent(window, umbContextRequestEventType);
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        new UmbContextConsumer(document.body, testContextKey, () => {});
+
+        consumer.attach();
+
         const event = await listener as unknown as UmbContextRequestEventImplementation;
         expect(event).to.exist;
         expect(event.type).to.eq(umbContextRequestEventType);
@@ -39,14 +40,16 @@ describe('UmbContextConsumer', () => {
 
   it('works with UmbContextProvider', (done: any) => {
     const provider = new UmbContextProvider(document.body, testContextKey, new MyClass());
+    provider.attach();
 
     const element = document.createElement('div');
     document.body.appendChild(element);
 
-    new UmbContextConsumer(element, testContextKey, (_instance) => {
+    const localConsumer = new UmbContextConsumer(element, testContextKey, (_instance) => {
       expect(_instance.prop).to.eq('value from provider');
       done();
-    });
+    })
+    localConsumer.attach();
 
     provider.detach();
   });

src/Umbraco.Web.UI.Client/src/core/context/context-consumer.ts

@@ -9,13 +9,13 @@ export class UmbContextConsumer {
 
   /**
    * Creates an instance of UmbContextConsumer.
-   * @param {HTMLElement} element
+   * @param {EventTarget} target
    * @param {string} _contextKey
    * @param {UmbContextCallback} _callback
    * @memberof UmbContextConsumer
    */
   constructor (
-    protected element: HTMLElement,
+    protected target: EventTarget,
     private _contextKey: string,
     private _callback: UmbContextCallback
   ) {
@@ -27,7 +27,7 @@ export class UmbContextConsumer {
    */
    public request() {
     const event = new UmbContextRequestEventImplementation(this._contextKey, this._callback);
-    this.element.dispatchEvent(event);
+    this.target.dispatchEvent(event);
   }
 
   public attach() {

src/Umbraco.Web.UI.Client/src/core/context/context-provide.event.test.ts

@@ -17,7 +17,7 @@ describe('UmbContextProvideEvent', () => {
     expect(event.composed).to.be.true;
   });
 
-  it('is cancelable', () => {
-    expect(event.composed).to.be.false;
+  it('is not cancelable', () => {
+    expect(event.cancelable).to.be.false;
   });
 });

src/Umbraco.Web.UI.Client/src/core/context/context-provider.test.ts

@@ -12,6 +12,7 @@ describe('UmbContextProvider', () => {
 
   beforeEach(() => {
     provider = new UmbContextProvider(document.body, 'my-test-context', new MyClass());
+    provider.attach();
   });
 
   afterEach(async () => {
@@ -38,7 +39,7 @@ describe('UmbContextProvider', () => {
   });
 
   it('handles context request events', (done) => {
-    const event = new UmbContextRequestEventImplementation('my-test-context', (_instance) => {
+    const event = new UmbContextRequestEventImplementation('my-test-context', (_instance: MyClass) => {
       expect(_instance.prop).to.eq('value from provider');
       done();
     });
@@ -50,9 +51,11 @@ describe('UmbContextProvider', () => {
     const element = document.createElement('div');
     document.body.appendChild(element);
 
-    new UmbContextConsumer(element, 'my-test-context', (_instance) => {
+    const localConsumer = new UmbContextConsumer(element, 'my-test-context', (_instance: MyClass) => {
       expect(_instance.prop).to.eq('value from provider');
       done();
+      localConsumer.detach();
     });
+    localConsumer.attach();
   });
 });

src/Umbraco.Web.UI.Client/src/core/context/context-provider.ts

@@ -6,18 +6,18 @@ import { UmbContextProvideEventImplementation } from './context-provide.event';
  * @class UmbContextProvider
  */
 export class UmbContextProvider {
-  protected host: HTMLElement;
+  protected host: EventTarget;
   private _contextKey: string;
-  private _instance: any;
+  private _instance: unknown;
 
   /**
    * Creates an instance of UmbContextProvider.
-   * @param {HTMLElement} host
+   * @param {EventTarget} host
    * @param {string} contextKey
    * @param {*} instance
    * @memberof UmbContextProvider
    */
-  constructor (host: HTMLElement, contextKey: string, instance: unknown) {
+  constructor (host: EventTarget, contextKey: string, instance: unknown) {
     this.host = host;
     this._contextKey = contextKey;
     this._instance = instance;
@@ -36,7 +36,7 @@ export class UmbContextProvider {
    */
   public detach () {
     this.host.removeEventListener(umbContextRequestEventType, this._handleContextRequest);
-    // TODO: fire unprovide event.
+    // TODO: fire unprovided event.
   }
 
   /**

src/Umbraco.Web.UI.Client/src/core/context/context-request.event.test.ts

@@ -25,6 +25,6 @@ describe('UmbContextRequestEvent', () => {
   });
 
   it('is cancelable', () => {
-    expect(event.composed).to.be.true;
+    expect(event.cancelable).to.be.true;
   });
 });