fix(): modify color for better accessibility, add missing tests

butcherZ · Jun 4, 2024 · dc44133 · dc44133
1 parent d6c685c
commit dc44133
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 22 deletions.
diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,7 @@
 const nextConfig = {
     experimental: {
         serverActions: true,
+        optimizeCss: true,
     }
 }
 

diff --git a/src/__test__/employee.service.test.ts b/src/__test__/employee.service.test.ts
@@ -17,7 +17,7 @@ class MockEmployeeDatasource implements EmployeeDatasourceContract {
   createEmployee(params: unknown): Promise<EmployeeModel | undefined> {
     return Promise.resolve({
       id: 3,
-      employee_name: "New Employee",
+      employee_name: "illidan",
       employee_salary: 70000,
     });
   }
@@ -39,8 +39,8 @@ class MockEmployeeDatasource implements EmployeeDatasourceContract {
     if ((params as any).id === 1) {
       return Promise.resolve({
         id: 1,
-        employee_name: "Updated Employee",
-        employee_salary: 50000,
+        employee_name: "ziyi",
+        employee_salary: 111111,
       });
     }
     return Promise.resolve(undefined);
@@ -50,7 +50,7 @@ class MockEmployeeDatasource implements EmployeeDatasourceContract {
     if ((params as any).id === 1) {
       return Promise.resolve({
         id: 1,
-        employee_name: "Deleted Employee",
+        employee_name: "ziyi",
         employee_salary: 50000,
       });
     }
@@ -74,4 +74,59 @@ describe("EmployeeService", () => {
       { id: 2, employee_name: "toto", employee_salary: 60000 },
     ]);
   });
+
+  test("should create a new employee", async () => {
+    const newEmployee = await service.createEmployee({
+      employee_name: "illidan",
+      employee_salary: 70000,
+    });
+    expect(newEmployee).toEqual({
+      id: 3,
+      employee_name: "illidan",
+      employee_salary: 70000,
+    });
+  });
+
+  test("should fetch employee by id", async () => {
+    const employee = await service.getEmployeeById({ id: 1 });
+    expect(employee).toEqual({
+      id: 1,
+      employee_name: "ziyi",
+      employee_salary: 50000,
+    });
+
+    const nonExistentEmployee = await service.getEmployeeById({ id: 9999 });
+    expect(nonExistentEmployee).toBeUndefined();
+  });
+
+  test("should update an employee by id", async () => {
+    const updatedEmployee = await service.updateEmployeeById({
+      id: 1,
+      employee_name: "ziyi",
+      employee_salary: 111111,
+    });
+    expect(updatedEmployee).toEqual({
+      id: 1,
+      employee_name: "ziyi",
+      employee_salary: 111111,
+    });
+
+    const nonExistentUpdate = await service.updateEmployeeById({
+      id: 9999,
+      employee_name: "nope",
+    });
+    expect(nonExistentUpdate).toBeUndefined();
+  });
+
+  test("should delete an employee by id", async () => {
+    const deletedEmployee = await service.deleteEmployeeById({ id: 1 });
+    expect(deletedEmployee).toEqual({
+      id: 1,
+      employee_name: "ziyi",
+      employee_salary: 50000,
+    });
+
+    const nonExistentDelete = await service.deleteEmployeeById({ id: 9999 });
+    expect(nonExistentDelete).toBeUndefined();
+  });
 });
