fix catalog.test.tsx

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+catalog/catalog-previous-active-tab-storage/catalog-previous-active-tab-storage.injectable.ts

@@ -12,7 +12,7 @@ const catalogPreviousActiveTabStorageInjectable = getInjectable({
   instantiate: (di) => {
     const createStorage = di.inject(createStorageInjectable);
 
-    return createStorage(
+    return createStorage<string | null>(
       "catalog-previous-active-tab",
       browseCatalogTab,
     );

src/renderer/components/+catalog/catalog.test.tsx

@@ -61,28 +61,25 @@ class MockCatalogEntity extends CatalogEntity {
   constructor(data: CatalogEntityData, public onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
     super(data);
   }
+}
 
-  public onContextMenuOpen(): void | Promise<void> {}
+function createMockCatalogEntity(onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
-  public onSettingsOpen(): void | Promise<void> {}
+  return new MockCatalogEntity({
+    metadata: {
+      uid: "a_catalogEntity_uid",
+      name: "a catalog entity",
+      labels: {
+        test: "label",
+      },
+    },
+    status: {
+      phase: "",
+    },
+    spec: {},
+  }, onRun);
 }
 
 describe("<Catalog />", () => {
-  function createMockCatalogEntity(onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
-    return new MockCatalogEntity({
-      metadata: {
-        uid: "a_catalogEntity_uid",
-        name: "a catalog entity",
-        labels: {
-          test: "label",
-        },
-      },
-      status: {
-        phase: "",
-      },
-      spec: {},
-    }, onRun);
-  }
-
   let di: DiContainer;
   let catalogEntityStore: CatalogEntityStore;
   let catalogEntityRegistry: CatalogEntityRegistry;
@@ -95,14 +92,12 @@ describe("<Catalog />", () => {
     di = getDiForUnitTesting({ doGeneralOverrides: true });
 
     di.override(directoryForUserDataInjectable, () => "some-directory-for-user-data");
-
     di.permitSideEffects(getConfigurationFileModelInjectable);
     di.permitSideEffects(appVersionInjectable);
 
     await di.runSetups();
 
     mockFs();
-
     UserStore.createInstance();
     ThemeStore.createInstance();
     CatalogEntityDetailRegistry.createInstance();
@@ -133,7 +128,6 @@ describe("<Catalog />", () => {
     UserStore.resetInstance();
     ThemeStore.resetInstance();
     CatalogEntityDetailRegistry.resetInstance();
-
     jest.clearAllMocks();
     jest.restoreAllMocks();
     mockFs.restore();
@@ -152,9 +146,7 @@ describe("<Catalog />", () => {
       },
     );
 
-    render(
+    render(<Catalog />);
-      <Catalog />,
-    );
 
     userEvent.click(screen.getByTestId("detail-panel-hot-bar-icon"));
   });

src/renderer/components/+catalog/catalog.tsx

@@ -19,6 +19,7 @@ import type { CatalogCategory, CatalogCategoryRegistry, CatalogEntity } from "..
 import { CatalogAddButton } from "./catalog-add-button";
 import { Notifications } from "../notifications";
 import { MainLayout } from "../layout/main-layout";
+import type { StorageLayer } from "../../utils";
 import { prevDefault } from "../../utils";
 import { CatalogEntityDetails } from "./catalog-entity-details";
 import { CatalogMenu } from "./catalog-menu";
@@ -47,7 +48,7 @@ import catalogCategoryRegistryInjectable from "../../../common/catalog/category-
 import onContextMenuOpenInjectable from "../../../common/catalog/on-context-menu-open.injectable";
 
 interface Dependencies {
-  catalogPreviousActiveTabStorage: { set: (value: string ) => void; get: () => string };
+  catalogPreviousActiveTabStorage: StorageLayer<string | null>;
   catalogEntityStore: CatalogEntityStore;
   getCategoryColumns: (params: GetCategoryColumnsParams) => CategoryColumns;
   customCategoryViews: IComputedValue<Map<string, Map<string, RegisteredCustomCategoryViewDecl>>>;

src/renderer/components/avatar/avatar.tsx

@@ -25,6 +25,7 @@ export interface AvatarProps {
   className?: string;
   id?: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
+  "data-testid"?: string;
 }
 
 function getNameParts(name: string): string[] {
@@ -61,40 +62,48 @@ function getLabelFromTitle(title: string) {
   ].filter(isDefined).join("");
 }
 
-export function Avatar(props: AvatarProps) {
+export const Avatar = ({
-  const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, disabled, id, onClick } = props;
+  title,
-  const colorFromHash = randomColor({ seed: colorHash, luminosity: "dark" });
+  variant = "rounded",
-
+  size = 32,
-  const renderContents = () => {
+  colorHash,
-    if (src) {
+  children,
-      return (
+  background,
+  imgProps,
+  src,
+  className,
+  disabled,
+  id,
+  onClick,
+  "data-testid": dataTestId,
+}: AvatarProps) => (
+  <div
+    className={cssNames(styles.Avatar, {
+      [styles.circle]: variant == "circle",
+      [styles.rounded]: variant == "rounded",
+      [styles.disabled]: disabled,
+    }, className)}
+    style={{
+      width: `${size}px`,
+      height: `${size}px`,
+      background: background || (
+        src
+          ? "transparent"
+          : randomColor({ seed: colorHash, luminosity: "dark" })
+      ),
+    }}
+    id={id}
+    onClick={onClick}
+    data-testid={dataTestId}
+  >
+    {src
+      ? (
         <img
           src={src}
           {...imgProps}
           alt={title}
         />
-      );
+      )
-    }
+      : children || getLabelFromTitle(title)}
-
+  </div>
-    return children || getLabelFromTitle(title);
+);
-  };
-
-  return (
-    <div
-      className={cssNames(styles.Avatar, {
-        [styles.circle]: variant == "circle",
-        [styles.rounded]: variant == "rounded",
-        [styles.disabled]: disabled,
-      }, className)}
-      style={{
-        width: `${size}px`,
-        height: `${size}px`,
-        background: background || (src ? "transparent" : colorFromHash),
-      }}
-      id={id}
-      onClick={onClick}
-    >
-      {renderContents()}
-    </div>
-  );
-}