From cb15222594c2d8a7fd494d0df2e7e986a1bebc1f Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Mon, 8 Aug 2022 13:17:04 +0200
Subject: [PATCH] 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>
---
 cypress/e2e/lazy-loading/lazy-loading.spec.ts      | 12 ++++++------
 cypress/e2e/user-onboarding/user-onboarding-new.ts | 14 ++++++++++++--
 res/css/views/dialogs/_AppDownloadDialog.pcss      |  4 ++++
 src/components/views/dialogs/AppDownloadDialog.tsx |  6 +++++-
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/lazy-loading/lazy-loading.spec.ts b/cypress/e2e/lazy-loading/lazy-loading.spec.ts
index af4d7ef6ae..7d26b48676 100644
--- a/cypress/e2e/lazy-loading/lazy-loading.spec.ts
+++ b/cypress/e2e/lazy-loading/lazy-loading.spec.ts
@@ -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");
         });
     }
 
diff --git a/cypress/e2e/user-onboarding/user-onboarding-new.ts b/cypress/e2e/user-onboarding/user-onboarding-new.ts
index 9c00370558..44787ee61e 100644
--- a/cypress/e2e/user-onboarding/user-onboarding-new.ts
+++ b/cypress/e2e/user-onboarding/user-onboarding-new.ts
@@ -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", () => {
diff --git a/res/css/views/dialogs/_AppDownloadDialog.pcss b/res/css/views/dialogs/_AppDownloadDialog.pcss
index 7e15497617..776171ad09 100644
--- a/res/css/views/dialogs/_AppDownloadDialog.pcss
+++ b/res/css/views/dialogs/_AppDownloadDialog.pcss
@@ -4,6 +4,10 @@
     gap: $spacing-32;
     color: $primary-content;
 
+    &.mx_Dialog_fixedWidth {
+        width: 640px;
+    }
+
     .mx_AppDownloadDialog_desktop {
         display: flex;
         flex-direction: column;
diff --git a/src/components/views/dialogs/AppDownloadDialog.tsx b/src/components/views/dialogs/AppDownloadDialog.tsx
index ab5ebfd22c..21bf50ee1b 100644
--- a/src/components/views/dialogs/AppDownloadDialog.tsx
+++ b/src/components/views/dialogs/AppDownloadDialog.tsx
@@ -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">