import { QueryClientProvider, useMutation } from '@tanstack/react-query';
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { afterEach, expect, test } from 'vitest';
import { createPlatformQueryClient } from './AppV2';

afterEach(cleanup);

test('keeps mutation feedback while mounted and releases completed writes after route unmount', async () => {
  const client = createPlatformQueryClient();
  const retainedPayload = { rows: Array.from({ length: 500 }, (_, index) => ({ vin: `VIN-${index}`, model: `MODEL-${index}` })) };

  function MutationHarness() {
    const mutation = useMutation({ mutationFn: async () => retainedPayload });
    return <div><button type="button" onClick={() => mutation.mutate()}>执行写操作</button>{mutation.data ? <span>已处理 {mutation.data.rows.length} 行</span> : null}</div>;
  }

  const view = render(<QueryClientProvider client={client}><MutationHarness /></QueryClientProvider>);
  fireEvent.click(screen.getByRole('button', { name: '执行写操作' }));

  expect(await screen.findByText('已处理 500 行')).toBeInTheDocument();
  expect(client.getMutationCache().getAll()).toHaveLength(1);

  view.unmount();
  await waitFor(() => expect(client.getMutationCache().getAll()).toHaveLength(0));
  client.clear();
});