fix test ids

kiesraad · Jul 12, 2024 · 3aa49bd · 3aa49bd
1 parent cbc1ad6
commit 3aa49bd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx b/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx
@@ -62,7 +62,7 @@ describe("Test CandidatesVotesForm", () => {
     const user = userEvent.setup();
     render(Component);
 
-    const candidate1 = screen.getByTestId("candidate-votes-1");
+    const candidate1 = screen.getByTestId("candidate_votes-1.votes");
     await user.clear(candidate1);
     await user.type(candidate1, "12345");
     expect(candidate1).toHaveValue("12.345");
@@ -83,47 +83,47 @@ describe("Test CandidatesVotesForm", () => {
 
     render(Component);
 
-    const candidate1 = screen.getByTestId("candidate-votes-1");
+    const candidate1 = screen.getByTestId("candidate_votes-1.votes");
     expect(candidate1).toHaveFocus();
     await user.clear(candidate1);
     await user.type(candidate1, "12345");
     expect(candidate1).toHaveValue("12.345");
 
     await user.keyboard("{enter}");
 
-    const candidate2 = screen.getByTestId("candidate-votes-2");
+    const candidate2 = screen.getByTestId("candidate_votes-2.votes");
     expect(candidate2).toHaveFocus();
     await user.clear(candidate2);
     await user.type(candidate2, "6789");
     expect(candidate2).toHaveValue("6.789");
 
     await user.keyboard("{enter}");
 
-    const candidate3 = screen.getByTestId("candidate-votes-3");
+    const candidate3 = screen.getByTestId("candidate_votes-3.votes");
     expect(candidate3).toHaveFocus();
     await user.clear(candidate3);
     await user.type(candidate3, "123");
     expect(candidate3).toHaveValue("123");
 
     await user.keyboard("{enter}");
 
-    const candidate4 = screen.getByTestId("candidate-votes-4");
+    const candidate4 = screen.getByTestId("candidate_votes-4.votes");
     expect(candidate4).toHaveFocus();
     await user.clear(candidate4);
     await user.paste("4242");
     expect(candidate4).toHaveValue("4.242");
 
     await user.keyboard("{enter}");
 
-    const candidate5 = screen.getByTestId("candidate-votes-5");
+    const candidate5 = screen.getByTestId("candidate_votes-5.votes");
     expect(candidate5).toHaveFocus();
     await user.clear(candidate5);
     await user.type(candidate5, "12");
     expect(candidate5).toHaveValue("12");
 
     await user.keyboard("{enter}");
 
-    const candidate6 = screen.getByTestId("candidate-votes-6");
+    const candidate6 = screen.getByTestId("candidate_votes-6.votes");
     expect(candidate6).toHaveFocus();
     await user.clear(candidate6);
     // Test if maxLength on field works
@@ -132,15 +132,15 @@ describe("Test CandidatesVotesForm", () => {
 
     await user.keyboard("{enter}");
 
-    const candidate7 = screen.getByTestId("candidate-votes-7");
+    const candidate7 = screen.getByTestId("candidate_votes-7.votes");
     expect(candidate7).toHaveFocus();
     await user.clear(candidate7);
     await user.type(candidate7, "3");
     expect(candidate7).toHaveValue("3");
 
     await user.keyboard("{enter}");
 
-    const total = screen.getByTestId("list-total");
+    const total = screen.getByTestId("total");
     await user.click(total);
     expect(total).toHaveFocus();
     await user.clear(total);
@@ -260,21 +260,21 @@ describe("Test CandidatesVotesForm", () => {
 
       render(Component);
 
-      const candidateOne = screen.getByTestId("candidate-votes-1");
+      const candidateOne = screen.getByTestId("candidate_votes-1.votes");
       await user.clear(candidateOne);
       await user.type(
         candidateOne,
         expectedRequest.data.political_group_votes[0]?.candidate_votes[0]?.votes.toString() ?? "0",
       );
 
-      const candidateTwo = screen.getByTestId("candidate-votes-2");
+      const candidateTwo = screen.getByTestId("candidate_votes-2.votes");
       await user.clear(candidateTwo);
       await user.type(
         candidateTwo,
         expectedRequest.data.political_group_votes[0]?.candidate_votes[1]?.votes.toString() ?? "0",
       );
 
-      const listTotal = screen.getByTestId("list-total");
+      const listTotal = screen.getByTestId("total");
       await user.clear(listTotal);
       await user.type(
         listTotal,

diff --git a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.tsx b/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.tsx
@@ -40,8 +40,6 @@ export function CandidatesVotesForm({ group }: CandidatesVotesFormProps) {
     setTemporaryCache,
   } = usePoliticalGroup(group.number);
 
-  console.log(errors);
-
   usePreventFormEnterSubmit(formRef);
 
   const getValues = React.useCallback(
@@ -64,7 +62,6 @@ export function CandidatesVotesForm({ group }: CandidatesVotesFormProps) {
 
   const errorsAndWarnings = useErrorsAndWarnings(errors, warnings, inputMaskWarnings);
 
-  console.log(errorsAndWarnings);
   //const blocker =  useBlocker() use const blocker to render confirmation UI.
   useBlocker(() => {
     if (formRef.current && !isCalled) {
@@ -146,6 +143,7 @@ export function CandidatesVotesForm({ group }: CandidatesVotesFormProps) {
                 format={format}
                 addSeparator={addSeparator}
                 defaultValue={defaultValue}
+                isFocused={index === 0}
               />
             );
           })}

diff --git a/frontend/lib/ui/InputGrid/InputGridRow.tsx b/frontend/lib/ui/InputGrid/InputGridRow.tsx
@@ -20,6 +20,7 @@ export interface InputGridRowProps {
   isTotal?: boolean;
   isFocused?: boolean;
   addSeparator?: boolean;
+  autoFocus?: boolean;
 }
 
 export function InputGridRow({