From 7b2a04f369606717a637bd07b3b39ea06ad01a18 Mon Sep 17 00:00:00 2001
From: Piotr Maszczak <piotrmaszczak25@gmail.com>
Date: Fri, 10 May 2024 20:05:37 +0200
Subject: [PATCH] Add friend invitation and chat e2e tests

---
 frontend/cypress/e2e/spec.cy.ts       | 77 +++++++++++++++++++++++++--
 frontend/src/components/ChatBox.tsx   |  1 +
 frontend/src/components/FoundUser.tsx |  1 +
 frontend/src/components/Friend.tsx    |  2 +
 4 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/frontend/cypress/e2e/spec.cy.ts b/frontend/cypress/e2e/spec.cy.ts
index 740fc00..d40215e 100644
--- a/frontend/cypress/e2e/spec.cy.ts
+++ b/frontend/cypress/e2e/spec.cy.ts
@@ -75,18 +75,18 @@ describe("E2E tests", () => {
       cy.get("#kc-login").should("exist").click();
     });
 
-    cy.wait(2000);
+    cy.wait(3000);
 
     cy.get('[data-testid="Edit"]').should("exist").click();
 
-    cy.wait(3000);
+    cy.wait(5000);
 
     cy.get('input[name="first_name"]').clear().type("Johnny");
     cy.get('input[name="last_name"]').clear().type("Blacksmith");
     cy.get('input[name="mail"]').clear().type("johnnyblacksmith@mail.com");
     cy.get('[data-testid="Save"]').should("exist").click();
 
-    cy.wait(2000);
+    cy.wait(4000);
 
     cy.get('[data-testid="My Profile"]').should("exist").click();
 
@@ -109,11 +109,11 @@ describe("E2E tests", () => {
       cy.get("#kc-login").should("exist").click();
     });
 
-    cy.wait(2000);
+    cy.wait(3000);
 
     cy.get('[data-testid="Edit"]').should("exist").click();
 
-    cy.wait(3000);
+    cy.wait(4000);
 
     cy.get('[data-testid="Change"]').should("exist").click();
 
@@ -152,6 +152,73 @@ describe("E2E tests", () => {
     cy.wait(1000);
 
     cy.contains("p", "Robert Lewandowski").should("exist");
+    cy.get('[data-testid="Robert_Lewandowski_button"]').should("exist").click();
+
+    cy.wait(1000);
+  });
+
+  it("Accept invite", () => {
+    cy.visit("http://localhost:5173");
+
+    cy.get('[data-testid="WelcomeLogin"]').click();
+
+    cy.origin("http://localhost:3000", () => {
+      cy.get("#username").type("lewy.robi@pzpn.pl");
+      cy.get("#password").type("Euro2012");
+      cy.get("#kc-login").should("exist").click();
+    });
+
+    cy.wait(3000);
+
+    cy.get('[data-testid="Friends"]').should("exist").click();
+    cy.wait(4000);
+
+    cy.contains("button", "Accept").should("exist").click();
+  });
+
+  it("Send message", () => {
+    cy.visit("http://localhost:5173");
+
+    cy.get('[data-testid="WelcomeLogin"]').click();
+
+    cy.origin("http://localhost:3000", () => {
+      cy.get("#username").type("johnsmith@mail.com");
+      cy.get("#password").type("password2");
+      cy.get("#kc-login").should("exist").click();
+    });
+
+    cy.wait(3000);
+
+    cy.get('[data-testid="Friends"]').should("exist").click();
+    cy.wait(4000);
+
+    cy.get('[data-testid="Robert_Lewandowski_chat"]').should("exist").click();
+    cy.get('[data-testid="ChatBox"]').should("exist").type("Hello!{enter}");
+  });
+
+  it("Receive message", () => {
+    cy.visit("http://localhost:5173");
+
+    cy.get('[data-testid="WelcomeLogin"]').click();
+
+    cy.origin("http://localhost:3000", () => {
+      cy.get("#username").type("lewy.robi@pzpn.pl");
+      cy.get("#password").type("Euro2012");
+      cy.get("#kc-login").should("exist").click();
+    });
+
+    cy.wait(3000);
+
+    cy.get('[data-testid="Friends"]').should("exist").click();
+    cy.wait(4000);
+
+    cy.get('[data-testid="Johnny_Blacksmith_chat"]').should("exist").click();
+    cy.contains("div", "Hello!").should("exist");
+
+    cy.get('[data-testid="Friends"]').should("exist").click();
+    cy.wait(2000);
+
+    cy.get('[data-testid="Johnny_Blacksmith_delete"]').should("exist").click();
   });
 
   it("Remove account", () => {
diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index dc4ea11..15f3a4e 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -167,6 +167,7 @@ function ChatBox({ user, socket, friendId }: ChatBoxProps) {
         {messageElems}
       </div>
       <textarea
+        data-testid="ChatBox"
         className="w-3/6 text-3xl bg-my-dark form-input"
         rows={4}
         cols={30}
diff --git a/frontend/src/components/FoundUser.tsx b/frontend/src/components/FoundUser.tsx
index d7b6b2a..2206027 100644
--- a/frontend/src/components/FoundUser.tsx
+++ b/frontend/src/components/FoundUser.tsx
@@ -77,6 +77,7 @@ function FoundUser(props: FoundUserProps) {
         </p>
         <p>{countryName || ""}</p>
         <button
+          data-testid={user.first_name + "_" + user.last_name + "_button"}
           className={`btn small text-xs ${buttonColor}`}
           disabled={isFriend || requestSent}
           onClick={handleAddFriend}
diff --git a/frontend/src/components/Friend.tsx b/frontend/src/components/Friend.tsx
index e489de8..806aef3 100644
--- a/frontend/src/components/Friend.tsx
+++ b/frontend/src/components/Friend.tsx
@@ -37,6 +37,7 @@ function Friend(props: FriendProps) {
             {friend.first_name} {friend.last_name}{" "}
           </span>
           <button
+            data-testid={friend.first_name + "_" + friend.last_name + "_delete"}
             className={` text-my-red text-sm my-2 p-2 rounded-md transition hover:scale-110 hover:bg-my-red hover:text-my-light active:translate-x-2`}
             onClick={() => {
               setShowDeleteModal(true);
@@ -53,6 +54,7 @@ function Friend(props: FriendProps) {
             <FontAwesomeIcon icon={faVideo} />
           </button>
           <button
+            data-testid={friend.first_name + "_" + friend.last_name + "_chat"}
             className={`btn small bg-my-purple text-xs my-2`}
             onClick={() => navigate(`/messages/${friend.id}`)}
           >