Add tests.

2024-04-15 16:26:47 -07:00
parent c7c85d188d
commit 5f4943e190
3 changed files with 118 additions and 1 deletions
@@ -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();
+    });
+  });
+});