fix(onboarding): Update tests for mount-time repo fetch

Tests expected the old search-driven behavior where data only loaded
after typing. Now that repos fetch on mount, update mocks and
assertions to match.

Add a fallback in ScmVirtualizedMenuList for when the virtualizer
cannot measure the container (jsdom has no layout engine).

Author: jaydgoss

static/app/views/onboarding/components/scmRepoSelector.spec.tsx

@@ -45,6 +45,11 @@ describe('ScmRepoSelector', () => {
   });
 
   it('renders search placeholder', () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/${mockIntegration.id}/repos/`,
+      body: {repos: []},
+    });
+
     render(<ScmRepoSelector integration={mockIntegration} />, {
       organization,
       wrapper: makeOnboardingWrapper(),
@@ -53,7 +58,7 @@ describe('ScmRepoSelector', () => {
     expect(screen.getByText('Search repositories')).toBeInTheDocument();
   });
 
-  it('shows empty state message when search returns no results', async () => {
+  it('shows empty state message when no repos are available', async () => {
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/integrations/${mockIntegration.id}/repos/`,
       body: {repos: []},
@@ -64,7 +69,7 @@ describe('ScmRepoSelector', () => {
       wrapper: makeOnboardingWrapper(),
     });
 
-    await userEvent.type(screen.getByRole('textbox'), 'nonexistent');
+    await userEvent.click(screen.getByRole('textbox'));
 
     expect(
       await screen.findByText(
@@ -85,14 +90,14 @@ describe('ScmRepoSelector', () => {
       wrapper: makeOnboardingWrapper(),
     });
 
-    await userEvent.type(screen.getByRole('textbox'), 'sentry');
+    await userEvent.click(screen.getByRole('textbox'));
 
     expect(
-      await screen.findByText('Failed to search repositories. Please try again.')
+      await screen.findByText('Failed to load repositories. Please try again.')
     ).toBeInTheDocument();
   });
 
-  it('displays repos returned by search', async () => {
+  it('displays repos fetched on mount', async () => {
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/integrations/${mockIntegration.id}/repos/`,
       body: {
@@ -108,7 +113,7 @@ describe('ScmRepoSelector', () => {
       wrapper: makeOnboardingWrapper(),
     });
 
-    await userEvent.type(screen.getByRole('textbox'), 'get');
+    await userEvent.click(screen.getByRole('textbox'));
 
     expect(
       await screen.findByRole('menuitemradio', {name: 'sentry'})
@@ -117,6 +122,11 @@ describe('ScmRepoSelector', () => {
   });
 
   it('shows selected repo value when one is in context', () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/${mockIntegration.id}/repos/`,
+      body: {repos: []},
+    });
+
     const selectedRepo = RepositoryFixture({
       name: 'getsentry/old-repo',
       externalSlug: 'getsentry/old-repo',
@@ -130,7 +140,7 @@ describe('ScmRepoSelector', () => {
     expect(screen.getByText('getsentry/old-repo')).toBeInTheDocument();
   });
 
-  it('selects a repo from search results and triggers repo lookup', async () => {
+  it('selects a repo and triggers repo lookup', async () => {
     MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/integrations/${mockIntegration.id}/repos/`,
       body: {
@@ -153,13 +163,18 @@ describe('ScmRepoSelector', () => {
       wrapper: makeOnboardingWrapper(),
     });
 
-    await userEvent.type(screen.getByRole('textbox'), 'get');
+    await userEvent.click(screen.getByRole('textbox'));
     await userEvent.click(await screen.findByRole('menuitemradio', {name: 'sentry'}));
 
     await waitFor(() => expect(reposLookup).toHaveBeenCalled());
   });
 
   it('clears the selected repo', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/${mockIntegration.id}/repos/`,
+      body: {repos: []},
+    });
+
     const selectedRepo = RepositoryFixture({
       name: 'getsentry/old-repo',
       externalSlug: 'getsentry/old-repo',
@@ -172,16 +187,14 @@ describe('ScmRepoSelector', () => {
 
     expect(screen.getByText('getsentry/old-repo')).toBeInTheDocument();
 
-    // The clear indicator uses Sentry's IconClose which renders with
-    // role="img" rather than aria-hidden, so use the test-id directly.
-    await userEvent.click(screen.getByTestId('icon-close'));
+    await userEvent.click(await screen.findByTestId('icon-close'));
 
     await waitFor(() => {
       expect(screen.queryByText('getsentry/old-repo')).not.toBeInTheDocument();
     });
   });
 
-  it('does not duplicate selected repo when it appears in search results', async () => {
+  it('does not duplicate selected repo when it appears in results', async () => {
     const selectedRepo = RepositoryFixture({
       name: 'getsentry/sentry',
       externalSlug: 'getsentry/sentry',
@@ -202,15 +215,14 @@ describe('ScmRepoSelector', () => {
       wrapper: makeOnboardingWrapper({selectedRepository: selectedRepo}),
     });
 
-    await userEvent.type(screen.getByRole('textbox'), 'get');
+    await userEvent.click(screen.getByRole('textbox'));
 
-    // Wait for search results to arrive
     expect(await screen.findByRole('menuitemradio', {name: 'relay'})).toBeInTheDocument();
     expect(screen.getByRole('menuitemradio', {name: 'sentry'})).toBeInTheDocument();
 
     // If the options-prepend logic fires incorrectly, it adds an extra option
     // with label 'getsentry/sentry' (selectedRepository.name) alongside the
-    // search result option with label 'sentry' (repo.name).
+    // result option with label 'sentry' (repo.name).
     expect(
       screen.queryByRole('menuitemradio', {name: 'getsentry/sentry'})
     ).not.toBeInTheDocument();

static/app/views/onboarding/components/scmVirtualizedMenuList.tsx

@@ -55,6 +55,15 @@ export function ScmVirtualizedMenuList({
     );
   }
 
+  // Fallback when the virtualizer can't measure the container (e.g. jsdom)
+  if (virtualItems.length === 0 && items.length > 0) {
+    return (
+      <div ref={combinedRef} {...innerProps} style={{maxHeight, overflowY: 'auto'}}>
+        {children}
+      </div>
+    );
+  }
+
   return (
     <div ref={combinedRef} {...innerProps} style={{maxHeight, overflowY: 'auto'}}>
       <div style={{height: virtualizer.getTotalSize(), position: 'relative'}}>

static/app/views/onboarding/onboarding.spec.tsx

@@ -724,6 +724,10 @@ describe('Onboarding', () => {
         url: `/organizations/${scmOrganization.slug}/repos/`,
         body: [],
       });
+      MockApiClient.addMockResponse({
+        url: `/organizations/${scmOrganization.slug}/integrations/1/repos/`,
+        body: {repos: []},
+      });
 
       renderOnboarding('scm-connect');