@momentum-ui/web-components 2.14.11 → 2.14.13

package/src/components/meeting-alert/MeetingAlert.mdx

@@ -0,0 +1,187 @@
+import { Meta, Props, Story } from "@storybook/addon-docs";
+import { MeetingAlert } from "./MeetingAlert.ts";
+
+# Meeting Alert
+
+The `<md-meeting-alert/>` component
+
+### Attributes
+
+- `closeAriaLabel` : String - accessibility text that labels the close button in the meeting alert when there is visible text on screen.
+- `snoozeAriaLabel` : String - accessibility text that labels the close button in the meeting alert when there is visible text on screen.
+
+- `attendees` : Array - attendees story is limited, the array() only accepts and array of strings wheras the property expects and array of objects.
+- `message` : String - renders text to be displayed as message in the `<md-meeting-alert></md-meeting-alert>`.
+- `role` : String - depicts the type of role to be passed to the div. Eg: `meeting-alert`, `alert`, `alertdialog`, `button` etc.
+
+- `show` : Boolean - value to show/hide the meeting-alert
+- `src` : String - depicts the url of the src to be shown in the `<md-meeting-alert></md-meeting-alert>`.
+- `status` : String - renders text to be displayed as title in the `<md-meeting-alert></md-meeting-alert>`.
+- `userStyles` : String - depicts the css to be applied to `<md-meeting-alert></md-meeting-alert>` in string format.
+
+- `title` : String - renders text to be displayed as title in the `<md-meeting-alert></md-meeting-alert>`.
+- `onKeyDown` : Function - function which receives an event on keyboard navigation and can be bound to `handleKeyDown`.
+- `onSnooze` : Function - function which receives an event on snooze and can be bound to `handleSnooze`.
+
+- `handleSnooze` : Function - sets the function for snooze of the `<md-meeting-alert></md-meeting-alert>`.
+- `handleClose` : Function - sets the function for snooze for `<md-meeting-alert></md-meeting-alert>` close.
+- `handleKeyDown` : Function - sets the function for keyboard navigation for `<md-meeting-alert></md-meeting-alert>`.
+
+### Styling
+
+The wrapping container of the meeting-alert can be reached via CSS by using the `userStyles` attribute in the `<md-meeting-alert></md-meeting-alert>` tags. For example, in your application's stylesheet you can say:
+
+```html
+<md-meeting-alert
+  .show="${show}"
+  .status="${status}"
+  .title="${title}"
+  userStyles=":host .md-alert { background: red; color: white }"
+>
+  <span slot="custom-avatar">
+    <img width="40" src="${src}" />
+  </span>
+</md-meeting-alert>
+```
+
+### A simple usage of `<md-meeting-alert></md-meeting-alert>` with toggle using attribute.
+
+```js
+let isMeetingAlertOpenAttr = false;
+function toggleMeetingAlertAttr() {
+  const meetingAlert = querySelectorDeep("#triggered-meeting-alert");
+  isMeetingAlertOpenAttr = !isMeetingAlertOpenAttr;
+  isMeetingAlertOpenAttr && meetingAlert?.setAttribute("show", "");
+  !isMeetingAlertOpenAttr && meetingAlert?.removeAttribute("show");
+}
+```
+
+```html
+<md-button value="value" @click=${toggleMeetingAlertAttr}>toggle meeting alert using attribute</md-button>
+<md-meeting-alert
+    id="triggered-meeting-alert"
+    status="Queue_Demo7"
+    title="Attribute Trigger"
+    .onKeyDown=${() => console.log("passed onKeyDown Func")}
+>
+</md-meeting-alert>
+```
+
+
+### A simple usage of `<md-meeting-alert></md-meeting-alert>` with toggle using property.
+
+```js
+let isMeetingAlertOpenProp = false;
+function toggleMeetingAlertProp() {
+  const meetingAlertProp = querySelectorDeep("#triggered-meeting-alert-prop");
+  isMeetingAlertOpenProp = !isMeetingAlertOpenProp;
+  meetingAlertProp.show = isMeetingAlertOpenProp;
+}
+```
+
+```html
+<md-button @click=${toggleMeetingAlertProp}>toggle meeting alert using property</md-button>
+<md-meeting-alert
+  id="triggered-meeting-alert"
+  status="Queue_Demo7"
+  title="Attribute Trigger"
+  .onKeyDown=${() => console.log("passed onKeyDown Func")}
+  .onSnooze=${() => console.log("passed onSnooze Func")}
+  .show=${isMeetingAlertOpenProp}
+>
+</md-meeting-alert>
+```
+
+### `<md-meeting-alert></md-meeting-alert>` with attendees
+
+An array of objects to be passed to attendees property. If more than 2 attendees, composite avatar to be displayed on the `<md-meeting-alert/>`.
+
+```html
+<md-meeting-alert
+    .attendees=${[
+      { title: "J $", src: null, alt: "J $" },
+      { title: "Jefe Guadelupe", src: null, alt: "Jefe Guadelupe" }
+    ]}
+    show
+    status="Queue_Demo7"
+    title="Jane Doe"
+  >
+    <md-button ariaLabel="Action" circle size=${44} role="button">
+      <md-icon name="alarm-bold" size="16" iconSet="momentumDesign"></md-icon>
+    </md-button>
+  </md-meeting-alert>
+```
+
+### Meeting Alert Image Through Src
+
+Any src can be passed to the meeting alert using the 'src' attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
+
+```html
+<md-meeting-alert
+  show
+  status="Queue_Demo7"
+  title="John Doe"
+  .onKeyDown=${() => console.log("passed onKeyDown Func")}
+  src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+>
+</md-meeting-alert>
+```
+
+### Unnamed Slots
+
+#### Meeting Alert Action through Slot
+
+Any action can be passed through `slot` in meeting alert by enclosing the element with the `slot` attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
+
+```html
+<md-meeting-alert show status="Queue_Demo7" title="Jane Doe">
+    <md-button
+      slot="custom-action"
+      ariaLabel="Action"
+      circle
+      @click=${(e: Event) => {
+        console.log("Custom action passed via slot");
+        e.stopPropagation();
+      }}
+      size=${44}
+      role="button"
+    >
+      <md-icon name="alarm-bold" size="16" iconSet="momentumDesign"></md-icon>
+    </md-button>
+</md-meeting-alert>
+```
+
+#### Meeting Alert Image through Slot
+
+Any image can be passed through `slot` in meeting alert by enclosing the element with the `slot` attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
+
+```html
+<md-meeting-alert
+  show
+  status="Queue_Demo7"
+  title="Jane Doe"
+  userStyles=":host .md-alert { background: red; color: white }"
+>
+  <span slot="custom-avatar">
+    <img
+      width="40"
+      src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+    />
+  </span>
+</md-meeting-alert>
+```
+
+#### Meeting Alert Svg through Slot
+
+Any svg can be passed through `slot` in meeting alert by enclosing the `<img/>` element with `src` attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
+
+```html
+import svgWhatsapp from "@img/whatsapp.svg";
+<md-meeting-alert .show="${show}" .status="${status}" .title="${title}">
+  <span slot="custom-avatar">
+    <img width="40'" height="40'" src="${svgWhatsapp}" />
+  </span>
+</md-meeting-alert>
+```
+
+<Props of={"md-meeting-alert"} />

