Tests: Add new page models

frontend/tests/page-model/album.js

@@ -0,0 +1,52 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {
+  }
+
+  async getNthAlbumUid(type, nth) {
+    if (type === "all") {
+      const NthAlbum = await Selector("a.is-album").nth(nth).getAttribute("data-uid");
+      return NthAlbum;
+    } else {
+      const NthAlbum = await Selector("a.type-" + type)
+        .nth(nth)
+        .getAttribute("data-uid");
+      return NthAlbum;
+    }
+  }
+
+  async getAlbumCount(type) {
+    if (type === "all") {
+      const AlbumCount = await Selector("a.is-album", { timeout: 5000 }).count;
+      return AlbumCount;
+    } else {
+      const AlbumCount = await Selector("a.type-" + type, { timeout: 5000 }).count;
+      return AlbumCount;
+    }
+  }
+
+  async selectAlbumFromUID(uid) {
+    await t
+      .hover(Selector("a.is-album").withAttribute("data-uid", uid))
+      .click(Selector(`.uid-${uid} .input-select`));
+  }
+
+  async toggleSelectNthAlbum(nth, type) {
+    if (type === "all") {
+      await t
+        .hover(Selector("a.is-album", { timeout: 4000 }).nth(nth))
+        .click(Selector("a.is-album .input-select").nth(nth));
+    } else {
+      await t
+        .hover(Selector("a.type-" + type, { timeout: 4000 }).nth(nth))
+        .click(Selector("a.type-" + type + " .input-select").nth(nth));
+    }
+  }
+}

frontend/tests/page-model/context-menu.js

@@ -0,0 +1,53 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {}
+
+  //open context menu -- context menu
+  async openContextMenu() {
+    if (!(await Selector(".action-clear").visible)) {
+      await t.click(Selector("button.action-menu"));
+    }
+  }
+
+  //check context menu count -- context menu
+  async checkContextMenuCount(count) {
+    const Count = await Selector("span.count-clipboard", { timeout: 5000 });
+    await t.expect(Count.textContent).eql(count);
+  }
+
+  //check context menu action availability (all)
+  //TODO Use foreach
+  async checkContextMenuActionAvailability(action, visible) {
+    await this.openContextMenu();
+    if (visible) {
+      await t.expect(Selector("#t-clipboard button.action-" + action).visible).ok();
+    } else {
+      await t.expect(Selector("#t-clipboard button.action-" + action).visible).notOk();
+    }
+  }
+
+  //trigger context menu action (edit/delete/share/archive/restore.....)
+  async triggerContextMenuAction(action, albumName, albumType) {
+    await this.openContextMenu();
+    await t.click(Selector("#t-clipboard button.action-" + action));
+    if (action === "delete") {
+      await t.click(Selector("button.action-confirm"));
+    }
+    if ((action === "album") | (action === "clone")) {
+      await t.typeText(Selector(".input-album input"), name, { replace: true }).pressKey("enter");
+    }
+  }
+
+  //clear selection -- context menu
+  async clearSelection() {
+    await this.openContextMenu();
+    await t.click(Selector(".action-clear"));
+  }
+}

frontend/tests/page-model/label.js

@@ -0,0 +1,33 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {}
+
+  async getNthLabeltUid(nth) {
+    const NthLabel = await Selector("a.is-label").nth(nth).getAttribute("data-uid");
+    return NthLabel;
+  }
+
+  async getLabelCount() {
+    const LabelCount = await Selector("a.is-label", { timeout: 5000 }).count;
+    return LabelCount;
+  }
+
+  async selectLabelFromUID(uid) {
+    await t
+      .hover(Selector("a.is-label").withAttribute("data-uid", uid))
+      .click(Selector(`.uid-${uid} .input-select`));
+  }
+
+  async toggleSelectNthLabel(nth) {
+    await t
+      .hover(Selector("a.is-label", { timeout: 4000 }).nth(nth))
+      .click(Selector("a.is-label .input-select").nth(nth));
+  }
+}

frontend/tests/page-model/menu.js

