fix(browser-test): reload transactions in syncing step and fix Skip button selector (#203)

## Summary

- Reverts the CSV special-case added in `55f35c6` — `router.reload({
only: ['transactions'] })` now always fires in the syncing step so
CSV-imported transactions correctly appear in the categorize step.
- Fixes the `click('Skip')` selector in `OnboardingFlowTest` to use
`button:has-text("Skip")` instead of `'Skip'`, bypassing the Pest
browser plugin's exact-text fallback which timed out because the
button's full text content is `"Skip Ctrl+N"` (due to the `<Kbd>` child
element).
- Updates the onboarding flow browser test to exercise the full
categorize flow (skipping all 5 CSV transactions) instead of asserting
the empty state.

This commit was pushed after PR #201 was merged and did not make it into
main.
This commit is contained in:
Víctor Falcón 2026-03-05 11:29:06 +00:00 committed by GitHub
parent 011ba13114
commit 3f6c67631b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 20 deletions

View File

@ -27,18 +27,13 @@ export function StepSyncing({ onComplete }: StepSyncingProps) {
const onCompleteRef = useRef(onComplete);
onCompleteRef.current = onComplete;
const advance = useCallback((hadPendingSync: boolean) => {
if (hadPendingSync) {
// Reload transactions so the categorize step sees newly synced data.
router.reload({
only: ['transactions'],
onFinish: () => onCompleteRef.current(),
});
} else {
// Sync was never pending (e.g. CSV-import user): skip the reload so
// the transactions prop stays as it was at page load.
onCompleteRef.current();
}
const advance = useCallback(() => {
// Always reload transactions so the categorize step sees the latest data,
// including transactions imported via CSV during onboarding.
router.reload({
only: ['transactions'],
onFinish: () => onCompleteRef.current(),
});
}, []);
// Check sync status immediately on mount, then poll every 3 seconds
@ -46,7 +41,7 @@ export function StepSyncing({ onComplete }: StepSyncingProps) {
let cancelled = false;
let pollTimer: ReturnType<typeof setTimeout>;
const check = async (hadPendingSync: boolean = false) => {
const check = async () => {
try {
const { data } = await axios.get<{ pending: boolean }>(
syncStatus().url,
@ -58,15 +53,15 @@ export function StepSyncing({ onComplete }: StepSyncingProps) {
if (!data.pending) {
setIsPending(false);
advance(hadPendingSync);
advance();
} else {
setIsPending(true);
pollTimer = setTimeout(() => check(true), 3000);
pollTimer = setTimeout(() => check(), 3000);
}
} catch {
if (!cancelled) {
// On error, advance anyway to not block the user
advance(hadPendingSync);
advance();
}
}
};

View File

@ -308,11 +308,17 @@ it('completes entire onboarding flow with account creation, transaction import,
// Smart Rules
$page->assertSee('Smart Automation Rules')
->click('Continue')
->wait(1);
->wait(3); // syncing step reloads transactions — allow time for axios + router.reload
// Categorize Transactions - transactions prop was loaded at page start (before import),
// so no uncategorized transactions are available and Continue is immediately enabled
$page->assertSee('No Uncategorized Transactions')
// Categorize Transactions - 5 CSV transactions are loaded after the syncing step reloads
$page->assertSee('Categorize Your Transactions')
->click("Let's start")
->wait(1)
->click('button:has-text("Skip")')->wait(1)
->click('button:has-text("Skip")')->wait(1)
->click('button:has-text("Skip")')->wait(1)
->click('button:has-text("Skip")')->wait(1)
->click('button:has-text("Skip")')->wait(1)
->click('Continue')
->wait(1);