Validate gallery card configs

Author: timmo001

gallery/src/common/validate-card-config.ts

@@ -0,0 +1,15 @@
+import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
+import { getCardElementClass } from "../../../src/panels/lovelace/create-element/create-card-element";
+
+export const validateCardConfig = async (config: LovelaceCardConfig) => {
+  const cardClass = await getCardElementClass(config.type);
+
+  if (cardClass.getConfigElement) {
+    const editor = await cardClass.getConfigElement();
+    editor.setConfig(config);
+  } else {
+    cardClass.getConfigForm?.().assertConfig?.(config);
+  }
+
+  new cardClass().setConfig(config);
+};

gallery/src/components/demo-card.ts

@@ -7,12 +7,14 @@ import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card"
 import "../../../src/panels/lovelace/cards/hui-card";
 import type { HuiCard } from "../../../src/panels/lovelace/cards/hui-card";
 import type { HomeAssistant } from "../../../src/types";
+import { validateCardConfig } from "../common/validate-card-config";
 
 export interface DemoCardConfig<
   T extends LovelaceCardConfig = LovelaceCardConfig,
 > {
   heading: string;
   config: T;
+  expectConfigError?: boolean;
 }
 
 @customElement("demo-card")
@@ -32,6 +34,21 @@ class DemoCard extends LitElement {
     dump([config]).trim()
   );
 
+  protected async firstUpdated() {
+    try {
+      await validateCardConfig(this.config.config);
+    } catch (err) {
+      if (this.config.expectConfigError) {
+        return;
+      }
+      throw err;
+    }
+
+    if (this.config.expectConfigError) {
+      throw new Error(`Expected config error for ${this.config.heading}`);
+    }
+  }
+
   render() {
     return html`
       <h2>

gallery/src/pages/lovelace/entity-button-card.ts

@@ -64,7 +64,10 @@ const CONFIGS = [
     config: {
       type: "button",
       entity: "light.bed_light",
-      service: "light.toggle",
+      tap_action: {
+        action: "perform-action",
+        perform_action: "light.toggle",
+      },
     },
   },
   {

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -295,13 +295,15 @@ const INVALID_CONFIGS = [
   {
     heading: "Error: Entities must be specified",
     config: { type: "entity-filter" },
+    expectConfigError: true,
   },
   {
     heading: "Error: Incorrect filter config",
     config: {
       type: "entity-filter",
       entities: ["sensor.gas_station_lowest_price"],
     },
+    expectConfigError: true,
   },
 ] satisfies DemoCardConfig<
   | Pick<EntityFilterCardConfig, "type">

gallery/src/pages/lovelace/gauge-card.ts

@@ -43,7 +43,7 @@ const CONFIGS = [
     config: {
       type: "gauge",
       entity: "sensor.outside_temperature",
-      unit_of_measurement: "C",
+      unit: "C",
       name: "Outside Temperature",
     },
   },

gallery/src/pages/lovelace/picture-card.ts

@@ -37,8 +37,8 @@ const CONFIGS = [
     heading: "Error: Image required",
     config: {
       type: "picture",
-      entity: "person.paulus",
     },
+    expectConfigError: true,
   },
 ] satisfies DemoCardConfig<PictureCardConfig>[];
 

test/gallery/validate-card-config.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from "vitest";
+import { validateCardConfig } from "../../gallery/src/common/validate-card-config";
+
+vi.hoisted(() => {
+  Object.assign(globalThis, {
+    __STATIC_PATH__: "/",
+    __BUILD__: "modern",
+    __VERSION__: "test",
+    __BACKWARDS_COMPAT__: false,
+    __SUPERVISOR__: false,
+    __NAMESPACE__: "frontend",
+  });
+});
+
+describe("validateCardConfig", () => {
+  it("accepts valid card configs", async () => {
+    await expect(
+      validateCardConfig({
+        type: "button",
+        entity: "light.bed_light",
+        tap_action: {
+          action: "perform-action",
+          perform_action: "light.toggle",
+        },
+      })
+    ).resolves.toBeUndefined();
+  });
+
+  it.each([
+    {
+      type: "button",
+      entity: "light.bed_light",
+      service: "light.toggle",
+    },
+    {
+      type: "gauge",
+      entity: "sensor.outside_temperature",
+      unit_of_measurement: "C",
+    },
+    {
+      type: "picture",
+      entity: "person.paulus",
+    },
+  ])("rejects invalid $type card configs", async (config) => {
+    await expect(validateCardConfig(config)).rejects.toThrow();
+  });
+});