From fe8e014ba8b40d3e258e966cd29f85586e3b96a0 Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Tue, 8 Feb 2022 14:55:29 +0000
Subject: [PATCH] Find Item e2e test

This adds a "find item" e2e test that confirms matching items show, and non-matching items don't.

I also implemented the `waitForAnimations` config, but I found the results inconsistent via CLI, so I left those in, after much experimentation.

There are a couple of improvements on reducing the number of `.find()` calls in the Cypress tests, when the elements aren't rendered in the Shadow DOM.
---
 cypress.json                      |  3 +-
 cypress/integration/02 - items.ts | 96 +++++++++++++++++++++++++------
 2 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/cypress.json b/cypress.json
index 7ef6d89d..e3f48835 100644
--- a/cypress.json
+++ b/cypress.json
@@ -4,5 +4,6 @@
     "video": false,
     "chromeWebSecurity": false,
     "screenshotOnRunFailure": false,
-    "videoUploadOnPasses": false
+    "videoUploadOnPasses": false,
+    "waitForAnimations": true
 }
diff --git a/cypress/integration/02 - items.ts b/cypress/integration/02 - items.ts
index 852dfe04..04163473 100644
--- a/cypress/integration/02 - items.ts	
+++ b/cypress/integration/02 - items.ts	
@@ -5,25 +5,24 @@ const testItem = {
     url: "https://google.com",
 };
 
+const itemSearch = {
+    existing: "secret",
+    nonexistent: "apple",
+};
+
 describe("Items", () => {
     it("can create an item without errors", () => {
         cy.login();
 
         // Click plus sign
-        cy.get("pl-app").find("pl-items").find("pl-items-list").find("pl-button:eq(2)").click({ force: true });
-
-        // Give the app some time to render the animations
-        cy.wait(100);
+        cy.get("pl-app").find("pl-items").find("pl-items-list").find("pl-button:eq(2)").click();
 
         // Click create
-        cy.get("pl-app").find("pl-create-item-dialog").find("footer pl-button.primary").click({ force: true });
+        cy.get("pl-app").find("pl-create-item-dialog").find("footer pl-button.primary").click();
 
         cy.url().should("include", "/items/");
         cy.url().should("include", "/new");
 
-        // Give the app some (more) time to render the animations
-        cy.wait(100);
-
         // Fill in form
         cy.get("pl-app")
             .find("pl-items")
@@ -34,35 +33,96 @@ describe("Items", () => {
         cy.get("pl-app")
             .find("pl-items")
             .find("pl-item-view")
-            .find("pl-scroller")
-            .find("pl-list")
-            .find("pl-field:eq(0)")
+            .find("pl-scroller pl-list pl-field:eq(0)")
             .find("pl-input.value-input")
             .find("input.input-element")
             .type(testItem.username, { force: true });
         cy.get("pl-app")
             .find("pl-items")
             .find("pl-item-view")
-            .find("pl-scroller")
-            .find("pl-list")
-            .find("pl-field:eq(1)")
+            .find("pl-scroller pl-list pl-field:eq(1)")
             .find("pl-input.value-input")
             .find("input.input-element")
             .type(testItem.password, { force: true });
         cy.get("pl-app")
             .find("pl-items")
             .find("pl-item-view")
-            .find("pl-scroller")
-            .find("pl-list")
-            .find("pl-field:eq(2)")
+            .find("pl-scroller pl-list pl-field:eq(2)")
             .find("pl-input.value-input")
             .find("input.input-element")
             .type(testItem.url, { force: true });
 
         // Click save
-        cy.get("pl-app").find("pl-items").find("pl-item-view").find("pl-button.primary").click({ force: true });
+        cy.get("pl-app").find("pl-items").find("pl-item-view").find("pl-button.primary").click();
 
         cy.url().should("include", "/items/");
         cy.url().should("not.include", "/new");
     });
+
+    it("can find an an item without errors", () => {
+        cy.unlock();
+
+        // Click search sign
+        cy.get("pl-app").find("pl-items").find("pl-items-list").find("pl-button:eq(3)").click();
+
+        // Find Item
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("pl-input#filterInput")
+            .find("input")
+            .type(itemSearch.existing, { force: true });
+
+        // Confirm we only find one
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("main pl-virtual-list pl-scroller")
+            .find("div.content")
+            .children("div")
+            .should("have.length", 1);
+
+        // Confirm we find the right one
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("main pl-virtual-list pl-scroller")
+            .find("div.content pl-vault-item-list-item")
+            .find("div > div > div.semibold")
+            .should("include.text", testItem.name);
+
+        // Click clear search sign
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("pl-input#filterInput")
+            .find("pl-button.slim")
+            .click();
+
+        // Click search sign
+        cy.get("pl-app").find("pl-items").find("pl-items-list").find("pl-button:eq(3)").click();
+
+        // Find non-existent Item
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("pl-input#filterInput")
+            .find("input")
+            .type(itemSearch.nonexistent, { force: true });
+
+        // Confirm we find none
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("main pl-virtual-list pl-scroller")
+            .find("div.content")
+            .children("div")
+            .should("have.length", 0);
+
+        cy.get("pl-app")
+            .find("pl-items")
+            .find("pl-items-list")
+            .find("main > div.centering")
+            .should("contain.text", "did not match any items");
+    });
 });