web: added move topics test

Signed-off-by: Muhammad Ali <alihamuh@gmail.com>

apps/web/__e2e__/keyboard-list-navigation.test.ts

@@ -120,7 +120,7 @@ test("pressing Enter should open focused note", async ({ page }) => {
   expect(await notes.editor.getTitle()).toBe(await notesList[2].getTitle());
 });
 
-test.only("pressing Shift+ArrowDown should select next note", async ({ page }) => {
+test("pressing Shift+ArrowDown should select next note", async ({ page }) => {
   const { notesList, notes } = await populateList(page);
   await notes.focus();
 

apps/web/__e2e__/models/app.model.ts

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Page } from "@playwright/test";
+import { Page, Locator } from "@playwright/test";
 import { getTestId } from "../utils";
 import { AuthModel } from "./auth.model";
 import { CheckoutModel } from "./checkout.model";
@@ -35,6 +35,7 @@ export class AppModel {
   readonly navigation: NavigationMenuModel;
   readonly auth: AuthModel;
   readonly checkout: CheckoutModel;
+  readonly routeHeader: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -42,6 +43,7 @@ export class AppModel {
     this.navigation = new NavigationMenuModel(page);
     this.auth = new AuthModel(page);
     this.checkout = new CheckoutModel(page);
+    this.routeHeader = this.page.locator(getTestId("routeHeader"));
   }
 
   async goto() {
@@ -85,14 +87,18 @@ export class AppModel {
   }
 
   private async navigateTo(title: string) {
-    if ((await this.getRouteHeader()) === title) return;
+    if (
+      !(await this.routeHeader.isVisible()) ||
+      (await this.getRouteHeader()) === title
+    )
+      return;
     const item = await this.navigation.findItem(title);
     await item?.click();
     await this.page.waitForTimeout(1000);
   }
 
-  getRouteHeader() {
-    return this.page.locator(getTestId("routeHeader")).inputValue();
+  async getRouteHeader() {
+    return await this.page.locator(getTestId("routeHeader")).inputValue();
   }
 
   async isSynced() {

apps/web/__e2e__/models/item.model.ts

@@ -22,7 +22,7 @@ import { BaseItemModel } from "./base-item.model";
 import { ContextMenuModel } from "./context-menu.model";
 import { NotesViewModel } from "./notes-view.model";
 import { Item } from "./types";
-import { fillItemDialog } from "./utils";
+import { fillItemDialog, fillMoveTopicDialog } from "./utils";
 
 export class ItemModel extends BaseItemModel {
   private readonly contextMenu: ContextMenuModel;
@@ -69,4 +69,10 @@ export class ItemModel extends BaseItemModel {
     await this.contextMenu.close();
     return state;
   }
+
+  async moveItem(notebookTitle: string) {
+    await this.contextMenu.open(this.locator);
+    await this.contextMenu.clickOnItem("move");
+    await fillMoveTopicDialog(this.page, notebookTitle);
+  }
 }

apps/web/__e2e__/models/utils.ts

@@ -57,6 +57,18 @@ export async function fillNotebookDialog(
   await confirmDialog(page);
 }
 
+export async function fillMoveTopicDialog(page: Page, notebookTitle: string) {
+  const notebookList = page.locator(getTestId("notebook-list"));
+  const notebookTitles = notebookList.locator(getTestId("title"));
+  const dialogConfirm = page.locator(getTestId("dialog-yes"));
+  for await (const title of iterateList(notebookTitles)) {
+    if (notebookTitle === (await title.textContent())) {
+      await title.click();
+    }
+  }
+  await confirmDialog(page);
+}
+
 export async function fillItemDialog(page: Page, item: Item) {
   const titleInput = page.locator(getTestId("title-input"));
   await titleInput.waitFor({ state: "visible" });

apps/web/__e2e__/topics.test.ts

@@ -0,0 +1,51 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2022 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { test, expect } from "@playwright/test";
+import { AppModel } from "./models/app.model";
+import { getTestId, NOTE } from "./utils";
+
+test.only("Move topic to notebook", async ({ page }) => {
+  const NOTEBOOK1 = {
+    title: "Test notebook 1",
+    description: "This is test notebook 1",
+    topics: ["Topic 1", "Very long topic 2", "Topic 3"]
+  };
+  const NOTEBOOK2 = {
+    title: "Test notebook 2",
+    description: "This is test notebook 2",
+    topics: ["Topic 4", "Very long topic 5", "Topic 6"]
+  };
+
+  const app = new AppModel(page);
+  await app.goto();
+  const notebooks = await app.goToNotebooks();
+  const notebook1 = await notebooks.createNotebook(NOTEBOOK1);
+  const notebook2 = await notebooks.createNotebook(NOTEBOOK2);
+
+  const topics = await notebook1?.openNotebook();
+  const topic = await topics?.findItem({ title: NOTEBOOK1.topics[0] });
+  await topic?.moveItem(NOTEBOOK2.title);
+
+  await page.locator(getTestId("go-back")).click();
+  const topics2 = await notebook2?.openNotebook();
+  const topic2 = await topics2?.findItem({ title: NOTEBOOK1.topics[0] });
+
+  expect((await topic2?.getTitle()) === NOTEBOOK1.topics[0]).toBeTruthy();
+});

apps/web/src/components/dialogs/move-topics-dialog.tsx

@@ -96,7 +96,6 @@ function MoveDialog({ onClose, topics, id }: MoveDialogProps) {
                   justifyContent: "space-between"
                 }}
                 onClick={(e) => {
-                  console.log("143 move topic dialog", notebook);
                   setSelected(notebook.id);
                   refresh();
                 }}

apps/web/src/components/group-header/index.js

@@ -247,6 +247,7 @@ function GroupHeader(props) {
       {index === 0 && (
         <Flex mr={1}>
           <IconButton
+            testId={"sort-icon-button"}
             icon={
               groupOptions.sortDirection === "asc"
                 ? Icon.SortAsc
@@ -292,6 +293,7 @@ function IconButton(props) {
   const isMobile = useMobile();
   return (
     <Button
+      data-test-id={props.testId}
       variant="secondary"
       bg="transparent"
       title={title}