Tweak badge image logic for new server responses
This commit is contained in:
Evan Hahn
GitHub
parent
834023779e
commit
864f9c8631
3 changed files with 104 additions and 117 deletions
|
|
@ -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<undefined | BadgeType>,
|
||||
|
|
@ -14,20 +14,23 @@ export function getBadgeImageFileLocalPath(
|
|||
return undefined;
|
||||
}
|
||||
|
||||
const { images } = badge;
|
||||
const localPathsForTheme: Array<undefined | string> = 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];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue