test clientavatar

Author: Kerry Archibald

frontend/src/components/Session/ClientAvatar.test.tsx

@@ -0,0 +1,40 @@
+// Copyright 2023 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// @vitest-environment happy-dom
+
+import { render, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
+
+import ClientAvatar from "./ClientAvatar";
+
+describe("<ClientAvatar />", () => {
+  const name = "Test Client";
+  const logoUri = "https://www.testclient.com/logo.png";
+  const size = "10px";
+
+  afterEach(cleanup);
+
+  it("renders client logo", () => {
+    const { container } = render(
+      <ClientAvatar name={name} logoUri={logoUri} size={size} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders nothing when no logoUri is falsy", () => {
+    const { container } = render(<ClientAvatar name={name} size={size} />);
+    expect(container).toMatchInlineSnapshot("<div />");
+  });
+});

frontend/src/components/Session/ClientAvatar.tsx

@@ -12,22 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Avatar } from "@vector-im/compound-web";
 import { CSSProperties } from "react";
 
 import styles from "./ClientAvatar.module.css";
 
+/**
+ * Render a client logo avatar when logoUri is truthy
+ * Otherwise return null
+ */
 const ClientAvatar: React.FC<{
   name: string;
   logoUri?: string;
-  /**
-   * Render a fallback avatar using client name when truthy
-   * Otherwise return null when no logoUri
-   */
-  withFallback?: boolean;
   size: string;
-}> = ({ name, logoUri, withFallback, size }) => {
+}> = ({ name, logoUri, size }) => {
   // compound's lazy loading for avatars does not allow CORS requests
+  // so use our own avatar styled img
   if (logoUri) {
     return (
       <img
@@ -42,9 +41,6 @@ const ClientAvatar: React.FC<{
       />
     );
   }
-  if (withFallback) {
-    return <Avatar size={size} id={name} name={name} src={logoUri} />;
-  }
   return null;
 };
 

frontend/src/components/Session/__snapshots__/ClientAvatar.test.tsx.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ClientAvatar /> > renders client logo 1`] = `
+<div>
+  <img
+    alt="Test Client"
+    class="_avatar_39aee3"
+    src="https://www.testclient.com/logo.png"
+    style="--mas-avatar-size: 10px;"
+  />
+</div>
+`;