jellyfin-web/src/components/cardbuilder/cardBuilderUtils.test.js

import { describe, expect, test } from 'vitest';
import cardBuilderUtils from './cardBuilderUtils';

describe('getDesiredAspect', () => {
    test('"portrait" (case insensitive)', () => {
        expect(cardBuilderUtils.getDesiredAspect('portrait')).toEqual((2 / 3));
        expect(cardBuilderUtils.getDesiredAspect('PorTRaIt')).toEqual((2 / 3));
    });

    test('"backdrop" (case insensitive)', () => {
        expect(cardBuilderUtils.getDesiredAspect('backdrop')).toEqual((16 / 9));
        expect(cardBuilderUtils.getDesiredAspect('BaCkDroP')).toEqual((16 / 9));
    });

    test('"square" (case insensitive)', () => {
        expect(cardBuilderUtils.getDesiredAspect('square')).toEqual(1);
        expect(cardBuilderUtils.getDesiredAspect('sQuArE')).toEqual(1);
    });

    test('"banner" (case insensitive)', () => {
        expect(cardBuilderUtils.getDesiredAspect('banner')).toEqual((1000 / 185));
        expect(cardBuilderUtils.getDesiredAspect('BaNnEr')).toEqual((1000 / 185));
    });

    test('invalid shape', () => {
        expect(cardBuilderUtils.getDesiredAspect('invalid')).toBeNull();
    });

    test('shape is not provided', () => {
        expect(cardBuilderUtils.getDesiredAspect('')).toBeNull();
    });
});

