Make percy snapshots for user onboarding more reliable (#9132)

* Make percy snapshots for user onboarding more reliable
* Increase stability of lazy loading test

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Janne Mareike Koschinski 2022-08-08 13:17:04 +02:00 committed by GitHub
parent 4a14882938
commit cb15222594
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 9 deletions

View File

@ -115,21 +115,21 @@ describe("Lazy Loading", () => {
});
}
function getMembersInMemberlist(): Chainable<JQuery> {
return cy.get(".mx_MemberList .mx_EntityTile_name");
function getMemberInMemberlist(name: string): Chainable<JQuery> {
return cy.contains(".mx_MemberList .mx_EntityTile_name", name);
}
function checkMemberList(charlies: Charly[]) {
getMembersInMemberlist().contains("Alice").should("exist");
getMembersInMemberlist().contains("Bob").should("exist");
getMemberInMemberlist("Alice").should("exist");
getMemberInMemberlist("Bob").should("exist");
charlies.forEach(charly => {
getMembersInMemberlist().contains(charly.displayName).should("exist");
getMemberInMemberlist(charly.displayName).should("exist");
});
}
function checkMemberListLacksCharlies(charlies: Charly[]) {
charlies.forEach(charly => {
getMembersInMemberlist().contains(charly.displayName).should("not.exist");
getMemberInMemberlist(charly.displayName).should("not.exist");
});
}

View File

@ -49,7 +49,14 @@ describe("User Onboarding (new user)", () => {
it("page is shown", () => {
cy.get('.mx_UserOnboardingPage').should('exist');
cy.percySnapshot("User onboarding page");
cy.get('.mx_UserOnboardingList')
.should('exist')
.should(($list) => {
const list = $list.get(0);
expect(getComputedStyle(list).opacity).to.be.eq("1");
});
cy.get('.mx_UserOnboardingPage')
.percySnapshotElement("User onboarding page");
});
it("app download dialog", () => {
@ -58,7 +65,10 @@ describe("User Onboarding (new user)", () => {
cy.get('[role=dialog]')
.contains("#mx_BaseDialog_title", "Download Element")
.should("exist");
cy.percySnapshot("App download dialog");
cy.get('[role=dialog]')
.percySnapshotElement("App download dialog", {
widths: [640],
});
});
it("using find friends action should increase progress", () => {

View File

@ -4,6 +4,10 @@
gap: $spacing-32;
color: $primary-content;
&.mx_Dialog_fixedWidth {
width: 640px;
}
.mx_AppDownloadDialog_desktop {
display: flex;
flex-direction: column;

View File

@ -43,7 +43,11 @@ export const AppDownloadDialog: FC<IDialogProps> = ({ onFinished }: IDialogProps
const urlFDroid = mobileBuilds?.get("fdroid") ?? fallbackFDroid;
return (
<BaseDialog title={_t("Download %(brand)s", { brand })} className="mx_AppDownloadDialog" onFinished={onFinished}>
<BaseDialog
title={_t("Download %(brand)s", { brand })}
className="mx_AppDownloadDialog"
fixedWidth
onFinished={onFinished}>
{ desktopBuilds?.get("available") && (
<div className="mx_AppDownloadDialog_desktop">
<Heading size="h3">