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,12 +61,8 @@ class MockCatalogEntity extends CatalogEntity {
   constructor(data: CatalogEntityData, public onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
     super(data);
   }
-
-  public onContextMenuOpen(): void | Promise<void> {}
-  public onSettingsOpen(): void | Promise<void> {}
 }
 
-describe("<Catalog />", () => {
 function createMockCatalogEntity(onRun: (context: CatalogEntityActionContext) => void | Promise<void>) {
   return new MockCatalogEntity({
     metadata: {
@@ -83,6 +79,7 @@ describe("<Catalog />", () => {
   }, onRun);
 }
 
+describe("<Catalog />", () => {
   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,25 +62,21 @@ 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,
-        <img
+  imgProps,
-          src={src}
+  src,
-          {...imgProps}
+  className,
-          alt={title}
+  disabled,
-        />
+  id,
-      );
+  onClick,
-    }
+  "data-testid": dataTestId,
-
+}: AvatarProps) => (
-    return children || getLabelFromTitle(title);
-  };
-
-  return (
   <div
     className={cssNames(styles.Avatar, {
       [styles.circle]: variant == "circle",
@@ -89,12 +86,24 @@ export function Avatar(props: AvatarProps) {
     style={{
       width: `${size}px`,
       height: `${size}px`,
-        background: background || (src ? "transparent" : colorFromHash),
+      background: background || (
+        src
+          ? "transparent"
+          : randomColor({ seed: colorHash, luminosity: "dark" })
+      ),
     }}
     id={id}
     onClick={onClick}
+    data-testid={dataTestId}
   >
-      {renderContents()}
+    {src
+      ? (
+        <img
+          src={src}
+          {...imgProps}
+          alt={title}
+        />
+      )
+      : children || getLabelFromTitle(title)}
   </div>
 );
-}