web: improve backups test reliability

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);

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();
   }
 

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");
   }
 }

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 }) => {

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",