initial commit

test/nuxt/CameraViewer.spec.js

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import CameraViewer from '../../app/components/CameraViewer.vue'
+
+describe('CameraViewer (device stream)', () => {
+  it('renders device name and close button', async () => {
+    const camera = {
+      id: 't1',
+      name: 'Test Camera',
+      streamUrl: 'https://example.com/stream.mjpg',
+      sourceType: 'mjpeg',
+    }
+    const wrapper = await mountSuspended(CameraViewer, {
+      props: { camera },
+    })
+    expect(wrapper.text()).toContain('Test Camera')
+    expect(wrapper.find('button[aria-label="Close panel"]').exists()).toBe(true)
+  })
+
+  it('does not set img src for non-http streamUrl', async () => {
+    const camera = {
+      id: 't2',
+      name: 'Bad',
+      streamUrl: 'javascript:alert(1)',
+      sourceType: 'mjpeg',
+    }
+    const wrapper = await mountSuspended(CameraViewer, {
+      props: { camera },
+    })
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(false)
+  })
+
+  it('uses safe http streamUrl for img', async () => {
+    const camera = {
+      id: 't3',
+      name: 'OK',
+      streamUrl: 'https://example.com/cam.mjpg',
+      sourceType: 'mjpeg',
+    }
+    const wrapper = await mountSuspended(CameraViewer, {
+      props: { camera },
+    })
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe('https://example.com/cam.mjpg')
+  })
+
+  it('emits close when close button clicked', async () => {
+    const camera = {
+      id: 't5',
+      name: 'Close me',
+      streamUrl: '',
+      sourceType: 'mjpeg',
+    }
+    const wrapper = await mountSuspended(CameraViewer, { props: { camera } })
+    await wrapper.find('button[aria-label="Close panel"]').trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('shows stream unavailable when img errors', async () => {
+    const camera = {
+      id: 't6',
+      name: 'Broken',
+      streamUrl: 'https://example.com/bad.mjpg',
+      sourceType: 'mjpeg',
+    }
+    const wrapper = await mountSuspended(CameraViewer, { props: { camera } })
+    const img = wrapper.find('img')
+    await img.trigger('error')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('Stream unavailable')
+  })
+
+  it('renders video element for hls sourceType', async () => {
+    const camera = {
+      id: 't7',
+      name: 'HLS Camera',
+      streamUrl: 'https://example.com/stream.m3u8',
+      sourceType: 'hls',
+    }
+    const wrapper = await mountSuspended(CameraViewer, { props: { camera } })
+    expect(wrapper.find('video').exists()).toBe(true)
+  })
+})