mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-02-04 06:22:59 -05:00
103 lines
4.2 KiB
TypeScript
103 lines
4.2 KiB
TypeScript
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');
|
|
});
|
|
});
|
|
});
|