pruebas de jose

Unit test
wizelineacademy · Jun 13, 2024 · 5e3b99f · 5e3b99f
2 parents bd4b69a + f583eed
commit 5e3b99f
Show file tree

Hide file tree

Showing 25 changed files with 308 additions and 121 deletions.
diff --git a/app/(base)/profile/[id]/page.tsx b/app/(base)/profile/[id]/page.tsx
@@ -1,5 +1,9 @@
 import React from "react";
-import { getUserInfoById, getUserSkillsById } from "@/services/user";
+import {
+  getCoWorkers,
+  getUserInfoById,
+  getUserSkillsById,
+} from "@/services/user";
 import ProfileBanner from "@/components/Profile/ProfileBanner";
 import ProfileSection from "@/components/Profile/ProfileSection";
 import CoWorkersCarousel from "@/components/CoWorkersCarousel";
@@ -9,7 +13,8 @@ import ProfileTraits from "@/components/Profile/ProfileTraits";
 const Profile: React.FC<{ params: { id: string } }> = async ({ params }) => {
   const user = await getUserInfoById(params.id);
   const traits = await getUserSkillsById(params.id);
-
+  const coworkers: { name: string; id: string; photoUrl: string | null }[] =
+    await getCoWorkers(params.id);
   return (
     <main>
       <ProfileBanner user={user} />
@@ -21,7 +26,7 @@ const Profile: React.FC<{ params: { id: string } }> = async ({ params }) => {
             userId={params.id}
             type="coworkers"
           >
-            <CoWorkersCarousel userId={params.id} />
+            <CoWorkersCarousel coworkers={coworkers} />
           </ProfileSection>
           <ProfileSection
             title="Projects"

diff --git a/components/CoWorkersCarousel.tsx b/components/CoWorkersCarousel.tsx
@@ -8,43 +8,16 @@ import { Tooltip } from "@mantine/core";
 import Link from "next/link";
 import NoDataCard from "@/components/NoDataCard";
 
-import { useQuery } from "@tanstack/react-query";
-
-import { getCoWorkers } from "@/services/user";
-
-export default function EmblaCarousel({ userId }: { userId: string }) {
+export default function EmblaCarousel({
+  coworkers,
+}: {
+  coworkers: { name: string; id: string; photoUrl: string | null }[];
+}) {
   const [emblaRef] = useEmblaCarousel({ loop: true }, [
     Autoplay({ delay: 2000 }),
   ]);
 
-  const coworkersQuery = useQuery({
-    queryKey: ["coworkers"],
-    queryFn: () => getCoWorkers(userId),
-  });
-
-  if (!coworkersQuery.data) {
-    return (
-      <div className="flex flex-row items-center justify-between">
-        <UserProfileButton
-          size="md"
-          className=" animate-pulse transition-all duration-200"
-          color="text-grayText"
-        />
-        <UserProfileButton
-          size="md"
-          className=" animate-pulse transition-all  duration-200"
-          color="text-grayText"
-        />
-        <UserProfileButton
-          size="md"
-          className=" animate-pulse transition-all duration-200"
-          color="text-grayText"
-        />
-      </div>
-    );
-  }
-
-  if (coworkersQuery.data.length === 0) {
+  if (coworkers.length === 0) {
     return (
       <div className="mb-6 mt-3 flex flex-wrap items-center justify-center gap-5 rounded-lg bg-slate-300/20 py-4">
         <NoDataCard text="No coworkers found" />
@@ -55,7 +28,7 @@ export default function EmblaCarousel({ userId }: { userId: string }) {
   return (
     <div className="embla" ref={emblaRef}>
       <ul className="embla__container px-1 py-4">
-        {coworkersQuery.data.map((user, index) => (
+        {coworkers.map((user, index) => (
           <Tooltip.Floating label={user.name} color="#6640D5" key={index}>
             <li className="embla__slide__coworker">
               <Link href={`/profile/${user.id}`} className="">

diff --git a/components/ComboBoxSearch.tsx b/components/ComboBoxSearch.tsx
@@ -15,23 +15,19 @@ interface Person {
   photoUrl: string;
 }
 
-const fetchFilteredUsers = async (query: string) => {
-  const res = await searchUsers(query); // Llama directamente a la función del backend
-  return res;
-};
-
 const ComboBoxSearch = () => {
   const [query, setQuery] = useState("");
   const router = useRouter();
 
-  const useSearchUsers = (query: string) => {
-    return useQuery({
-      queryKey: ["search-users", query],
-      queryFn: () => fetchFilteredUsers(query),
-    });
+  const fetchFilteredUsers = async (query: string) => {
+    const res = await searchUsers(query); // Llama directamente a la función del backend
+    return res;
   };
 
-  const { data: people = [], isLoading } = useSearchUsers(query);
+  const { data: people = [], isLoading } = useQuery({
+    queryKey: ["search-users", query],
+    queryFn: () => fetchFilteredUsers(query),
+  });
 
   const handleSelect = (person: Person | null) => {
     if (person) {
@@ -59,7 +55,10 @@ const ComboBoxSearch = () => {
           className={`h-10 ${isExpanded ? "w-80" : "w-32"} rounded-full border border-gray-300 bg-white px-4 shadow-lg transition-all duration-300 focus:border-blue-500 focus:outline-none`}
         /> */}
         {query !== "" && (
-          <Combobox.Options className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border border-gray-300 bg-white p-2 shadow-lg empty:hidden">
+          <Combobox.Options
+            data-testid="combobox-results"
+            className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border border-gray-300 bg-white p-2 shadow-lg empty:hidden"
+          >
             {isLoading ? (
               <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                 Loading...
@@ -72,6 +71,7 @@ const ComboBoxSearch = () => {
               people.map((person) => (
                 <Combobox.Option
                   key={person.id}
+                  data-testid={`option-${person.name.toLowerCase()}`}
                   value={person}
                   className={({ active }) =>
                     `flex cursor-default select-none items-center gap-2 rounded-xl px-2 py-1 text-sm text-gray-900 ${active && "bg-primary-light text-white"}`

diff --git a/components/Draggable.tsx b/components/Draggable.tsx
@@ -40,6 +40,7 @@ const Draggable = ({
       {...attributes}
       {...listeners}
       className={className}
+      data-testid={`draggable-${data.userId}`}
     >
       {children}
     </div>

diff --git a/components/FormTextInput.tsx b/components/FormTextInput.tsx
@@ -7,7 +7,6 @@ interface FormTextInputProps {
 
 const FormTextInput = ({ name, type, label }: FormTextInputProps) => {
   const toggleInput = () => {
-    if (type !== "password") return;
     const input = document.getElementById("password");
     const newType =
       input?.getAttribute("type") === "text" ? "password" : "text";

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -20,29 +20,51 @@ export default async function ProjectCard({
   const coworkersQuery = await getEmployeesInProjectById(id);
 
   return (
-    <div className="flex h-full min-h-40 w-fit items-center gap-4 rounded-lg bg-white p-4">
+    <div
+      className="flex h-full min-h-40 w-fit items-center gap-4 rounded-lg bg-white p-4"
+      data-testid={`project-${id}`}
+    >
       <div className="flex h-full flex-col">
-        <h3 className="w-[20ch] pb-2 text-base font-medium">{name}</h3>
-        {date && <p className="pb-4 text-sm text-graySubtitle">{date}</p>}
+        <h3
+          className="w-[20ch] pb-2 text-base font-medium"
+          data-testid="project-name"
+        >
+          {name}
+        </h3>
+        {date && (
+          <p
+            className="pb-4 text-sm text-graySubtitle"
+            data-testid="project-date"
+          >
+            {date}
+          </p>
+        )}
         {description && (
-          <p className="w-[30ch] pb-4 text-xs text-grayText">{description}</p>
+          <p
+            className="w-[30ch] pb-4 text-xs text-grayText"
+            data-testid="project-description"
+          >
+            {description}
+          </p>
         )}
         <p className="pb-4 text-sm text-graySubtitle">In progress</p>
         <div className="ml-[6px] mt-auto">
           <ul className="flex">
-            {coworkersQuery.map((coworker, index) => (
-              <li key={index}>
-                <UserProfileButton
-                  size="xs"
-                  className="mx-[-6px]"
-                  photoUrl={coworker.photoUrl || ""}
-                />
-              </li>
-            ))}
+            {coworkersQuery &&
+              coworkersQuery.map((coworker, index) => (
+                <li key={index} data-testid="project-coworker">
+                  <UserProfileButton
+                    size="xs"
+                    className="mx-[-6px]"
+                    photoUrl={coworker.photoUrl || ""}
+                  />
+                </li>
+              ))}
           </ul>
         </div>
       </div>
       <Link
+        data-testid={`project-${id}-link`}
         href={`/projects/${id}`}
         className="flex h-9 w-9 items-center justify-center rounded-full bg-primary"
       >

diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
@@ -32,44 +32,50 @@ const SearchBar = ({
       setIsExpanded(false);
     }
   }, [value]);
+
+  const handleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   if (type === "comboboxImput") {
     return (
-      type === "comboboxImput" && (
+      <div
+        data-testid="search-box"
+        className={`flex items-center overflow-hidden rounded-full bg-white p-2 drop-shadow-lg transition-all duration-500 ${isExpanded ? "w-64" : "w-10 hover:scale-[1.175]"}`}
+      >
+        <svg
+          data-testid="search-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={2}
+          stroke="currentColor"
+          className="h-6 w-6 cursor-pointer text-primary"
+          onClick={handleExpand}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+          />
+        </svg>
         <div
-          className={`flex items-center overflow-hidden rounded-full bg-white p-2 drop-shadow-lg transition-all duration-500 ${isExpanded ? "w-64" : "w-10 hover:scale-[1.175]"}`}
+          className={`transform transition-transform duration-700 ${isExpanded ? "-translate-x-0" : "hidden -translate-x-full"}`}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={2}
-            stroke="currentColor"
-            className="h-6 w-6 cursor-pointer text-primary"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-            />
-          </svg>
-          <div
-            className={`transform transition-transform duration-700 ${isExpanded ? "-translate-x-0" : "hidden -translate-x-full"}`}
-          >
-            <Combobox.Input
-              ref={inputRef}
-              name="search"
-              autoComplete="off"
-              autoCorrect="off"
-              type="text"
-              value={value}
-              onChange={onChange}
-              placeholder={placeholder}
-              className="ml-2 h-full w-full rounded-full text-sm text-primary placeholder-primary focus:outline-none"
-            />
-          </div>
+          <Combobox.Input
+            data-testid="combobox-input"
+            ref={inputRef}
+            name="search"
+            autoComplete="off"
+            autoCorrect="off"
+            type="text"
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            className="ml-2 h-full w-full rounded-full text-sm text-primary placeholder-primary focus:outline-none"
+          />
         </div>
-      )
+      </div>
     );
   }
 

diff --git a/components/Slider.tsx b/components/Slider.tsx
@@ -7,12 +7,16 @@ interface SliderProps {
 }
 const Slider = ({ label, className, onChange, name, value }: SliderProps) => {
   return (
-    <div className={`flex h-full w-full flex-col justify-between ${className}`}>
+    <div
+      data-testid={`slider-${name}`}
+      className={`flex h-full w-full flex-col justify-between ${className}`}
+    >
       <label className="mb-2 mt-4 block text-sm font-light text-black">
         {label}
       </label>
       <div className="flex flex-col">
         <input
+          data-testid="input-slider"
           type="range"
           step={1}
           min={1}

diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
@@ -7,7 +7,10 @@ interface TooltipProps {
 
 export default function Tooltip({ message, children }: TooltipProps) {
   return (
-    <div className="group relative flex max-w-max flex-col items-center justify-center">
+    <div
+      data-testid={`tooltip-${message}`}
+      className="group relative flex max-w-max flex-col items-center justify-center"
+    >
       {children}
       <div className="absolute bottom-7 left-1/2 z-10 ml-auto mr-auto min-w-max -translate-x-1/2 rotate-180 scale-0 transform rounded-xl px-3 py-2 text-xs font-medium transition-all duration-500 group-hover:scale-100">
         <div className="flex max-w-xs flex-col items-center shadow-lg">

diff --git a/components/UserIconNavbar.tsx b/components/UserIconNavbar.tsx
@@ -71,10 +71,16 @@ const UserIconNavbar = ({ path }: UserIconInterface) => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
+          <Menu.Items
+            data-testid="user-icon-options"
+            className="absolute right-0 z-50 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
+          >
             <div className="px-1 py-1 ">
               <Menu.Item>
-                <p className="mx-auto items-center px-2 py-2 text-sm">
+                <p
+                  data-testid="user-icon-name"
+                  className="mx-auto items-center px-2 py-2 text-sm"
+                >
                   Hello {user?.name.split(" ")[0]}!
                 </p>
               </Menu.Item>

diff --git a/components/modals/DraggableUser.tsx b/components/modals/DraggableUser.tsx
@@ -13,7 +13,6 @@ interface DraggableUserProps {
 
 const DraggableUser = ({ user, times = 0 }: DraggableUserProps) => {
   const [isDragging, setIsDragging] = useState(false);
-
   return (
     <Draggable
       id={`base-${user.userId}`}
@@ -37,7 +36,10 @@ const DraggableUser = ({ user, times = 0 }: DraggableUserProps) => {
       ) : (
         <Tooltip message={user.name}>
           {times > 1 && (
-            <span className="relative left-3 top-3 z-10 flex h-3 w-3 cursor-move items-center justify-center rounded-full bg-primary-light p-2 text-[0.6rem] font-medium text-white">
+            <span
+              data-testid={`user-${user.userId}-times`}
+              className="relative left-3 top-3 z-10 flex h-3 w-3 cursor-move items-center justify-center rounded-full bg-primary-light p-2 text-[0.6rem] font-medium text-white"
+            >
               x{times}
             </span>
           )}

diff --git a/components/modals/SelectableDragUsers.tsx b/components/modals/SelectableDragUsers.tsx
@@ -8,7 +8,10 @@ interface SelectableDragUsersProps {
 
 const SelectableDragUsers = ({ users }: SelectableDragUsersProps) => {
   return (
-    <div className={`flex flex-row items-center justify-around`}>
+    <div
+      data-testid="selectable-drag-users"
+      className={`flex flex-row items-center justify-around`}
+    >
       {users.map(
         (user, index) =>
           user.times > 0 && (