@@ -0,0 +1,88 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {}
+
+  async openNav() {
+    if (await Selector("button.nav-show").exists) {
+      await t.click(Selector("button.nav-show"));
+    } else if (await Selector("div.nav-expand").exists) {
+      await t.click(Selector("div.nav-expand i"));
+    }
+  }
+
+  async openPage(page) {
+    await this.openNav();
+    if (
+      (page === "monochrome") |
+      (page === "panoramas") |
+      (page === "stacks") |
+      (page === "scans") |
+      (page === "review") |
+      (page === "archive")
+    ) {
+      await t.click(Selector("div.nav-browse + div"));
+    } else if (page === "live") {
+      await t.click(Selector("div.nav-video + div"));
+    } else if (page === "states") {
+      await t.click(Selector("div.nav-places + div"));
+    } else if ((page === "originals") | (page === "hidden") | (page === "errors")) {
+      await t.click(Selector("div.nav-library + div"));
+    } else if ((page === "abouts") | (page === "feedback") | (page === "license")) {
+      await t.click(Selector("div.nav-settings + div"));
+    }
+    await t.click(Selector(".nav-" + page));
+  }
+
+  async checkMenuItemAvailability(page, visible) {
+    await this.openNav();
+    if (
+      (page === "monochrome") |
+      (page === "panoramas") |
+      (page === "stacks") |
+      (page === "scans") |
+      (page === "review") |
+      (page === "archive")
+    ) {
+      await t.click(Selector("div.nav-browse + div"));
+    } else if (page === "live") {
+      if (await Selector(".nav-video").visible) {
+        if (!(await Selector("div.v-list__group--active div.nav-video").visible)) {
+          await t.click(Selector("div.nav-video + div"));
+        }
+      }
+    } else if (page === "states") {
+      if (await Selector(".nav-places").visible) {
+        if (!(await Selector("div.v-list__group--active div.nav-places").visible)) {
+          await t.click(Selector("div.nav-places + div"));
+        }
+      }
+    } else if ((page === "originals") | (page === "hidden") | (page === "errors")) {
+      if (await Selector(".nav-library").visible) {
+        if (!(await Selector("div.v-list__group--active div.nav-library").visible)) {
+          if (await Selector("div.nav-library + div").visible) {
+            await t.click(Selector("div.nav-library + div"));
+          }
+        }
+      }
+    } else if ((page === "abouts") | (page === "feedback") | (page === "license")) {
+      if (await Selector(".nav-settings").visible) {
+        if (!(await Selector("div.v-list__group--active div.nav-settings").visible)) {
+          await t.click(Selector("div.nav-settings + div"));
+        }
+      }
+    }
+
+    if (visible) {
+      await t.expect(Selector(".nav-" + page).visible).ok();
+    } else {
+      await t.expect(Selector(".nav-" + page).visible).notOk();
+    }
+  }
+}

frontend/tests/page-model/photo-edit.js

