Max 7ea8107ed0
fix(webapp): fix popover flickering (#8555)
Add boundary to v-popover to avoid random flickering when hovering a user teaser
Preload user data to avoid resizing (and sometimes repositioning) of popover after data has been loaded
2025-05-20 07:21:22 +00:00

1149 lines
25 KiB
Plaintext

// 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"
boundarieselement="body"
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>
<!---->
<!---->
</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
class="base-icon"
>
<!---->
</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
class="base-icon"
>
<!---->
</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"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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
class="base-icon"
>
<!---->
</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"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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"
boundarieselement="body"
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"
>
<a
data-test="avatarUserLink"
>
<div
class="profile-avatar --small"
>
<span
class="initials"
>
TS
</span>
<!---->
<img
alt="Tilda Swinton"
class="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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 with linkToProfile, on touch screen renders 1`] = `
<div>
<div
class=""
placement="top-start"
>
<client-only-stub>
<v-popover-stub
autohide="true"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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"
boundarieselement="body"
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"
>
<span
data-test="avatarUserLink"
>
<div
class="profile-avatar --small"
>
<span
class="initials"
>
TS
</span>
<!---->
<img
alt="Tilda Swinton"
class="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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 desktop when hovering the user name renders the popover 1`] = `
<div>
<div
class=""
placement="top-start"
>
<client-only-stub>
<v-popover-stub
autohide="true"
boundarieselement="body"
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"
>
<span
data-test="avatarUserLink"
>
<div
class="profile-avatar --small"
>
<span
class="initials"
>
TS
</span>
<!---->
<img
alt="Tilda Swinton"
class="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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 renders 1`] = `
<div>
<div
class=""
placement="top-start"
>
<client-only-stub>
<v-popover-stub
autohide="true"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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"
boundarieselement="body"
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="image"
src="/api/avatars/tilda-swinton"
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>
<!---->
<!---->
</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
class="base-icon"
>
<!---->
</span>
<!---->
</div>
<span
class="info anonymous"
>
profile.userAnonym
</span>
</div>
</div>
`;