feat: enable Comment Headshot Avatar style in UI

h4l · Oct 21, 2022 · 7128c0d · 7128c0d
1 parent 2119f12
commit 7128c0d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 49 deletions.
diff --git a/src/__tests__/popup.tsx b/src/__tests__/popup.tsx
@@ -44,6 +44,7 @@ import {
   SVGNS,
   composeAvatarSVG,
   createHeadshotCircleAvatarSVG,
+  createHeadshotCommentsAvatarSVG,
   createNFTCardAvatarSVG,
   createStandardAvatarSVG,
 } from "../svg";
@@ -246,31 +247,6 @@ describe("_createAvatarSvgStateSignal()", () => {
     }
   );
 
-  test.each`
-    unimplementedStyle
-    ${ImageStyleType.HEADSHOT_HEX}
-  `(
-    "defaults to available image style if requested image style is not implemented",
-    ({ unimplementedStyle }: { unimplementedStyle: ImageStyleType }) => {
-      jest
-        .mocked(createStandardAvatarSVG)
-        .mockReturnValue(document.createElementNS(SVGNS, "svg"));
-      const avatarDataState: Partial<AvatarDataState> = {
-        type: DataStateType.LOADED,
-      };
-      const controlsState = signal<ControlsState>(undefined);
-      const svgStateSignal = _createAvatarSvgState({
-        avatarDataState: signal(avatarDataState as AvatarDataState),
-        controlsState,
-      });
-      controlsState.value = { imageStyle: unimplementedStyle };
-      expect(svgStateSignal.value).toBe(
-        '<svg xmlns="http://www.w3.org/2000/svg"/>'
-      );
-      expect(createStandardAvatarSVG).toHaveBeenCalledTimes(1);
-    }
-  );
-
   test("defaults to available image style if NFT style is requested with non-NFT calendar", () => {
     jest
       .mocked(createStandardAvatarSVG)
@@ -313,6 +289,7 @@ describe("_createAvatarSvgStateSignal()", () => {
     ${ImageStyleType.STANDARD}        | ${createStandardAvatarSVG}
     ${ImageStyleType.NFT_CARD}        | ${createNFTCardAvatarSVG}
     ${ImageStyleType.HEADSHOT_CIRCLE} | ${createHeadshotCircleAvatarSVG}
+    ${ImageStyleType.HEADSHOT_HEX}    | ${createHeadshotCommentsAvatarSVG}
   `(
     "handles failure to generate styled SVG variant",
     ({
@@ -346,6 +323,7 @@ describe("_createAvatarSvgStateSignal()", () => {
     ${ImageStyleType.NO_BG}           | ${undefined}
     ${ImageStyleType.NFT_CARD}        | ${createNFTCardAvatarSVG}
     ${ImageStyleType.HEADSHOT_CIRCLE} | ${createHeadshotCircleAvatarSVG}
+    ${ImageStyleType.HEADSHOT_HEX}    | ${createHeadshotCommentsAvatarSVG}
   `(
     "generates SVG",
     ({
@@ -685,26 +663,12 @@ describe("<Controls>", () => {
     expect(button).not.toBeDisabled();
     fireEvent.click(button);
     expect(controlsState.value.imageStyle).toBe(ImageStyleType.HEADSHOT_CIRCLE);
-  });
 
-  test("Some options are disabled", async () => {
-    const {
-      state: { avatarDataState, controlsState },
-      renderWithStateContext,
-    } = statefulElementRenderer(<Controls />);
-
-    avatarDataState.value = {
-      type: DataStateType.LOADED,
-      avatar: { nftInfo: {} },
-    } as unknown as AvatarDataState;
-    controlsState.value = { imageStyle: ImageStyleType.STANDARD };
-    renderWithStateContext();
-
-    const button = await screen.findByLabelText("Comment thread headshot", {
+    button = await screen.findByLabelText("Comment Headshot", {
       exact: false,
     });
-    expect(button).toBeDisabled();
+    expect(button).not.toBeDisabled();
     fireEvent.click(button);
-    expect(controlsState.value.imageStyle).toBe(ImageStyleType.STANDARD);
+    expect(controlsState.value.imageStyle).toBe(ImageStyleType.HEADSHOT_HEX);
   });
 });
diff --git a/src/popup.tsx b/src/popup.tsx
@@ -23,6 +23,7 @@ import {
   NFTCardVariant,
   composeAvatarSVG,
   createHeadshotCircleAvatarSVG,
+  createHeadshotCommentsAvatarSVG,
   createNFTCardAvatarSVG,
   createStandardAvatarSVG,
 } from "./svg";
@@ -436,10 +437,8 @@ export function Controls() {
         />
         <ImageStyleOption
           name={ImageStyleType.HEADSHOT_HEX}
-          title="Comment thread headshot"
+          title="Comment Headshot"
           description="The upper half in a hexagon."
-          disabled={true}
-          disabledReason="Not available yet 🫤"
         />
 
         {/* TODO: decide what we're doing with exposing avatar data... */}
@@ -511,6 +510,7 @@ const IMAGE_STYLE_NAMES: Map<ImageStyleType, string> = new Map([
   [ImageStyleType.NFT_CARD, "NFT Card"],
   [ImageStyleType.NO_BG, "No Background"],
   [ImageStyleType.HEADSHOT_CIRCLE, "UI Headshot"],
+  [ImageStyleType.HEADSHOT_HEX, "Comment Headshot"],
 ]);
 
 export function DownloadSVGButton(): JSX.Element {
@@ -805,10 +805,7 @@ export function _getPermittedImageStyle({
   requestedImageStyle: ImageStyleType;
   avatarData: AvatarDataState;
 }): ImageStyleType {
-  if (requestedImageStyle === ImageStyleType.HEADSHOT_HEX) {
-    // This isn't implemented yet
-    return ImageStyleType.STANDARD;
-  } else if (
+  if (
     requestedImageStyle === ImageStyleType.NFT_CARD &&
     avatarData.type === DataStateType.LOADED &&
     !avatarData.avatar.nftInfo
@@ -852,6 +849,8 @@ export function _createAvatarSvgState({
         svg = composedAvatar;
       } else if (imageStyle === ImageStyleType.HEADSHOT_CIRCLE) {
         svg = createHeadshotCircleAvatarSVG({ composedAvatar });
+      } else if (imageStyle === ImageStyleType.HEADSHOT_HEX) {
+        svg = createHeadshotCommentsAvatarSVG({ composedAvatar });
       } else {
         svg = createStandardAvatarSVG({ composedAvatar });
       }