@@ -0,0 +1,381 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {}
+
+  // turn switch of --photo --edit
+  async turnSwitchOff(type) {
+    await t
+      .click("#tab-info")
+      .expect(
+        Selector(".input-" + type + " input", { timeout: 8000 }).hasAttribute(
+          "aria-checked",
+          "true"
+        )
+      )
+      .ok()
+      .click(Selector(".input-" + type + " input"))
+      .expect(
+        Selector(".input-" + type + " input", { timeout: 8000 }).hasAttribute(
+          "aria-checked",
+          "false"
+        )
+      )
+      .ok();
+  }
+
+  async turnSwitchOn(type) {
+    await t
+      .click("#tab-info")
+      .expect(
+        Selector(".input-" + type + " input", { timeout: 8000 }).hasAttribute(
+          "aria-checked",
+          "false"
+        )
+      )
+      .ok()
+      .click(Selector(".input-" + type + " input"))
+      .expect(
+        Selector(".input-" + type + " input", { timeout: 8000 }).hasAttribute(
+          "aria-checked",
+          "true"
+        )
+      )
+      .ok();
+  }
+
+  //TODO refactor
+  async checkEditFormValues(
+    title,
+    day,
+    month,
+    year,
+    localTime,
+    utcTime,
+    timezone,
+    country,
+    altitude,
+    lat,
+    lng,
+    camera,
+    iso,
+    exposure,
+    lens,
+    fnumber,
+    flength,
+    subject,
+    artist,
+    copyright,
+    license,
+    description,
+    keywords,
+    notes
+  ) {
+    if (title !== "") {
+      await t.expect(Selector(".input-title input").value).eql(title);
+    }
+    if (day !== "") {
+      await t.expect(Selector(".input-day input").value).eql(day);
+    }
+    if (month !== "") {
+      await t.expect(Selector(".input-month input").value).eql(month);
+    }
+    if (year !== "") {
+      await t.expect(Selector(".input-year input").value).eql(year);
+    }
+    if (timezone !== "") {
+      await t.expect(Selector(".input-timezone input").value).eql(timezone);
+    }
+    if (localTime !== "") {
+      await t.expect(Selector(".input-local-time input").value).eql(localTime);
+    }
+    if (utcTime !== "") {
+      await t.expect(Selector(".input-utc-time input").value).eql(utcTime);
+    }
+    if (altitude !== "") {
+      await t.expect(Selector(".input-altitude input").value).eql(altitude);
+    }
+    if (country !== "") {
+      await t.expect(Selector("div").withText(country).visible).ok();
+    }
+    if (lat !== "") {
+      await t.expect(Selector(".input-latitude input").value).eql(lat);
+    }
+    if (lng !== "") {
+      await t.expect(Selector(".input-longitude input").value).eql(lng);
+    }
+    if (camera !== "") {
+      await t.expect(Selector("div").withText(camera).visible).ok();
+    }
+    if (lens !== "") {
+      await t.expect(Selector("div").withText(lens).visible).ok();
+    }
+    if (iso !== "") {
+      await t.expect(Selector(".input-iso input").value).eql(iso);
+    }
+    if (exposure !== "") {
+      await t.expect(Selector(".input-exposure input").value).eql(exposure);
+    }
+    if (fnumber !== "") {
+      await t.expect(Selector(".input-fnumber input").value).eql(fnumber);
+    }
+    if (flength !== "") {
+      await t.expect(Selector(".input-focal-length input").value).eql(flength);
+    }
+    if (subject !== "") {
+      await t.expect(Selector(".input-subject textarea").value).eql(subject);
+    }
+    if (artist !== "") {
+      await t.expect(Selector(".input-artist input").value).eql(artist);
+    }
+    if (copyright !== "") {
+      await t.expect(Selector(".input-copyright input").value).eql(copyright);
+    }
+    if (license !== "") {
+      await t.expect(Selector(".input-license textarea").value).eql(license);
+    }
+    if (description !== "") {
+      await t.expect(Selector(".input-description textarea").value).eql(description);
+    }
+    if (notes !== "") {
+      await t.expect(Selector(".input-notes textarea").value).contains(notes);
+    }
+    if (keywords !== "") {
+      await t.expect(Selector(".input-keywords textarea").value).contains(keywords);
+    }
+  }
+
+  async editPhoto(
+    title,
+    timezone,
+    day,
+    month,
+    year,
+    localTime,
+    altitude,
+    lat,
+    lng,
+    iso,
+    exposure,
+    fnumber,
+    flength,
+    subject,
+    artist,
+    copyright,
+    license,
+    description,
+    keywords,
+    notes
+  ) {
+    await t
+      .typeText(Selector(".input-title input"), title, { replace: true })
+      .typeText(Selector(".input-timezone input"), timezone, { replace: true })
+      .click(Selector("div").withText(timezone).parent('div[role="listitem"]'))
+      .typeText(Selector(".input-day input"), day, { replace: true })
+      .pressKey("enter")
+      .typeText(Selector(".input-month input"), month, { replace: true })
+      .pressKey("enter")
+      .typeText(Selector(".input-year input"), year, { replace: true })
+      .click(Selector("div").withText(year).parent('div[role="listitem"]'))
+      .click(Selector(".input-local-time input"))
+      .pressKey("ctrl+a delete")
+      .typeText(Selector(".input-local-time input"), localTime, { replace: true })
+      .pressKey("enter")
+      .typeText(Selector(".input-altitude input"), altitude, { replace: true })
+      .typeText(Selector(".input-latitude input"), lat, { replace: true })
+      .typeText(Selector(".input-longitude input"), lng, { replace: true })
+      //.click(Selector('.input-camera input'))
+      //.hover(Selector('div').withText('Apple iPhone 6').parent('div[role="listitem"]'))
+      //.click(Selector('div').withText('Apple iPhone 6').parent('div[role="listitem"]'))
+      //.click(Selector('.input-lens input'))
+      //.click(Selector('div').withText('Apple iPhone 5s back camera 4.15mm f/2.2').parent('div[role="listitem"]'))
+      .typeText(Selector(".input-iso input"), iso, { replace: true })
+      .typeText(Selector(".input-exposure input"), exposure, { replace: true })
+      .typeText(Selector(".input-fnumber input"), fnumber, { replace: true })
+      .typeText(Selector(".input-focal-length input"), flength, { replace: true })
+      .typeText(Selector(".input-subject textarea"), subject, { replace: true })
+      .typeText(Selector(".input-artist input"), artist, { replace: true })
+      .typeText(Selector(".input-copyright input"), copyright, { replace: true })
+      .typeText(Selector(".input-license textarea"), license, { replace: true })
+      .typeText(Selector(".input-description textarea"), description, {
+        replace: true,
+      })
+      .typeText(Selector(".input-keywords textarea"), keywords)
+      .typeText(Selector(".input-notes textarea"), notes, { replace: true })
+      .click(Selector("button.action-approve"));
+    await t.expect(Selector(".input-latitude input").visible, { timeout: 5000 }).ok();
+    if (t.browser.platform === "mobile") {
+      await t.click(Selector("button.action-apply")).click(Selector("button.action-close"));
+    } else {
+      await t.click(Selector("button.action-done", { timeout: 5000 }));
+    }
+  }
+
+  async undoPhotoEdit(
+    title,
+    timezone,
+    day,
+    month,
+    year,
+    localTime,
+    altitude,
+    lat,
+    lng,
+    country,
+    iso,
+    exposure,
+    fnumber,
+    flength,
+    subject,
+    artist,
+    copyright,
+    license,
+    description,
+    keywords,
+    notes
+  ) {
+    if (title.empty || title === "") {
+      await t.click(Selector(".input-title input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-title input"), title, { replace: true });
+    }
+    await t
+      .typeText(Selector(".input-day input"), day, { replace: true })
+      .pressKey("enter")
+      .typeText(Selector(".input-month input"), month, { replace: true })
+      .pressKey("enter")
+      .typeText(Selector(".input-year input"), year, { replace: true })
+      .pressKey("enter");
+    if (localTime.empty || localTime === "") {
+      await t.click(Selector(".input-local-time input")).pressKey("ctrl+a delete");
+    } else {
+      await t
+        .click(Selector(".input-local-time input"))
+        .pressKey("ctrl+a delete")
+        .typeText(Selector(".input-local-time input"), localTime, { replace: true })
+        .pressKey("enter");
+    }
+    if (timezone.empty || timezone === "") {
+      await t
+        .click(Selector(".input-timezone input"))
+        .typeText(Selector(".input-timezone input"), "UTC", { replace: true })
+        .pressKey("enter");
+    } else {
+      await t
+        .typeText(Selector(".input-timezone input"), timezone, { replace: true })
+        .pressKey("enter");
+    }
+    if (lat.empty || lat === "") {
+      await t.click(Selector(".input-latitude input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-latitude input"), lat, { replace: true });
+    }
+    if (lng.empty || lng === "") {
+      await t.click(Selector(".input-longitude input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-longitude input"), lng, { replace: true });
+    }
+    if (altitude.empty || altitude === "") {
+      await t.click(Selector(".input-altitude input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-altitude input"), altitude, { replace: true });
+    }
+    if (country.empty || country === "") {
+      await t.click(Selector(".input-longitude input")).pressKey("ctrl+a delete");
+    } else {
+      await t
+        .click(Selector(".input-country input"))
+        .pressKey("ctrl+a delete")
+        .typeText(Selector(".input-country input"), country, { replace: true })
+        .pressKey("enter");
+    }
+    // if (FirstPhotoCamera.empty || FirstPhotoCamera === "")
+    //{ await t
+    //.click(Selector('.input-camera input'))
+    // .hover(Selector('div').withText('Unknown').parent('div[role="listitem"]'))
+    //  .click(Selector('div').withText('Unknown').parent('div[role="listitem"]'))}
+    //else
+    //{await t
+    //  .click(Selector('.input-camera input'))
+    //   .hover(Selector('div').withText(FirstPhotoCamera).parent('div[role="listitem"]'))
+    //    .click(Selector('div').withText(FirstPhotoCamera).parent('div[role="listitem"]'))}
+    //if (FirstPhotoLens.empty || FirstPhotoLens === "")
+    //{ await t
+    //  .click(Selector('.input-lens input'))
+    //   .click(Selector('div').withText('Unknown').parent('div[role="listitem"]'))}
+    //else
+    //{await t
+    //   .click(Selector('.input-lens input'))
+    //    .click(Selector('div').withText(FirstPhotoLens).parent('div[role="listitem"]'))}
+    if (iso.empty || iso === "") {
+      await t.click(Selector(".input-iso input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-iso input"), iso, { replace: true });
+    }
+    if (exposure.empty || exposure === "") {
+      await t.click(Selector(".input-exposure input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-exposure input"), exposure, { replace: true });
+    }
+    if (fnumber.empty || fnumber === "") {
+      await t.click(Selector(".input-fnumber input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-fnumber input"), fnumber, { replace: true });
+    }
+    if (flength.empty || flength === "") {
+      await t.click(Selector(".input-focal-length input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-focal-length input"), flength, {
+        replace: true,
+      });
+    }
+    if (subject.empty || subject === "") {
+      await t.click(Selector(".input-subject textarea")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-subject textarea"), subject, { replace: true });
+    }
+    if (artist.empty || artist === "") {
+      await t.click(Selector(".input-artist input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-artist input"), artist, { replace: true });
+    }
+    if (copyright.empty || copyright === "") {
+      await t.click(Selector(".input-copyright input")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-copyright input"), copyright, { replace: true });
+    }
+    if (license.empty || license === "") {
+      await t.click(Selector(".input-license textarea")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-license textarea"), license, { replace: true });
+    }
+    if (description.empty || description === "") {
+      await t.click(Selector(".input-description textarea")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-description textarea"), description, {
+        replace: true,
+      });
+    }
+    if (keywords.empty || keywords === "") {
+      await t.click(Selector(".input-keywords textarea")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-keywords textarea"), keywords, { replace: true });
+    }
+    if (notes.empty || notes === "") {
+      await t.click(Selector(".input-notes textarea")).pressKey("ctrl+a delete");
+    } else {
+      await t.typeText(Selector(".input-notes textarea"), notes, { replace: true });
+    }
+    if (t.browser.platform === "mobile") {
+      await t.click(Selector("button.action-apply")).click(Selector("button.action-close"));
+    } else {
+      await t.click(Selector("button.action-done", { timeout: 5000 }));
+    }
+  }
+}

frontend/tests/page-model/photo-views.js

@@ -0,0 +1,59 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {
+    this.view = Selector("div.p-view-select", { timeout: 15000 });
+    this.camera = Selector("div.p-camera-select", { timeout: 15000 });
+    this.countries = Selector("div.p-countries-select", { timeout: 15000 });
+    this.time = Selector("div.p-time-select", { timeout: 15000 });
+    this.search1 = Selector("div.input-search input", { timeout: 15000 });
+  }
+
+  async checkHoverActionAvailability(mode, uidOrNth, action, visible) {
+    if (mode === "uid") {
+      await t.hover(Selector("div.is-photo").withAttribute("data-uid", uidOrNth));
+      if (visible) {
+        await t.expect(Selector(`.uid-${uidOrNth} .input-` + action).visible).ok();
+      } else {
+        await t.expect(Selector(`.uid-${uidOrNth} .input-` + action).visible).notOk();
+      }
+    }
+    if (mode === "nth") {
+      await t.hover(Selector("div.is-photo").nth(uidOrNth));
+      if (visible) {
+        await t.expect(Selector(`div.input-` + action).visible).ok();
+      } else {
+        await t.expect(Selector(`div.input-` + action).visible).notOk();
+      }
+    }
+  }
+
+  async triggerHoverAction(mode, uidOrNth, action) {
+    if (mode === "uid") {
+      await t.hover(Selector("div.is-photo").withAttribute("data-uid", uidOrNth));
+      await t.click(Selector(`div.uid-${uidOrNth} .input-` + action));
+    }
+    if (mode === "nth") {
+      await t.hover(Selector("div.is-photo").nth(uidOrNth));
+      await t.click(Selector(`div.input-` + action));
+    }
+  }
+
+  async triggerListViewActions(nth, action) {
+    await t.click(Selector(`td button.input-` + action).nth(nth));
+  }
+
+  async checkListViewActionAvailability(action, disabled) {
+    if (disabled) {
+      await t.expect(Selector(`td button.input-` + action).hasAttribute("disabled")).ok();
+    } else {
+      await t.expect(Selector(`td button.input-` + action).hasAttribute("disabled")).notOk();
+    }
+  }
+}

frontend/tests/page-model/photo.js

@@ -0,0 +1,51 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {}
+
+  async getNthPhotoUid(type, nth) {
+    if (type === "all") {
+      const NthPhoto = await Selector("div.is-photo").nth(nth).getAttribute("data-uid");
+      return NthPhoto;
+    } else {
+      const NthPhoto = await Selector("div.type-" + type)
+        .nth(nth)
+        .getAttribute("data-uid");
+      return NthPhoto;
+    }
+  }
+
+  async getPhotoCount(type) {
+    if (type === "all") {
+      const PhotoCount = await Selector("div.is-photo", { timeout: 5000 }).count;
+      return PhotoCount;
+    } else {
+      const PhotoCount = await Selector("div.type-" + type, { timeout: 5000 }).count;
+      return PhotoCount;
+    }
+  }
+
+  async selectPhotoFromUID(uid) {
+    await t
+      .hover(Selector("div.is-photo").withAttribute("data-uid", uid))
+      .click(Selector(`.uid-${uid} .input-select`));
+  }
+
+  async toggleSelectNthPhoto(nPhoto, type) {
+    if (type === "all") {
+      await t
+        .hover(Selector(".is-photo", { timeout: 4000 }).nth(nPhoto))
+        .click(Selector(".is-photo .input-select").nth(nPhoto));
+    } else {
+      await t
+        .hover(Selector("div.type-" + type, { timeout: 4000 }).nth(nPhoto))
+        .click(Selector("div.type-" + type + " .input-select").nth(nPhoto));
+    }
+  }
+}

