feat: testing the RepoUrlPicker component with SecretsContexts

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx

@@ -21,16 +21,18 @@ import {
   scmIntegrationsApiRef,
   ScmIntegrationsApi,
   scmAuthApiRef,
+  ScmAuthApi,
 } from '@backstage/integration-react';
 import { scaffolderApiRef } from '../../../api';
 import { SecretsContextProvider } from '../../secrets/SecretsContext';
 import { ScaffolderApi } from '../../..';
-import { fireEvent } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
 
 describe('RepoUrlPicker', () => {
   const mockScaffolderApi: Partial<ScaffolderApi> = {
     getIntegrationsList: async () => [
       { host: 'github.com', type: 'github', title: 'github.com' },
+      { host: 'dev.azure.com', type: 'azure', title: 'dev.azure.com' },
     ],
   };
 
@@ -38,6 +40,10 @@ describe('RepoUrlPicker', () => {
     byHost: () => ({ type: 'github' }),
   };
 
+  const mockScmAuthApi: Partial<ScmAuthApi> = {
+    getCredentials: jest.fn().mockResolvedValue({ token: 'abc123' }),
+  };
+
   describe('happy path rendering', () => {
     it('should render the repo url picker with minimal props', async () => {
       const onSubmit = jest.fn();
@@ -75,5 +81,82 @@ describe('RepoUrlPicker', () => {
         expect.anything(),
       );
     });
+
+    it('should render properly with allowedHosts', async () => {
+      const { getByRole } = await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [scmIntegrationsApiRef, mockIntegrationsApi],
+            [scmAuthApiRef, {}],
+            [scaffolderApiRef, mockScaffolderApi],
+          ]}
+        >
+          <SecretsContextProvider>
+            <Form
+              schema={{ type: 'string' }}
+              uiSchema={{
+                'ui:field': 'RepoUrlPicker',
+                'ui:options': { allowedHosts: ['dev.azure.com'] },
+              }}
+              fields={{ RepoUrlPicker: RepoUrlPicker }}
+            />
+          </SecretsContextProvider>
+        </TestApiProvider>,
+      );
+
+      expect(
+        getByRole('option', { name: 'dev.azure.com' }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('requestUserCredentials', () => {
+    it('should call the scmAuthApi with the correct params', async () => {
+      const { getByRole, getAllByRole } = await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [scmIntegrationsApiRef, mockIntegrationsApi],
+            [scmAuthApiRef, mockScmAuthApi],
+            [scaffolderApiRef, mockScaffolderApi],
+          ]}
+        >
+          <SecretsContextProvider>
+            <Form
+              schema={{ type: 'string' }}
+              uiSchema={{
+                'ui:field': 'RepoUrlPicker',
+                'ui:options': {
+                  requestUserCredentials: {
+                    resultSecretsKey: 'testKey',
+                    additionalScopes: { github: ['workflow:write'] },
+                  },
+                },
+              }}
+              fields={{ RepoUrlPicker: RepoUrlPicker }}
+            />
+          </SecretsContextProvider>
+        </TestApiProvider>,
+      );
+
+      const [ownerInput, repoInput] = getAllByRole('textbox');
+
+      await act(async () => {
+        fireEvent.change(ownerInput, { target: { value: 'backstage' } });
+        fireEvent.change(repoInput, { target: { value: 'repo123' } });
+
+        // need to wait for the debounce to finish
+        await new Promise(resolve => setTimeout(resolve, 600));
+      });
+
+      expect(mockScmAuthApi.getCredentials).toHaveBeenCalledWith({
+        url: 'https://github.com/backstage/repo123',
+        additionalScope: {
+          repoWrite: true,
+          customScopes: {
+            github: ['workflow:write'],
+          },
+        },
+      });
+    });
   });
 });

plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx

@@ -87,7 +87,7 @@ export const RepoUrlPicker = (
 
       if (
         !requestUserCredentials ||
-        !(state.host && state.owner && !state.repoName)
+        !(state.host && state.owner && state.repoName)
       ) {
         return;
       }
@@ -107,7 +107,7 @@ export const RepoUrlPicker = (
       // in the templating the manifest with ${{ secrets[resultSecretsKey] }}
       setSecret({ [requestUserCredentials.resultSecretsKey]: token });
     },
-    1000,
+    500,
     [state, uiSchema],
   );