@momentum-ui/web-components 2.14.13 → 2.14.14

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

@@ -1,187 +0,0 @@
-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

@@ -1,197 +0,0 @@
-/**
- * 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

@@ -1,227 +0,0 @@
-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);
-    });
-  });
-});