INJIWEB-1585, added a confirmation step before navigating to the reset passcode page, reducing accidental resets. #496
Conversation
WalkthroughAdds a passcode-reset confirmation modal and UI state to PasscodePage, plus localized strings for the confirmation prompt across multiple locale files; tests updated to exercise the new confirm step and translations. Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…e, reducing accidental resets. Signed-off-by: Lkanath Panda <[email protected]>
INJIWEB-1585.mp4 |
|
@iamlokanath unit tests are failing on the PR @sanchi-singh24 please confirm on the modal design |
iamlokanath
changed the title
Signed-off-by: Lkanath Panda <[email protected]>
|
Signed-off-by: Lkanath Panda <[email protected]>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@inji-web/src/__tests__/pages/User/PasscodePage.test.tsx`:
- Around line 171-185: The test "should redirect to forgot passcode page when
forgot passcode button is clicked and user confirms" uses userEvent.click()
without awaiting it, causing flakiness; update the interactions in this test
(findByTestId "btn-forgot-passcode" click and "btn-confirm" click) to await the
userEvent.click calls so the confirmation modal renders before the next action,
and apply the same fix to the other tests in this file that call
userEvent.click() without await (the tests touching test ids at lines
referenced: "btn-forgot-passcode"/"btn-confirm" and the other failing clicks
noted at lines 193, 244, 279, 292, 321) to ensure each userEvent.click is
awaited.
| test("should redirect to forgot passcode page when forgot passcode button is clicked and user confirms", async () => { | ||
| mockApiResponse({ data: successWalletResponse }) | ||
| renderWithProviders(<PasscodePage />); | ||
|
|
||
| const forgotPasscodeButton = await screen.findByTestId("btn-forgot-passcode"); | ||
| expect(forgotPasscodeButton).toBeInTheDocument(); | ||
| forgotPasscodeButton.click(); | ||
| userEvent.click(forgotPasscodeButton); | ||
|
|
||
| const confirmButton = await screen.findByTestId("btn-confirm"); | ||
| expect(confirmButton).toBeInTheDocument(); | ||
| userEvent.click(confirmButton); | ||
|
|
||
| expect(mockNavigate).toBeCalledWith("/user/reset-passcode", {"state": {"walletId": "2c2e1810-19c8-4c85-910d-aa1622412413"}} | ||
| await waitFor(() => | ||
| expect(mockNavigate).toHaveBeenCalledWith("/user/reset-passcode", { "state": { "walletId": "2c2e1810-19c8-4c85-910d-aa1622412413" } }) | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd inji-web && find . -name "PasscodePage.test.tsx" -type fRepository: inji/inji-web
Length of output: 105
🏁 Script executed:
cat -n inji-web/src/__tests__/pages/User/PasscodePage.test.tsx | head -200Repository: inji/inji-web
Length of output: 10061
🏁 Script executed:
cd inji-web && grep -n "userEvent\|@testing-library/user-event" src/__tests__/pages/User/PasscodePage.test.tsx | head -20Repository: inji/inji-web
Length of output: 1227
🏁 Script executed:
cd inji-web && cat package.json | grep -A 2 -B 2 "@testing-library/user-event"Repository: inji/inji-web
Length of output: 220
🏁 Script executed:
cd inji-web && rg "userEvent\.setup\(\)" src/__tests__ | head -10Repository: inji/inji-web
Length of output: 39
🏁 Script executed:
cd inji-web && web_search "@testing-library/user-event v13 api click async"Repository: inji/inji-web
Length of output: 107
🏁 Script executed:
curl -s "https://www.npmjs.com/package/@testing-library/user-event?activeTab=readme" 2>/dev/null | head -100 || echo "Checking local documentation instead"Repository: inji/inji-web
Length of output: 7367
🏁 Script executed:
cd inji-web && rg "await.*userEvent\.(click|type)" src/__tests__ --context 2 | head -30Repository: inji/inji-web
Length of output: 2585
Await userEvent.click() to prevent test flakiness.
userEvent.click() is async in v13 and must be awaited. Without awaiting, the confirmation modal may not render before the next interaction, causing race conditions. (Note: userEvent.setup() is not available in v13.5.0; use direct await instead.)
💡 Proposed fix
test("should redirect to forgot passcode page when forgot passcode button is clicked and user confirms", async () => {
mockApiResponse({ data: successWalletResponse })
renderWithProviders(<PasscodePage />);
const forgotPasscodeButton = await screen.findByTestId("btn-forgot-passcode");
expect(forgotPasscodeButton).toBeInTheDocument();
- userEvent.click(forgotPasscodeButton);
+ await userEvent.click(forgotPasscodeButton);
const confirmButton = await screen.findByTestId("btn-confirm");
expect(confirmButton).toBeInTheDocument();
- userEvent.click(confirmButton);
+ await userEvent.click(confirmButton);
await waitFor(() =>
expect(mockNavigate).toHaveBeenCalledWith("/user/reset-passcode", { "state": { "walletId": "2c2e1810-19c8-4c85-910d-aa1622412413" } })
);
})Apply the same pattern to other tests in this file that use userEvent.click() without await (lines 193, 244, 279, 292, 321).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| test("should redirect to forgot passcode page when forgot passcode button is clicked and user confirms", async () => { | |
| mockApiResponse({ data: successWalletResponse }) | |
| renderWithProviders(<PasscodePage />); | |
| const forgotPasscodeButton = await screen.findByTestId("btn-forgot-passcode"); | |
| expect(forgotPasscodeButton).toBeInTheDocument(); | |
| forgotPasscodeButton.click(); | |
| userEvent.click(forgotPasscodeButton); | |
| const confirmButton = await screen.findByTestId("btn-confirm"); | |
| expect(confirmButton).toBeInTheDocument(); | |
| userEvent.click(confirmButton); | |
| expect(mockNavigate).toBeCalledWith("/user/reset-passcode", {"state": {"walletId": "2c2e1810-19c8-4c85-910d-aa1622412413"}} | |
| await waitFor(() => | |
| expect(mockNavigate).toHaveBeenCalledWith("/user/reset-passcode", { "state": { "walletId": "2c2e1810-19c8-4c85-910d-aa1622412413" } }) | |
| ); | |
| test("should redirect to forgot passcode page when forgot passcode button is clicked and user confirms", async () => { | |
| mockApiResponse({ data: successWalletResponse }) | |
| renderWithProviders(<PasscodePage />); | |
| const forgotPasscodeButton = await screen.findByTestId("btn-forgot-passcode"); | |
| expect(forgotPasscodeButton).toBeInTheDocument(); | |
| await userEvent.click(forgotPasscodeButton); | |
| const confirmButton = await screen.findByTestId("btn-confirm"); | |
| expect(confirmButton).toBeInTheDocument(); | |
| await userEvent.click(confirmButton); | |
| await waitFor(() => | |
| expect(mockNavigate).toHaveBeenCalledWith("/user/reset-passcode", { "state": { "walletId": "2c2e1810-19c8-4c85-910d-aa1622412413" } }) | |
| ); | |
| }) |
🤖 Prompt for AI Agents
In `@inji-web/src/__tests__/pages/User/PasscodePage.test.tsx` around lines 171 -
185, The test "should redirect to forgot passcode page when forgot passcode
button is clicked and user confirms" uses userEvent.click() without awaiting it,
causing flakiness; update the interactions in this test (findByTestId
"btn-forgot-passcode" click and "btn-confirm" click) to await the
userEvent.click calls so the confirmation modal renders before the next action,
and apply the same fix to the other tests in this file that call
userEvent.click() without await (the tests touching test ids at lines
referenced: "btn-forgot-passcode"/"btn-confirm" and the other failing clicks
noted at lines 193, 244, 279, 292, 321) to ensure each userEvent.click is
awaited.
2 participants
Summary by CodeRabbit
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.