diff --git a/src/app/employee/[id]/not-found.tsx b/src/app/employee/[id]/not-found.tsx
@@ -9,7 +9,7 @@ export default function NotFound() {
       </div>
       <Link
         href="/employee"
-        className="rounded-md p-4 m-8 text-white bg-blue-500 hover:shadow-lg hover:shadow-blue-500/50"
+        className="rounded-md p-4 m-8 text-gray-900 bg-tone hover:shadow-lg hover:shadow-tone/50"
       >
         Go Back to Employees page
       </Link>

diff --git a/src/app/employee/page.tsx b/src/app/employee/page.tsx
@@ -14,7 +14,7 @@ export default function EmployeePage({
   return (
     <>
       <div className="flex w-full items-center justify-between my-6 sticky z-10">
-        <h1 className="text-2xl">Employees</h1>
+        <h1 className="text-3xl">Employees</h1>
         <CreateEmployeeButton />
       </div>
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,6 +13,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <title>Employee management</title>
+        <meta
+          name="description"
+          content="a simple application for employees management"
+        />
+      </head>
       <QueryClientProvider client={queryClient}>
         <body className={`${inter.variable} ${lustiana.variable} antialiased`}>
           <Toaster position="top-right" />

diff --git a/src/ui/BreadCrumbs.tsx b/src/ui/BreadCrumbs.tsx
@@ -23,16 +23,18 @@ export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
             <li
               key={`${breadcrumb.href}-${index}`}
               className={`flex items-center ${
-                breadcrumb.active ? "text-gray-900" : "text-gray-500"
+                breadcrumb.active ? "text-gray-900" : "text-tone"
               }`}
             >
               {breadcrumb.active ? (
-                <span aria-current="page">{breadcrumb.label}</span>
+                <span aria-current="page" className="text-3xl">
+                  {breadcrumb.label}
+                </span>
               ) : (
                 <Link
                   href={breadcrumb.href}
                   scroll={false}
-                  className="hover:text-gray-700"
+                  className="hover:text-gray-700 text-3xl"
                 >
                   {breadcrumb.label}
                 </Link>

diff --git a/src/ui/Buttons.tsx b/src/ui/Buttons.tsx
@@ -47,24 +47,24 @@ export const CreateEmployeeButton = () => {
     <Link
       href="/employee/create"
       scroll={false}
-      className="rounded-md p-2 bg-green-500 hover:shadow-lg hover:shadow-green-500/50"
+      className="rounded-md p-2  bg-tone hover:shadow-lg hover:shadow-bg-tone/50"
     >
       <div className="flex items-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           strokeWidth="1.5"
-          stroke="white"
-          className="size-6"
+          stroke=""
+          className="size-6 stroke-gray-900"
         >
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
             d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
           />
         </svg>
-        <span className="text-sm px-2 text-white">Create</span>
+        <span className="text-sm px-2 text-gray-900">Create</span>
       </div>
     </Link>
   );
@@ -75,15 +75,15 @@ export const UpdateEmployeeButton = ({ id }: { id: string }) => {
     <Link
       href={`/employee/${id}/edit`}
       scroll={false}
-      className="rounded-md border p-2 hover:bg-blue-50"
+      className="rounded-md border p-2 hover:bg-tone/50"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         strokeWidth="1.5"
-        stroke="#3b82f6"
-        className="w-5"
+        stroke=""
+        className="w-5  stroke-tone"
       >
         <path
           strokeLinecap="round"
@@ -110,8 +110,8 @@ export const DeleteEmployeeButton = ({ id }: { id: string }) => {
           fill="none"
           viewBox="0 0 24 24"
           strokeWidth="1.5"
-          stroke="#fb7185"
-          className="w-5"
+          stroke=""
+          className="w-5 stroke-gray-500 hover:stroke-red-300"
         >
           <path
             strokeLinecap="round"

diff --git a/src/ui/components/CreateEmployeeForm.component.tsx b/src/ui/components/CreateEmployeeForm.component.tsx
@@ -12,7 +12,6 @@ export default function CreateEmployeeForm() {
   const [state, dispatch] = useFormState(createEmployee, initialState);
 
   //TODO add client side validation to avoid sending bad requests to server
-  console.log("state is", state);
 
   useEffect(() => {
     if (state.type === "success") {

diff --git a/src/ui/components/EmployeeCard.component.tsx b/src/ui/components/EmployeeCard.component.tsx
@@ -75,10 +75,10 @@ const EmployeeCard = ({ employee }: EmployeeCardProps): ReactNode => {
       <div className="mt-6 flex justify-end gap-4">
         <Link
           scroll={false}
-          className="rounded-md p-2 bg-blue-500 hover:shadow-lg hover:shadow-blue-500/50"
+          className="rounded-md p-2 bg-tone hover:shadow-lg hover:shadow-tone/50"
           href={`/employee/${employee?.id}/edit`}
         >
-          <span className="text-md px-2 text-white">Edit</span>
+          <span className="text-md px-2 text-gray-900">Edit</span>
         </Link>
         <DeleteEmployeeButton id={employee?.id.toString()} />
       </div>

diff --git a/src/ui/components/EmployeeTable.component.tsx b/src/ui/components/EmployeeTable.component.tsx
@@ -27,7 +27,7 @@ const EmployeeTable = async ({
       <div className="min-w-full overflow-hidden rounded-lg shadow-md">
         <table className="min-w-full text-gray-900 md:table">
           <thead
-            className={`text-left text-sm font-bold text-black bg-[#cecee4] rounded-t-lg`}
+            className={`text-left text-sm font-bold text-black bg-white rounded-t-lg`}
           >
             <tr>
               <th scope="col" className="px-4 py-5 font-medium sm:pl-6">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,6 +13,7 @@ const config: Config = {
         white: "#F6F6F6",
         background: "#E4E4F0",
         backgroundDark: "#DBDBDB",
+        tone: "#aeaec6",
       },
     },
   },