Add friend invitation and chat e2e tests

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("[email protected]");
     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("[email protected]");
+      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("[email protected]");
+      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("[email protected]");
+      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", () => {

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}

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}

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}`)}
           >