Add more tests and improve them

frontend/playwright.config.ts

@@ -45,10 +45,10 @@ export default defineConfig({
       use: { ...devices["Desktop Firefox"] },
     },
 
-    {
+    // {
-      name: "webkit",
+    //   name: "webkit",
-      use: { ...devices["Desktop Safari"] },
+    //   use: { ...devices["Desktop Safari"] },
-    },
+    // },
 
     /* Test against mobile viewports. */
     // {

frontend/src/components/settings/Languages.vue

@@ -1,5 +1,5 @@
 <template>
-  <select v-on:change="change" :value="locale">
+  <select name="selectLanguage" v-on:change="change" :value="locale">
     <option v-for="(language, value) in locales" :key="value" :value="value">
       {{ $t("languages." + language) }}
     </option>

frontend/src/views/settings/Profile.vue

@@ -8,15 +8,15 @@
 
         <div class="card-content">
           <p>
-            <input type="checkbox" v-model="hideDotfiles" />
+            <input type="checkbox" name="hideDotfiles" v-model="hideDotfiles" />
             {{ t("settings.hideDotfiles") }}
           </p>
           <p>
-            <input type="checkbox" v-model="singleClick" />
+            <input type="checkbox" name="singleClick" v-model="singleClick" />
             {{ t("settings.singleClick") }}
           </p>
           <p>
-            <input type="checkbox" v-model="dateFormat" />
+            <input type="checkbox" name="dateFormat" v-model="dateFormat" />
             {{ t("settings.setDateFormat") }}
           </p>
           <h3>{{ t("settings.language") }}</h3>
@@ -30,6 +30,7 @@
           <input
             class="button button--flat"
             type="submit"
+            name="submitProfile"
             :value="t('buttons.update')"
           />
         </div>
@@ -59,7 +60,7 @@
             type="password"
             :placeholder="t('settings.newPasswordConfirm')"
             v-model="passwordConf"
-            name="password"
+            name="passwordConf"
           />
         </div>
 
@@ -67,6 +68,7 @@
           <input
             class="button button--flat"
             type="submit"
+            name="submitPassword"
             :value="t('buttons.update')"
           />
         </div>
@@ -144,6 +146,8 @@ const updatePassword = async (event: Event) => {
     $showSuccess(t("settings.passwordUpdated"));
   } catch (e: any) {
     $showError(e);
+  } finally {
+    password.value = passwordConf.value = "";
   }
 };
 const updateSettings = async (event: Event) => {

frontend/tests/auth.spec.ts

@@ -1,15 +1,4 @@
-import { test as base, expect } from "@playwright/test";
+import { test, expect } from "./fixtures/auth";
-import { AuthPage } from "./auth-page";
-
-const test = base.extend<{ authPage: AuthPage }>({
-  authPage: async ({ page }, use) => {
-    const authPage = new AuthPage(page);
-    // await authPage.goto();
-    // await authPage.loginAs();
-    await use(authPage);
-    // await authPage.logout();
-  },
-});
 
 test("redirect to login", async ({ page }) => {
   await page.goto("/");
@@ -28,14 +17,14 @@ test("login and logout", async ({ authPage, page, context }) => {
 
   await authPage.loginAs();
   await expect(authPage.wrongCredentials).toBeHidden();
-  await page.waitForURL("**/files/", { timeout: 5000 });
+  // await page.waitForURL("**/files/", { timeout: 5000 });
   await expect(page).toHaveTitle(/.*Files - File Browser$/);
 
   let cookies = await context.cookies();
   expect(cookies.find((c) => c.name == "auth")?.value).toBeDefined();
 
   await authPage.logout();
-  await page.waitForURL("**/login", { timeout: 5000 });
+  // await page.waitForURL("**/login", { timeout: 5000 });
   await expect(page).toHaveTitle(/Login - File Browser$/);
 
   cookies = await context.cookies();

frontend/tests/fixtures/auth.ts

@@ -1,4 +1,9 @@
-import { type Page, type Locator } from "@playwright/test";
+import {
+  type Page,
+  type Locator,
+  test as base,
+  expect,
+} from "@playwright/test";
 
 export class AuthPage {
   public readonly wrongCredentials: Locator;
@@ -21,3 +26,15 @@ export class AuthPage {
     await this.page.getByRole("button", { name: "Logout" }).click();
   }
 }
+
+const test = base.extend<{ authPage: AuthPage }>({
+  authPage: async ({ page }, use) => {
+    const authPage = new AuthPage(page);
+    await authPage.goto();
+    await authPage.loginAs();
+    await use(authPage);
+    // await authPage.logout();
+  },
+});
+
+export { test, expect };

frontend/tests/fixtures/settings.ts

@@ -0,0 +1,61 @@
+import {
+  type Locator,
+  type Page,
+  test as base,
+  expect,
+} from "@playwright/test";
+import { AuthPage } from "./auth";
+
+type SettingsType = "profile" | "shares" | "global" | "users";
+
+export class SettingsPage {
+  public readonly hideDotfiles: Locator; // checkbox
+  public readonly singleClick: Locator; // checkbox
+  public readonly dateFormat: Locator; // checkbox
+  private readonly languages: Locator; // selection
+  private readonly submitProfile: Locator; // submit
+  private readonly submitPassword: Locator; // submit
+
+  constructor(public readonly page: Page) {
+    this.hideDotfiles = this.page.locator('input[name="hideDotfiles"]');
+    this.singleClick = this.page.locator('input[name="singleClick"]');
+    this.dateFormat = this.page.locator('input[name="dateFormat"]');
+    this.languages = this.page.locator('select[name="selectLanguage"]');
+    this.submitProfile = this.page.locator('input[name="submitProfile"]');
+    this.submitPassword = this.page.locator('input[name="submitPassword"]');
+  }
+
+  async goto(type: SettingsType = "profile") {
+    await this.page.goto(`/settings/${type}`);
+  }
+
+  async setLanguage(locale: string = "en") {
+    await this.languages.selectOption(locale);
+  }
+
+  async saveProfile() {
+    await this.submitProfile.click();
+  }
+
+  async savePassword() {
+    await this.submitPassword.click();
+  }
+}
+
+const test = base.extend<{ settingsPage: SettingsPage }>({
+  page: async ({ page }, use) => {
+    // Sign in with our account.
+    const authPage = new AuthPage(page);
+    await authPage.goto();
+    await authPage.loginAs();
+    await expect(page).toHaveTitle(/.*Files - File Browser$/);
+    // Use signed-in page in the test.
+    await use(page);
+  },
+  settingsPage: async ({ page }, use) => {
+    const settingsPage = new SettingsPage(page);
+    await use(settingsPage);
+  },
+});
+
+export { test, expect };

frontend/tests/fixtures/toast.ts

@@ -0,0 +1,20 @@
+//classes: Vue-Toastification__toast Vue-Toastification__toast--success bottom-center
+import { type Page, type Locator, expect } from "@playwright/test";
+
+export class Toast {
+  private readonly success: Locator;
+  private readonly error: Locator;
+
+  constructor(public readonly page: Page) {
+    this.success = this.page.locator("div.Vue-Toastification__toast--success");
+    this.error = this.page.locator("div.Vue-Toastification__toast--error");
+  }
+
+  async isSuccess() {
+    await expect(this.success).toBeVisible();
+  }
+
+  async isError() {
+    await expect(this.error).toBeVisible();
+  }
+}

frontend/tests/settings.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from "./fixtures/settings";
+import { Toast } from "./fixtures/toast";
+
+// test.describe("profile settings", () => {
+test("settings button", async ({ page }) => {
+  const button = page.getByLabel("Settings", { exact: true });
+  await expect(button).toBeVisible();
+  await button.click();
+  await expect(page).toHaveTitle(/^Profile Settings/);
+  await expect(
+    page.getByRole("heading", { name: "Profile Settings" })
+  ).toBeVisible();
+});
+
+test("set locale", async ({ settingsPage, page }) => {
+  const toast = new Toast(page);
+
+  await settingsPage.goto("profile");
+  await expect(page).toHaveTitle(/^Profile Settings/);
+  // await settingsPage.saveProfile();
+  // await toast.isSuccess();
+  // await expect(
+  //   page.getByText("Settings updated!", { exact: true })
+  // ).toBeVisible();
+
+  await settingsPage.setLanguage("hu");
+  await settingsPage.saveProfile();
+  await toast.isSuccess();
+  await expect(
+    page.getByText("Beállítások frissítve!", { exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Profilbeállítások" })
+  ).toBeVisible();
+
+  await settingsPage.setLanguage("en");
+  await settingsPage.saveProfile();
+  await toast.isSuccess();
+  await expect(
+    page.getByText("Settings updated!", { exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Profile Settings" })
+  ).toBeVisible();
+});
+// });