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

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

exports[`UserTeaserPopover does not show badges when disabled 1`] = `
<div>
  <div
    class="user-teaser-popover"
  >
    <!---->
     
    <!---->
     
    <ul
      class="statistics"
    >
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            42
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            profile.followers
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            7
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.post
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            13
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.comment
          </span>
        </div>
      </li>
    </ul>
     
    <!---->
  </div>
</div>
`;

exports[`UserTeaserPopover given a non-touch device does not show button when userLink is provided 1`] = `
<div>
  <div
    class="user-teaser-popover"
  >
    <div
      class="hc-badges"
    >
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/verified"
          title="Verified"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy1"
          title="Trophy 1"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy2"
          title="Trophy 2"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/empty"
          title="Empty"
        />
      </div>
    </div>
     
    <!---->
     
    <ul
      class="statistics"
    >
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            42
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            profile.followers
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            7
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.post
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            13
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.comment
          </span>
        </div>
      </li>
    </ul>
     
    <!---->
  </div>
</div>
`;

exports[`UserTeaserPopover given a touch device does not show button when userLink is not provided 1`] = `
<div>
  <div
    class="user-teaser-popover"
  >
    <div
      class="hc-badges"
    >
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/verified"
          title="Verified"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy1"
          title="Trophy 1"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy2"
          title="Trophy 2"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/empty"
          title="Empty"
        />
      </div>
    </div>
     
    <!---->
     
    <ul
      class="statistics"
    >
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            42
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            profile.followers
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            7
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.post
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            13
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.comment
          </span>
        </div>
      </li>
    </ul>
     
    <!---->
  </div>
</div>
`;

exports[`UserTeaserPopover given a touch device shows button when userLink is provided 1`] = `
<div>
  <div
    class="user-teaser-popover"
  >
    <div
      class="hc-badges"
    >
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/verified"
          title="Verified"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy1"
          title="Trophy 1"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy2"
          title="Trophy 2"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/empty"
          title="Empty"
        />
      </div>
    </div>
     
    <!---->
     
    <ul
      class="statistics"
    >
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            42
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            profile.followers
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            7
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.post
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            13
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.comment
          </span>
        </div>
      </li>
    </ul>
     
    <a
      class="link os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] disabled:hover:bg-[var(--color-disabled)] disabled:hover:text-[var(--color-disabled-contrast)] disabled:hover:border-[var(--color-disabled)] disabled:active:bg-[var(--color-disabled)] disabled:active:text-[var(--color-disabled-contrast)] disabled:active:border-[var(--color-disabled)] h-[36px] min-w-[36px] px-[16px] py-0 text-[15px] leading-[normal] rounded-[5px] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] link"
      data-appearance="filled"
      data-variant="primary"
    >
      <span
        class="inline-flex items-center"
      >
        
    user-teaser.popover.open-profile
  
      </span>
    </a>
  </div>
</div>
`;

exports[`UserTeaserPopover renders correctly for a fresh user with zero counts 1`] = `
<div>
  <div
    class="user-teaser-popover"
  >
    <div
      class="hc-badges"
    >
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/verified"
          title="Verified"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy1"
          title="Trophy 1"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy2"
          title="Trophy 2"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/empty"
          title="Empty"
        />
      </div>
    </div>
     
    <!---->
     
    <ul
      class="statistics"
    >
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            0
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            profile.followers
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            0
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.post
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            0
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.comment
          </span>
        </div>
      </li>
    </ul>
     
    <!---->
  </div>
</div>
`;

exports[`UserTeaserPopover shows badges when enabled 1`] = `
<div>
  <div
    class="user-teaser-popover"
  >
    <div
      class="hc-badges"
    >
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/verified"
          title="Verified"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy1"
          title="Trophy 1"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/trophy2"
          title="Trophy 2"
        />
      </div>
      <div
        class="hc-badge-container"
        draggable="false"
      >
        <img
          class="hc-badge"
          src="/api/icons/empty"
          title="Empty"
        />
      </div>
    </div>
     
    <!---->
     
    <ul
      class="statistics"
    >
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            42
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            profile.followers
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 1ch;"
          >
            7
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.post
          </span>
        </div>
      </li>
       
      <li>
        <div
          class="os-number flex flex-col items-center text-center"
        >
          <span
            class="os-number-count font-bold text-[1.5rem] tabular-nums text-center inline-block"
            style="min-width: 2ch;"
          >
            13
          </span>
          <span
            class="os-number-label text-[12px] text-[var(--color-text-soft)]"
          >
            common.comment
          </span>
        </div>
      </li>
    </ul>
     
    <!---->
  </div>
</div>
`;