Custom element doesn't exist should be fix (#274)

marcokreeft87 · Oct 14, 2023 · 1194504 · 1194504
1 parent 9d6ca65
commit 1194504
Show file tree

Hide file tree

Showing 9 changed files with 1,437 additions and 14,333 deletions.
diff --git a/info.md b/info.md
@@ -1,6 +1,10 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10730  %}
+- Fixed `Custom element doesn't exist`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 10725  %}
 - Fixed `broken card creation`
 {% endif %}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "room-card",
-  "version": "1.07.25",
+  "version": "1.07.30",
   "description": "Show entities in Home Assistant's Lovelace UI",
   "keywords": [
     "home-assistant",
@@ -19,7 +19,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jest-ts-auto-mock": "^2.1.0",
     "lit": "^2.7.5",
-    "ts-auto-mock": "^3.6.2",
+    "ts-auto-mock": "3.5.0",
     "ttypescript": "^1.5.13",
     "yarn": "^1.22.18"
   },
@@ -28,8 +28,8 @@
     "@babel/plugin-transform-runtime": "^7.22.4",
     "@babel/preset-env": "^7.22.5",
     "@types/jest": "^29.5.3",
-    "@typescript-eslint/parser": "^5.59.1",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "babel-loader": "^9.1.3",
     "codecov": "^3.8.3",
     "compression-webpack-plugin": "^10.0.0",
@@ -38,7 +38,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^29.6.2",
     "prettier": "^2.8.8",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "typescript": "^4.9.5",
     "webpack": "^5.88.2",

diff --git a/room-card.js b/room-card.js
diff --git a/room-card.js.gz b/room-card.js.gz
diff --git a/src/index.ts b/src/index.ts
@@ -29,25 +29,43 @@ console.info(
 export default class RoomCard extends LitElement {
     @property() _hass?: HomeAssistant;
     @property() config?: RoomCardConfig;
+    @property() _helpers: { createCardElement(config: LovelaceCardConfig): LovelaceCard }
 
     private entity: RoomCardEntity | undefined;
     private info_entities: RoomCardEntity[] = [];
     private entities: RoomCardEntity[] = [];
     private rows: RoomCardRow[] = [];
     private stateObj: HomeAssistantEntity | undefined;
-    private _refCards: LovelaceCard[] = [];
-    private _helpers: { createCardElement(config: LovelaceCardConfig): LovelaceCard };
+
+    getChildCustomCardTypes(cards: RoomCardLovelaceCardConfig[], target: Set<string>) {
+        if (!cards) return;        
+
+        for (const card of cards) {
+            if (card.type.indexOf('custom:') === 0) {
+                target.add(card.type.substring(7, card.type.length));
+            }
+            this.getChildCustomCardTypes(card.cards, target)
+        }
+    }
+
+    async waitForDependentComponents(config: RoomCardConfig) {
+        const distinctTypes = new Set<string>();
+        this.getChildCustomCardTypes(config.cards, distinctTypes);        
+        await Promise.all(Array.from(distinctTypes).map(type => customElements.whenDefined(type)));
+    }
 
     async setConfig(config: RoomCardConfig) {
         checkConfig(config);
+        const entityIds = getEntityIds(config);
+        this.config = { ...config, entityIds: entityIds };
 
-        this.config = { ...config, entityIds: getEntityIds(config) };
+        await this.waitForDependentComponents(config);
 
+        /* istanbul ignore next */
         /* eslint-disable @typescript-eslint/no-explicit-any */
         if ((window as any).loadCardHelpers) {
             this._helpers = await (window as any).loadCardHelpers();
         }
-        /* eslint-enable @typescript-eslint/no-explicit-any */
     }
 
     protected shouldUpdate(changedProps: PropertyValues): boolean {
@@ -70,8 +88,6 @@ export default class RoomCard extends LitElement {
                     return { entities: rowEntities, hide_if: row.hide_if, content_alignment: row.content_alignment };
                 }) ?? [];
 
-            this._refCards = this.config.cards?.map((card) => this.createCardElement(card, hass));
-
             this.config.hass = hass;
         }
     }
