Tweak badge image logic for new server responses

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 { find, findLast, first, last } from 'lodash';
-import type { BadgeType, BadgeImageType } from './types';
+import type { BadgeType } from './types';
-import type { BadgeImageTheme } from './BadgeImageTheme';
+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
+  if (theme === BadgeImageTheme.Transparent) {
-  //   lengths.
+    const search = size < 36 ? find : findLast;
-  let idealImage: undefined | BadgeImageType;
+    return search(localPathsForTheme, Boolean);
-  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);
   }
 
-  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];
 }

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 => ({
+    images: [
-      [BadgeImageTheme.Dark]: image(`/${size}-dark.svg`),
+      ...['small', 'medium', 'large'].map(size => ({
-      [BadgeImageTheme.Light]: image(undefined),
+        [BadgeImageTheme.Dark]: image(`/${size}-dark.svg`),
-      [BadgeImageTheme.Transparent]: image(`/${size}-trns.svg`),
+        [BadgeImageTheme.Light]: image(undefined),
-    })),
+      })),
+      { [BadgeImageTheme.Transparent]: image('/huge-trns.svg') },
+    ],
     name: 'Test Badge',
   };
 
   it('returns undefined if passed no badge', () => {
-    const result = getBadgeImageFileLocalPath(
+    assert.isUndefined(
-      undefined,
+      getBadgeImageFileLocalPath(undefined, 123, BadgeImageTheme.Dark)
-      123,
+    );
-      BadgeImageTheme.Transparent
+    assert.isUndefined(
+      getBadgeImageFileLocalPath(undefined, 123, BadgeImageTheme.Transparent)
     );
-    assert.isUndefined(result);
   });
 
-  it('returns the first image if passed a small size', () => {
+  describe('dark/light themes', () => {
-    const darkResult = getBadgeImageFileLocalPath(
+    it('returns the first matching image if passed a small size', () => {
-      badge,
+      const darkResult = getBadgeImageFileLocalPath(
-      10,
+        badge,
-      BadgeImageTheme.Dark
+        10,
-    );
+        BadgeImageTheme.Dark
-    assert.strictEqual(darkResult, '/small-dark.svg');
+      );
+      assert.strictEqual(darkResult, '/small-dark.svg');
 
-    const lightResult = getBadgeImageFileLocalPath(
+      const lightResult = getBadgeImageFileLocalPath(
-      badge,
+        badge,
-      11,
+        11,
-      BadgeImageTheme.Light
+        BadgeImageTheme.Light
-    );
+      );
-    assert.isUndefined(lightResult);
+      assert.isUndefined(lightResult);
+    });
 
-    const transparentResult = getBadgeImageFileLocalPath(
+    it('returns the second matching image if passed a size between 24 and 36', () => {
-      badge,
+      const darkResult = getBadgeImageFileLocalPath(
-      12,
+        badge,
-      BadgeImageTheme.Transparent
+        24,
-    );
+        BadgeImageTheme.Dark
-    assert.strictEqual(transparentResult, '/small-trns.svg');
+      );
+      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', () => {
+  describe('transparent themes', () => {
-    const darkResult = getBadgeImageFileLocalPath(
+    it('returns the transparent image, no matter the size', () => {
-      badge,
+      [1, 12, 28, 50, 200, 999].forEach(size => {
-      24,
+        const transparentResult = getBadgeImageFileLocalPath(
-      BadgeImageTheme.Dark
+          badge,
-    );
+          size,
-    assert.strictEqual(darkResult, '/medium-dark.svg');
+          BadgeImageTheme.Transparent
-
+        );
-    const lightResult = getBadgeImageFileLocalPath(
+        assert.strictEqual(transparentResult, '/huge-trns.svg');
-      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');
   });
 });

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',
           },
         ],
       },