@konfuzio/document-validation-ui 0.1.16-dev.1 → 0.1.16-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.16-dev.1",
+  "version": "0.1.16-dev.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_top_bar.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.document-top-bar-component {
+#document-top-bar-component {
   width: 100%;
   height: $top-bar-height;
   border-bottom: $component-border;

package/src/components/DocumentAnnotations/DocumentAnnotations.cy.js

@@ -35,11 +35,12 @@ describe("Document Annotations", () => {
         cy.mount(DocumentAnnotations);
         cy.get("#labels-sidebar")
           .find(".annotation-set-group")
-          .then((elements) => {
-            cy.storeState("document", "annotationSets")
-              .its("length")
-              .should("equal", elements.length);
-            });
+          .then(($elements) => {
+            cy.getStore("document")
+              .then($document => {
+                expect($document.annotationSets).to.have.lengthOf($elements.length);
+              })
+          });
     });
 
     it("shows the empty state if there are no annotation sets", () => {
@@ -240,7 +241,7 @@ describe("Document Annotations", () => {
         .find(".empty-annotation")
         .find(".annotation-value")
         .not(".missing-annotation")
-        .each(($annotation, index) => {
+        .each(($annotation) => {
           cy.wrap($annotation)
             .trigger("mouseover");
 
@@ -250,15 +251,26 @@ describe("Document Annotations", () => {
             .find(".action-buttons")
             .find(".missing-button-container")
             .find(".missing-btn")
-            .click();
-          
-          cy.storeState("document", "missingAnnotations").its("length").should("not.eq", 0);
+            .click();        
 
           cy.wrap($annotation)
             .trigger("mouseleave");
 
           cy.wait(1000);
-        })
+        });
+
+        cy.get("#labels-sidebar")
+          .find(".label")
+          .find(".annotation-row")
+          .find(".empty-annotation")
+          .then($elements => {
+
+            cy.getStore("document")
+              .then($document => {
+                expect($document.missingAnnotations)
+                  .to.have.lengthOf($elements.length);
+            });
+          })
     });
 
     it("restores empty annotation", () => {

package/src/components/DocumentThumbnails/DocumentThumbnails.cy.js

@@ -9,11 +9,12 @@ describe("Document Thumbnails", () => {
     cy.mount(DocumentThumbnails);
     cy.get("#document-pages")
       .find(".document-thumbnail")
-      .then((elements) => {
-        cy.storeState("document", "selectedDocument")
-          .its("pages")
-          .its("length")
-          .should("equal", elements.length);
+      .then(($elements) => {
+        cy.getStore("document")
+          .then($document => {
+            expect($document.selectedDocument.pages)
+              .to.have.lengthOf($elements.length);
+          });
       });
   });
 
@@ -48,7 +49,12 @@ describe("Document Thumbnails", () => {
       .find(".document-thumbnail")
       .each(($row, index) => {
         cy.wrap($row).click();
-        cy.storeState("display", "currentPage").should("equal", index + 1);
+        cy.getStore("display")
+          .then($display => {
+            expect($display.currentPage)
+              .to.equal(index + 1);
+          });
+
         cy.wait(1000);
       });
   });

package/src/components/DocumentTopBar/DocumentTopBar.cy.js

@@ -0,0 +1,228 @@
+import DocumentTopBar from "./DocumentTopBar";
+
+describe("Document Top Bar", () => {
+	let currentDocument;
+	beforeEach(() => {
+
+		cy.fetchDocument().then(() => {			
+			cy.getStore("document")
+				.then($document => {
+					currentDocument = $document.selectedDocument;
+				});
+
+			
+			cy.getStore("project")
+				.then($project => {
+				  cy.fetchCategories($project.projectId);
+			  });
+		});
+
+		cy.dispatchAction("document", "setPublicView", false);
+	});
+
+	it("Shows category dropdown if not edit mode or reviewed", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".left-bar-components")
+			.find(".category-chooser")
+			.should("be.visible");
+	});
+
+	it("Shows correct file name", () => {
+		cy.mount(DocumentTopBar);
+		const fileName = currentDocument.data_file_name
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.should("be.visible");
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".document-name")
+			.contains(fileName);
+	});
+
+	it("Shows arrows if available documents to navigate to", () => {
+		cy.mount(DocumentTopBar);
+		cy.fetchDocumentList();
+		const assignee = currentDocument.assignee;
+		
+		cy.getStore("project")
+      .then($project => {
+				const filtered = $project.documentsInProject.filter(
+					(document) =>
+						(document.status_data === 41 || (document.status_data === 2 && document.labeling_available === 1)
+						) && document.assignee === assignee 
+				);
+
+				if(filtered.length > 0) {
+					cy.get("#document-top-bar-component")
+					.find(".center-bar-components")
+					.find(".navigation-arrow")
+					.should("be.visible");
+				}
+			});
+	});
+
+	it("Shows keyboard icon", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.should("be.visible");
+	});
+
+	it("Shows disabled finish review button", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".finish-review-button-container")
+			.should("be.visible");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".finish-review-button-container")
+			.find(".finish-review-btn")
+			.should("be.disabled");
+	});
+
+	it("Shows edit mode buttons", () => {
+		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "enableEditMode");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".finish-review-button-container")
+			.should("not.exist");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".top-bar-buttons")
+			.find(".edit-mode-buttons")
+			.should("be.visible");
+		
+		cy.dispatchAction("edit", "disableEditMode");
+	});
+
+	it("Edits file name", () => {
+		cy.mount(DocumentTopBar);
+		const fileName = currentDocument.data_file_name.split(".").slice(0, -1).join(".");
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".edit-btn")
+			.click();
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".document-name")
+			.should("have.class", "is-editable");
+		
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".document-name")
+			.type('{selectAll}')
+			.type('{backspace}')
+			.type("test-name");
+		
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".save-btn")
+			.should("be.visible");
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".save-btn")
+			.click();
+
+		cy.wait(1000);
+		
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.find(".cloud-icon")
+			.should("be.visible");
+
+		cy.wait(1000);
+
+		cy.get("#document-top-bar-component")
+			.find(".center-bar-components")
+			.find(".document-name-component")
+			.contains(fileName);
+	});
+
+	it("Shows tooltip when hovering over keyboard info", () => {
+		cy.mount(DocumentTopBar);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.trigger("mouseenter");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.find(".keyboard-actions-description")
+			.should("be.visible");
+		
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".keyboard-actions-info")
+			.trigger("mouseleave");
+	});
+
+	it("Closes edit mode when clicking 'back to annotaiton view' button", () => {
+		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "enableEditMode");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.should("exist");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.find(".button-cancel")
+			.click();
+
+		cy.wait(1000);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.should("not.exist");
+	});
+
+	it("Shows rename and categorize section when clicking 'next' button", () => {
+		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "enableEditMode");
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.find(".button-next")
+			.click();
+
+		cy.wait(1000);
+
+		cy.get("#document-top-bar-component")
+			.find(".right-bar-components")
+			.find(".edit-mode-buttons")
+			.find(".submit-btn")
+			.should("be.visible")
+	});
+});

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="documentTopBar" class="document-top-bar-component">
+  <div id="document-top-bar-component" ref="documentTopBar">
     <div
       v-if="selectedDocument && selectedDocument.pages.length > 0 && !loading"
       :class="['document-top-bar', editMode && 'edit-mode-top-bar']"

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -21,7 +21,7 @@
         <b-button
           :label="editMode && !renameAndCategorize ? $t('next') : $t('submit')"
           type="is-primary"
-          class="button-next primary-button edit-mode-btn"
+          :class="['button-next primary-button edit-mode-btn', renameAndCategorize && 'submit-btn']"
           :disabled="renameAndCategorize && !enableSubmit"
           @click="handleButton"
         />