test(dynamic-sampling): Remove ProjectsPreviewTable mock, use virtualizer mock instead

Mock @tanstack/react-virtual at the module level (matching the pattern
used elsewhere in the codebase) and respond to the sample counts API
with empty data. This lets the real ProjectsPreviewTable and
OrganizationSampleRateInput render, so tests interact with the actual
PercentInput rather than a hand-rolled substitute.

Also un-export ProjectsPreviewTableProps which was only needed by the
now-removed component mock.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: JonasBa

static/app/views/settings/dynamicSampling/organizationSampling.spec.tsx

@@ -3,41 +3,20 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {OrganizationSampling} from 'sentry/views/settings/dynamicSampling/organizationSampling';
-import type {ProjectsPreviewTableProps} from 'sentry/views/settings/dynamicSampling/projectsPreviewTable';
-
-// Render only the form-relevant parts: the input and the action buttons.
-// This avoids pulling in the virtualized ProjectsTable.
-jest.mock('sentry/views/settings/dynamicSampling/projectsPreviewTable', () => ({
-  ProjectsPreviewTable: ({
-    actions,
-    targetSampleRate,
-    savedTargetSampleRate,
-    onTargetSampleRateChange,
-    targetSampleRateError,
-  }: ProjectsPreviewTableProps) => (
-    <div>
-      <label htmlFor="target-sample-rate">Target Sample Rate</label>
-      <input
-        id="target-sample-rate"
-        type="number"
-        value={targetSampleRate}
-        onChange={e => onTargetSampleRateChange(e.target.value)}
-      />
-      {targetSampleRateError && <span role="alert">{targetSampleRateError}</span>}
-      {savedTargetSampleRate !== targetSampleRate && (
-        <span>previous: {savedTargetSampleRate}%</span>
-      )}
-      {actions}
-    </div>
-  ),
-}));
-
-jest.mock('sentry/views/settings/dynamicSampling/samplingModeSwitch', () => ({
-  SamplingModeSwitch: () => null,
-}));
 