describe('getPostersPerRow', () => {
    test('resolves to default of 4 posters per row if shape is not provided', () => {
        expect(cardBuilderUtils.getPostersPerRow('', 0, false, false)).toEqual(4);
    });

    describe('portrait', () => {
        const postersPerRowForPortrait = (screenWidth, isTV) => (cardBuilderUtils.getPostersPerRow('portrait', screenWidth, false, isTV));

        test('television', () => {
            expect(postersPerRowForPortrait(0, true)).toEqual(100 / 16.66666667);
        });

        test('screen width less than 500px', () => {
            expect(postersPerRowForPortrait(100, false)).toEqual(100 / 33.33333333);
            expect(postersPerRowForPortrait(499, false)).toEqual(100 / 33.33333333);
        });

        test('screen width greater or equal to 500px', () => {
            expect(postersPerRowForPortrait(500, false)).toEqual(100 / 33.33333333);
            expect(postersPerRowForPortrait(501, false)).toEqual(100 / 33.33333333);
        });

        test('screen width greater or equal to 700px', () => {
            expect(postersPerRowForPortrait(700, false)).toEqual(4);
            expect(postersPerRowForPortrait(701, false)).toEqual(4);
        });

        test('screen width greater or equal to 800px', () => {
            expect(postersPerRowForPortrait(800, false)).toEqual(5);
            expect(postersPerRowForPortrait(801, false)).toEqual(5);
        });

        test('screen width greater or equal to 1200px', () => {
            expect(postersPerRowForPortrait(1200, false)).toEqual(100 / 16.66666667);
            expect(postersPerRowForPortrait(1201, false)).toEqual(100 / 16.66666667);
        });

        test('screen width greater or equal to 1400px', () => {
            expect(postersPerRowForPortrait(1400, false)).toEqual( 100 / 14.28571428571);
            expect(postersPerRowForPortrait(1401, false)).toEqual( 100 / 14.28571428571);
        });

        test('screen width greater or equal to 1600px', () => {
            expect(postersPerRowForPortrait(1600, false)).toEqual( 8);
            expect(postersPerRowForPortrait(1601, false)).toEqual( 8);
        });

        test('screen width greater or equal to 1920px', () => {
            expect(postersPerRowForPortrait(1920, false)).toEqual( 100 / 11.1111111111);
            expect(postersPerRowForPortrait(1921, false)).toEqual( 100 / 11.1111111111);
        });

        test('screen width greater or equal to 2200px', () => {
            expect(postersPerRowForPortrait(2200, false)).toEqual( 10);
            expect(postersPerRowForPortrait(2201, false)).toEqual( 10);
        });
    });

    describe('square', () => {
        const postersPerRowForSquare = (screenWidth, isTV) => (cardBuilderUtils.getPostersPerRow('square', screenWidth, false, isTV));

        test('television', () => {
            expect(postersPerRowForSquare(0, true)).toEqual(100 / 16.66666667);
        });

        test('screen width less than 500px', () => {
            expect(postersPerRowForSquare(100, false)).toEqual(2);
            expect(postersPerRowForSquare(499, false)).toEqual(2);
        });

        test('screen width greater or equal to 500px', () => {
            expect(postersPerRowForSquare(500, false)).toEqual(100 / 33.33333333);
            expect(postersPerRowForSquare(501, false)).toEqual(100 / 33.33333333);
        });

        test('screen width greater or equal to 700px', () => {
            expect(postersPerRowForSquare(700, false)).toEqual(4);
            expect(postersPerRowForSquare(701, false)).toEqual(4);
        });

        test('screen width greater or equal to 800px', () => {
            expect(postersPerRowForSquare(800, false)).toEqual(5);
            expect(postersPerRowForSquare(801, false)).toEqual(5);
        });

        test('screen width greater or equal to 1200px', () => {
            expect(postersPerRowForSquare(1200, false)).toEqual(100 / 16.66666667);
            expect(postersPerRowForSquare(1201, false)).toEqual(100 / 16.66666667);
        });

        test('screen width greater or equal to 1400px', () => {
            expect(postersPerRowForSquare(1400, false)).toEqual( 100 / 14.28571428571);
            expect(postersPerRowForSquare(1401, false)).toEqual( 100 / 14.28571428571);
        });

        test('screen width greater or equal to 1600px', () => {
            expect(postersPerRowForSquare(1600, false)).toEqual(8);
            expect(postersPerRowForSquare(1601, false)).toEqual(8);
        });

        test('screen width greater or equal to 1920px', () => {
            expect(postersPerRowForSquare(1920, false)).toEqual(100 / 11.1111111111);
            expect(postersPerRowForSquare(1921, false)).toEqual(100 / 11.1111111111);
        });

        test('screen width greater or equal to 2200px', () => {
            expect(postersPerRowForSquare(2200, false)).toEqual( 10);
            expect(postersPerRowForSquare(2201, false)).toEqual( 10);
        });
    });

    describe('banner', () => {
        const postersPerRowForBanner = (screenWidth) => (cardBuilderUtils.getPostersPerRow('banner', screenWidth, false, false));

        test('screen width less than 800px', () => {
            expect(postersPerRowForBanner(799)).toEqual(1);
        });

        test('screen width greater than or equal to 800px', () => {
            expect(postersPerRowForBanner(800)).toEqual(2);
            expect(postersPerRowForBanner(801)).toEqual(2);
        });

        test('screen width greater than or equal to 1200px', () => {
            expect(postersPerRowForBanner(1200)).toEqual(100 / 33.33333333);
            expect(postersPerRowForBanner(1201)).toEqual(100 / 33.33333333);
        });

        test('screen width greater than or equal to 2200px', () => {
            expect(postersPerRowForBanner(2200)).toEqual(4);
            expect(postersPerRowForBanner(2201)).toEqual(4);
        });
    });

    describe('backdrop', () => {
        const postersPerRowForBackdrop = (screenWidth, isTV) => (cardBuilderUtils.getPostersPerRow('backdrop', screenWidth, false, isTV));

        test('television', () => {
            expect(postersPerRowForBackdrop(0, true)).toEqual(4);
        });

        test('screen width less than 420px', () => {
            expect(postersPerRowForBackdrop(100, false)).toEqual(1);
            expect(postersPerRowForBackdrop(419, false)).toEqual(1);
        });

        test('screen width greater or equal to 420px', () => {
            expect(postersPerRowForBackdrop(420, false)).toEqual(2);
            expect(postersPerRowForBackdrop(421, false)).toEqual(2);
        });

        test('screen width greater or equal to 770px', () => {
            expect(postersPerRowForBackdrop(770, false)).toEqual(3);
            expect(postersPerRowForBackdrop(771, false)).toEqual(3);
        });

        test('screen width greater or equal to 1200px', () => {
            expect(postersPerRowForBackdrop(1200, false)).toEqual(4);
            expect(postersPerRowForBackdrop(1201, false)).toEqual(4);
        });

        test('screen width greater or equal to 1600px', () => {
            expect(postersPerRowForBackdrop(1600, false)).toEqual(5);
            expect(postersPerRowForBackdrop(1601, false)).toEqual(5);
        });

        test('screen width greater or equal to 2500px', () => {
            expect(postersPerRowForBackdrop(2500, false)).toEqual(6);
            expect(postersPerRowForBackdrop(2501, false)).toEqual(6);
        });
    });

    describe('small backdrop', () => {
        const postersPerRowForSmallBackdrop = (screenWidth) => (cardBuilderUtils.getPostersPerRow('smallBackdrop', screenWidth, false, false));

        test('screen width less than 500px', () => {
            expect(postersPerRowForSmallBackdrop(100)).toEqual(2);
            expect(postersPerRowForSmallBackdrop(499)).toEqual(2);
        });

        test('screen width greater or equal to 500px', () => {
            expect(postersPerRowForSmallBackdrop(500)).toEqual(100 / 33.33333333);
            expect(postersPerRowForSmallBackdrop(501)).toEqual(100 / 33.33333333);
        });

        test('screen width greater or equal to 800px', () => {
            expect(postersPerRowForSmallBackdrop(800)).toEqual(4);
            expect(postersPerRowForSmallBackdrop(801)).toEqual(4);
        });

        test('screen width greater or equal to 1000px', () => {
            expect(postersPerRowForSmallBackdrop(1000)).toEqual(5);
            expect(postersPerRowForSmallBackdrop(1001)).toEqual(5);
        });

        test('screen width greater or equal to 1200px', () => {
            expect(postersPerRowForSmallBackdrop(1200)).toEqual(100 / 16.66666667);
            expect(postersPerRowForSmallBackdrop(1201)).toEqual(100 / 16.66666667);
        });

        test('screen width greater or equal to 1400px', () => {
            expect(postersPerRowForSmallBackdrop(1400)).toEqual(100 / 14.2857142857);
            expect(postersPerRowForSmallBackdrop(1401)).toEqual(100 / 14.2857142857);
        });

        test('screen width greater or equal to 1600px', () => {
            expect(postersPerRowForSmallBackdrop(1600)).toEqual(8);
            expect(postersPerRowForSmallBackdrop(1601)).toEqual(8);
        });
    });

    describe('overflow small backdrop', () => {
        const postersPerRowForOverflowSmallBackdrop = (screenWidth, isLandscape, isTV) => (cardBuilderUtils.getPostersPerRow('overflowSmallBackdrop', screenWidth, isLandscape, isTV));

        test('television', () => {
            expect(postersPerRowForOverflowSmallBackdrop(0, false, true)).toEqual( 100 / 18.9);
        });

        describe('non-landscape', () => {
            test('screen width greater or equal to 540px', () => {
                expect(postersPerRowForOverflowSmallBackdrop(540, false)).toEqual(100 / 30);
                expect(postersPerRowForOverflowSmallBackdrop(541, false)).toEqual(100 / 30);
            });

            test('screen width is less than 540px', () => {
                expect(postersPerRowForOverflowSmallBackdrop(539, false)).toEqual(100 / 72);
                expect(postersPerRowForOverflowSmallBackdrop(100, false)).toEqual(100 / 72);
            });
        });

        describe('landscape', () => {
            test('screen width greater or equal to 800px', () => {
                expect(postersPerRowForOverflowSmallBackdrop(800, true)).toEqual(100 / 15.5);
                expect(postersPerRowForOverflowSmallBackdrop(801, true)).toEqual(100 / 15.5);
            });

            test('screen width is less than 800px', () => {
                expect(postersPerRowForOverflowSmallBackdrop(799, true)).toEqual(100 / 23.3);
                expect(postersPerRowForOverflowSmallBackdrop(100, true)).toEqual(100 / 23.3);
            });
        });
    });

    describe('overflow portrait', () => {
        const postersPerRowForOverflowPortrait = (screenWidth, isLandscape, isTV) => (cardBuilderUtils.getPostersPerRow('overflowPortrait', screenWidth, isLandscape, isTV));

        test('television', () => {
            expect(postersPerRowForOverflowPortrait(0, false, true)).toEqual( 100 / 15.5);
        });

        describe('non-landscape', () => {
            test('screen width greater or equal to 1400px', () => {
                expect(postersPerRowForOverflowPortrait(1400, false)).toEqual(100 / 15);
                expect(postersPerRowForOverflowPortrait(1401, false)).toEqual(100 / 15);
            });

            test('screen width greater or equal to 1200px', () => {
                expect(postersPerRowForOverflowPortrait(1200, false)).toEqual(100 / 18);
                expect(postersPerRowForOverflowPortrait(1201, false)).toEqual(100 / 18);
            });

            test('screen width greater or equal to 760px', () => {
                expect(postersPerRowForOverflowPortrait(760, false)).toEqual(100 / 23);
                expect(postersPerRowForOverflowPortrait(761, false)).toEqual(100 / 23);
            });

            test('screen width greater or equal to 400px', () => {
                expect(postersPerRowForOverflowPortrait(400, false)).toEqual(100 / 31.5);
                expect(postersPerRowForOverflowPortrait(401, false)).toEqual(100 / 31.5);
            });

            test('screen width is less than 400px', () => {
                expect(postersPerRowForOverflowPortrait(399, false)).toEqual(100 / 42);
                expect(postersPerRowForOverflowPortrait(100, false)).toEqual(100 / 42);
            });
        });

        describe('landscape', () => {
            test('screen width greater or equal to 1700px', () => {
                expect(postersPerRowForOverflowPortrait(1700, true)).toEqual(100 / 11.6);
                expect(postersPerRowForOverflowPortrait(1701, true)).toEqual(100 / 11.6);
            });

            test('screen width is less than 1700px', () => {
                expect(postersPerRowForOverflowPortrait(1699, true)).toEqual(100 / 15.5);
                expect(postersPerRowForOverflowPortrait(100, true)).toEqual(100 / 15.5);
            });
        });
    });

    describe('overflow square', () => {
        const postersPerRowForOverflowSquare = (screenWidth, isLandscape, isTV) => (cardBuilderUtils.getPostersPerRow('overflowSquare', screenWidth, isLandscape, isTV));

        test('television', () => {
            expect(postersPerRowForOverflowSquare(0, false, true)).toEqual( 100 / 15.5);
        });

        describe('non-landscape', () => {
            test('screen width greater or equal to 1400px', () => {
                expect(postersPerRowForOverflowSquare(1400, false)).toEqual(100 / 15);
                expect(postersPerRowForOverflowSquare(1401, false)).toEqual(100 / 15);
            });

            test('screen width greater or equal to 1200px', () => {
                expect(postersPerRowForOverflowSquare(1200, false)).toEqual(100 / 18);
                expect(postersPerRowForOverflowSquare(1201, false)).toEqual(100 / 18);
            });

            test('screen width greater or equal to 760px', () => {
                expect(postersPerRowForOverflowSquare(760, false)).toEqual(100 / 23);
                expect(postersPerRowForOverflowSquare(761, false)).toEqual(100 / 23);
            });

            test('screen width greater or equal to 540px', () => {
                expect(postersPerRowForOverflowSquare(540, false)).toEqual(100 / 31.5);
                expect(postersPerRowForOverflowSquare(541, false)).toEqual(100 / 31.5);
            });

            test('screen width is less than 540px', () => {
                expect(postersPerRowForOverflowSquare(539, false)).toEqual(100 / 42);
                expect(postersPerRowForOverflowSquare(100, false)).toEqual(100 / 42);
            });
        });

        describe('landscape', () => {
            test('screen width greater or equal to 1700px', () => {
                expect(postersPerRowForOverflowSquare(1700, true)).toEqual(100 / 11.6);
                expect(postersPerRowForOverflowSquare(1701, true)).toEqual(100 / 11.6);
            });

            test('screen width is less than 1700px', () => {
                expect(postersPerRowForOverflowSquare(1699, true)).toEqual(100 / 15.5);
                expect(postersPerRowForOverflowSquare(100, true)).toEqual(100 / 15.5);
            });
        });
    });

    describe('overflow backdrop', () => {
        const postersPerRowForOverflowBackdrop = (screenWidth, isLandscape, isTV) => (cardBuilderUtils.getPostersPerRow('overflowBackdrop', screenWidth, isLandscape, isTV));

        test('television', () => {
            expect(postersPerRowForOverflowBackdrop(0, false, true)).toEqual( 100 / 23.3);
        });

        describe('non-landscape', () => {
            test('screen width greater or equal to 1800px', () => {
                expect(postersPerRowForOverflowBackdrop(1800, false)).toEqual(100 / 23.5);
                expect(postersPerRowForOverflowBackdrop(1801, false)).toEqual(100 / 23.5);
            });

            test('screen width greater or equal to 1400px', () => {
                expect(postersPerRowForOverflowBackdrop(1400, false)).toEqual(100 / 30);
                expect(postersPerRowForOverflowBackdrop(1401, false)).toEqual(100 / 30);
            });

            test('screen width greater or equal to 760px', () => {
                expect(postersPerRowForOverflowBackdrop(760, false)).toEqual(100 / 40);
                expect(postersPerRowForOverflowBackdrop(761, false)).toEqual(100 / 40);
            });

            test('screen width greater or equal to 640px', () => {
                expect(postersPerRowForOverflowBackdrop(640, false)).toEqual(100 / 56);
                expect(postersPerRowForOverflowBackdrop(641, false)).toEqual(100 / 56);
            });

            test('screen width is less than 640px', () => {
                expect(postersPerRowForOverflowBackdrop(639, false)).toEqual(100 / 72);
                expect(postersPerRowForOverflowBackdrop(100, false)).toEqual(100 / 72);
            });
        });

        describe('landscape', () => {
            test('screen width greater or equal to 1700px', () => {
                expect(postersPerRowForOverflowBackdrop(1700, true)).toEqual(100 / 18.5);
                expect(postersPerRowForOverflowBackdrop(1701, true)).toEqual(100 / 18.5);
            });

            test('screen width is less than 1700px', () => {
                expect(postersPerRowForOverflowBackdrop(1699, true)).toEqual(100 / 23.3);
                expect(postersPerRowForOverflowBackdrop(100, true)).toEqual(100 / 23.3);
            });
        });
    });
});