From 3f6c67631be95310cfee77bb2bed52d26ba74896 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Thu, 5 Mar 2026 11:29:06 +0000
Subject: [PATCH] fix(browser-test): reload transactions in syncing step and
 fix Skip button selector (#203)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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.
---
 .../js/components/onboarding/step-syncing.tsx | 27 ++++++++-----------
 tests/Browser/OnboardingFlowTest.php          | 14 +++++++---
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/onboarding/step-syncing.tsx b/resources/js/components/onboarding/step-syncing.tsx
index f7f157cf..9ab788cd 100644
--- a/resources/js/components/onboarding/step-syncing.tsx
+++ b/resources/js/components/onboarding/step-syncing.tsx
@@ -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();
                 }
             }
         };
diff --git a/tests/Browser/OnboardingFlowTest.php b/tests/Browser/OnboardingFlowTest.php
index b49f915b..b4555939 100644
--- a/tests/Browser/OnboardingFlowTest.php
+++ b/tests/Browser/OnboardingFlowTest.php
@@ -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);