element-web-Github/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<RoomSummaryCard /> has button to edit topic when expanded 1`] = `
<div>
  <div
    class="mx_BaseCard mx_RoomSummaryCard"
  >
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <header
        class="mx_Flex mx_RoomSummaryCard_header"
        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
      >
        <button
          aria-label="Search"
          class="mx_RoomSummaryCard_searchBtn"
          data-testid="summary-search"
        >
          <div
            height="100%"
            width="100%"
          />
        </button>
        <div
          aria-label="Close"
          class="mx_AccessibleButton mx_BaseCard_close"
          data-testid="base-card-close-button"
          role="button"
          tabindex="0"
        />
      </header>
      <header
        class="mx_RoomSummaryCard_container"
      >
        <span
          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
          data-color="1"
          data-testid="avatar-img"
          data-type="round"
          role="presentation"
          style="--cpd-avatar-size: 80px;"
        >
          !
        </span>
        <h1
          class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121 mx_RoomSummaryCard_roomName text-primary"
          title="!room:domain.org"
        >
          !room:domain.org
        </h1>
        <div
          class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_RoomSummaryCard_alias text-secondary"
          title=""
        />
        <section
          class="mx_Flex mx_RoomSummaryCard_badges"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
        >
          <span
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
            data-kind="default"
          >
            <div
              width="1em"
            />
            Not encrypted
          </span>
        </section>
        <section
          class="mx_Flex mx_RoomSummaryCard_topic"
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
        >
          <div
            class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
            style="--mx-box-flex: 1;"
          >
            <p
              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
            >
              <span
                dir="auto"
              >
                This is the room's topic.
              </span>
            </p>
            <button
              class="_icon-button_16nk7_17 mx_RoomSummaryCard_topic_chevron"
              role="button"
              style="--cpd-icon-button-size: 24px;"
              tabindex="0"
            >
              <div
                class="_indicator-icon_133tf_26"
                style="--cpd-icon-button-size: 100%;"
              >
                <div />
              </div>
            </button>
          </div>
          <div
            class="mx_Box mx_RoomSummaryCard_topic_edit mx_Box--flex"
            style="--mx-box-flex: 1;"
          >
            <a
              class="_link_1mzip_17"
              data-kind="primary"
              rel="noreferrer noopener"
            >
              <p
                class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
              >
                Edit
              </p>
            </a>
          </div>
        </section>
      </header>
      <div
        class="_separator_144s5_17"
        data-kind="primary"
        data-orientation="horizontal"
        role="separator"
      />
      <div
        aria-orientation="vertical"
        role="menubar"
      >
        <div
          aria-checked="false"
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitemcheckbox"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <label
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
            for=":r3:"
          >
            Favourite
          </label>
          <div
            class="_container_ik1u1_18"
          >
            <input
              class="_input_ik1u1_32"
              id=":r3:"
              type="checkbox"
            />
            <div
              class="_ui_ik1u1_42"
            />
          </div>
        </div>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Invite
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Copy link
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Settings
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            People
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Files
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Poll history
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Export Chat
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="critical"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Leave room
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
      </div>
      <div
        class="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
      >
        <h2>
          Widgets
        </h2>
        <div
          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
          role="button"
          tabindex="0"
        >
          Add widgets, bridges & bots
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<div>
  <div
    class="mx_BaseCard mx_RoomSummaryCard"
  >
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <header
        class="mx_Flex mx_RoomSummaryCard_header"
        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
      >
        <button
          aria-label="Search"
          class="mx_RoomSummaryCard_searchBtn"
          data-testid="summary-search"
        >
          <div
            height="100%"
            width="100%"
          />
        </button>
        <div
          aria-label="Close"
          class="mx_AccessibleButton mx_BaseCard_close"
          data-testid="base-card-close-button"
          role="button"
          tabindex="0"
        />
      </header>
      <header
        class="mx_RoomSummaryCard_container"
      >
        <span
          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
          data-color="1"
          data-testid="avatar-img"
          data-type="round"
          role="presentation"
          style="--cpd-avatar-size: 80px;"
        >
          !
        </span>
        <h1
          class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121 mx_RoomSummaryCard_roomName text-primary"
          title="!room:domain.org"
        >
          !room:domain.org
        </h1>
        <div
          class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_RoomSummaryCard_alias text-secondary"
          title=""
        />
        <section
          class="mx_Flex mx_RoomSummaryCard_badges"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
        >
          <span
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
            data-kind="default"
          >
            <div
              width="1em"
            />
            Not encrypted
          </span>
        </section>
        <section
          class="mx_Flex mx_RoomSummaryCard_topic"
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
        >
          <div
            class="mx_Box mx_Box--flex"
            style="--mx-box-flex: 1;"
          >
            <a
              class="_link_1mzip_17"
              data-kind="primary"
              rel="noreferrer noopener"
            >
              <p
                class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
              >
                Add topic
              </p>
            </a>
          </div>
        </section>
      </header>
      <div
        class="_separator_144s5_17"
        data-kind="primary"
        data-orientation="horizontal"
        role="separator"
      />
      <div
        aria-orientation="vertical"
        role="menubar"
      >
        <div
          aria-checked="false"
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitemcheckbox"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <label
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
            for=":r1:"
          >
            Favourite
          </label>
          <div
            class="_container_ik1u1_18"
          >
            <input
              class="_input_ik1u1_32"
              id=":r1:"
              type="checkbox"
            />
            <div
              class="_ui_ik1u1_42"
            />
          </div>
        </div>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Invite
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Copy link
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Settings
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            People
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Files
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Poll history
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Export Chat
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="critical"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Leave room
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
      </div>
      <div
        class="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
      >
        <h2>
          Widgets
        </h2>
        <div
          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
          role="button"
          tabindex="0"
        >
          Add widgets, bridges & bots
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<div>
  <div
    class="mx_BaseCard mx_RoomSummaryCard"
  >
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <header
        class="mx_Flex mx_RoomSummaryCard_header"
        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x);"
      >
        <button
          aria-label="Search"
          class="mx_RoomSummaryCard_searchBtn"
          data-testid="summary-search"
        >
          <div
            height="100%"
            width="100%"
          />
        </button>
        <div
          aria-label="Close"
          class="mx_AccessibleButton mx_BaseCard_close"
          data-testid="base-card-close-button"
          role="button"
          tabindex="0"
        />
      </header>
      <header
        class="mx_RoomSummaryCard_container"
      >
        <span
          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
          data-color="1"
          data-testid="avatar-img"
          data-type="round"
          role="presentation"
          style="--cpd-avatar-size: 80px;"
        >
          !
        </span>
        <h1
          class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121 mx_RoomSummaryCard_roomName text-primary"
          title="!room:domain.org"
        >
          !room:domain.org
        </h1>
        <div
          class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 mx_RoomSummaryCard_alias text-secondary"
          title=""
        />
        <section
          class="mx_Flex mx_RoomSummaryCard_badges"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
        >
          <span
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
            data-kind="default"
          >
            <div
              width="1em"
            />
            Not encrypted
          </span>
        </section>
        <section
          class="mx_Flex mx_RoomSummaryCard_topic mx_RoomSummaryCard_topic_collapsed"
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
        >
          <div
            class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
            style="--mx-box-flex: 1;"
          >
            <p
              class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
            >
              <span
                dir="auto"
              >
                This is the room's topic.
              </span>
            </p>
            <button
              class="_icon-button_16nk7_17 mx_RoomSummaryCard_topic_chevron"
              role="button"
              style="--cpd-icon-button-size: 24px;"
              tabindex="0"
            >
              <div
                class="_indicator-icon_133tf_26"
                style="--cpd-icon-button-size: 100%;"
              >
                <div />
              </div>
            </button>
          </div>
        </section>
      </header>
      <div
        class="_separator_144s5_17"
        data-kind="primary"
        data-orientation="horizontal"
        role="separator"
      />
      <div
        aria-orientation="vertical"
        role="menubar"
      >
        <div
          aria-checked="false"
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitemcheckbox"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <label
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
            for=":r2:"
          >
            Favourite
          </label>
          <div
            class="_container_ik1u1_18"
          >
            <input
              class="_input_ik1u1_32"
              id=":r2:"
              type="checkbox"
            />
            <div
              class="_ui_ik1u1_42"
            />
          </div>
        </div>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Invite
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Copy link
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Settings
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            People
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Files
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Poll history
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="primary"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Export Chat
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
        <div
          class="_separator_144s5_17"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <button
          class="_item_1gwvj_17 _interactive_1gwvj_36"
          data-kind="critical"
          role="menuitem"
        >
          <div
            aria-hidden="true"
            class="_icon_1gwvj_44"
            height="24"
            width="24"
          />
          <span
            class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
          >
            Leave room
          </span>
          <svg
            aria-hidden="true"
            class="_nav-hint_1gwvj_60"
            fill="currentColor"
            height="24"
            viewBox="8 0 8 24"
            width="8"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
            />
          </svg>
        </button>
      </div>
      <div
        class="mx_BaseCard_Group mx_RoomSummaryCard_appsGroup"
      >
        <h2>
          Widgets
        </h2>
        <div
          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
          role="button"
          tabindex="0"
        >
          Add widgets, bridges & bots
        </div>
      </div>
    </div>
  </div>
</div>
`;