Ocelot-Social/webapp/components/UserTeaser/__snapshots__/UserTeaser.spec.js.snap

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

exports[`UserTeaser given an user avatar is disabled does not render the avatar 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <!---->
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <a>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </a>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user user is deleted even if the current user is a moderator renders anonymous user 1`] = `
<div>
  <div
    class="user-teaser"
  >
    <div
      class="profile-avatar --small --no-image"
    >
      <span
        class="initials"
      >
        
      </span>
       
      <span
        aria-hidden="true"
        class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
      >
        <svg
          fill="currentColor"
          viewBox="0 0 32 32"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3.719 2.281l6.75 6.75c1.685-0.612 3.538-1.031 5.531-1.031 8.395 0 14.494 7.044 14.75 7.344l0.625 0.719-0.656 0.656c-0.193 0.192-3.247 3.135-7.344 5.219l6.344 6.344-1.438 1.438-8.688-8.719-11.125-11.125-6.188-6.156zM16 10c-1.389 0-2.697 0.254-3.938 0.625l2.063 2.063c0.513-0.415 1.165-0.688 1.875-0.688 1.654 0 3 1.346 3 3 0 0.71-0.273 1.362-0.688 1.875l2.844 2.844c1.144-1.249 1.844-2.904 1.844-4.719 0-1.3-0.386-2.556-1.063-3.656-1.776-0.788-3.773-1.344-5.938-1.344zM6.625 10.875l2.563 2.563c-0.121 0.513-0.188 1.027-0.188 1.563 0 3.565 2.68 6.54 6.219 6.938l0.094 0.031c0.466 0.039 0.908 0.039 1.375 0l0.125-0.031c0.261-0.029 0.531-0.068 0.781-0.125l1.719 1.719c-0.778 0.198-1.577 0.343-2.375 0.406h-0.063c-0.29 0.025-0.585 0.063-0.875 0.063s-0.585-0.037-0.875-0.063h-0.063c-6.964-0.555-13.495-6.934-13.781-7.219l-0.656-0.656 0.625-0.719c0.144-0.17 2.137-2.479 5.375-4.469zM7.281 12.844c-1.775 1.146-3.13 2.351-3.875 3.094 0.914 0.811 2.659 2.238 4.781 3.5-0.75-1.316-1.188-2.825-1.188-4.438 0-0.737 0.107-1.452 0.281-2.156zM24.719 12.844c0.173 0.702 0.281 1.421 0.281 2.156 0 1.614-0.438 3.12-1.188 4.438 2.123-1.262 3.836-2.658 4.75-3.469-0.745-0.742-2.072-1.98-3.844-3.125zM16 14c-0.163 0-0.302 0.056-0.438 0.125l1.313 1.313c0.069-0.136 0.125-0.275 0.125-0.438 0-0.551-0.448-1-1-1z"
          />
        </svg>
      </span>
       
      <!---->
    </div>
     
    <span
      class="info anonymous"
    >
      profile.userAnonym
    </span>
  </div>
</div>
`;

exports[`UserTeaser given an user user is deleted renders anonymous user 1`] = `
<div>
  <div
    class="user-teaser"
  >
    <div
      class="profile-avatar --small --no-image"
    >
      <span
        class="initials"
      >
        
      </span>
       
      <span
        aria-hidden="true"
        class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
      >
        <svg
          fill="currentColor"
          viewBox="0 0 32 32"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3.719 2.281l6.75 6.75c1.685-0.612 3.538-1.031 5.531-1.031 8.395 0 14.494 7.044 14.75 7.344l0.625 0.719-0.656 0.656c-0.193 0.192-3.247 3.135-7.344 5.219l6.344 6.344-1.438 1.438-8.688-8.719-11.125-11.125-6.188-6.156zM16 10c-1.389 0-2.697 0.254-3.938 0.625l2.063 2.063c0.513-0.415 1.165-0.688 1.875-0.688 1.654 0 3 1.346 3 3 0 0.71-0.273 1.362-0.688 1.875l2.844 2.844c1.144-1.249 1.844-2.904 1.844-4.719 0-1.3-0.386-2.556-1.063-3.656-1.776-0.788-3.773-1.344-5.938-1.344zM6.625 10.875l2.563 2.563c-0.121 0.513-0.188 1.027-0.188 1.563 0 3.565 2.68 6.54 6.219 6.938l0.094 0.031c0.466 0.039 0.908 0.039 1.375 0l0.125-0.031c0.261-0.029 0.531-0.068 0.781-0.125l1.719 1.719c-0.778 0.198-1.577 0.343-2.375 0.406h-0.063c-0.29 0.025-0.585 0.063-0.875 0.063s-0.585-0.037-0.875-0.063h-0.063c-6.964-0.555-13.495-6.934-13.781-7.219l-0.656-0.656 0.625-0.719c0.144-0.17 2.137-2.479 5.375-4.469zM7.281 12.844c-1.775 1.146-3.13 2.351-3.875 3.094 0.914 0.811 2.659 2.238 4.781 3.5-0.75-1.316-1.188-2.825-1.188-4.438 0-0.737 0.107-1.452 0.281-2.156zM24.719 12.844c0.173 0.702 0.281 1.421 0.281 2.156 0 1.614-0.438 3.12-1.188 4.438 2.123-1.262 3.836-2.658 4.75-3.469-0.745-0.742-2.072-1.98-3.844-3.125zM16 14c-0.163 0-0.302 0.056-0.438 0.125l1.313 1.313c0.069-0.136 0.125-0.275 0.125-0.438 0-0.551-0.448-1-1-1z"
          />
        </svg>
      </span>
       
      <!---->
    </div>
     
    <span
      class="info anonymous"
    >
      profile.userAnonym
    </span>
  </div>
</div>
`;

