diff --git a/ts/badges/getBadgeImageFileLocalPath.ts b/ts/badges/getBadgeImageFileLocalPath.ts index 44a63a42b..072c907d0 100644 --- a/ts/badges/getBadgeImageFileLocalPath.ts +++ b/ts/badges/getBadgeImageFileLocalPath.ts @@ -1,9 +1,9 @@ // Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only -import { first, last } from 'lodash'; -import type { BadgeType, BadgeImageType } from './types'; -import type { BadgeImageTheme } from './BadgeImageTheme'; +import { find, findLast, first, last } from 'lodash'; +import type { BadgeType } from './types'; +import { BadgeImageTheme } from './BadgeImageTheme'; export function getBadgeImageFileLocalPath( badge: Readonly, @@ -14,20 +14,23 @@ export function getBadgeImageFileLocalPath( return undefined; } - const { images } = badge; + const localPathsForTheme: Array = badge.images.map( + image => image[theme]?.localPath + ); - // We expect this to be defined for valid input, but defend against unexpected array - // lengths. - let idealImage: undefined | BadgeImageType; - if (size < 24) { - idealImage = first(images); - } else if (size < 36) { - idealImage = images[1] || first(images); - } else if (size < 160) { - idealImage = images[2] || first(images); - } else { - idealImage = last(images); + if (theme === BadgeImageTheme.Transparent) { + const search = size < 36 ? find : findLast; + return search(localPathsForTheme, Boolean); } - return idealImage?.[theme]?.localPath; + if (size < 24) { + return first(localPathsForTheme); + } + if (size < 36) { + return localPathsForTheme[1]; + } + if (size < 160) { + return localPathsForTheme[2]; + } + return last(localPathsForTheme) || localPathsForTheme[2]; } diff --git a/ts/test-both/badges/getBadgeImageFileLocalPath_test.ts b/ts/test-both/badges/getBadgeImageFileLocalPath_test.ts index a9d5f9ef9..b4beadb53 100644 --- a/ts/test-both/badges/getBadgeImageFileLocalPath_test.ts +++ b/ts/test-both/badges/getBadgeImageFileLocalPath_test.ts @@ -17,112 +17,101 @@ describe('getBadgeImageFileLocalPath', () => { category: BadgeCategory.Donor, descriptionTemplate: 'foo bar', id: 'foo', - images: ['small', 'medium', 'large', 'huge'].map(size => ({ - [BadgeImageTheme.Dark]: image(`/${size}-dark.svg`), - [BadgeImageTheme.Light]: image(undefined), - [BadgeImageTheme.Transparent]: image(`/${size}-trns.svg`), - })), + images: [ + ...['small', 'medium', 'large'].map(size => ({ + [BadgeImageTheme.Dark]: image(`/${size}-dark.svg`), + [BadgeImageTheme.Light]: image(undefined), + })), + { [BadgeImageTheme.Transparent]: image('/huge-trns.svg') }, + ], name: 'Test Badge', }; it('returns undefined if passed no badge', () => { - const result = getBadgeImageFileLocalPath( - undefined, - 123, - BadgeImageTheme.Transparent + assert.isUndefined( + getBadgeImageFileLocalPath(undefined, 123, BadgeImageTheme.Dark) + ); + assert.isUndefined( + getBadgeImageFileLocalPath(undefined, 123, BadgeImageTheme.Transparent) ); - assert.isUndefined(result); }); - it('returns the first image if passed a small size', () => { - const darkResult = getBadgeImageFileLocalPath( - badge, - 10, - BadgeImageTheme.Dark - ); - assert.strictEqual(darkResult, '/small-dark.svg'); + describe('dark/light themes', () => { + it('returns the first matching image if passed a small size', () => { + const darkResult = getBadgeImageFileLocalPath( + badge, + 10, + BadgeImageTheme.Dark + ); + assert.strictEqual(darkResult, '/small-dark.svg'); - const lightResult = getBadgeImageFileLocalPath( - badge, - 11, - BadgeImageTheme.Light - ); - assert.isUndefined(lightResult); + const lightResult = getBadgeImageFileLocalPath( + badge, + 11, + BadgeImageTheme.Light + ); + assert.isUndefined(lightResult); + }); - const transparentResult = getBadgeImageFileLocalPath( - badge, - 12, - BadgeImageTheme.Transparent - ); - assert.strictEqual(transparentResult, '/small-trns.svg'); + it('returns the second matching image if passed a size between 24 and 36', () => { + const darkResult = getBadgeImageFileLocalPath( + badge, + 24, + BadgeImageTheme.Dark + ); + assert.strictEqual(darkResult, '/medium-dark.svg'); + + const lightResult = getBadgeImageFileLocalPath( + badge, + 30, + BadgeImageTheme.Light + ); + assert.isUndefined(lightResult); + }); + + it('returns the third matching image if passed a size between 36 and 160', () => { + const darkResult = getBadgeImageFileLocalPath( + badge, + 36, + BadgeImageTheme.Dark + ); + assert.strictEqual(darkResult, '/large-dark.svg'); + + const lightResult = getBadgeImageFileLocalPath( + badge, + 100, + BadgeImageTheme.Light + ); + assert.isUndefined(lightResult); + }); + + it('returns the last matching image if passed a size above 159', () => { + const darkResult = getBadgeImageFileLocalPath( + badge, + 160, + BadgeImageTheme.Dark + ); + assert.strictEqual(darkResult, '/large-dark.svg'); + + const lightResult = getBadgeImageFileLocalPath( + badge, + 200, + BadgeImageTheme.Light + ); + assert.isUndefined(lightResult); + }); }); - it('returns the second image if passed a size between 24 and 36', () => { - const darkResult = getBadgeImageFileLocalPath( - badge, - 24, - BadgeImageTheme.Dark - ); - assert.strictEqual(darkResult, '/medium-dark.svg'); - - const lightResult = getBadgeImageFileLocalPath( - badge, - 30, - BadgeImageTheme.Light - ); - assert.isUndefined(lightResult); - - const transparentResult = getBadgeImageFileLocalPath( - badge, - 35, - BadgeImageTheme.Transparent - ); - assert.strictEqual(transparentResult, '/medium-trns.svg'); - }); - - it('returns the third image if passed a size between 36 and 160', () => { - const darkResult = getBadgeImageFileLocalPath( - badge, - 36, - BadgeImageTheme.Dark - ); - assert.strictEqual(darkResult, '/large-dark.svg'); - - const lightResult = getBadgeImageFileLocalPath( - badge, - 100, - BadgeImageTheme.Light - ); - assert.isUndefined(lightResult); - - const transparentResult = getBadgeImageFileLocalPath( - badge, - 159, - BadgeImageTheme.Transparent - ); - assert.strictEqual(transparentResult, '/large-trns.svg'); - }); - - it('returns the last image if passed a size above 159', () => { - const darkResult = getBadgeImageFileLocalPath( - badge, - 160, - BadgeImageTheme.Dark - ); - assert.strictEqual(darkResult, '/huge-dark.svg'); - - const lightResult = getBadgeImageFileLocalPath( - badge, - 200, - BadgeImageTheme.Light - ); - assert.isUndefined(lightResult); - - const transparentResult = getBadgeImageFileLocalPath( - badge, - 999, - BadgeImageTheme.Transparent - ); - assert.strictEqual(transparentResult, '/huge-trns.svg'); + describe('transparent themes', () => { + it('returns the transparent image, no matter the size', () => { + [1, 12, 28, 50, 200, 999].forEach(size => { + const transparentResult = getBadgeImageFileLocalPath( + badge, + size, + BadgeImageTheme.Transparent + ); + assert.strictEqual(transparentResult, '/huge-trns.svg'); + }); + }); }); }); diff --git a/ts/test-both/badges/parseBadgesFromServer_test.ts b/ts/test-both/badges/parseBadgesFromServer_test.ts index e56fca11a..ce9409623 100644 --- a/ts/test-both/badges/parseBadgesFromServer_test.ts +++ b/ts/test-both/badges/parseBadgesFromServer_test.ts @@ -20,7 +20,6 @@ describe('parseBadgesFromServer', () => { svgs: ['small', 'medium', 'large'].map(size => ({ dark: `${size} badge dark.svg`, light: `${size} badge light.svg`, - transparent: `${size} badge transparent.svg`, })), }; const validBadge = { @@ -36,9 +35,6 @@ describe('parseBadgesFromServer', () => { [BadgeImageTheme.Light]: { url: `https://updates2.signal.org/static/badges/${size}%20badge%20light.svg`, }, - [BadgeImageTheme.Transparent]: { - url: `https://updates2.signal.org/static/badges/${size}%20badge%20transparent.svg`, - }, })), { [BadgeImageTheme.Transparent]: { @@ -148,7 +144,6 @@ describe('parseBadgesFromServer', () => { { dark: 'too.svg', light: 'many.svg', - transparent: 'badges.svg', }, ], },