matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-04-27 14:16:51 +03:00
Code

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
cypress/e2e/lazy-loading/lazy-loading.spec.ts
View File

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

14
cypress/e2e/user-onboarding/user-onboarding-new.ts
View File

@ -49,7 +49,14 @@ describe("User Onboarding (new user)", () => {
it("page is shown", () => { it("page is shown", () => {
cy.get('.mx_UserOnboardingPage').should('exist'); 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", () => { it("app download dialog", () => {
@ -58,7 +65,10 @@ describe("User Onboarding (new user)", () => {
cy.get('[role=dialog]') cy.get('[role=dialog]')
.contains("#mx_BaseDialog_title", "Download Element") .contains("#mx_BaseDialog_title", "Download Element")
.should("exist"); .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", () => { it("using find friends action should increase progress", () => {

4
res/css/views/dialogs/_AppDownloadDialog.pcss
View File

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

6
src/components/views/dialogs/AppDownloadDialog.tsx
View File

@ -43,7 +43,11 @@ export const AppDownloadDialog: FC<IDialogProps> = ({ onFinished }: IDialogProps
const urlFDroid = mobileBuilds?.get("fdroid") ?? fallbackFDroid; const urlFDroid = mobileBuilds?.get("fdroid") ?? fallbackFDroid;
return ( 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") && ( { desktopBuilds?.get("available") && (
<div className="mx_AppDownloadDialog_desktop"> <div className="mx_AppDownloadDialog_desktop">
<Heading size="h3"> <Heading size="h3">