feat(timer mocks): example with timermocks

Author: holgergp

src/components/bohnen/BohnenRow.test.tsx

@@ -47,7 +47,7 @@ describe("BohnenRow", () => {
     });
   });
 
-  it.skip("should dispatch an UPDATE event if the user updates the EKP fake timers", async () => {
+  it("should dispatch an UPDATE event if the user updates the EKP fake timers", async () => {
     vitest.useFakeTimers();
 
     const mockBohne = getMockBohne();
@@ -62,14 +62,13 @@ describe("BohnenRow", () => {
 
     fireEvent.change(input, {
       target: {
-        value: "12",
+        value: "15",
       },
     });
-    vitest.advanceTimersByTime(500);
-
+    vitest.advanceTimersByTime(1000);
     expect(dispatchMock).toHaveBeenCalledWith({
       type: "UPDATE",
-      payload: { ...mockBohne, ekp: 12 },
+      payload: { ...mockBohne, ekp: 15 },
     });
     vitest.useRealTimers();
   });
@@ -87,13 +86,15 @@ describe("BohnenRow", () => {
 
     fireEvent.change(input, {
       target: {
-        value: "12",
+        value: "15",
       },
     });
 
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
     expect(dispatchMock).toHaveBeenCalledWith({
       type: "UPDATE",
-      payload: { ...mockBohne, ekp: 12 },
+      payload: { ...mockBohne, ekp: 15 },
     });
   });
 });

src/components/bohnen/BohnenRow.tsx

@@ -17,7 +17,6 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
         clearTimeout(debounceTimeout.current);
       }
       debounceTimeout.current = setTimeout(() => {
-        console.log("da isser");
         dispatch(action);
       }, 1000);
     },
@@ -28,7 +27,6 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
     "w-full border-1 border-slate-400 p-1 outline-1 outline-transparent focus:border-cyan-600 focus:outline-1 focus:outline-cyan-600 disabled:bg-slate-200";
 
   const numberInputClasses = `${inputClasses} text-right font-mono`;
-
   return (
     <tr key={bohne.id}>
       <td>
@@ -53,7 +51,6 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
           aria-label="EKP"
           className={numberInputClasses}
           onChange={(event) => {
-            console.log("Changedichange", event.target.value);
             debouncedDispatch({
               type: BohnenActionTypes.UPDATE,
               payload: {
@@ -69,17 +66,9 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
         <input
           type="number"
           data-testid="marge"
+          aria-label="MARGE"
           className={numberInputClasses}
           disabled={true}
-          onChange={(event) =>
-            debouncedDispatch({
-              type: BohnenActionTypes.UPDATE,
-              payload: {
-                ...bohne,
-                marge: parseFloat(event.target.value),
-              },
-            })
-          }
           value={bohne.marge || ""}
         />
       </td>
@@ -105,6 +94,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
           type="number"
           id="vkp"
           data-testid="vkp"
+          aria-label="VKP"
           className={numberInputClasses}
           onChange={(event) =>
             debouncedDispatch({