From 9056519e45f5da72aa37ff563ad2311f5bcbb3bc Mon Sep 17 00:00:00 2001
From: Kloon ImKloon <kloon15@gmail.com>
Date: Fri, 6 Oct 2023 14:25:03 +0200
Subject: [PATCH] Add more tests and improve them

---
 frontend/playwright.config.ts                 |  8 +--
 .../src/components/settings/Languages.vue     |  2 +-
 frontend/src/views/settings/Profile.vue       | 12 ++--
 frontend/tests/auth.spec.ts                   | 17 +-----
 .../tests/{auth-page.ts => fixtures/auth.ts}  | 19 +++++-
 frontend/tests/fixtures/settings.ts           | 61 +++++++++++++++++++
 frontend/tests/fixtures/toast.ts              | 20 ++++++
 frontend/tests/settings.spec.ts               | 46 ++++++++++++++
 8 files changed, 161 insertions(+), 24 deletions(-)
 rename frontend/tests/{auth-page.ts => fixtures/auth.ts} (61%)
 create mode 100644 frontend/tests/fixtures/settings.ts
 create mode 100644 frontend/tests/fixtures/toast.ts
 create mode 100644 frontend/tests/settings.spec.ts

diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index f43d7d82..af335a17 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -45,10 +45,10 @@ export default defineConfig({
       use: { ...devices["Desktop Firefox"] },
     },
 
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
 
     /* Test against mobile viewports. */
     // {
diff --git a/frontend/src/components/settings/Languages.vue b/frontend/src/components/settings/Languages.vue
index 5fd61be2..d6268f43 100644
--- a/frontend/src/components/settings/Languages.vue
+++ b/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>
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index 590af69e..c677092f 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/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) => {
diff --git a/frontend/tests/auth.spec.ts b/frontend/tests/auth.spec.ts
index 92123bb2..4273bcee 100644
--- a/frontend/tests/auth.spec.ts
+++ b/frontend/tests/auth.spec.ts
@@ -1,15 +1,4 @@
-import { test as base, expect } from "@playwright/test";
-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();
-  },
-});
+import { test, expect } from "./fixtures/auth";
 
 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();
diff --git a/frontend/tests/auth-page.ts b/frontend/tests/fixtures/auth.ts
similarity index 61%
rename from frontend/tests/auth-page.ts
rename to frontend/tests/fixtures/auth.ts
index 3d9db23b..ad1b015e 100644
--- a/frontend/tests/auth-page.ts
+++ b/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 };
diff --git a/frontend/tests/fixtures/settings.ts b/frontend/tests/fixtures/settings.ts
new file mode 100644
index 00000000..aa0027c9
--- /dev/null
+++ b/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 };
diff --git a/frontend/tests/fixtures/toast.ts b/frontend/tests/fixtures/toast.ts
new file mode 100644
index 00000000..4b5ebbf5
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/frontend/tests/settings.spec.ts b/frontend/tests/settings.spec.ts
new file mode 100644
index 00000000..c8726e42
--- /dev/null
+++ b/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();
+});
+// });