feat(homecore-frontend/p1): @ruvnet/homecore-frontend Lit+TS+Vite scaffold (3 tests)

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-07-31 18:51:42 +00:00 · 2026-05-25 18:53:12 -04:00
parent 68ae6c0bd6
commit d91ffce1ad
22 changed files with 6066 additions and 45 deletions
@@ -0,0 +1,82 @@
+/**
+ * Unit tests for <hc-state-card>.
+ * Verifies that the component renders entity_id and state value into the DOM.
+ *
+ * Uses jsdom (via vitest environment) — no real browser required.
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import type { StateView } from '../api/types.js';
+
+// Register the custom element before tests run
+beforeAll(async () => {
+  // jsdom does not support Lit's adoptedStyleSheets; suppress the error.
+  if (typeof document !== 'undefined' && !document.adoptedStyleSheets) {
+    Object.defineProperty(document, 'adoptedStyleSheets', { value: [], writable: true });
+  }
+  await import('../components/StateCard.js');
+});
+
+function makeState(overrides: Partial<StateView> = {}): StateView {
+  return {
+    entity_id: 'light.living_room',
+    state: 'on',
+    attributes: { brightness: 255 },
+    last_changed: '2026-05-25T10:00:00Z',
+    last_updated: '2026-05-25T10:00:00Z',
+    context: { id: 'abc123', user_id: null, parent_id: null },
+    ...overrides,
+  };
+}
+
+describe('StateCard', () => {
+  it('renders entity_id in the DOM', async () => {
+    const el = document.createElement('hc-state-card') as HTMLElement & { state: StateView };
+    el.state = makeState();
+    document.body.appendChild(el);
+
+    // Lit renders synchronously into shadow root after a microtask
+    await el.updateComplete;
+
+    const shadowRoot = el.shadowRoot!;
+    const entityEl = shadowRoot.querySelector('.entity-id');
+    expect(entityEl).not.toBeNull();
+    expect(entityEl!.textContent).toContain('light.living_room');
+
+    document.body.removeChild(el);
+  });
+
+  it('renders the state value', async () => {
+    const el = document.createElement('hc-state-card') as HTMLElement & { state: StateView };
+    el.state = makeState({ state: 'off' });
+    document.body.appendChild(el);
+
+    await el.updateComplete;
+
+    const stateEl = el.shadowRoot!.querySelector('.state-value');
+    expect(stateEl).not.toBeNull();
+    expect(stateEl!.textContent).toBe('off');
+
+    document.body.removeChild(el);
+  });
+
+  it('applies .off badge class for unavailable state', async () => {
+    const el = document.createElement('hc-state-card') as HTMLElement & { state: StateView };
+    el.state = makeState({ state: 'unavailable' });
+    document.body.appendChild(el);
+
+    await el.updateComplete;
+
+    const badge = el.shadowRoot!.querySelector('.badge.off');
+    expect(badge).not.toBeNull();
+
+    document.body.removeChild(el);
+  });
+});
+
+// Augment for updateComplete
+declare global {
+  interface HTMLElement {
+    updateComplete: Promise<boolean>;
+  }
+}