feat: utils/classes unit tests

frontend/tests/utils/classes/UpNextLoaderView.test.ts

@@ -0,0 +1,102 @@
+import { UpNextLoaderView } from '../../../src/static/js/utils/classes/UpNextLoaderView';
+
+// Minimal helpers mocks used by UpNextLoaderView
+jest.mock('../../../src/static/js/utils/helpers/', () => ({
+    addClassname: jest.fn((el: any, cn: string) => el && el.classList && el.classList.add(cn)),
+    removeClassname: jest.fn((el: any, cn: string) => el && el.classList && el.classList.remove(cn)),
+    translateString: (s: string) => s,
+}));
+
+const { addClassname, removeClassname } = jest.requireMock('../../../src/static/js/utils/helpers/');
+
+const makeNextItem = () => ({
+    url: '/next-url',
+    title: 'Next title',
+    author_name: 'Jane Doe',
+    thumbnail_url: 'https://example.com/thumb.jpg',
+});
+
+describe('utils/classes', () => {
+    describe('UpNextLoaderView', () => {
+        test('html() builds structure with expected classes and content', () => {
+            const v = new UpNextLoaderView(makeNextItem());
+
+            const root = v.html();
+
+            expect(root).toBeInstanceOf(HTMLElement);
+            expect(root.querySelector('.up-next-loader-inner')).not.toBeNull();
+            expect(root.querySelector('.up-next-label')!.textContent).toBe('Up Next');
+            expect(root.querySelector('.next-media-title')!.textContent).toBe('Next title');
+            expect(root.querySelector('.next-media-author')!.textContent).toBe('Jane Doe');
+
+            // poster background
+            const poster = root.querySelector('.next-media-poster') as HTMLElement;
+            expect(poster.style.backgroundImage).toContain('thumb.jpg');
+
+            // go-next link points to next url
+            const link = root.querySelector('.go-next a') as HTMLAnchorElement;
+            expect(link.getAttribute('href')).toBe('/next-url');
+        });
+
+        test('setVideoJsPlayerElem marks player with vjs-mediacms-has-up-next-view class', () => {
+            const v = new UpNextLoaderView(makeNextItem());
+            const player = document.createElement('div');
+
+            v.setVideoJsPlayerElem(player);
+
+            expect(addClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-has-up-next-view');
+            expect(v.vjsPlayerElem).toBe(player);
+        });
+
+        test('startTimer shows view, registers scroll, and navigates after 10s', () => {
+            const next = makeNextItem();
+            const v = new UpNextLoaderView(next);
+            const player = document.createElement('div');
+
+            v.setVideoJsPlayerElem(player);
+            v.startTimer();
+
+            expect(removeClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-up-next-hidden');
+            expect(removeClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-canceled-next');
+        });
+
+        test('cancelTimer clears timeout, stops scroll, and marks canceled', () => {
+            const v = new UpNextLoaderView(makeNextItem());
+            const player = document.createElement('div');
+
+            v.setVideoJsPlayerElem(player);
+
+            v.startTimer();
+            v.cancelTimer();
+
+            expect(addClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-canceled-next');
+        });
+
+        test('Cancel button click hides the view and cancels timer', () => {
+            const v = new UpNextLoaderView(makeNextItem());
+            const player = document.createElement('div');
+            v.setVideoJsPlayerElem(player);
+
+            v.startTimer();
+            const root = v.html();
+            const cancelBtn = root.querySelector('.up-next-cancel button') as HTMLButtonElement;
+            cancelBtn.click();
+
+            expect(addClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-canceled-next');
+        });
+
+        test('showTimerView shows or starts timer based on flag', () => {
+            const v = new UpNextLoaderView(makeNextItem());
+            const player = document.createElement('div');
+            v.setVideoJsPlayerElem(player);
+
+            // beginTimer=false -> just show view
+            v.showTimerView(false);
+            expect(removeClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-up-next-hidden');
+
+            // beginTimer=true -> starts timer
+            v.showTimerView(true);
+            expect(removeClassname).toHaveBeenCalledWith(player, 'vjs-mediacms-canceled-next');
+        });
+    });
+});