package/src/components/meeting-alert/MeetingAlert.stories.ts

@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/meeting-alert/MeetingAlert";
+import { ThemeNameValues } from "@/components/theme/Theme";
+import { action } from "@storybook/addon-actions";
+import { Args, StoryObj } from "@storybook/web-components";
+import { html } from "lit-element";
+import { MeetingAlertRole } from "./MeetingAlert"; // Keep type import as a relative path
+import mdx from "./MeetingAlert.mdx";
+
+const MEETING_ALERT_SRC = "https://api.adorable.io/avatars/285/abott@adorable.png";
+const defaultAttendee = [
+  `{title: 'J $', src:${MEETING_ALERT_SRC}, alt:'Alt Text'}`,
+  `{title: 'Jefe Guadelupe', src:${MEETING_ALERT_SRC}, alt:'Alt Text'}`
+];
+
+export default {
+  title: "Components/Meeting Alerts",
+  component: "md-meeting-alert",
+  argTypes: {
+    attendees: {
+      control: { type: "array" },
+      description:
+        "Attendees story is limited, the array() only accepts and array of strings where as the property expects an array of objects",
+      defaultValue: defaultAttendee
+    },
+    snoozeAriaLabel: { table: { disable: true } },
+    onKeyDown: { table: { disable: true } },
+    onSnooze: { table: { disable: true } },
+    handleSnooze: { table: { disable: true } },
+    handleClose: { table: { disable: true } },
+    handleKeyDown: { table: { disable: true } },
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean", defaultValue: false },
+    show: { control: "boolean", defaultValue: true },
+    closeAriaLabel: { control: "text", defaultValue: "Webex Teams aria label" },
+    remindAriaLabel: { control: "text", defaultValue: "Webex Teams Remind" },
+    message: { control: "text", defaultValue: "Webex Teams Message" },
+    status: { control: "text", defaultValue: "Webex Teams Status" },
+    title: { control: "text", defaultValue: "Webex Teams Title" },
+    role: { control: { type: "select", options: MeetingAlertRole }, defaultValue: "alert" },
+    userStyles: { control: "text", defaultValue: " " },
+    withAttendees: { control: "boolean", defaultValue: false }
+  },
+  parameters: {
+    a11y: {
+      element: "md-meeting-alert"
+    },
+    docs: {
+      page: mdx,
+      description: {
+        component: "A typical usage of Meeting Alert, with different variations as individual stories"
+      }
+    }
+  }
+};
+
+export const MeetingAlert: StoryObj = {
+  args: {
+    src: "https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+  },
+  render: (args: Args) => {
+    if (args.withAttendees) {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      return html`
+        <md-theme class="theme-toggle" id="meeting-alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+          <md-meeting-alert
+            show
+            .attendees=${args.attendees}
+            status="Queue_Demo7"
+            title="Jane Doe"
+            src=${MEETING_ALERT_SRC}
+            @close=${action("click")}
+          >
+          </md-meeting-alert>
+        </md-theme>
+      `;
+    } else {
+      return html`
+        <md-theme class="theme-toggle" id="meeting-alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+          <md-meeting-alert
+            .show=${args.show}
+            .closeAriaLabel=${args.closeAriaLabel}
+            .snoozeAriaLabel=${args.remindAriaLabel}
+            .message=${args.message}
+            .status="${args.status}"
+            .role="${args.role}"
+            .title="${args.title}"
+            src=${args.src}
+            .userStyles=${args.userStyles}
+            @close=${action("click")}
+            @snooze=${action("snooze")}
+          ></md-meeting-alert>
+        </md-theme>
+      `;
+    }
+  }
+};
+
+export const MeetingAlertActionThroughSlot: StoryObj = {
+  args: {
+    show: true,
+    status: "Webex Teams Status",
+    title: "Webex Teams Title"
+  },
+  render: (args: Args) => {
+    return html`
+      <md-theme class="theme-toggle" id="meeting-alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+        <h3>md-meeting-alert action through slot</h3>
+        <md-meeting-alert .show=${args.show} .status="${args.status}" .title="${args.title}">
+          <md-button
+            slot="custom-action"
+            ariaLabel="Action"
+            circle
+            @click=${(e: Event) => {
+              console.log("Custom action passed via slot");
+              e.stopPropagation();
+            }}
+            size=${44}
+            role="button"
+          >
+            <md-icon name="icon-alarm_16"></md-icon>
+          </md-button>
+        </md-meeting-alert>
+      </md-theme>
+    `;
+  }
+};
+
+export const MeetingAlertImageThroughSlot: StoryObj = {
+  args: {
+    show: true,
+    src: "https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg",
+    status: "Webex Teams Status",
+    title: "Webex Teams Title"
+  },
+  render: (args: Args) => {
+    return html`
+      <md-theme class="theme-toggle" id="meeting-alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+        <h3>md-meeting-alert image through slot</h3>
+        <md-meeting-alert
+          .show=${args.show}
+          .status="${args.status}"
+          .title="${args.title}"
+          userStyles=":host .md-alert { background: red; color: white }"
+        >
+          <span slot="custom-avatar">
+            <img width="40" src=${args.src} />
+          </span>
+        </md-meeting-alert>
+      </md-theme>
+    `;
+  }
+};
+
+export const MeetingAlertSrcThroughSlot: StoryObj = {
+  args: {
+    show: true,
+    src: "https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+  },
+  render: (args: Args) => {
+    return html`
+      <md-theme class="theme-toggle" id="meeting-alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+        <h3>md-meeting-alert src through slot</h3>
+        <md-meeting-alert .show=${args.show} .status="${args.status}" .title="${args.title}">
+          <span slot="custom-avatar">
+            <img width="40'" height="40'" src=${args.src} />
+          </span>
+        </md-meeting-alert>
+      </md-theme>
+    `;
+  }
+};
+
+export const MeetingAlertThroughSrc: StoryObj = {
+  render: (args: Args) => {
+    return html`
+      <md-theme class="theme-toggle" id="meeting-alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+        <h3>md-meeting-alert image through src</h3>
+        <md-meeting-alert
+          .show=${args.show}
+          .status="${args.status}"
+          .title="${args.title}"
+          .onKeyDown=${() => console.log("passed onKeyDown Func")}
+          src=${args.src}
+        >
+        </md-meeting-alert>
+      </md-theme>
+    `;
+  }
+};

package/src/components/meeting-alert/MeetingAlert.test.ts

@@ -0,0 +1,227 @@
+import { Key } from "@/constants";
+import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./MeetingAlert";
+import { MeetingAlert } from "./MeetingAlert";
+
+describe("MeetingAlert", () => {
+  afterEach(fixtureCleanup);
+
+  test("Meeting-Alert component is not null", async () => {
+    const ma = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(ma).not.toBeNull;
+  });
+
+  test("should render one MeetingAlert", async () => {
+    const el = await fixture(html` <md-meeting-alert title="Test Name"></md-meeting-alert> `);
+    expect(el).not.toBeNull;
+  });
+
+  test("should handle default className prop", async () => {
+    const container = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(container.className).toEqual("");
+  });
+
+  test("should handle role prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html` <md-meeting-alert role="button"></md-meeting-alert> `);
+    expect(el.getAttribute("role")).toEqual("button");
+  });
+
+  test("should handle default role prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(el.getAttribute("role")).toBeNull();
+  });
+
+  test("should handle message prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html`
+      <md-meeting-alert message="Test message"></md-meeting-alert>
+    `);
+    expect(el.getAttribute("message")).toEqual("Test message");
+  });
+
+  test("should handle default message prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(el.getAttribute("message")).toBeNull();
+  });
+
+  test("should handle status prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html` <md-meeting-alert status="Test status"></md-meeting-alert> `);
+    expect(el.getAttribute("status")).toEqual("Test status");
+  });
+
+  test("should handle title prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html` <md-meeting-alert title="Test title"></md-meeting-alert> `);
+    expect(el.getAttribute("title")).toEqual("Test title");
+  });
+
+  test("should dispatch 'snooze' event on _onSnooze call", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const snoozeEventSpy = jest.fn();
+    el.addEventListener("snooze", snoozeEventSpy);
+    const event = new Event("test");
+    el._onSnooze(event);
+    expect(snoozeEventSpy).toHaveBeenCalled();
+    expect(snoozeEventSpy.mock.calls[0][0].detail.srcEvent).toBe(event);
+  });
+
+  test("handleKeyDown should call handleClose on Escape key press", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const handleCloseSpy = jest.spyOn(el, "handleClose");
+    const keyboardEvent = new KeyboardEvent("keydown", { code: "Escape" });
+    el.handleKeyDown(keyboardEvent);
+    expect(handleCloseSpy).toHaveBeenCalledWith(keyboardEvent);
+  });
+
+  test("handleKeyDown should call handleClose when 'close' button is pressed with Enter key", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const handleCloseSpy = jest.spyOn(el, "handleClose");
+    const button = document.createElement("button");
+    button.setAttribute("aria-label", "close");
+    const keyboardEvent = new KeyboardEvent("keydown", { code: "Enter" });
+    Object.defineProperty(keyboardEvent, "target", { value: button });
+    el.handleKeyDown(keyboardEvent);
+    expect(handleCloseSpy).toHaveBeenCalledWith(keyboardEvent);
+  });
+
+  test("handleKeyDown should call handleClose when 'close' button is pressed with Space key", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const handleCloseSpy = jest.spyOn(el, "handleClose");
+    const button = document.createElement("button");
+    button.setAttribute("aria-label", "close");
+    const keyboardEvent = new KeyboardEvent("keydown", { code: "Space" });
+    Object.defineProperty(keyboardEvent, "target", { value: button });
+    el.handleKeyDown(keyboardEvent);
+    expect(handleCloseSpy).toHaveBeenCalledWith(keyboardEvent);
+  });
+
+  describe("Should Handle Events", () => {
+    afterEach(() => {
+      fixtureCleanup();
+      jest.restoreAllMocks();
+    });
+
+    const mockEvent = jest.fn();
+    test("Should trigger a passed Snooze event", async () => {
+      const element: MeetingAlert.ELEMENT = await fixture(html`
+        <md-meeting-alert show .onSnooze=${mockEvent}> </md-meeting-alert>
+      `);
+      const spyClick = jest.spyOn(element, "handleSnooze");
+      const snoozeElement = await element.shadowRoot!.querySelector("md-button[aria-label='snooze']");
+      snoozeElement!.dispatchEvent(new MouseEvent("click"));
+      // TODO: Fix KeyDown event tests that fire on md-button elements, and test for expect(spyClick).toHaveBeenCalledTimes(2);
+      // snoozeElement?.dispatchEvent(
+      //   new KeyboardEvent("keydown", {
+      //     code: Key.Enter
+      //   })
+      // );
+      expect(spyClick).toHaveBeenCalledTimes(1);
+    });
+
+    describe("Should handle KeyDown events", () => {
+      test("Should trigger a passed Keydown event", async () => {
+        const element: MeetingAlert.ELEMENT = await fixture(html`
+          <md-meeting-alert show .onKeyDown=${mockEvent}> </md-meeting-alert>
+        `);
+        const spyKeyDown = jest.spyOn(element, "handleKeyDown");
+        const meetingAlert = element.shadowRoot!.querySelector("div");
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Enter
+          })
+        );
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Space
+          })
+        );
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Escape
+          })
+        );
+        expect(spyKeyDown).toHaveBeenCalledTimes(3);
+      });
+      test("Should handleClose when escape key is pressed", async () => {
+        const element: MeetingAlert.ELEMENT = await fixture(html`
+          <md-meeting-alert
+            show
+            status="Queue_Demo7"
+            title="John Doe"
+            src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+          >
+          </md-meeting-alert>
+        `);
+        const spyKeyDown = jest.spyOn(element, "handleKeyDown");
+        const spyClose = jest.spyOn(element, "handleClose");
+        const meetingAlert = await element.shadowRoot!.querySelector("div");
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Escape
+          })
+        );
+        expect(spyKeyDown).toHaveBeenCalledTimes(1);
+        expect(spyClose).toHaveBeenCalledTimes(1);
+      });
+      // TODO: Fix KeyDown event tests that fire on md-button elements
+      // test("Should handleClose when close button is activated with keydown", async () => {
+      //   const element: MeetingAlert = await fixture(
+      //     html`
+      //       <md-meeting-alert
+      //         show
+      //         status="Queue_Demo7"
+      //         title="John Doe"
+      //         src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+      //       >
+      //       </md-meeting-alert>
+      //     `
+      //   );
+      //   const spyKeyDown = jest.spyOn(element, "handleKeyDown");
+      //   const spyClose = jest.spyOn(element, "handleClose");
+      //   const closeButton = await element.shadowRoot!.querySelector("md-button[ariaLabel='close']");
+      //   closeButton!.dispatchEvent(
+      //     new KeyboardEvent("keydown", {
+      //       code: Key.Enter
+      //     })
+      //   );
+      //   closeButton!.dispatchEvent(
+      //     new KeyboardEvent("keydown", {
+      //       code: Key.Space,
+      //     })
+      //   );
+      //   expect(spyKeyDown).toHaveBeenCalledTimes(2);
+      //   expect(spyClose).toHaveBeenCalledTimes(2);
+      // });
+      test("Should handle custom key event", async () => {
+        const el: MeetingAlert.ELEMENT = await fixture(html`
+          <md-meeting-alert title="Test title"></md-meeting-alert>
+        `);
+        expect(el.getAttribute("title")).toEqual("Test title");
+      });
+    });
+  });
+
+  describe("Should render correct Avatar", () => {
+    test("Should render a single Avatar", async () => {
+      const element: MeetingAlert.ELEMENT = await fixture(html`
+        <md-meeting-alert show status="Queue_Demo7" title="Jane Doe"> </md-meeting-alert>
+      `);
+
+      expect(element.shadowRoot!.querySelectorAll("md-avatar").length).toBe(1);
+    });
+    test("Should render a Composite Avatar when 2 or more attendees are provided", async () => {
+      const element: MeetingAlert.ELEMENT = await fixture(html`
+        <md-meeting-alert
+          .attendees=${[
+            { title: "J $", src: null, alt: "J $" },
+            { title: "Jefe Guadelupe", src: null, alt: "Jefe Guadelupe" }
+          ]}
+          show
+          status="Queue_Demo7"
+          title="Jane Doe"
+        >
+        </md-meeting-alert>
+      `);
+
+      expect(element.shadowRoot!.querySelectorAll(".md-composite-avatar").length).toBe(1);
+    });
+  });
+});