From 71aee40f8df9575d29e813451bc89066e00af388 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 7 Aug 2023 05:47:23 +0500
Subject: [PATCH] web: improve backups test reliability

---
 apps/web/__e2e__/backups.test.ts               | 4 +++-
 apps/web/__e2e__/models/base-item.model.ts     | 3 ++-
 apps/web/__e2e__/models/settings-view.model.ts | 9 ++++++++-
 apps/web/__e2e__/models/utils.ts               | 8 ++++++++
 apps/web/src/components/dialog/index.tsx       | 1 +
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/web/__e2e__/backups.test.ts b/apps/web/__e2e__/backups.test.ts
index 81f2b5f86..224d7b29e 100644
--- a/apps/web/__e2e__/backups.test.ts
+++ b/apps/web/__e2e__/backups.test.ts
@@ -48,7 +48,9 @@ test("restore a backup", async ({ page }) => {
   expect(await tags.isEmpty()).toBeFalsy();
 });
 
-test("create an encrypted backup", async ({ page }) => {
+test("create an encrypted backup", async ({ page }, info) => {
+  info.setTimeout(60 * 1000);
+
   const app = new AppModel(page);
   await app.auth.goto();
   await app.auth.login(USER.CURRENT);
diff --git a/apps/web/__e2e__/models/base-item.model.ts b/apps/web/__e2e__/models/base-item.model.ts
index ceeb3c4ba..ce5b3a909 100644
--- a/apps/web/__e2e__/models/base-item.model.ts
+++ b/apps/web/__e2e__/models/base-item.model.ts
@@ -40,7 +40,8 @@ export class BaseItemModel {
   }
 
   async click() {
-    await this.locator.scrollIntoViewIfNeeded();
+    if (!(await this.locator.isVisible()))
+      await this.locator.scrollIntoViewIfNeeded();
     await this.locator.click();
   }
 
diff --git a/apps/web/__e2e__/models/settings-view.model.ts b/apps/web/__e2e__/models/settings-view.model.ts
index 15a26a341..f6db08d22 100644
--- a/apps/web/__e2e__/models/settings-view.model.ts
+++ b/apps/web/__e2e__/models/settings-view.model.ts
@@ -19,7 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Page } from "@playwright/test";
 import { downloadAndReadFile, getTestId, uploadFile } from "../utils";
-import { confirmDialog, fillPasswordDialog, waitToHaveText } from "./utils";
+import {
+  confirmDialog,
+  fillPasswordDialog,
+  waitForDialog,
+  waitToHaveText
+} from "./utils";
 import { NavigationMenuModel } from "./navigation-menu.model";
 
 export class SettingsViewModel {
@@ -112,5 +117,7 @@ export class SettingsViewModel {
 
     await uploadFile(this.page, restoreBackup, filename);
     if (password) await fillPasswordDialog(this.page, password);
+
+    await waitForDialog(this.page, "Restoring backup");
   }
 }
diff --git a/apps/web/__e2e__/models/utils.ts b/apps/web/__e2e__/models/utils.ts
index 0c737f44a..f85f0e73c 100644
--- a/apps/web/__e2e__/models/utils.ts
+++ b/apps/web/__e2e__/models/utils.ts
@@ -140,6 +140,14 @@ export async function denyDialog(page: Page) {
   // await dialogConfirm.waitFor({ state: "detached" });
 }
 
+export async function waitForDialog(page: Page, title: string) {
+  const dialogTitle = page
+    .locator(getTestId("dialog-title"))
+    .filter({ hasText: title });
+  await dialogTitle.waitFor({ state: "attached" });
+  await dialogTitle.waitFor({ state: "detached" });
+}
+
 export async function waitToHaveText(page: Page, id: string) {
   await page.waitForFunction(
     ({ id }) => {
diff --git a/apps/web/src/components/dialog/index.tsx b/apps/web/src/components/dialog/index.tsx
index 48b5b88b8..60a5ad3fc 100644
--- a/apps/web/src/components/dialog/index.tsx
+++ b/apps/web/src/components/dialog/index.tsx
@@ -130,6 +130,7 @@ function BaseDialog(props: React.PropsWithChildren<DialogProps>) {
             {props.title && (
               <Text
                 variant="heading"
+                data-test-id="dialog-title"
                 sx={{
                   fontSize: "subheading",
                   textAlign: props.textAlignment || "left",