element-web/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-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
        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-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
        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-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
        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>
`;