frontend/tests/page-model/photoviewer.js

@@ -0,0 +1,50 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {
+    this.view = Selector("div.p-view-select", { timeout: 15000 });
+    this.camera = Selector("div.p-camera-select", { timeout: 15000 });
+    this.countries = Selector("div.p-countries-select", { timeout: 15000 });
+    this.time = Selector("div.p-time-select", { timeout: 15000 });
+    this.search1 = Selector("div.input-search input", { timeout: 15000 });
+  }
+
+  async openPhotoViewer(mode, uidOrNth) {
+    if (mode === "uid") {
+      await t.hover(Selector("div.is-photo").withAttribute("data-uid", uidOrNth));
+      if (await Selector(`.uid-${uidOrNth} .action-fullscreen`).visible) {
+        await t.click(Selector(`.uid-${uidOrNth} .action-fullscreen`));
+      } else {
+        await t.click(Selector("div.is-photo").withAttribute("data-uid", uidOrNth));
+      }
+    } else if (mode === "nth") {
+      await t.hover(Selector("div.is-photo").nth(uidOrNth));
+      if (await Selector(`div.is-photo .action-fullscreen`).visible) {
+        await t.click(Selector(`div.is-photo .action-fullscreen`));
+      } else {
+        await t.click(Selector("div.is-photo").nth(uidOrNth));
+      }
+    }
+    await t.expect(Selector("#photo-viewer").visible).ok();
+  }
+
+  async checkPhotoViewerActionAvailability(action, visible) {
+    if (visible) {
+      await t.expect(Selector("div.pswp__top-bar button.action-" + action).visible).ok();
+    } else {
+      await t.expect(Selector("div.pswp__top-bar button.action-" + action).visible).notOk();
+    }
+  }
+
+  //trigger fullscreen menu action (edit/like/close) --fullscreen
+  async triggerPhotoViewerAction(action) {
+    await t.click(Selector("div.pswp__top-bar button.action-" + action));
+  }
+
+}

