Add tests.

src/utils/media-layout.ts

@@ -8,7 +8,7 @@ import { MediaLayoutConfig } from '../config/types';
 export const updateElementStyleFromMediaLayoutConfig = (
   element: HTMLElement,
   mediaLayoutConfig?: MediaLayoutConfig,
-) => {
+): void => {
   if (mediaLayoutConfig?.fit !== undefined) {
     element.style.setProperty('--frigate-card-media-layout-fit', mediaLayoutConfig.fit);
   } else {

tests/utils/media-layout.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest';
+import { updateElementStyleFromMediaLayoutConfig } from '../../src/utils/media-layout.js';
+
+// @vitest-environment jsdom
+describe('updateElementStyleFromMediaLayoutConfig', () => {
+  describe('fit', () => {
+    it('set', () => {
+      const video = document.createElement('video');
+
+      updateElementStyleFromMediaLayoutConfig(video, {
+        fit: 'cover',
+      });
+
+      expect(video.style.getPropertyValue('--frigate-card-media-layout-fit')).toBe(
+        'cover',
+      );
+    });
+
+    it('unset', () => {
+      const video = document.createElement('video');
+      video.style.setProperty('--frigate-card-media-layout-fit', 'cover');
+
+      updateElementStyleFromMediaLayoutConfig(video);
+
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-fit'),
+      ).toBeFalsy();
+    });
+  });
+
+  describe('position', () => {
+    it('set', () => {
+      const video = document.createElement('video');
+
+      updateElementStyleFromMediaLayoutConfig(video, {
+        position: {
+          x: 10,
+          y: 20,
+        },
+      });
+
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-position-x'),
+      ).toBe('10%');
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-position-y'),
+      ).toBe('20%');
+    });
+
+    it('unset', () => {
+      const video = document.createElement('video');
+      video.style.setProperty('--frigate-card-media-layout-position-x', '10%');
+      video.style.setProperty('--frigate-card-media-layout-position-y', '20%');
+
+      updateElementStyleFromMediaLayoutConfig(video);
+
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-position-x'),
+      ).toBeFalsy();
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-position-y'),
+      ).toBeFalsy();
+    });
+  });
+
+  describe('view_box', () => {
+    it('set', () => {
+      const video = document.createElement('video');
+
+      updateElementStyleFromMediaLayoutConfig(video, {
+        view_box: {
+          top: 1,
+          bottom: 2,
+          left: 3,
+          right: 4,
+        },
+      });
+
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-top'),
+      ).toBe('1%');
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-bottom'),
+      ).toBe('2%');
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-left'),
+      ).toBe('3%');
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-right'),
+      ).toBe('4%');
+    });
+
+    it('unset', () => {
+      const video = document.createElement('video');
+      video.style.setProperty('--frigate-card-media-layout-view-box-top', '1%');
+      video.style.setProperty('--frigate-card-media-layout-view-box-bottom', '2%');
+      video.style.setProperty('--frigate-card-media-layout-view-box-left', '3%');
+      video.style.setProperty('--frigate-card-media-layout-view-box-right', '4%');
+
+      updateElementStyleFromMediaLayoutConfig(video);
+
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-top'),
+      ).toBeFalsy();
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-bottom'),
+      ).toBeFalsy();
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-left'),
+      ).toBeFalsy();
+      expect(
+        video.style.getPropertyValue('--frigate-card-media-layout-view-box-right'),
+      ).toBeFalsy();
+    });
+  });
+});

vite.config.ts

@@ -34,6 +34,7 @@ const FULL_COVERAGE_FILES_RELATIVE = [
   'utils/ha/entity-registry/types.ts',
   'utils/ha/types.ts',
   'utils/media-info.ts',
+  'utils/media-layout.ts',
   'utils/media-to-view.ts',
   'utils/media.ts',
   'utils/ptz.ts',