@@ -95,7 +111,7 @@ export default class RoomCard extends LitElement {
                     ${this.rows !== undefined && this.rows.length > 0 ? 
                         renderRows(this.rows, this._hass, this) : 
                         renderEntitiesRow(this.config, this.entities, this._hass, this)}
-                    ${this._refCards}
+                    ${this.config.cards?.map((card) => this.createCardElement(card, this._hass))}
                 </ha-card>
             `;
         } catch (error) {

diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -4,11 +4,12 @@ import { PropertyValues } from 'lit';
 import { createMock } from 'ts-auto-mock';
 import { HassEntity } from 'home-assistant-js-websocket';
 import RoomCard from '../src/index';
-import { RoomCardAlignment, RoomCardConfig, RoomCardRow } from '../src/types/room-card-types';
+import { RoomCardAlignment, RoomCardConfig, RoomCardLovelaceCardConfig, RoomCardRow } from '../src/types/room-card-types';
 import { createEntity, getRenderString } from './utils';
 
 describe('Testing index file class RoomCard', () => {
     const roomcard = new RoomCard();
+
     const hass = createMock<HomeAssistant>();
     // Create Main Entity
     createEntity('light.test_entity', hass, 'on', { icon: 'mdi:table' });
@@ -432,6 +433,36 @@ describe('Testing index file class RoomCard', () => {
         roomcard.setConfig(config);
 
         expect(roomcard.getCardSize()).toBe(3);
-    })
-})
+    }),
+    test('Calling createCardElement with config.show_states true', () => {
+        const config: RoomCardLovelaceCardConfig = {
+            entity: 'light.test_entity',
+            show_states: 'test',
+            type: 'custom'
+        }
+
+        const result = roomcard.createCardElement(config, hass);
 
+        expect(result).toBeUndefined();
+    }),
+    test('Calling createCardElement with config.show_states true', () => {
+        hass.states['light.test_entity'].state = 'test';
+        const config: RoomCardLovelaceCardConfig = {
+            entity: 'light.test_entity',
+            show_states: ['test'],
+            type: 'custom'
+        }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+        roomcard._helpers = { createCardElement(_config: LovelaceCardConfig): LovelaceCard {
+            const element = {
+                style: {}
+            } as LovelaceCard;
+
+            return element;
+        }}
+
+        const result = roomcard.createCardElement(config, hass);
+
+        expect(result).toHaveProperty('hass');
+    })
+})
diff --git a/tests/utils.ts b/tests/utils.ts
@@ -4,8 +4,8 @@ import { createMock } from "ts-auto-mock";
 import { HassEntity, HassEntityAttributeBase } from 'home-assistant-js-websocket';
 import { HomeAssistantEntity, RoomCardEntity } from "../src/types/room-card-types";
 
-export const createEntity = (entity_id: string, hass: HomeAssistant, state: string, attributes: HassEntityAttributeBase = {}) : RoomCardEntity => {
-    const stateObj = createMock<HomeAssistantEntity>();    
+export const createEntity = (entity_id: string, hass: HomeAssistant, state: string, attributes: HassEntityAttributeBase = {}): RoomCardEntity => {
+    const stateObj = createMock<HomeAssistantEntity>();
     stateObj.entity_id = entity_id;
     stateObj.attributes = attributes;
     stateObj.state = state;
@@ -22,43 +22,43 @@ export const createEntity = (entity_id: string, hass: HomeAssistant, state: stri
     };
 }
 
-export const getRenderString = (data: HTMLTemplateResult) : string => {
-    
+export const getRenderString = (data: HTMLTemplateResult): string => {
+
     let returnHtml = '';
-    if(!data) {
+    if (!data) {
         return returnHtml;
     }
 
-    const {strings, values} = data;
+    const { strings, values } = data;
 
-    if(strings === undefined) {
+    if (strings === undefined) {
         return returnHtml;
     }
-    
-    for(let i = 0; i < strings.length; i++) {
-        
+
+    for (let i = 0; i < strings.length; i++) {
+
         returnHtml += strings[i];
 
-        if(typeof values[i] === 'string') {
+        if (typeof values[i] === 'string') {
             returnHtml += values[i];
         }
-        if(typeof values[i] === 'function') {
+        if (typeof values[i] === 'function') {
             // eslint-disable-next-line @typescript-eslint/ban-types
             returnHtml += (values[i] as Function).name;
         }
-        else if(typeof values[i] === 'object') {
+        else if (typeof values[i] === 'object') {
             const templates = values[i] as HTMLTemplateResult[];
-            if(templates !== undefined && templates !== null) {
-                for(let i = 0; i < templates.length; i++) {
+            if (templates !== undefined && templates !== null) {
+                for (let i = 0; i < templates.length; i++) {
                     returnHtml += getRenderString(templates[i] as HTMLTemplateResult);
                 }
             }
 
             const template = values[i] as HTMLTemplateResult;
-            if(template !== undefined && templates !== null) {
+            if (template !== undefined && templates !== null) {
                 returnHtml += getRenderString(template);
             }
-        } 
+        }
     }
 
     return returnHtml.replace(/\s\s+/g, ' ');