test: fix flaky participantAmountSelector and reservationTimer tests

Refs: LINK-2574

Author: jorilindell

src/domain/signupGroup/participantAmountSelector/__tests__/ParticipantAmountSelector.test.tsx

@@ -89,9 +89,11 @@ test('should show modal if reserved seats are in waiting list', async () => {
   await user.type(participantAmountInput, '2');
   await user.click(updateParticipantAmountButton);
 
-  const modal = await screen.findByRole('dialog', {
-    name: 'Olet ilmoittautumassa tapahtuman jonoon',
-  });
+  const modal = await screen.findByRole(
+    'dialog',
+    { name: 'Olet ilmoittautumassa tapahtuman jonoon' },
+    { timeout: 5000 }
+  );
 
   await user.click(within(modal).getByRole('button', { name: 'Sulje' }));
 

src/domain/signupGroup/reservationTimer/__tests__/ReservationTimer.test.tsx

@@ -108,13 +108,21 @@ test('should show modal if reserved seats are in waiting list', async () => {
   });
   renderComponent();
 
-  const modal = await screen.findByRole('dialog', {
-    name: 'Olet ilmoittautumassa tapahtuman jonoon',
-  });
+  const modalName = 'Olet ilmoittautumassa tapahtuman jonoon';
+
+  const modal = await screen.findByRole(
+    'dialog',
+    { name: modalName },
+    { timeout: 5000 }
+  );
 
   await user.click(within(modal).getByRole('button', { name: 'Sulje' }));
 
-  await waitFor(() => expect(modal).not.toBeInTheDocument());
+  await waitFor(() =>
+    expect(
+      screen.queryByRole('dialog', { name: modalName })
+    ).not.toBeInTheDocument()
+  );
 });
 
 test('should display reservation expiring modal if there is less than 60 seconds left', async () => {