From 5f4943e19008e0962257b88ddb768a2dd0b2fbe5 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 15 Apr 2024 16:26:47 -0700
Subject: [PATCH] Add tests.

---
 src/utils/media-layout.ts        |   2 +-
 tests/utils/media-layout.test.ts | 116 +++++++++++++++++++++++++++++++
 vite.config.ts                   |   1 +
 3 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 tests/utils/media-layout.test.ts

diff --git a/src/utils/media-layout.ts b/src/utils/media-layout.ts
index 356a8dd0..6128e10c 100644
--- a/src/utils/media-layout.ts
+++ b/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 {
diff --git a/tests/utils/media-layout.test.ts b/tests/utils/media-layout.test.ts
new file mode 100644
index 00000000..85054fc9
--- /dev/null
+++ b/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();
+    });
+  });
+});
diff --git a/vite.config.ts b/vite.config.ts
index 4479c43b..6794fe02 100644
--- a/vite.config.ts
+++ b/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',