MeshiTrack/packages/web/test_results_utf8.txt

 RUN  v4.1.2 F:/Coding/MeshiTrack/packages/web

node.exe : stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > loads and displays the list
At line:1 char:1
+ & "C:\nodejs/node.exe" "C:\nodejs/node_modules/npm/bin/npx-cli.js" vi ...
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (stderr...splays the list:String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError
 
Each child in a list should have a unique "key" prop.

Check the render method of `ShoppingListDetailsPage`. See https://react.dev/link/warning-keys for more information.

stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > loads and displays the list
TypeError: fetch failed
    at node:internal/deps/undici/undici:16416:13
    at processTicksAndRejections (node:internal/process/task_queues:103:5)
    at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
  [cause]: AggregateError: 
      at internalConnectMultiple (node:net:1134:18)
      at afterConnectMultiple (node:net:1715:7) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
}

 Γ£ô src/components/__tests__/ThemeProvider.test.tsx (8 tests) 116ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/page.test.tsx (3 tests) 123ms
 Γ£ô src/components/__tests__/TopBar.test.tsx (4 tests) 277ms
 Γ£ô src/app/(dashboard)/products/__tests__/ImportDialog.test.tsx (11 tests) 359ms
 Γ£ô src/components/__tests__/ui.test.tsx (11 tests) 285ms
 Γ£ô src/app/__tests__/page.test.tsx (2 tests) 254ms
 Γ£ô src/components/__tests__/Sidebar.test.tsx (8 tests) 334ms
stderr | src/app/(dashboard)/dashboard/__tests__/page.test.tsx > DashboardPage > 
shows "good shape" message when no critical alerts
Each child in a list should have a unique "key" prop.

Check the render method of `DashboardPage`. See https://react.dev/link/warning-keys for more information.

 Γ£ô src/app/(dashboard)/medicines/schedule/__tests__/page.test.tsx (14 tests) 408ms
stderr | src/app/(dashboard)/shopping-lists/__tests__/page.test.tsx > ShoppingListsPage > 
loads and displays shopping lists
Each child in a list should have a unique "key" prop.

Check the render method of `ShoppingListsPage`. See https://react.dev/link/warning-keys for more information.

 Γ£ô src/app/(dashboard)/dashboard/__tests__/page.test.tsx (13 tests) 406ms
 Γ¥» src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx (3 tests | 3 failed) 52ms
     × renders loading initially 42ms
     × loads and displays analytics 4ms
     × handles fetch errors gracefully 3ms
 Γ£ô src/app/(dashboard)/shopping-lists/__tests__/page.test.tsx (6 tests) 710ms
     Γ£ô toggles create list modal and submits  319ms
stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > toggles an item check
TypeError: fetch failed
    at node:internal/deps/undici/undici:16416:13
    at processTicksAndRejections (node:internal/process/task_queues:103:5)
    at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
  [cause]: AggregateError: 
      at internalConnectMultiple (node:net:1134:18)
      at afterConnectMultiple (node:net:1715:7) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
}

stderr | src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx > MedicinePricesPage > 
renders Medicine Prices heading when householdId exists
An update to MedicinePricesContent inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to MedicinePricesContent inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

stderr | src/app/(dashboard)/refills/__tests__/page.test.tsx > RefillsPage > 
renders Refills heading when householdId exists
An update to AlertsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to AlertsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to RefillListsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to RefillListsPanel inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

 Γ£ô src/app/(dashboard)/recipes/new/__tests__/page.test.tsx (3 tests) 203ms
 Γ£ô src/app/(dashboard)/recipes/[id]/edit/__tests__/page.test.tsx (4 tests) 283ms
 Γ£ô src/app/(dashboard)/recipes/[id]/__tests__/page.test.tsx (11 tests) 557ms
 Γ£ô src/app/(dashboard)/purchases/__tests__/page.test.tsx (26 tests) 2317ms
 Γ£ô src/app/(dashboard)/stores/__tests__/page.test.tsx (22 tests) 2286ms
     Γ£ô toggles a preset tag and adds a custom tag  445ms
 Γ£ô src/app/(dashboard)/pantry/__tests__/page.test.tsx (15 tests) 801ms
 Γ£ô src/app/(dashboard)/recipes/__tests__/RecipeEditor.test.tsx (9 tests) 831ms
 Γ£ô src/app/(dashboard)/recipes/__tests__/page.test.tsx (22 tests) 885ms
