Add cypress tests for Search feature

pppp606 · Dec 10, 2023 · c13a305 · c13a305
1 parent 00fb9ca
commit c13a305
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 13 deletions.
diff --git a/src/assets/scss/document_search_bar.scss b/src/assets/scss/document_search_bar.scss
@@ -1,5 +1,5 @@
 @import "./imports.scss";
-.document-search {
+#document-search {
   position: absolute;
   right: 8px;
   min-width: 276px;

diff --git a/src/components/DocumentAnnotations/AnnotationRow.vue b/src/components/DocumentAnnotations/AnnotationRow.vue
@@ -734,7 +734,6 @@ export default {
       window.open(annotationDetailsUrl, "_blank");
     },
     searchLabelInDocument() {
-      console.log("searchLabelInDocument");
       this.$store.dispatch("display/enableSearch", true);
       this.$store.dispatch("display/setCurrentSearch", this.label.name);
     },

diff --git a/src/components/DocumentPage/DocumentPage.cy.js b/src/components/DocumentPage/DocumentPage.cy.js
@@ -1,5 +1,5 @@
-import DocumentDashboard from "../DocumentDashboard.vue";
 import DocumentPage from "../DocumentPage/DocumentPage.vue";
+import SearchBar from "../DocumentPage/SearchBar.vue";
 
 const viewport = {
   width: 1280,
@@ -13,6 +13,87 @@ describe("Document Page", () => {
     cy.viewport(viewport.width, viewport.height);
   });
 
+  it("Search for text in the document", () => {
+    cy.getStore("document").then(($document) => {
+      if ($document.selectedDocument.pages[0]) {
+        cy.setScale($document.selectedDocument.pages[0]);
+        cy.fetchBlob(
+          `${$document.selectedDocument.pages[0].image_url}?${$document.selectedDocument.downloaded_at}`
+        ).then((blob) => {
+          cy.mount(SearchBar).then(({ wrapper, component }) => {
+            if ($document.pages && $document.pages.length > 0) {
+              const entities = $document.pages.flatMap((page) => {
+                return page.entities;
+              });
+              let entity;
+              do {
+                entity = entities[Math.floor(Math.random() * entities.length)]; // get a random entity
+              } while (!entity || entity.offset_string.length < 3);
+
+              cy.dispatchAction("display", "enableSearch", true);
+              cy.dispatchAction(
+                "display",
+                "setCurrentSearch",
+                entity.offset_string
+              );
+              cy.wait(2000);
+              cy.getStore("display").then(($display) => {
+                expect($display.searchResults.length).to.be.greaterThan(0);
+              });
+            }
+          });
+        });
+      } else {
+        throw new Error("Document not loaded");
+      }
+    });
+  });
+
+  it("Navigate to next search result if exists", () => {
+    cy.getStore("document").then(($document) => {
+      if ($document.selectedDocument.pages[0]) {
+        cy.setScale($document.selectedDocument.pages[0]);
+        cy.fetchBlob(
+          `${$document.selectedDocument.pages[0].image_url}?${$document.selectedDocument.downloaded_at}`
+        ).then((blob) => {
+          cy.mount(SearchBar).then(({ wrapper, component }) => {
+            cy.wait(2000);
+            if ($document.pages && $document.pages.length > 0) {
+              const entities = $document.pages.flatMap((page) => {
+                return page.entities;
+              });
+              let entity;
+              do {
+                entity = entities[Math.floor(Math.random() * entities.length)]; // get a random entity
+              } while (!entity || entity.offset_string.length < 3);
+
+              cy.dispatchAction("display", "enableSearch", true);
+              cy.dispatchAction(
+                "display",
+                "setCurrentSearch",
+                entity.offset_string
+              );
+              cy.wait(2000);
+              cy.getStore("display").then(($display) => {
+                if ($display.searchResults.length > 1) {
+                  expect(component.currentCounter).to.be.eql(1);
+                  cy.get("#document-search .next-search").click();
+                  cy.getStore("display").then(() => {
+                    expect(component.currentCounter).to.be.eql(2);
+                  });
+                } else {
+                  cy.get("#document-search .next-search").should("be.disabled");
+                }
+              });
+            }
+          });
+        });
+      } else {
+        throw new Error("Document not loaded");
+      }
+    });
+  });
+
   it("All annotations appear at the right place", () => {
     cy.getStore("document").then(($document) => {
       if (

diff --git a/src/components/DocumentPage/DocumentToolbar.cy.js b/src/components/DocumentPage/DocumentToolbar.cy.js
@@ -6,6 +6,18 @@ describe("Document Toolbar", () => {
     cy.setFullMode();
   });
 
+  it("open document search", () => {
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      cy.get("#toolbar-container").find(".search-document").first().click();
+
+      cy.getStore("display").then(($display) => {
+        expect($display.searchEnabled).to.eql(true);
+        cy.get("#document-search").should("exist");
+      });
+    });
+  });
+
   it("downloads the original file", () => {
     cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
       component.onDocumentResize();

diff --git a/src/components/DocumentPage/SearchBar.vue b/src/components/DocumentPage/SearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="document-search">
+  <div id="document-search">
     <div class="search-container">
       <input
         ref="searchInput"
@@ -25,24 +25,20 @@
           {{ $t("search_below_minimum") }}
         </span>
         <span v-else class="search-counters"
-          >{{
-            currentSearchResult != null && searchResults.length > 0
-              ? currentSearchResult + 1
-              : 0
-          }}/{{ searchResults.length }}</span
+          >{{ currentCounter }}/{{ searchResults.length }}</span
         >
         <b-button
           v-if="!searchBelowMinimum"
-          class="is-ghost is-small"
-          :disabled="!searchResults.length"
+          class="is-ghost is-small next-search"
+          :disabled="!searchResults.length || searchResults.length <= 1"
           @click="focusSearchResult(1)"
           ><b-icon icon="angle-down" class="is-small"
         /></b-button>
 
         <b-button
           v-if="!searchBelowMinimum"
-          class="is-ghost is-small"
-          :disabled="!searchResults.length"
+          class="is-ghost is-small previous-search"
+          :disabled="!searchResults.length || searchResults.length <= 1"
           @click="focusSearchResult(-1)"
           ><b-icon icon="angle-up" class="is-small"
         /></b-button>
@@ -85,6 +81,11 @@ export default {
         this.search.length < this.minSearchLength
       );
     },
+    currentCounter() {
+      return this.currentSearchResult != null && this.searchResults.length > 0
+        ? this.currentSearchResult + 1
+        : 0;
+    },
   },
   watch: {
     search(search) {