From e065273fc6572cc1759abb2e0514f60cd0af82b4 Mon Sep 17 00:00:00 2001
From: Andreas Kogler <andy.kogler.junior@gmail.com>
Date: Thu, 19 Dec 2024 19:08:24 +0100
Subject: [PATCH] Add unit-tests for seekbar level overflows

---
 spec/components/seekbarlabel.spec.ts | 93 ++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/spec/components/seekbarlabel.spec.ts b/spec/components/seekbarlabel.spec.ts
index b68afde4f..89555de8a 100644
--- a/spec/components/seekbarlabel.spec.ts
+++ b/spec/components/seekbarlabel.spec.ts
@@ -94,4 +94,97 @@ describe('SeekBarLabel', () => {
       });
     });
   });
+
+  describe("calculates correct values for thumbnail positioning", () => {
+    const uiContainerBoundingRect = {
+      x: 200,
+      y: 150,
+      width: 1600,
+      height: 900,
+      top: 150,
+      right: 1800,
+      bottom: 1050,
+      left: 200,
+    } as DOMRect;
+
+    let containerGetDomElementMock: () => jest.Mocked<DOM>;
+    let caretGetDomElementMock: () => jest.Mocked<DOM>;
+
+    beforeEach(() => {
+      containerGetDomElementMock = jest
+        .fn()
+        .mockReturnValue(MockHelper.generateDOMMock());
+
+      containerGetDomElementMock().get = jest.fn().mockReturnValue({
+        parentElement: jest.fn().mockReturnValue({
+          getBoundingClientRect: jest.fn(),
+        }),
+      });
+
+      caretGetDomElementMock = jest.fn().mockReturnValue(MockHelper.generateDOMMock());
+
+      seekbarLabel["container"].getDomElement = containerGetDomElementMock;
+      seekbarLabel["caret"].getDomElement = caretGetDomElementMock;
+    });
+
+    it("when thumbnail within UI container bounds", () => {
+      const labelRect = {
+        x: 400,
+        y: 700,
+        width: 200,
+        height: 120,
+        top: 700,
+        right: 600,
+        bottom: 820,
+        left: 400,
+      } as DOMRect;
+
+      containerGetDomElementMock().get(0).parentElement!.getBoundingClientRect =
+        jest.fn().mockReturnValue(labelRect);
+
+      seekbarLabel.setPositionInBounds(100, uiContainerBoundingRect);
+
+      expect(caretGetDomElementMock().css).toHaveBeenCalledWith('transform', null);
+    });
+
+    it("when thumbnail would overflow UI container leftside", () => {
+      const labelRect = {
+        x: 180,
+        y: 700,
+        width: 200,
+        height: 120,
+        top: 700,
+        right: 380,
+        bottom: 820,
+        left: 180,
+      } as DOMRect;
+
+      containerGetDomElementMock().get(0).parentElement!.getBoundingClientRect =
+        jest.fn().mockReturnValue(labelRect);
+
+      seekbarLabel.setPositionInBounds(100, uiContainerBoundingRect);
+
+      expect(seekbarLabel.getDomElement().css).toHaveBeenCalledWith('left', '120px');
+    });
+
+    it("when thumbnail would overflow UI container rightside", () => {
+      const labelRect = {
+        x: 1650,
+        y: 700,
+        width: 200,
+        height: 120,
+        top: 700,
+        right: 1850,
+        bottom: 820,
+        left: 1650,
+      } as DOMRect;
+
+      containerGetDomElementMock().get(0).parentElement!.getBoundingClientRect =
+        jest.fn().mockReturnValue(labelRect);
+
+      seekbarLabel.setPositionInBounds(100, uiContainerBoundingRect);
+
+      expect(seekbarLabel.getDomElement().css).toHaveBeenCalledWith('left', '50px');
+    });
+  });
 });