added component tests

Author: gallayl

frontend/src/components/dashboard/widget.spec.tsx

@@ -0,0 +1,164 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { Widget } from './widget.js'
+
+describe('Widget', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+    // Mock animate for jsdom (used by skeleton, loader, and other animations)
+    HTMLElement.prototype.animate = vi.fn().mockReturnValue({
+      finished: Promise.resolve(),
+      cancel: vi.fn(),
+    })
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.useRealTimers()
+  })
+
+  it('should render AppShortcutWidget for app-shortcut type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="app-shortcut" appName="home" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const appShortcut = widget?.querySelector('pi-rat-app-shortcut-widget')
+    expect(appShortcut).toBeTruthy()
+  })
+
+  it('should render EntityShortcutWidget for entity-shortcut type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="entity-shortcut" entityName="movie" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const entityShortcut = widget?.querySelector('pi-rat-entity-shortcut-widget')
+    expect(entityShortcut).toBeTruthy()
+  })
+
+  it('should render HtmlWidget for html type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="html" content="<p>Hello World</p>" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const htmlWidget = widget?.querySelector('pi-rat-html-widget')
+    expect(htmlWidget).toBeTruthy()
+    expect(htmlWidget?.innerHTML).toContain('Hello World')
+  })
+
+  it('should render MarkdownWidget for markdown type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="markdown" content="# Heading" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const markdownWidget = widget?.querySelector('pi-rat-markdown-widget')
+    expect(markdownWidget).toBeTruthy()
+  })
+
+  it('should render WidgetGroup for group type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="group" title="Test Group" widgets={[]} />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const widgetGroup = widget?.querySelector('pi-rat-widget-group')
+    expect(widgetGroup).toBeTruthy()
+  })
+
+  it('should render MovieWidget for movie type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="movie" imdbId="tt1234567" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const movieWidget = widget?.querySelector('pi-rat-movie-widget')
+    expect(movieWidget).toBeTruthy()
+  })
+
+  it('should render SeriesWidget for series type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="series" imdbId="tt7654321" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const seriesWidget = widget?.querySelector('pi-rat-series-widget')
+    expect(seriesWidget).toBeTruthy()
+  })
+
+  it('should render ContinueWatchingWidgetGroup for continue-watching type', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <Widget type="continue-watching" />,
+    })
+
+    const widget = document.querySelector('pi-rat-widget')
+    expect(widget).toBeTruthy()
+
+    const continueWatching = widget?.querySelector('continue-watching-widget-group')
+    expect(continueWatching).toBeTruthy()
+  })
+
+  // Note: DeviceAvailability widget test is skipped because it requires complex
+  // service mocking (IotDevicesService, SessionService) that's beyond the scope
+  // of a simple component routing test. The routing logic is verified by the
+  // other widget type tests above.
+})

frontend/src/components/settings-sidebar/settings-menu-item.spec.tsx

@@ -0,0 +1,91 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { SettingsMenuItem } from './settings-menu-item.js'
+
+describe('SettingsMenuItem', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render with icon, label, and href', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SettingsMenuItem icon={<span>🏠</span>} label="Home" href="/home" />,
+    })
+
+    const menuItem = document.querySelector('settings-menu-item')
+    expect(menuItem).toBeTruthy()
+
+    const link = menuItem?.querySelector('a')
+    expect(link).toBeTruthy()
+    expect(link?.getAttribute('href')).toBe('/home')
+    expect(link?.textContent).toContain('Home')
+    expect(link?.textContent).toContain('🏠')
+  })
+
+  it('should render with active state styling', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SettingsMenuItem icon={<span>⚙️</span>} label="Settings" href="/settings" isActive={true} />,
+    })
+
+    const menuItem = document.querySelector('settings-menu-item')
+    expect(menuItem).toBeTruthy()
+
+    const link = menuItem?.querySelector('a')
+    expect(link).toBeTruthy()
+    expect(link?.getAttribute('href')).toBe('/settings')
+    expect(link?.textContent).toContain('Settings')
+  })
+
+  it('should render with inactive state by default', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SettingsMenuItem icon={<span>📁</span>} label="Files" href="/files" />,
+    })
+
+    const menuItem = document.querySelector('settings-menu-item')
+    expect(menuItem).toBeTruthy()
+
+    const link = menuItem?.querySelector('a')
+    expect(link).toBeTruthy()
+    expect(link?.getAttribute('href')).toBe('/files')
+  })
+
+  it('should render with explicit inactive state', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <SettingsMenuItem icon={<span>🎬</span>} label="Movies" href="/movies" isActive={false} />,
+    })
+
+    const menuItem = document.querySelector('settings-menu-item')
+    expect(menuItem).toBeTruthy()
+
+    const link = menuItem?.querySelector('a')
+    expect(link).toBeTruthy()
+    expect(link?.getAttribute('href')).toBe('/movies')
+    expect(link?.textContent).toContain('Movies')
+  })
+})