Add edit data and search e2e tests

frontend/cypress/e2e/spec.cy.ts

@@ -64,6 +64,40 @@ describe("E2E tests", () => {
     cy.get('[data-testid="RemoveAccount"]').should("exist");
   });
 
+  it("Edit data", () => {
+    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("password");
+      cy.get("#kc-login").should("exist").click();
+    });
+
+    cy.wait(2000);
+
+    cy.get('[data-testid="Edit"]').should("exist").click();
+
+    cy.wait(3000);
+
+    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.get('[data-testid="My Profile"]').should("exist").click();
+
+    cy.wait(1000);
+
+    cy.contains("p", "Johnny Blacksmith").should("exist");
+    cy.contains("p", "[email protected]").should("exist");
+    cy.get('[data-testid="Edit"]').should("exist");
+    cy.get('[data-testid="RemoveAccount"]').should("exist");
+  });
+
   it("Change password", () => {
     cy.visit("http://localhost:5173");
 
@@ -79,7 +113,7 @@ describe("E2E tests", () => {
 
     cy.get('[data-testid="Edit"]').should("exist").click();
 
-    cy.wait(4000);
+    cy.wait(3000);
 
     cy.get('[data-testid="Change"]').should("exist").click();
 
@@ -97,6 +131,29 @@ describe("E2E tests", () => {
     cy.get('[data-testid="RemoveAccount"]').should("exist");
   });
 
+  it("Search users", () => {
+    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(2000);
+
+    cy.get('[data-testid="Search"]').should("exist").click();
+    cy.wait(1000);
+    cy.get('[data-testid="SearchBox"]').type("Robert Lewandowski");
+    cy.get('[data-testid="SearchButton"]').should("exist").click();
+
+    cy.wait(1000);
+
+    cy.contains("p", "Robert Lewandowski").should("exist");
+  });
+
   it("Remove account", () => {
     cy.visit("http://localhost:5173");
 

frontend/src/components/EditDetails.tsx

@@ -165,7 +165,7 @@ function EditDetails(props: EditDetails) {
 
           <input
             disabled={isSubmitting}
-            data-testid="Register"
+            data-testid="Save"
             type="submit"
             className="btn small bg-my-orange disabled:bg-my-dark"
             value="Save"

frontend/src/components/Navbar.tsx

@@ -71,6 +71,7 @@ function Navbar(props: NavbarProps) {
             <Link
               key={link.to}
               to={link.to}
+              data-testid={link.text}
               className="p-5 rounded-lg transition duration-250 ease-in-out hover:bg-my-orange font-bold text-lg active:translate-y-1"
               onClick={
                 handleNavigate ? () => handleNavigate(link.to) : undefined

frontend/src/components/Search.tsx

@@ -12,7 +12,7 @@ interface searchProps {
 
 const Search = (props: searchProps) => {
   const navigate = useNavigate();
-  const {user} = useUser();
+  const { user } = useUser();
 
   // Logic
   const [searchQuery, setSearchQuery] = useState("");
@@ -53,7 +53,7 @@ const Search = (props: searchProps) => {
     const urlSearchParams = new URLSearchParams({
       q: searchQuery,
       country: countryQuery,
-      userId: user?.id || ""
+      userId: user?.id || "",
     });
 
     props.handler(`/users/search?${urlSearchParams}`);
@@ -68,6 +68,7 @@ const Search = (props: searchProps) => {
         <div className=" w-full">
           <input
             type="text"
+            data-testid="SearchBox"
             placeholder="Enter your friend's name"
             className="form-input text-my-darker"
             onChange={(e) => setSearchQuery(e.target.value)}
@@ -76,7 +77,9 @@ const Search = (props: searchProps) => {
 
         <button type="submit" className="btn bg-my-purple text-xs px-7 py-5">
           <div className="flex gap-3 items-center text-cente justify-center">
-            <span className=" text-center">Search</span>
+            <span data-testid="SearchButton" className="text-center">
+              Search
+            </span>
             <FontAwesomeIcon icon={faMagnifyingGlass} />
           </div>
         </button>