stderr | src/app/(dashboard)/medicines/__tests__/ActivityTab.test.tsx > ActivityTab > 
loads more events when Load more is clicked
Encountered two children with the same key, `ev-1`. Keys should be unique so that components maintain their 
identity across updates. Non-unique keys may cause children to be duplicated and/or omitted ΓÇö the behavior is 
unsupported and could change in a future version.

stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > adds a new item to the list
TypeError: fetch failed
    at node:internal/deps/undici/undici:16416:13
    at processTicksAndRejections (node:internal/process/task_queues:103:5)
    at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
  [cause]: AggregateError: 
      at internalConnectMultiple (node:net:1134:18)
      at afterConnectMultiple (node:net:1715:7) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
}

stderr | src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx > MedicinePricesPage > 
shows Load more button in price history
Encountered two children with the same key, `pr-1`. Keys should be unique so that components maintain their 
identity across updates. Non-unique keys may cause children to be duplicated and/or omitted ΓÇö the behavior is 
unsupported and could change in a future version.

 Γ£ô src/app/(dashboard)/medicines/__tests__/ActivityTab.test.tsx (18 tests) 979ms
 Γ£ô src/app/(dashboard)/products/__tests__/page.test.tsx (11 tests) 1234ms
     Γ£ô filters by search input with debounce  413ms
stderr | src/app/(dashboard)/medicines/__tests__/LibraryTab.test.tsx > LibraryTab > 
filters medicines by search, category, and form
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act
An update to LibraryTab inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

 Γ£ô src/app/(dashboard)/medicines/__tests__/OrganizerTab.test.tsx (20 tests) 1394ms
 Γ£ô src/app/(dashboard)/medicine-prices/__tests__/page.test.tsx (15 tests) 1432ms
stderr | src/app/(dashboard)/medicines/__tests__/CabinetTab.test.tsx > CabinetTab > 
changes quantity and unit in AddToCabinetForm
An update to AddToCabinetForm inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 
https://react.dev/link/wrap-tests-with-act

 Γ£ô src/app/(dashboard)/products/__tests__/ProductModal.test.tsx (18 tests) 1701ms
     Γ£ô calls onSave with correct data on valid submit  331ms
 Γ£ô src/app/(dashboard)/settings/__tests__/page.test.tsx (20 tests) 3677ms
     Γ£ô allows editing the household name  438ms
     Γ£ô shows error when name update fails  458ms
     Γ£ô shows fallback error when non-Error thrown on name update  372ms
stderr | src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > completes the trip and syncs to pantry
TypeError: fetch failed
    at node:internal/deps/undici/undici:16416:13
    at processTicksAndRejections (node:internal/process/task_queues:103:5)
    at ApiClient.get (F:/Coding/MeshiTrack/packages/web/src/services/api-client.ts:46:17) {
  [cause]: AggregateError: 
      at internalConnectMultiple (node:net:1134:18)
      at afterConnectMultiple (node:net:1715:7) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  }
}

 Γ£ô src/app/(dashboard)/medicines/__tests__/LibraryTab.test.tsx (14 tests) 2075ms
     Γ£ô creates medicine and refreshes list  515ms
     Γ£ô shows fallback error when non-Error is thrown on create medicine  466ms
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx (5 tests | 5 failed) 4140ms
     × renders loading initially 57ms
     × loads and displays the list 1035ms
     × toggles an item check 1019ms
     × adds a new item to the list 1016ms
     × completes the trip and syncs to pantry 1009ms
 Γ£ô src/app/(dashboard)/refills/__tests__/page.test.tsx (26 tests) 3097ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/CabinetTab.test.tsx (29 tests) 3172ms
 Γ£ô src/app/(dashboard)/medicines/__tests__/RegimensTab.test.tsx (32 tests) 3206ms
 Γ£ô src/app/(dashboard)/medicines/cabinet/__tests__/page.test.tsx (3 tests) 106ms
 Γ£ô src/app/(dashboard)/medicines/organizer/__tests__/page.test.tsx (3 tests) 108ms
 Γ£ô src/app/(dashboard)/medicines/regimens/__tests__/page.test.tsx (3 tests) 106ms
 Γ£ô src/app/(dashboard)/medicines/[id]/__tests__/page.test.tsx (34 tests) 3690ms
     Γ£ô toggles Add Product form  339ms
stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > handles incoming item_updated messages correctly
🛒 Connected to shopping list real-time sync: list1

stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > broadcasts toggle item messages when connected
🛒 Connected to shopping list real-time sync: list1

stdout | src/lib/useShoppingListSync.test.ts > useShoppingListSync > handles disconnect and reconnect backoff
🛒 Connected to shopping list real-time sync: list1
🔌 Sync severed: test
🔄 Attempting sync handshake reconnect (1/5)...

 Γ£ô src/lib/useShoppingListSync.test.ts (4 tests) 49ms
 Γ£ô src/app/(dashboard)/__tests__/layout.test.tsx (1 test) 54ms
 Γ£ô src/app/(dashboard)/medicines/activity/__tests__/page.test.tsx (3 tests) 94ms
 Γ£ô src/app/(dashboard)/medicines/library/__tests__/page.test.tsx (3 tests) 98ms
 Γ£ô src/lib/__tests__/useApi.test.ts (7 tests) 33ms
 Γ£ô src/app/(dashboard)/__tests__/loading.test.tsx (1 test) 37ms
 Γ£ô src/services/__tests__/api-client.test.ts (14 tests) 28ms
 Γ£ô src/services/__tests__/recipes.test.ts (11 tests) 17ms
 Γ£ô src/services/__tests__/products.test.ts (12 tests) 18ms
 Γ£ô src/services/__tests__/regimens.test.ts (8 tests) 13ms
 Γ£ô src/services/__tests__/refills.test.ts (9 tests) 11ms
 Γ£ô src/services/meal-plans.test.ts (9 tests) 12ms
 Γ£ô src/services/__tests__/organizer.test.ts (7 tests) 8ms
 Γ£ô src/services/__tests__/stores.test.ts (6 tests) 9ms
 Γ£ô src/services/shopping-lists.test.ts (12 tests) 12ms
 Γ£ô src/services/__tests__/pantry.test.ts (13 tests) 16ms
 Γ£ô src/services/__tests__/cabinet.test.ts (11 tests) 14ms
 Γ£ô src/services/__tests__/households.test.ts (5 tests) 9ms
 Γ£ô src/services/prices.test.ts (5 tests) 10ms
 Γ£ô src/services/__tests__/medicines.test.ts (12 tests) 14ms
 Γ£ô src/services/nutrition-targets.test.ts (4 tests) 8ms
 Γ£ô src/services/__tests__/purchases.test.ts (7 tests) 8ms
 Γ£ô src/services/__tests__/cabinet-events.test.ts (7 tests) 13ms
 Γ£ô src/services/__tests__/medicine-prices.test.ts (7 tests) 10ms

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 8 ⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx > 
ShoppingListPricesPage > renders loading initially
 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx > 
ShoppingListPricesPage > loads and displays analytics
 FAIL  src/app/(dashboard)/shopping-lists/prices/__tests__/page.test.tsx > 
ShoppingListPricesPage > handles fetch errors gracefully
Error: invariant expected app router to be mounted
 Γ¥» useRouter ../../node_modules/next/src/client/components/navigation.ts:179:10
 Γ¥» PricesAnalyticsPage src/app/(dashboard)/shopping-lists/prices/page.tsx:25:18
     23| export default function PricesAnalyticsPage() {
     24|   const { householdId, isLoading } = useApi();
     25|   const router = useRouter();
       |                  ^
     26|   const [data, setData] = 
useState<any>(null);
     27|   const [loading, setLoading] = 
useState(true);
 Γ¥» Object.react_stack_bottom_frame 
../../node_modules/react-dom/cjs/react-dom-client.development.js:25904:20
 Γ¥» renderWithHooks 
../../node_modules/react-dom/cjs/react-dom-client.development.js:7662:22
 Γ¥» updateFunctionComponent 
../../node_modules/react-dom/cjs/react-dom-client.development.js:10166:19
 Γ¥» beginWork ../../node_modules/react-dom/cjs/react-dom-client.development.js:11778:18
 Γ¥» runWithFiberInDEV 
../../node_modules/react-dom/cjs/react-dom-client.development.js:874:13
 Γ¥» performUnitOfWork 
../../node_modules/react-dom/cjs/react-dom-client.development.js:17641:22
 Γ¥» workLoopSync ../../node_modules/react-dom/cjs/react-dom-client.development.js:17469:41
 Γ¥» renderRootSync 
../../node_modules/react-dom/cjs/react-dom-client.development.js:17450:11

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/8]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > renders loading initially
TestingLibraryElementError: Unable to find an element with the text: Shopping List. This could be 
because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to 
make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      style="padding: 40px;"
    >
      Hydrating session checklist...
    </div>
  </div>