exports[`UserTeaser given an user user is disabled current user is a moderator renders user name 1`] = `
<div>
  <div
    class="disabled-content"
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <a
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </a>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <a>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </a>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user user is disabled renders anonymous user 1`] = `
<div>
  <div
    class="user-teaser"
  >
    <div
      class="profile-avatar --small --no-image"
    >
      <span
        class="initials"
      >
        
      </span>
       
      <span
        aria-hidden="true"
        class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
      >
        <svg
          fill="currentColor"
          viewBox="0 0 32 32"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3.719 2.281l6.75 6.75c1.685-0.612 3.538-1.031 5.531-1.031 8.395 0 14.494 7.044 14.75 7.344l0.625 0.719-0.656 0.656c-0.193 0.192-3.247 3.135-7.344 5.219l6.344 6.344-1.438 1.438-8.688-8.719-11.125-11.125-6.188-6.156zM16 10c-1.389 0-2.697 0.254-3.938 0.625l2.063 2.063c0.513-0.415 1.165-0.688 1.875-0.688 1.654 0 3 1.346 3 3 0 0.71-0.273 1.362-0.688 1.875l2.844 2.844c1.144-1.249 1.844-2.904 1.844-4.719 0-1.3-0.386-2.556-1.063-3.656-1.776-0.788-3.773-1.344-5.938-1.344zM6.625 10.875l2.563 2.563c-0.121 0.513-0.188 1.027-0.188 1.563 0 3.565 2.68 6.54 6.219 6.938l0.094 0.031c0.466 0.039 0.908 0.039 1.375 0l0.125-0.031c0.261-0.029 0.531-0.068 0.781-0.125l1.719 1.719c-0.778 0.198-1.577 0.343-2.375 0.406h-0.063c-0.29 0.025-0.585 0.063-0.875 0.063s-0.585-0.037-0.875-0.063h-0.063c-6.964-0.555-13.495-6.934-13.781-7.219l-0.656-0.656 0.625-0.719c0.144-0.17 2.137-2.479 5.375-4.469zM7.281 12.844c-1.775 1.146-3.13 2.351-3.875 3.094 0.914 0.811 2.659 2.238 4.781 3.5-0.75-1.316-1.188-2.825-1.188-4.438 0-0.737 0.107-1.452 0.281-2.156zM24.719 12.844c0.173 0.702 0.281 1.421 0.281 2.156 0 1.614-0.438 3.12-1.188 4.438 2.123-1.262 3.836-2.658 4.75-3.469-0.745-0.742-2.072-1.98-3.844-3.125zM16 14c-0.163 0-0.302 0.056-0.438 0.125l1.313 1.313c0.069-0.136 0.125-0.275 0.125-0.438 0-0.551-0.448-1-1-1z"
          />
        </svg>
      </span>
       
      <!---->
    </div>
     
    <span
      class="info anonymous"
    >
      profile.userAnonym
    </span>
  </div>
</div>
`;

