From d77d69b57022c0799c78ac04a89b4bc90818a2a2 Mon Sep 17 00:00:00 2001 From: Dmitriy Dubson Date: Tue, 3 Oct 2023 10:34:40 -0400 Subject: [PATCH] Refactor desired aspect and posters per row functions to reduce cognitive complexity Fixes gh-4828 --- src/components/cardbuilder/cardBuilder.js | 242 +--------- .../cardbuilder/cardBuilderUtils.js | 173 ++++++++ .../cardbuilder/cardBuilderUtils.test.js | 417 ++++++++++++++++++ 3 files changed, 594 insertions(+), 238 deletions(-) create mode 100644 src/components/cardbuilder/cardBuilderUtils.js create mode 100644 src/components/cardbuilder/cardBuilderUtils.test.js diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index c2f5436b39f..d52713283b5 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -6,6 +6,7 @@ import escapeHtml from 'escape-html'; +import cardBuilderUtils from './cardBuilderUtils'; import browser from 'scripts/browser'; import datetime from 'scripts/datetime'; import dom from 'scripts/dom'; @@ -46,217 +47,6 @@ export function getCardsHtml(items, options) { return buildCardsHtmlInternal(items, options); } -/** - * Computes the number of posters per row. - * @param {string} shape - Shape of the cards. - * @param {number} screenWidth - Width of the screen. - * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen. - * @returns {number} Number of cards per row for an itemsContainer. - */ -function getPostersPerRow(shape, screenWidth, isOrientationLandscape) { - switch (shape) { - case 'portrait': - if (layoutManager.tv) { - return 100 / 16.66666667; - } - if (screenWidth >= 2200) { - return 100 / 10; - } - if (screenWidth >= 1920) { - return 100 / 11.1111111111; - } - if (screenWidth >= 1600) { - return 100 / 12.5; - } - if (screenWidth >= 1400) { - return 100 / 14.28571428571; - } - if (screenWidth >= 1200) { - return 100 / 16.66666667; - } - if (screenWidth >= 800) { - return 5; - } - if (screenWidth >= 700) { - return 4; - } - if (screenWidth >= 500) { - return 100 / 33.33333333; - } - return 100 / 33.33333333; - case 'square': - if (layoutManager.tv) { - return 100 / 16.66666667; - } - if (screenWidth >= 2200) { - return 100 / 10; - } - if (screenWidth >= 1920) { - return 100 / 11.1111111111; - } - if (screenWidth >= 1600) { - return 100 / 12.5; - } - if (screenWidth >= 1400) { - return 100 / 14.28571428571; - } - if (screenWidth >= 1200) { - return 100 / 16.66666667; - } - if (screenWidth >= 800) { - return 5; - } - if (screenWidth >= 700) { - return 4; - } - if (screenWidth >= 500) { - return 100 / 33.33333333; - } - return 2; - case 'banner': - if (screenWidth >= 2200) { - return 100 / 25; - } - if (screenWidth >= 1200) { - return 100 / 33.33333333; - } - if (screenWidth >= 800) { - return 2; - } - return 1; - case 'backdrop': - if (layoutManager.tv) { - return 100 / 25; - } - if (screenWidth >= 2500) { - return 6; - } - if (screenWidth >= 1600) { - return 5; - } - if (screenWidth >= 1200) { - return 4; - } - if (screenWidth >= 770) { - return 3; - } - if (screenWidth >= 420) { - return 2; - } - return 1; - case 'smallBackdrop': - if (screenWidth >= 1600) { - return 100 / 12.5; - } - if (screenWidth >= 1400) { - return 100 / 14.2857142857; - } - if (screenWidth >= 1200) { - return 100 / 16.66666667; - } - if (screenWidth >= 1000) { - return 5; - } - if (screenWidth >= 800) { - return 4; - } - if (screenWidth >= 500) { - return 100 / 33.33333333; - } - return 2; - case 'overflowSmallBackdrop': - if (layoutManager.tv) { - return 100 / 18.9; - } - if (isOrientationLandscape) { - if (screenWidth >= 800) { - return 100 / 15.5; - } - return 100 / 23.3; - } else { - if (screenWidth >= 540) { - return 100 / 30; - } - return 100 / 72; - } - case 'overflowPortrait': - - if (layoutManager.tv) { - return 100 / 15.5; - } - if (isOrientationLandscape) { - if (screenWidth >= 1700) { - return 100 / 11.6; - } - return 100 / 15.5; - } else { - if (screenWidth >= 1400) { - return 100 / 15; - } - if (screenWidth >= 1200) { - return 100 / 18; - } - if (screenWidth >= 760) { - return 100 / 23; - } - if (screenWidth >= 400) { - return 100 / 31.5; - } - return 100 / 42; - } - case 'overflowSquare': - if (layoutManager.tv) { - return 100 / 15.5; - } - if (isOrientationLandscape) { - if (screenWidth >= 1700) { - return 100 / 11.6; - } - return 100 / 15.5; - } else { - if (screenWidth >= 1400) { - return 100 / 15; - } - if (screenWidth >= 1200) { - return 100 / 18; - } - if (screenWidth >= 760) { - return 100 / 23; - } - if (screenWidth >= 540) { - return 100 / 31.5; - } - return 100 / 42; - } - case 'overflowBackdrop': - if (layoutManager.tv) { - return 100 / 23.3; - } - if (isOrientationLandscape) { - if (screenWidth >= 1700) { - return 100 / 18.5; - } - return 100 / 23.3; - } else { - if (screenWidth >= 1800) { - return 100 / 23.5; - } - if (screenWidth >= 1400) { - return 100 / 30; - } - if (screenWidth >= 760) { - return 100 / 40; - } - if (screenWidth >= 640) { - return 100 / 56; - } - return 100 / 72; - } - default: - return 4; - } -} - /** * Checks if the window is resizable. * @param {number} windowWidth - Width of the device's screen. @@ -283,7 +73,7 @@ function isResizable(windowWidth) { * @returns {number} Width of the image for a card. */ function getImageWidth(shape, screenWidth, isOrientationLandscape) { - const imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape); + const imagesPerRow = cardBuilderUtils.getPostersPerRow(shape, screenWidth, isOrientationLandscape, layoutManager.tv); return Math.round(screenWidth / imagesPerRow); } @@ -323,7 +113,7 @@ function setCardData(items, options) { options.preferThumb = options.shape === 'backdrop' || options.shape === 'overflowBackdrop'; } - options.uiAspect = getDesiredAspect(options.shape); + options.uiAspect = cardBuilderUtils.getDesiredAspect(options.shape); options.primaryImageAspectRatio = primaryImageAspectRatio; if (!options.width && options.widths) { @@ -465,30 +255,6 @@ function buildCardsHtmlInternal(items, options) { return html; } -/** - * Computes the aspect ratio for a card given its shape. - * @param {string} shape - Shape for which to get the aspect ratio. - * @returns {null|number} Ratio of the shape. - */ -function getDesiredAspect(shape) { - if (shape) { - shape = shape.toLowerCase(); - if (shape.indexOf('portrait') !== -1) { - return (2 / 3); - } - if (shape.indexOf('backdrop') !== -1) { - return (16 / 9); - } - if (shape.indexOf('square') !== -1) { - return 1; - } - if (shape.indexOf('banner') !== -1) { - return (1000 / 185); - } - } - return null; -} - /** * @typedef {Object} CardImageUrl * @property {string} imgUrl - Image URL. @@ -514,7 +280,7 @@ function getCardImageUrl(item, apiClient, options, shape) { let imgUrl = null; let imgTag = null; let coverImage = false; - const uiAspect = getDesiredAspect(shape); + const uiAspect = cardBuilderUtils.getDesiredAspect(shape); let imgType = null; let itemId = null; diff --git a/src/components/cardbuilder/cardBuilderUtils.js b/src/components/cardbuilder/cardBuilderUtils.js new file mode 100644 index 00000000000..494dcaf649f --- /dev/null +++ b/src/components/cardbuilder/cardBuilderUtils.js @@ -0,0 +1,173 @@ +const ASPECT_RATIOS = { + portrait: (2 / 3), + backdrop: (16 / 9), + square: 1, + banner: (1000 / 185) +}; + +/** + * Computes the aspect ratio for a card given its shape. + * @param {string} shape - Shape for which to get the aspect ratio. + * @returns {null|number} Ratio of the shape. + */ +function getDesiredAspect(shape) { + if (!shape) { + return null; + } + + shape = shape.toLowerCase(); + if (shape.indexOf('portrait') !== -1) { + return ASPECT_RATIOS.portrait; + } + if (shape.indexOf('backdrop') !== -1) { + return ASPECT_RATIOS.backdrop; + } + if (shape.indexOf('square') !== -1) { + return ASPECT_RATIOS.square; + } + if (shape.indexOf('banner') !== -1) { + return ASPECT_RATIOS.banner; + } + + return null; +} + +/** + * Computes the number of posters per row. + * @param {string} shape - Shape of the cards. + * @param {number} screenWidth - Width of the screen. + * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen. + * @param {boolean} isTV - Flag to denote if posters are rendered on a television screen. + * @returns {number} Number of cards per row for an itemsContainer. + */ +function getPostersPerRow(shape, screenWidth, isOrientationLandscape, isTV) { + switch (shape) { + case 'portrait': return postersPerRowPortrait(screenWidth, isTV); + case 'square': return postersPerRowSquare(screenWidth, isTV); + case 'banner': return postersPerRowBanner(screenWidth); + case 'backdrop': return postersPerRowBackdrop(screenWidth, isTV); + case 'smallBackdrop': return postersPerRowSmallBackdrop(screenWidth); + case 'overflowSmallBackdrop': return postersPerRowOverflowSmallBackdrop(screenWidth, isOrientationLandscape, isTV); + case 'overflowPortrait': return postersPerRowOverflowPortrait(screenWidth, isOrientationLandscape, isTV); + case 'overflowSquare': return postersPerRowOverflowSquare(screenWidth, isOrientationLandscape, isTV); + case 'overflowBackdrop': return postersPerRowOverflowBackdrop(screenWidth, isOrientationLandscape, isTV); + default: return 4; + } +} + +const postersPerRowPortrait = (screenWidth, isTV) => { + switch (true) { + case isTV: return 100 / 16.66666667; + case screenWidth >= 2200: return 10; + case screenWidth >= 1920: return 100 / 11.1111111111; + case screenWidth >= 1600: return 8; + case screenWidth >= 1400: return 100 / 14.28571428571; + case screenWidth >= 1200: return 100 / 16.66666667; + case screenWidth >= 800: return 5; + case screenWidth >= 700: return 4; + case screenWidth >= 500: return 100 / 33.33333333; + default: return 100 / 33.33333333; + } +}; + +const postersPerRowSquare = (screenWidth, isTV) => { + switch (true) { + case isTV: return 100 / 16.66666667; + case screenWidth >= 2200: return 10; + case screenWidth >= 1920: return 100 / 11.1111111111; + case screenWidth >= 1600: return 8; + case screenWidth >= 1400: return 100 / 14.28571428571; + case screenWidth >= 1200: return 100 / 16.66666667; + case screenWidth >= 800: return 5; + case screenWidth >= 700: return 4; + case screenWidth >= 500: return 100 / 33.33333333; + default: return 2; + } +}; + +const postersPerRowBanner = (screenWidth) => { + switch (true) { + case screenWidth >= 2200: return 4; + case screenWidth >= 1200: return 100 / 33.33333333; + case screenWidth >= 800: return 2; + default: return 1; + } +}; + +const postersPerRowBackdrop = (screenWidth, isTV) => { + switch (true) { + case isTV: return 4; + case screenWidth >= 2500: return 6; + case screenWidth >= 1600: return 5; + case screenWidth >= 1200: return 4; + case screenWidth >= 770: return 3; + case screenWidth >= 420: return 2; + default: return 1; + } +}; + +function postersPerRowSmallBackdrop(screenWidth) { + switch (true) { + case screenWidth >= 1600: return 8; + case screenWidth >= 1400: return 100 / 14.2857142857; + case screenWidth >= 1200: return 100 / 16.66666667; + case screenWidth >= 1000: return 5; + case screenWidth >= 800: return 4; + case screenWidth >= 500: return 100 / 33.33333333; + default: return 2; + } +} + +const postersPerRowOverflowSmallBackdrop = (screenWidth, isLandscape, isTV) => { + switch (true) { + case isTV: return 100 / 18.9; + case isLandscape && screenWidth >= 800: return 100 / 15.5; + case isLandscape: return 100 / 23.3; + case screenWidth >= 540: return 100 / 30; + default: return 100 / 72; + } +}; + +const postersPerRowOverflowPortrait = (screenWidth, isLandscape, isTV) => { + switch (true) { + case isTV: return 100 / 15.5; + case isLandscape && screenWidth >= 1700: return 100 / 11.6; + case isLandscape: return 100 / 15.5; + case screenWidth >= 1400: return 100 / 15; + case screenWidth >= 1200: return 100 / 18; + case screenWidth >= 760: return 100 / 23; + case screenWidth >= 400: return 100 / 31.5; + default: return 100 / 42; + } +}; + +const postersPerRowOverflowSquare = (screenWidth, isLandscape, isTV) => { + switch (true) { + case isTV: return 100 / 15.5; + case isLandscape && screenWidth >= 1700: return 100 / 11.6; + case isLandscape: return 100 / 15.5; + case screenWidth >= 1400: return 100 / 15; + case screenWidth >= 1200: return 100 / 18; + case screenWidth >= 760: return 100 / 23; + case screenWidth >= 540: return 100 / 31.5; + default: return 100 / 42; + } +}; + +const postersPerRowOverflowBackdrop = (screenWidth, isLandscape, isTV) => { + switch (true) { + case isTV: return 100 / 23.3; + case isLandscape && screenWidth >= 1700: return 100 / 18.5; + case isLandscape: return 100 / 23.3; + case screenWidth >= 1800: return 100 / 23.5; + case screenWidth >= 1400: return 100 / 30; + case screenWidth >= 760: return 100 / 40; + case screenWidth >= 640: return 100 / 56; + default: return 100 / 72; + } +}; + +export default { + getDesiredAspect, + getPostersPerRow +}; diff --git a/src/components/cardbuilder/cardBuilderUtils.test.js b/src/components/cardbuilder/cardBuilderUtils.test.js new file mode 100644 index 00000000000..46599135dbb --- /dev/null +++ b/src/components/cardbuilder/cardBuilderUtils.test.js @@ -0,0 +1,417 @@ +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); + }); + }); + }); +});