frontend/tests/page-model/subject.js

@@ -0,0 +1,33 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {}
+
+  async getNthSubjectUid(nth) {
+    const NthSubject = await Selector("a.is-subject").nth(nth).getAttribute("data-uid");
+    return NthSubject;
+  }
+
+  async getSubjectCount() {
+    const SubjectCount = await Selector("a.is-subject", { timeout: 5000 }).count;
+    return SubjectCount;
+  }
+
+  async selectSubjectFromUID(uid) {
+    await t
+      .hover(Selector("a.is-subject").withAttribute("data-uid", uid))
+      .click(Selector(`.uid-${uid} .input-select`));
+  }
+
+  async toggleSelectNthSubject(nth) {
+    await t
+      .hover(Selector("a.is-subject", { timeout: 4000 }).nth(nth))
+      .click(Selector("a.is-subject .input-select").nth(nth));
+  }
+}

frontend/tests/page-model/toolbar.js

@@ -0,0 +1,82 @@
+import { Selector, t } from "testcafe";
+import { RequestLogger } from "testcafe";
+
+const logger = RequestLogger(/http:\/\/localhost:2343\/api\/v1\/*/, {
+  logResponseHeaders: true,
+  logResponseBody: true,
+});
+
+export default class Page {
+  constructor() {
+    this.view = Selector("div.p-view-select", { timeout: 15000 });
+    this.camera = Selector("div.p-camera-select", { timeout: 15000 });
+    this.countries = Selector("div.p-countries-select", { timeout: 15000 });
+    this.time = Selector("div.p-time-select", { timeout: 15000 });
+    this.search1 = Selector("div.input-search input", { timeout: 15000 });
+  }
+
+  async toggleFilterBar() {
+    await t.click(Selector("nav.page-toolbar button.action-expand-search"));
+  }
+
+  //check availability
+  async checkToolbarActionAvailability(action, visible) {
+    if (visible) {
+      await t.expect(Selector("nav.page-toolbar button.action-" + action).visible).ok();
+    } else {
+      await t.expect(Selector("nav.page-toolbar button.action-" + action).visible).notOk();
+    }
+  }
+
+  //click trigger action on toolbar -- toolbar --album (reload, switch view, upload, add album, hide/show,
+  async triggerToolbarAction(action, name) {
+    await t.click(Selector("nav.page-toolbar button.action-" + action));
+    if (action === "add") {
+      await t.typeText(Selector(".input-album input"), name, { replace: true }).pressKey("enter");
+    }
+  }
+
+  //set filter --toolbar category as well
+  //TODO refactor
+  async setFilter(filter, option) {
+    let filterSelector = "";
+
+    switch (filter) {
+      case "view":
+        filterSelector = "div.p-view-select";
+        break;
+      case "camera":
+        filterSelector = "div.p-camera-select";
+        break;
+      case "time":
+        filterSelector = "div.p-time-select";
+        break;
+      case "countries":
+        filterSelector = "div.p-countries-select";
+        break;
+      default:
+        throw "unknown filter";
+    }
+    if (!(await Selector(filterSelector).visible)) {
+      await t.click(Selector(".p-expand-search"));
+    }
+    await t.click(filterSelector, { timeout: 15000 });
+
+    if (option) {
+      await t.click(Selector('div[role="listitem"]').withText(option), { timeout: 15000 });
+    } else {
+      await t.click(Selector('div[role="listitem"]').nth(1), { timeout: 15000 });
+    }
+  }
+
+  //search --toolbar
+  async search(term) {
+    await t
+      .typeText(this.search1, term, { replace: true })
+      .pressKey("enter")
+      //TODO remove wait
+      //.wait(10000)
+      .expect(this.search1.value, { timeout: 15000 })
+      .contains(term);
+  }
+}