web: fix issue where searched topics cannot be opened (#1593)

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

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";
@@ -25,6 +25,7 @@ import { ItemsViewModel } from "./items-view.model";
 import { NavigationMenuModel } from "./navigation-menu.model";
 import { NotebooksViewModel } from "./notebooks-view.model";
 import { NotesViewModel } from "./notes-view.model";
+import { SearchViewModel } from "./search-view-model";
 import { SettingsViewModel } from "./settings-view.model";
 import { ToastsModel } from "./toasts.model";
 import { TrashViewModel } from "./trash-view.model";
@@ -112,4 +113,15 @@ export class AppModel {
       .locator(getTestId(`sync-status-${state}`), { hasText: text })
       .waitFor({ state: "visible" });
   }
+
+  async search(query: string) {
+    const searchinput = this.page.locator(getTestId("search-input"));
+    const searchButton = this.page.locator(getTestId("search-button"));
+    const openSearch = this.page.locator(getTestId("open-search"));
+
+    await openSearch.click();
+    await searchinput.fill(query);
+    await searchButton.click();
+    return new SearchViewModel(this.page);
+  }
 }

apps/web/__e2e__/models/items-view.model.ts

@@ -21,6 +21,7 @@ import { Locator, Page } from "@playwright/test";
 import { getTestId } from "../utils";
 import { BaseViewModel } from "./base-view.model";
 import { ItemModel } from "./item.model";
+import { SearchViewModel } from "./search-view-model";
 import { Item } from "./types";
 import { fillItemDialog } from "./utils";
 

apps/web/__e2e__/models/search-view-model.ts

@@ -0,0 +1,39 @@
+/*
+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 { Page } from "@playwright/test";
+import { BaseViewModel } from "./base-view.model";
+import { ItemModel } from "./item.model";
+import { Item } from "./types";
+
+export class SearchViewModel extends BaseViewModel {
+  constructor(page: Page) {
+    super(page, "general");
+  }
+
+  async findItem(item: Item) {
+    const titleToCompare = item.title;
+    for await (const _item of this.iterateItems()) {
+      const itemModel = new ItemModel(_item);
+      const title = await itemModel.getTitle();
+      if (title === titleToCompare) return itemModel;
+    }
+    return undefined;
+  }
+}

apps/web/__e2e__/topics.test.ts

@@ -121,3 +121,19 @@ test(`sort topics`, async ({ page }, info) => {
     }
   }
 });
+
+test("search topics", async ({ page }) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notebooks = await app.goToNotebooks();
+  const notebook = await notebooks.createNotebook({
+    ...NOTEBOOK,
+    topics: ["title1", "title2", "title3", "title4", "title5"]
+  });
+  await notebook?.openNotebook();
+
+  const search = await app.search("1");
+  const topic = await search?.findItem({ title: "title1" });
+
+  expect((await topic?.getTitle()) === "title1").toBeTruthy();
+});

apps/web/src/components/list-container/list-profiles.tsx

@@ -84,13 +84,11 @@ const TagsProfile: ItemWrapper = ({ index, item }) => (
   <Tag item={item} index={index} />
 );
 
-const TopicsProfile: ItemWrapper = ({ index, item, context }) => (
+const TopicsProfile: ItemWrapper = ({ index, item }) => (
   <Topic
     index={index}
     item={item}
-    onClick={() =>
-      context ? navigate(`/notebooks/${context.notebookId}/${item.id}`) : null
-    }
+    onClick={() => navigate(`/notebooks/${item.notebookId}/${item.id}`)}
   />
 );
 

apps/web/src/components/route-container/index.js

@@ -99,6 +99,7 @@ function Header(props) {
         <Flex sx={{ flexShrink: 0 }}>
           {buttons?.search && (
             <Icon.Search
+              data-test-id={"open-search"}
               size={24}
               title={buttons.search.title}
               onClick={() => navigate(`/search/${type}`)}

apps/web/src/components/search/index.js

@@ -24,6 +24,7 @@ import Field from "../field";
 function SearchBox(props) {
   return (
     <Field
+      data-test-id="search-input"
       autoFocus
       id="search"
       name="search"
@@ -35,6 +36,7 @@ function SearchBox(props) {
       }}
       action={{
         icon: Icon.Search,
+        testId: "search-button",
         onClick: () => {
           const searchField = document.getElementById("search");
           if (searchField && searchField.value && searchField.value.length) {