exports[`UserTeaser given an user with linkToProfile, on desktop renders 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <a
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </a>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <a>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </a>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user with linkToProfile, on desktop when hovering the user name renders the popover 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <a
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </a>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <a>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </a>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user with linkToProfile, on touch screen renders 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <button
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </button>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <button>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </button>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user with linkToProfile, on touch screen when clicking the user name renders the popover 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        open="true"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <button
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </button>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <button>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </button>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div>
          <user-teaser-popover-stub
            user-id="user1"
            user-link="[object Object]"
          />
        </div>
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user without linkToProfile, on desktop renders 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <span
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </span>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <span>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </span>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user without linkToProfile, on desktop when hovering the user avatar renders the popover 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <span
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </span>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <span>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </span>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user without linkToProfile, on desktop when hovering the user name renders the popover 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <span
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </span>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <span>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </span>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user without linkToProfile, on touch screen renders 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <button
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </button>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <button>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </button>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div />
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user without linkToProfile, on touch screen when clicking the user avatar renders the popover 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        open="true"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <button
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </button>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <button>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </button>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div>
          <user-teaser-popover-stub
            user-id="user1"
          />
        </div>
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser given an user without linkToProfile, on touch screen when clicking the user name renders the popover 1`] = `
<div>
  <div
    class=""
    placement="top-start"
  >
    <client-only-stub>
      <v-popover-stub
        autohide="true"
        class="user-teaser"
        container="body"
        delay="0"
        handleresize="true"
        offset="16"
        open="true"
        openclass="open"
        opengroup="0"
        placement="bottom-end"
        popoverarrowclass="tooltip-arrow popover-arrow"
        popoverbaseclass="tooltip popover"
        popoverclass="vue-popover-theme"
        popoverinnerclass="tooltip-inner popover-inner"
        popoverwrapperclass="wrapper"
        popperoptions="[object Object]"
        trigger="manual"
      >
        <button
          data-test="avatarUserLink"
        >
          <div
            class="profile-avatar --small"
          >
            <span
              class="initials"
            >
              TS
            </span>
             
            <!---->
             
            <img
              alt="Tilda Swinton"
              class="responsive-image image"
              fetchpriority="low"
              loading="lazy"
              sizes="320px"
              src="/avatars/tilda-swinton"
              srcset="/avatars/tilda-swinton-w320 320w, /avatars/tilda-swinton-w640 640w, /avatars/tilda-swinton-w1024 1024w"
              title="Tilda Swinton"
            />
          </div>
        </button>
         
        <div
          class="info flex-direction-column"
        >
          <div
            class="flex-direction-column"
          >
            <button>
              <span
                class="slug"
              >
                @tilda-swinton
              </span>
               
              <span
                class="name"
              >
                Tilda Swinton
              </span>
            </button>
             
            <!---->
             
            <!---->
             
            <span>
              
              <!---->
            </span>
          </div>
           
          <!---->
        </div>
         
        <div>
          <user-teaser-popover-stub
            user-id="user1"
          />
        </div>
      </v-popover-stub>
    </client-only-stub>
  </div>
</div>
`;

exports[`UserTeaser renders anonymous user 1`] = `
<div>
  <div
    class="user-teaser"
  >
    <div
      class="profile-avatar --small --no-image"
    >
      <span
        class="initials"
      >
        
      </span>
       
      <span
        aria-hidden="true"
        class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
      >
        <svg
          fill="currentColor"
          viewBox="0 0 32 32"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3.719 2.281l6.75 6.75c1.685-0.612 3.538-1.031 5.531-1.031 8.395 0 14.494 7.044 14.75 7.344l0.625 0.719-0.656 0.656c-0.193 0.192-3.247 3.135-7.344 5.219l6.344 6.344-1.438 1.438-8.688-8.719-11.125-11.125-6.188-6.156zM16 10c-1.389 0-2.697 0.254-3.938 0.625l2.063 2.063c0.513-0.415 1.165-0.688 1.875-0.688 1.654 0 3 1.346 3 3 0 0.71-0.273 1.362-0.688 1.875l2.844 2.844c1.144-1.249 1.844-2.904 1.844-4.719 0-1.3-0.386-2.556-1.063-3.656-1.776-0.788-3.773-1.344-5.938-1.344zM6.625 10.875l2.563 2.563c-0.121 0.513-0.188 1.027-0.188 1.563 0 3.565 2.68 6.54 6.219 6.938l0.094 0.031c0.466 0.039 0.908 0.039 1.375 0l0.125-0.031c0.261-0.029 0.531-0.068 0.781-0.125l1.719 1.719c-0.778 0.198-1.577 0.343-2.375 0.406h-0.063c-0.29 0.025-0.585 0.063-0.875 0.063s-0.585-0.037-0.875-0.063h-0.063c-6.964-0.555-13.495-6.934-13.781-7.219l-0.656-0.656 0.625-0.719c0.144-0.17 2.137-2.479 5.375-4.469zM7.281 12.844c-1.775 1.146-3.13 2.351-3.875 3.094 0.914 0.811 2.659 2.238 4.781 3.5-0.75-1.316-1.188-2.825-1.188-4.438 0-0.737 0.107-1.452 0.281-2.156zM24.719 12.844c0.173 0.702 0.281 1.421 0.281 2.156 0 1.614-0.438 3.12-1.188 4.438 2.123-1.262 3.836-2.658 4.75-3.469-0.745-0.742-2.072-1.98-3.844-3.125zM16 14c-0.163 0-0.302 0.056-0.438 0.125l1.313 1.313c0.069-0.136 0.125-0.275 0.125-0.438 0-0.551-0.448-1-1-1z"
          />
        </svg>
      </span>
       
      <!---->
    </div>
     
    <span
      class="info anonymous"
    >
      profile.userAnonym
    </span>
  </div>
</div>
`;