element-web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

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

exports[`<PinnedEventTile /> should render pinned event 1`] = `
<div>
  <div
    class="mx_PinnedEventTile"
    role="listitem"
  >
    <div>
      <span
        class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
        data-color="2"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 32px;"
      >
        a
      </span>
    </div>
    <div
      class="mx_PinnedEventTile_wrapper"
    >
      <div
        class="mx_PinnedEventTile_top"
      >
        <span
          aria-labelledby=":r0:"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
        </span>
        <button
          aria-disabled="false"
          aria-expanded="false"
          aria-haspopup="menu"
          aria-label="Open menu"
          class="_icon-button_m2erp_8"
          data-state="closed"
          id="radix-:r5:"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
          type="button"
        >
          <div
            class="_indicator-icon_zr2a0_17"
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
              />
            </svg>
          </div>
        </button>
      </div>
      <div
        class="mx_MTextBody mx_EventTile_content"
      >
        <div
          class="mx_EventTile_body translate"
          dir="auto"
        >
          First pinned message
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
<div>
  <div
    class="mx_PinnedEventTile"
    role="listitem"
  >
    <div>
      <span
        class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
        data-color="2"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 32px;"
      >
        a
      </span>
    </div>
    <div
      class="mx_PinnedEventTile_wrapper"
    >
      <div
        class="mx_PinnedEventTile_top"
      >
        <span
          aria-labelledby=":r8:"
          class="mx_PinnedEventTile_sender mx_Username_color2"
        >
          @alice:server.org
        </span>
        <button
          aria-disabled="false"
          aria-expanded="false"
          aria-haspopup="menu"
          aria-label="Open menu"
          class="_icon-button_m2erp_8"
          data-state="closed"
          id="radix-:rd:"
          role="button"
          style="--cpd-icon-button-size: 24px;"
          tabindex="0"
          type="button"
        >
          <div
            class="_indicator-icon_zr2a0_17"
            style="--cpd-icon-button-size: 100%;"
          >
            <svg
              fill="currentColor"
              height="1em"
              viewBox="0 0 24 24"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
              />
            </svg>
          </div>
        </button>
      </div>
      <div
        class="mx_MTextBody mx_EventTile_content"
      >
        <div
          class="mx_EventTile_body translate"
          dir="auto"
        >
          First pinned message
        </div>
      </div>
      <div
        class="mx_PinnedEventTile_thread"
      >
        <svg
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7 10a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10zm0 4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14z"
          />
          <path
            d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6zM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17"
          />
        </svg>
        <span>
          Reply to a 
          <button
            type="button"
          >
            thread message
          </button>
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
<div
  aria-label="Open menu"
  aria-labelledby="radix-:r10:"
  aria-orientation="vertical"
  class="_menu_19sse_8"
  data-align="start"
  data-orientation="vertical"
  data-radix-menu-content=""
  data-side="right"
  data-state="open"
  dir="ltr"
  id="radix-:r11:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
>
  <button
    class="_item_1x5l4_8 _interactive_1x5l4_26"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_1x5l4_34"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7 8.813 8.313 7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.787A2.6 2.6 0 0 1 9.3 11.5q0-1.125.787-1.912A2.6 2.6 0 0 1 12 8.8q1.125 0 1.912.787.788.788.788 1.913t-.787 1.912A2.6 2.6 0 0 1 12 14.2m0 4.8q-3.475 0-6.35-1.837Q2.775 15.324 1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.775.8.8 0 0 1 .1-.313q1.475-3.125 4.35-4.962Q8.525 4 12 4t6.35 1.838T22.7 10.8a.8.8 0 0 1 .1.313 3 3 0 0 1 0 .774.8.8 0 0 1-.1.313q-1.475 3.125-4.35 4.963Q15.475 19 12 19m0-2a9.54 9.54 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.77 9.77 0 0 0-3.613-4.012A9.54 9.54 0 0 0 12 6a9.55 9.55 0 0 0-5.187 1.487A9.77 9.77 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.613 4.012A9.54 9.54 0 0 0 12 17"
      />
    </svg>
    <span
      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
    >
      View in timeline
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_1x5l4_50"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
      />
    </svg>
  </button>
  <button
    class="_item_1x5l4_8 _interactive_1x5l4_26"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_1x5l4_34"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        clip-rule="evenodd"
        d="M5.457 2.083a1 1 0 0 0-1.414 1.414L8.04 7.494v2.25a.5.5 0 0 1-.15.356l-3.7 3.644a.5.5 0 0 0-.15.356v1.4a.5.5 0 0 0 .5.5h6.5v6a1 1 0 0 0 2 0v-6h3.506l4.497 4.497a1 1 0 0 0 1.414-1.414zM14.546 14 10.04 9.494v.25a2.5 2.5 0 0 1-.746 1.781L6.78 14z"
        fill-rule="evenodd"
      />
      <path
        d="M14.04 4v3.85l2.015 2.015a.5.5 0 0 1-.015-.12V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857h-9.73l2 2z"
      />
    </svg>
    <span
      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
    >
      Unpin
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_1x5l4_50"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
      />
    </svg>
  </button>
  <button
    class="_item_1x5l4_8 _interactive_1x5l4_26"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_1x5l4_34"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.391.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.053H8.487c-1.888 0-3.485 1.604-3.485 3.666C5.002 16.396 6.599 18 8.487 18h2.093a1 1 0 1 1 0 2H8.487c-3.067 0-5.485-2.575-5.485-5.667S5.42 8.667 8.487 8.667h9.059z"
      />
    </svg>
    <span
      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
    >
      Forward
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_1x5l4_50"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
      />
    </svg>
  </button>
  <div
    class="_separator_7ckbw_8"
    data-kind="primary"
    data-orientation="horizontal"
    role="separator"
  />
  <button
    class="_item_1x5l4_8 _interactive_1x5l4_26"
    data-kind="critical"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_1x5l4_34"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M7 21q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 19V6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 5q0-.424.287-.713A.97.97 0 0 1 5 4h4q0-.424.287-.712A.97.97 0 0 1 10 3h4q.424 0 .713.288Q15 3.575 15 4h4q.424 0 .712.287Q20 4.576 20 5t-.288.713A.97.97 0 0 1 19 6v13q0 .824-.587 1.413A1.93 1.93 0 0 1 17 21zM7 6v13h10V6zm2 10q0 .424.287.712Q9.576 17 10 17t.713-.288A.97.97 0 0 0 11 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 10 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 9zm4 0q0 .424.287.712.288.288.713.288.424 0 .713-.288A.97.97 0 0 0 15 16V9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 14 8a.97.97 0 0 0-.713.287A.97.97 0 0 0 13 9z"
      />
    </svg>
    <span
      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
    >
      Delete
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_1x5l4_50"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
      />
    </svg>
  </button>
</div>
`;

exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
<div
  aria-label="Open menu"
  aria-labelledby="radix-:rl:"
  aria-orientation="vertical"
  class="_menu_19sse_8"
  data-align="start"
  data-orientation="vertical"
  data-radix-menu-content=""
  data-side="right"
  data-state="open"
  dir="ltr"
  id="radix-:rm:"
  role="menu"
  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
  tabindex="-1"
>
  <button
    class="_item_1x5l4_8 _interactive_1x5l4_26"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_1x5l4_34"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 16q1.875 0 3.188-1.312Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7 8.813 8.313 7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.787A2.6 2.6 0 0 1 9.3 11.5q0-1.125.787-1.912A2.6 2.6 0 0 1 12 8.8q1.125 0 1.912.787.788.788.788 1.913t-.787 1.912A2.6 2.6 0 0 1 12 14.2m0 4.8q-3.475 0-6.35-1.837Q2.775 15.324 1.3 12.2a.8.8 0 0 1-.1-.312 3 3 0 0 1 0-.775.8.8 0 0 1 .1-.313q1.475-3.125 4.35-4.962Q8.525 4 12 4t6.35 1.838T22.7 10.8a.8.8 0 0 1 .1.313 3 3 0 0 1 0 .774.8.8 0 0 1-.1.313q-1.475 3.125-4.35 4.963Q15.475 19 12 19m0-2a9.54 9.54 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.77 9.77 0 0 0-3.613-4.012A9.54 9.54 0 0 0 12 6a9.55 9.55 0 0 0-5.187 1.487A9.77 9.77 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.613 4.012A9.54 9.54 0 0 0 12 17"
      />
    </svg>
    <span
      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
    >
      View in timeline
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_1x5l4_50"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
      />
    </svg>
  </button>
  <button
    class="_item_1x5l4_8 _interactive_1x5l4_26"
    data-kind="primary"
    data-orientation="vertical"
    data-radix-collection-item=""
    role="menuitem"
    tabindex="-1"
  >
    <svg
      aria-hidden="true"
      class="_icon_1x5l4_34"
      fill="currentColor"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.391.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.053H8.487c-1.888 0-3.485 1.604-3.485 3.666C5.002 16.396 6.599 18 8.487 18h2.093a1 1 0 1 1 0 2H8.487c-3.067 0-5.485-2.575-5.485-5.667S5.42 8.667 8.487 8.667h9.059z"
      />
    </svg>
    <span
      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
    >
      Forward
    </span>
    <svg
      aria-hidden="true"
      class="_nav-hint_1x5l4_50"
      fill="currentColor"
      height="24"
      viewBox="8 0 8 24"
      width="8"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
      />
    </svg>
  </button>
</div>
`;