-jest.mock('sentry/views/settings/dynamicSampling/projectionPeriodControl', () => ({
-  ProjectionPeriodControl: () => null,
+jest.mock('@tanstack/react-virtual', () => ({
+  useVirtualizer: jest.fn(({count}: {count: number}) => ({
+    getVirtualItems: jest.fn(() =>
+      Array.from({length: count}, (_, index) => ({
+        key: index,
+        index,
+        start: index * 63,
+        size: 63,
+      }))
+    ),
+    getTotalSize: jest.fn(() => count * 63),
+    measure: jest.fn(),
+  })),
 }));
 
 describe('OrganizationSampling', () => {
@@ -50,12 +29,16 @@ describe('OrganizationSampling', () => {
 
   beforeEach(() => {
     MockApiClient.clearMockResponses();
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/sampling/project-root-counts/',
+      body: {data: [], end: '', intervals: [], start: ''},
+    });
   });
 
   it('pre-fills the input with the organization target sample rate', () => {
     render(<OrganizationSampling />, {organization});
 
-    expect(screen.getByRole('spinbutton', {name: 'Target Sample Rate'})).toHaveValue(50);
+    expect(screen.getByRole('spinbutton')).toHaveValue(50);
   });
 
   it('Save and Reset buttons are disabled when the form is clean', () => {
@@ -68,9 +51,8 @@ describe('OrganizationSampling', () => {
   it('enables Save and Reset buttons after changing the rate', async () => {
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '30');
 
     expect(screen.getByRole('button', {name: 'Save changes'})).toBeEnabled();
     expect(screen.getByRole('button', {name: 'Reset'})).toBeEnabled();
@@ -79,22 +61,20 @@ describe('OrganizationSampling', () => {
   it('disables Save and shows a validation error for an out-of-range value', async () => {
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '150');
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '150');
 
     expect(screen.getByRole('button', {name: 'Save changes'})).toBeDisabled();
-    expect(screen.getByRole('alert')).toHaveTextContent('Must be between 0% and 100%');
+    expect(screen.getByText('Must be between 0% and 100%')).toBeInTheDocument();
   });
 
   it('disables Save and shows a validation error for an empty value', async () => {
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
+    await userEvent.clear(screen.getByRole('spinbutton'));
 
     expect(screen.getByRole('button', {name: 'Save changes'})).toBeDisabled();
-    expect(screen.getByRole('alert')).toHaveTextContent('This field is required.');
+    expect(screen.getByText('This field is required.')).toBeInTheDocument();
   });
 
   it('calls the API with the correct payload on save', async () => {
@@ -106,17 +86,14 @@ describe('OrganizationSampling', () => {
 
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '30');
     await userEvent.click(screen.getByRole('button', {name: 'Save changes'}));
 
     await waitFor(() => {
       expect(putMock).toHaveBeenCalledWith(
         '/organizations/org-slug/',
-        expect.objectContaining({
-          data: {targetSampleRate: 0.3},
-        })
+        expect.objectContaining({data: {targetSampleRate: 0.3}})
       );
     });
   });
@@ -130,45 +107,18 @@ describe('OrganizationSampling', () => {
 
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '30');
     await userEvent.click(screen.getByRole('button', {name: 'Save changes'}));
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', {name: 'Save changes'})).toBeDisabled();
-    });
+    await waitFor(() =>
+      expect(screen.getByRole('button', {name: 'Save changes'})).toBeDisabled()
+    );
     expect(screen.getByRole('button', {name: 'Reset'})).toBeDisabled();
   });
 
-  it('updates the previous value display after a successful save', async () => {
+  it('keeps form dirty after an API error', async () => {
     MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/',
-      method: 'PUT',
-      body: OrganizationFixture({targetSampleRate: 0.3}),
-    });
-
-    render(<OrganizationSampling />, {organization});
-
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
-    await userEvent.click(screen.getByRole('button', {name: 'Save changes'}));
-
-    // After save, change the value again to reveal the "previous" display
-    await waitFor(() => {
-      expect(screen.getByRole('button', {name: 'Save changes'})).toBeDisabled();
-    });
-
-    await userEvent.clear(input);
-    await userEvent.type(input, '20');
-
-    // Previous value should now be the just-saved 30, not the original 50
-    expect(screen.getByText('previous: 30%')).toBeInTheDocument();
-  });
-
-  it('keeps form dirty and does not call API again after an error', async () => {
-    const putMock = MockApiClient.addMockResponse({
       url: '/organizations/org-slug/',
       method: 'PUT',
       statusCode: 500,
@@ -177,27 +127,24 @@ describe('OrganizationSampling', () => {
 
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '30');
     await userEvent.click(screen.getByRole('button', {name: 'Save changes'}));
 
-    await waitFor(() => expect(putMock).toHaveBeenCalledTimes(1));
-
-    expect(screen.getByRole('button', {name: 'Save changes'})).toBeEnabled();
+    await waitFor(() =>
+      expect(screen.getByRole('button', {name: 'Save changes'})).toBeEnabled()
+    );
     expect(screen.getByRole('button', {name: 'Reset'})).toBeEnabled();
   });
 
   it('resets the input back to the saved value when Reset is clicked', async () => {
     render(<OrganizationSampling />, {organization});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
-
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '30');
     await userEvent.click(screen.getByRole('button', {name: 'Reset'}));
 
-    expect(input).toHaveValue(50);
+    expect(screen.getByRole('spinbutton')).toHaveValue(50);
   });
 
   it('disables the Save button for users without org:write access', async () => {
@@ -209,12 +156,10 @@ describe('OrganizationSampling', () => {
 
     render(<OrganizationSampling />, {organization: orgWithoutAccess});
 
-    const input = screen.getByRole('spinbutton', {name: 'Target Sample Rate'});
-    await userEvent.clear(input);
-    await userEvent.type(input, '30');
+    await userEvent.clear(screen.getByRole('spinbutton'));
+    await userEvent.type(screen.getByRole('spinbutton'), '30');
 
     expect(screen.getByRole('button', {name: 'Save changes'})).toBeDisabled();
-    // Reset is unrelated to permissions so it stays enabled
     expect(screen.getByRole('button', {name: 'Reset'})).toBeEnabled();
   });
 });

static/app/views/settings/dynamicSampling/projectsPreviewTable.tsx

@@ -17,7 +17,7 @@ import type {
   ProjectSampleCount,
 } from 'sentry/views/settings/dynamicSampling/utils/useProjectSampleCounts';
 
-export interface ProjectsPreviewTableProps {
+interface ProjectsPreviewTableProps {
   actions: React.ReactNode;
   isLoading: boolean;
   onTargetSampleRateChange: (value: string) => void;