</body>
 Γ¥» Object.getElementError ../../node_modules/@testing-library/dom/dist/config.js:37:19
 Γ¥» ../../node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 Γ¥» ../../node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 Γ¥» ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:48:19
     46|     vi.mocked(useApiModule.useApi).mockReturnValue({ householdId: null…
     47|     render(<ShoppingListDetailPage />);
     48|     expect(screen.getByText('Shopping 
List')).toBeInTheDocument();
       |                   ^
     49|   });
     50|

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/8]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > loads and displays the list
TestingLibraryElementError: Unable to find an element with the text: Apple. This could be because 
the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make 
your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Ingredient Loading...
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                    <svg
                      aria-hidden="true"
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Ingredient Loading...
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                        </span>
                      </div>
                    </div>
                    <button
               ...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:53:11
     51|   it('loads and displays the list', async () => {
     52|     render(<ShoppingListDetailPage />);
     53|     await waitFor(() => {
       |           ^
     54|       expect(screen.getByText('Test 
List')).toBeInTheDocument();
     55|       expect(screen.getByText('Apple')).toBeI
nTheDocument();

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/8]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > toggles an item check
TestingLibraryElementError: Unable to find an element with the text: Apple. This could be because 
the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make 
your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Ingredient Loading...
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                    <svg
                      aria-hidden="true"
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Ingredient Loading...
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                        </span>
                      </div>
                    </div>
                    <button
               ...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:61:11
     59|   it('toggles an item check', async () => {
     60|     render(<ShoppingListDetailPage />);
     61|     await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc…
       |           ^
     62|
     63|     const checkboxes = 
screen.getAllByRole('checkbox');

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/8]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > adds a new item to the list
TestingLibraryElementError: Unable to find an element with the text: Apple. This could be because 
the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make 
your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Ingredient Loading...
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                    <svg
                      aria-hidden="true"
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div
            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Ingredient Loading...
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                        </span>
                      </div>
                    </div>
                    <button
               ...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:80:11
     78|
     79|     render(<ShoppingListDetailPage />);
     80|     await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc…
       |           ^
     81|
     82|     const toggleBtn = screen.getByRole('button', { name: /Add Product/…

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/8]⎯

 FAIL  src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx > 
ShoppingListDetailPage > completes the trip and syncs to pantry
TestingLibraryElementError: Unable to find an element with the text: Apple. This could be because 
the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make 
your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <h1
      aria-hidden="false"
      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; 
clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
    >
      Test List
    </h1>
    <div
      style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
    >
      <span
        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
      >
        active
      </span>
      <div
        style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
      >
        <div
          style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
        />
        Live Sync Channel Operational
      </div>
    </div>
    <div
      style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
    >
      <div
        style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
      >
        <button
          class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
        >
          <svg
            aria-hidden="true"
            class=""
            fill="none"
            height="18"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.6"
            style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
            viewBox="0 0 24 24"
            width="18"
          >
            <path
              d="M15 18l-6-6 6-6"
            />
          </svg>
           Back to Hub
        </button>
        <div
          style="display: flex; gap: 12px;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M3 17l6-6 4 4 8-8"
              />
              <path
                d="M14 7h7v7"
              />
            </svg>
             Check Lowest Store Options
          </button>
        </div>
      </div>
      <div
        style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
      >
        <div>
          <div
            style="display: flex; flex-direction: column; gap: 24px;"
          >
            <div>
              <h4
                style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
              >
                Other / Misc
              </h4>
              <div
                style="display: flex; flex-direction: column; gap: 10px;"
              >
                <div
                  style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: 
var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; opacity: 1; 
text-decoration: none;"
                >
                  <button
                    style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                  />
                  <div
                    style="flex: 1 1 0%; min-width: 0px;"
                  >
                    <div
                      style="font-weight: 600; font-size: 14px; color: var(--ink);"
                    >
                      Ingredient Loading...
                    </div>
                    <div
                      style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                    >
                      <span>
                        Qty: 
                        5
                         
                      </span>
                    </div>
                  </div>
                  <button
                    style="border: medium; background: transparent; cursor: pointer; padding: 6px; 
color: var(--ink-muted); opacity: 0.5;"
                  >
                    <svg
                      aria-hidden="true"
                ...

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <h1
        aria-hidden="false"
        style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: 
hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"
      >
        Test List
      </h1>
      <div
        style="display: flex; align-items: center; gap: 16px; font-size: 13px; padding: 0px 32px; 
max-width: 1400px; margin: -12px auto 12px;"
      >
        <span
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium 
leading-relaxed bg-[var(--info-soft)] text-[var(--info)]"
        >
          active
        </span>
        <div
          style="display: flex; align-items: center; gap: 6px; color: var(--ink-muted);"
        >
          <div

 Test Files  2 failed | 56 passed (58)
      Tests  8 failed | 616 passed (624)
   Start at  08:46:48
   Duration  14.56s (transform 14.63s, setup 38.02s, import 35.85s, tests 42.20s, environment 273.62s)

            style="width: 8px; height: 8px; border-radius: 50%; background: var(--success, #10b981); 
box-shadow: 0 0 8px var(--success);"
          />
          Live Sync Channel Operational
        </div>
      </div>
      <div
        style="padding: 28px 32px 64px; max-width: 1400px; margin: 0px auto;"
      >
        <div
          style="display: flex; gap: 12px; margin-bottom: 24px; justify-content: space-between; 
flex-wrap: wrap;"
        >
          <button
            class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
          >
            <svg
              aria-hidden="true"
              class=""
              fill="none"
              height="18"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.6"
              style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
              viewBox="0 0 24 24"
              width="18"
            >
              <path
                d="M15 18l-6-6 6-6"
              />
            </svg>
             Back to Hub
          </button>
          <div
            style="display: flex; gap: 12px;"
          >
            <button
              class="inline-flex items-center gap-1.5 rounded-[var(--r-sm)] font-medium transition-all 
whitespace-nowrap border border-transparent leading-none bg-[var(--bg-elev)] text-[var(--ink)] border-[var(--border)] 
hover:border-[var(--border-strong)] hover:bg-[var(--bg-inset)] text-[13px] px-3 py-[7px] "
            >
              <svg
                aria-hidden="true"
                class=""
                fill="none"
                height="18"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.6"
                style="display: inline-block; flex-shrink: 0; margin-right: 6px; width: 16px;"
                viewBox="0 0 24 24"
                width="18"
              >
                <path
                  d="M3 17l6-6 4 4 8-8"
                />
                <path
                  d="M14 7h7v7"
                />
              </svg>
               Check Lowest Store Options
            </button>
          </div>
        </div>
        <div
          style="display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;"
        >
          <div>
            <div
              style="display: flex; flex-direction: column; gap: 24px;"
            >
              <div>
                <h4
                  style="font-size: 13px; font-weight: 600; color: var(--ink-muted); text-transform: 
uppercase; letter-spacing: 0.08em; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 
6px;"
                >
                  Other / Misc
                </h4>
                <div
                  style="display: flex; flex-direction: column; gap: 10px;"
                >
                  <div
                    style="display: flex; align-items: center; gap: 14px; padding: 12px 16px; 
background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); transition: all 0.15s; 
opacity: 1; text-decoration: none;"
                  >
                    <button
                      style="width: 22px; height: 22px; border-radius: 50%; border: 2px solid 
var(--border-hover); background: transparent; display: flex; align-items: center; justify-content: center; cursor: 
pointer; flex-shrink: 0; padding: 0px;"
                    />
                    <div
                      style="flex: 1 1 0%; min-width: 0px;"
                    >
                      <div
                        style="font-weight: 600; font-size: 14px; color: var(--ink);"
                      >
                        Ingredient Loading...
                      </div>
                      <div
                        style="font-size: 11px; color: var(--ink-muted); display: flex; gap: 10px; 
margin-top: 2px;"
                      >
                        <span>
                          Qty: 
                          5
                           
                        </span>
                      </div>
                    </div>
                    <button
               ...
 Γ¥» Proxy.waitForWrapper ../../node_modules/@testing-library/dom/dist/wait-for.js:163:27
 Γ¥» src/app/(dashboard)/shopping-lists/[id]/__tests__/page.test.tsx:91:11
     89|
     90|     render(<ShoppingListDetailPage />);
     91|     await waitFor(() => expect(screen.getByText('Apple')).toBeInTheDoc…
       |           ^
     92|
     93|     const finishBtn = screen.getByRole('button', { name: /Finish Trip/…

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[6/8]⎯