From: Kevin Silva <kevin.silva@sonarsource.com>
Date: Wed, 14 Dec 2022 16:11:44 +0000 (+0100)
Subject: SONAR-17748 Add RTL test for 'project/create' GitHub pages and remove the enzyme... 
X-Git-Tag: 9.8.0.63668~2
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=fc7657598b9f46a99cb21dc891f75ad20c8a8528;p=sonarqube.git

SONAR-17748 Add RTL test for 'project/create' GitHub pages and remove the enzyme tests
---

diff --git a/server/sonar-web/src/main/js/api/mocks/AlmIntegrationsServiceMock.ts b/server/sonar-web/src/main/js/api/mocks/AlmIntegrationsServiceMock.ts
index 1a3f06b3f5e..96ac6f9b9e2 100644
--- a/server/sonar-web/src/main/js/api/mocks/AlmIntegrationsServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/AlmIntegrationsServiceMock.ts
@@ -24,6 +24,7 @@ import {
   mockBitbucketCloudRepository,
   mockBitbucketProject,
   mockBitbucketRepository,
+  mockGitHubRepository,
   mockGitlabProject,
 } from '../../helpers/mocks/alm-integrations';
 import {
@@ -32,9 +33,11 @@ import {
   BitbucketCloudRepository,
   BitbucketProject,
   BitbucketRepository,
+  GithubRepository,
   GitlabProject,
 } from '../../types/alm-integration';
 import { Visibility } from '../../types/component';
+import { Paging } from '../../types/types';
 import {
   checkPersonalAccessTokenIsValid,
   getAzureProjects,
@@ -43,10 +46,12 @@ import {
   getBitbucketServerRepositories,
   getGithubClientId,
   getGithubOrganizations,
+  getGithubRepositories,
   getGitlabProjects,
   importAzureRepository,
   importBitbucketCloudRepository,
   importBitbucketServerProject,
+  importGithubRepository,
   importGitlabProject,
   searchAzureRepositories,
   searchForBitbucketCloudRepositories,
@@ -59,7 +64,8 @@ export default class AlmIntegrationsServiceMock {
   gitlabProjects: GitlabProject[];
   azureProjects: AzureProject[];
   azureRepositories: AzureRepository[];
-  gitlabPagination;
+  githubRepositories: GithubRepository[];
+  pagination: Paging;
   bitbucketCloudRepositories: BitbucketCloudRepository[];
   bitbucketIsLastPage: boolean;
   bitbucketRepositories: BitbucketRepository[];
@@ -88,10 +94,10 @@ export default class AlmIntegrationsServiceMock {
     mockGitlabProject({ name: 'Gitlab project 3', id: '3' }),
   ];
 
-  defaultGitlabPagination = {
+  defaultPagination = {
     pageIndex: 1,
     pageSize: 30,
-    total: this.defaultGitlabProjects.length,
+    total: 30,
   };
 
   defaultAzureProjects: AzureProject[] = [
@@ -138,6 +144,15 @@ export default class AlmIntegrationsServiceMock {
     mockAzureRepository({ name: 'Azure repo 2' }),
   ];
 
+  defaultGithubRepositories: GithubRepository[] = [
+    mockGitHubRepository({ name: 'Github repo 1', sqProjectKey: 'key123' }),
+    mockGitHubRepository({
+      name: 'Github repo 2',
+      id: 'id1231',
+      key: 'key1231',
+    }),
+  ];
+
   defaultOrganizations = {
     paging: {
       pageIndex: 1,
@@ -158,7 +173,8 @@ export default class AlmIntegrationsServiceMock {
     this.azureRepositories = cloneDeep(this.defaultAzureRepositories);
     this.bitbucketCloudRepositories = cloneDeep(this.defaultBitbucketCloudRepositories);
     this.gitlabProjects = cloneDeep(this.defaultGitlabProjects);
-    this.gitlabPagination = cloneDeep(this.defaultGitlabPagination);
+    this.pagination = cloneDeep(this.defaultPagination);
+    this.githubRepositories = cloneDeep(this.defaultGithubRepositories);
     this.bitbucketRepositories = cloneDeep(this.defaultBitbucketRepositories);
     this.bitbucketProjects = cloneDeep(this.defaultBitbucketProjects);
     this.bitbucketIsLastPage = true;
@@ -173,8 +189,10 @@ export default class AlmIntegrationsServiceMock {
     jest.mocked(getGithubOrganizations).mockImplementation(this.getGithubOrganizations);
     jest.mocked(getAzureProjects).mockImplementation(this.getAzureProjects);
     jest.mocked(getAzureRepositories).mockImplementation(this.getAzureRepositories);
+    jest.mocked(getGithubRepositories).mockImplementation(this.getGithubRepositories);
     jest.mocked(searchAzureRepositories).mockImplementation(this.searchAzureRepositories);
     jest.mocked(importAzureRepository).mockImplementation(this.importAzureRepository);
+    jest.mocked(importGithubRepository).mockImplementation(this.importGithubRepository);
     jest
       .mocked(searchForBitbucketCloudRepositories)
       .mockImplementation(this.searchForBitbucketCloudRepositories);
@@ -242,7 +260,7 @@ export default class AlmIntegrationsServiceMock {
   getGitlabProjects = () => {
     return Promise.resolve({
       projects: this.gitlabProjects,
-      projectsPaging: this.gitlabPagination,
+      projectsPaging: this.pagination,
     });
   };
 
@@ -262,7 +280,7 @@ export default class AlmIntegrationsServiceMock {
       return mockGitlabProject({ name: `Gitlab project ${index}`, id: uniqueId() });
     });
     this.gitlabProjects = generatedProjects;
-    this.gitlabPagination = { ...this.defaultGitlabPagination, total };
+    this.pagination = { ...this.defaultPagination, total };
   }
 
   createRandomBitbucketCloudProjectsWithLoadMore(quantity: number, total: number) {
@@ -277,6 +295,41 @@ export default class AlmIntegrationsServiceMock {
     this.bitbucketIsLastPage = quantity >= total;
   }
 
+  createRandomGithubRepositoriessWithLoadMore(quantity: number, total: number) {
+    const generatedProjects = Array.from(Array(quantity).keys()).map(() => {
+      const id = uniqueId();
+      return mockGitHubRepository({
+        name: `Github repo ${id}`,
+        key: `key_${id}`,
+        id,
+      });
+    });
+    this.githubRepositories = generatedProjects;
+    this.pagination = { ...this.defaultPagination, total };
+  }
+
+  importGithubRepository = () => {
+    return Promise.resolve({
+      project: {
+        key: 'key',
+        name: 'name',
+        qualifier: 'qualifier',
+        visibility: Visibility.Private,
+      },
+    });
+  };
+
+  getGithubRepositories = () => {
+    return Promise.resolve({
+      repositories: this.githubRepositories,
+      paging: this.pagination,
+    });
+  };
+
+  setGithubRepositories(githubProjects: GithubRepository[]) {
+    this.githubRepositories = githubProjects;
+  }
+
   setGitlabProjects(gitlabProjects: GitlabProject[]) {
     this.gitlabProjects = gitlabProjects;
   }
@@ -326,7 +379,7 @@ export default class AlmIntegrationsServiceMock {
     this.almInstancePATMap = cloneDeep(this.defaultAlmInstancePATMap);
     this.gitlabProjects = cloneDeep(this.defaultGitlabProjects);
     this.azureRepositories = cloneDeep(this.defaultAzureRepositories);
-    this.gitlabPagination = cloneDeep(this.defaultGitlabPagination);
+    this.pagination = cloneDeep(this.defaultPagination);
     this.bitbucketCloudRepositories = cloneDeep(this.defaultBitbucketCloudRepositories);
     this.bitbucketRepositories = cloneDeep(this.defaultBitbucketRepositories);
     this.bitbucketProjects = cloneDeep(this.defaultBitbucketProjects);
diff --git a/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
index 8a022447bb6..92f7b3658e7 100644
--- a/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
@@ -258,9 +258,12 @@ export default function GitHubProjectCreateRenderer(props: GitHubProjectCreateRe
       {!error && (
         <DeferredSpinner loading={loadingOrganizations}>
           <div className="form-field">
-            <label>{translate('onboarding.create_project.github.choose_organization')}</label>
+            <label htmlFor="github-choose-organization">
+              {translate('onboarding.create_project.github.choose_organization')}
+            </label>
             {organizations.length > 0 ? (
               <Select
+                inputId="github-choose-organization"
                 className="input-super-large"
                 options={organizations.map(orgToOption)}
                 onChange={({ value }: BasicSelectOption) => props.onSelectOrganization(value)}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx
index 63f933ab800..3d82ec14110 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx
@@ -17,16 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import selectEvent from 'react-select-event';
-import { byLabelText, byRole, byText } from 'testing-library-selector';
+import { byLabelText, byText } from 'testing-library-selector';
+import { getGithubRepositories } from '../../../../api/alm-integrations';
 import AlmIntegrationsServiceMock from '../../../../api/mocks/AlmIntegrationsServiceMock';
 import AlmSettingsServiceMock from '../../../../api/mocks/AlmSettingsServiceMock';
 import { renderApp } from '../../../../helpers/testReactTestingUtils';
-import CreateProjectPage, { CreateProjectPageProps } from '../CreateProjectPage';
+import CreateProjectPage from '../CreateProjectPage';
 
 jest.mock('../../../../api/alm-integrations');
 jest.mock('../../../../api/alm-settings');
@@ -38,10 +39,8 @@ let almSettingsHandler: AlmSettingsServiceMock;
 
 const ui = {
   githubCreateProjectButton: byText('onboarding.create_project.select_method.github'),
-  personalAccessTokenInput: byRole('textbox', {
-    name: /onboarding.create_project.enter_pat/,
-  }),
   instanceSelector: byLabelText(/alm.configuration.selector.label/),
+  organizationSelector: byLabelText('onboarding.create_project.github.choose_organization'),
 };
 
 beforeAll(() => {
@@ -66,6 +65,7 @@ afterAll(() => {
 it('should redirect to github authorization page when not already authorized', async () => {
   const user = userEvent.setup();
   renderCreateProject();
+
   expect(ui.githubCreateProjectButton.get()).toBeInTheDocument();
 
   await user.click(ui.githubCreateProjectButton.get());
@@ -81,6 +81,114 @@ it('should redirect to github authorization page when not already authorized', a
   ).toBeInTheDocument();
 });
 
-function renderCreateProject(props: Partial<CreateProjectPageProps> = {}) {
-  renderApp('project/create', <CreateProjectPage {...props} />);
+it('should show import project feature when the authentication is successfull', async () => {
+  const user = userEvent.setup();
+  let repoItem;
+
+  renderCreateProject('project/create?mode=github&almInstance=conf-github-2&code=213321213');
+
+  expect(await ui.instanceSelector.find()).toBeInTheDocument();
+
+  await selectEvent.select(ui.organizationSelector.get(), [/org-1/]);
+
+  expect(screen.getByText('Github repo 1')).toBeInTheDocument();
+  expect(screen.getByText('Github repo 2')).toBeInTheDocument();
+
+  repoItem = screen.getByRole('radio', {
+    name: 'Github repo 1',
+  });
+
+  expect(
+    within(repoItem).getByText('onboarding.create_project.repository_imported')
+  ).toBeInTheDocument();
+
+  expect(within(repoItem).getByRole('link', { name: /Github repo 1/ })).toBeInTheDocument();
+  expect(within(repoItem).getByRole('link', { name: /Github repo 1/ })).toHaveAttribute(
+    'href',
+    '/dashboard?id=key123'
+  );
+
+  repoItem = screen.getByRole('radio', {
+    name: 'Github repo 2',
+  });
+
+  const importButton = screen.getByText('onboarding.create_project.import_selected_repo');
+
+  expect(repoItem).toBeInTheDocument();
+  expect(importButton).toBeDisabled();
+  await user.click(repoItem);
+  expect(importButton).toBeEnabled();
+  await user.click(importButton);
+
+  expect(await screen.findByText('/dashboard?id=key')).toBeInTheDocument();
+});
+
+it('should show search filter when the authentication is successful', async () => {
+  const user = userEvent.setup();
+  renderCreateProject('project/create?mode=github&almInstance=conf-github-2&code=213321213');
+
+  expect(await ui.instanceSelector.find()).toBeInTheDocument();
+
+  await selectEvent.select(ui.organizationSelector.get(), [/org-1/]);
+
+  const inputSearch = screen.getByRole('searchbox', {
+    name: 'search_verb',
+  });
+  await user.click(inputSearch);
+  await user.keyboard('search');
+
+  expect(getGithubRepositories).toHaveBeenLastCalledWith({
+    almSetting: 'conf-github-2',
+    organization: 'org-1',
+    page: 1,
+    pageSize: 30,
+    query: 'search',
+  });
+});
+
+it('should have load more', async () => {
+  const user = userEvent.setup();
+  almIntegrationHandler.createRandomGithubRepositoriessWithLoadMore(10, 20);
+
+  renderCreateProject('project/create?mode=github&almInstance=conf-github-2&code=213321213');
+
+  expect(await ui.instanceSelector.find()).toBeInTheDocument();
+
+  await selectEvent.select(ui.organizationSelector.get(), [/org-1/]);
+
+  const loadMore = screen.getByRole('button', { name: 'show_more' });
+  expect(loadMore).toBeInTheDocument();
+
+  /*
+   * Next api call response will simulate reaching the last page so we can test the
+   * loadmore button disapperance.
+   */
+  almIntegrationHandler.createRandomGithubRepositoriessWithLoadMore(20, 20);
+  await user.click(loadMore);
+  expect(getGithubRepositories).toHaveBeenLastCalledWith({
+    almSetting: 'conf-github-2',
+    organization: 'org-1',
+    page: 2,
+    pageSize: 30,
+    query: '',
+  });
+  expect(loadMore).not.toBeInTheDocument();
+});
+
+it('should show no result message when there are no projects', async () => {
+  almIntegrationHandler.setGithubRepositories([]);
+
+  renderCreateProject('project/create?mode=github&almInstance=conf-github-2&code=213321213');
+
+  expect(await ui.instanceSelector.find()).toBeInTheDocument();
+
+  await selectEvent.select(ui.organizationSelector.get(), [/org-1/]);
+
+  expect(screen.getByText('no_results')).toBeInTheDocument();
+});
+
+function renderCreateProject(navigateTo?: string) {
+  renderApp('project/create', <CreateProjectPage />, {
+    navigateTo,
+  });
 }
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHubProjectCreate-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHubProjectCreate-test.tsx
deleted file mode 100644
index b3fd5f8908e..00000000000
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHubProjectCreate-test.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import {
-  getGithubClientId,
-  getGithubOrganizations,
-  getGithubRepositories,
-  importGithubRepository,
-} from '../../../../api/alm-integrations';
-import { mockGitHubRepository } from '../../../../helpers/mocks/alm-integrations';
-import { mockAlmSettingsInstance } from '../../../../helpers/mocks/alm-settings';
-import { mockLocation, mockRouter } from '../../../../helpers/testMocks';
-import { waitAndUpdate } from '../../../../helpers/testUtils';
-import GitHubProjectCreate from '../GitHubProjectCreate';
-
-jest.mock('../../../../api/alm-integrations', () => ({
-  getGithubClientId: jest.fn().mockResolvedValue({ clientId: 'client-id-124' }),
-  getGithubOrganizations: jest.fn().mockResolvedValue({ organizations: [] }),
-  getGithubRepositories: jest.fn().mockResolvedValue({ repositories: [], paging: {} }),
-  importGithubRepository: jest.fn().mockResolvedValue({ project: {} }),
-}));
-
-const originalLocation = window.location;
-
-beforeAll(() => {
-  const location = {
-    ...window.location,
-    replace: jest.fn(),
-  };
-  Object.defineProperty(window, 'location', {
-    writable: true,
-    value: location,
-  });
-});
-
-afterAll(() => {
-  Object.defineProperty(window, 'location', {
-    writable: true,
-    value: originalLocation,
-  });
-});
-
-beforeEach(() => {
-  jest.clearAllMocks();
-});
-
-it('should handle no settings', async () => {
-  const wrapper = shallowRender({ almInstances: [] });
-  await waitAndUpdate(wrapper);
-  expect(wrapper.state().error).toBe(true);
-});
-
-it('should redirect when no code', async () => {
-  const wrapper = shallowRender();
-  await waitAndUpdate(wrapper);
-
-  expect(getGithubClientId).toHaveBeenCalled();
-  expect(window.location.replace).toHaveBeenCalled();
-});
-
-it('should redirect when no code - github.com', async () => {
-  const wrapper = shallowRender({
-    almInstances: [mockAlmSettingsInstance({ key: 'a', url: 'api.github.com' })],
-  });
-  await waitAndUpdate(wrapper);
-
-  expect(getGithubClientId).toHaveBeenCalled();
-  expect(window.location.replace).toHaveBeenCalledWith(
-    'github.com/login/oauth/authorize?client_id=client-id-124&redirect_uri=http%3A%2F%2Flocalhost%2Fprojects%2Fcreate%3Fmode%3Dgithub%26almInstance%3Da'
-  );
-});
-
-it('should not redirect when invalid clientId', async () => {
-  (getGithubClientId as jest.Mock).mockResolvedValue({ clientId: undefined });
-  const wrapper = shallowRender();
-  await waitAndUpdate(wrapper);
-
-  expect(wrapper.state().error).toBe(true);
-  expect(window.location.replace).not.toHaveBeenCalled();
-});
-
-it('should fetch organizations when code', async () => {
-  const organizations = [
-    { key: '1', name: 'org1' },
-    { key: '2', name: 'org2' },
-  ];
-  (getGithubOrganizations as jest.Mock).mockResolvedValueOnce({ organizations });
-  const replace = jest.fn();
-  const wrapper = shallowRender({
-    location: mockLocation({ query: { code: '123456' } }),
-    router: mockRouter({ replace }),
-  });
-  await waitAndUpdate(wrapper);
-
-  expect(replace).toHaveBeenCalled();
-  expect(getGithubOrganizations).toHaveBeenCalled();
-  expect(wrapper.state().organizations).toBe(organizations);
-});
-
-it('should handle org selection', async () => {
-  const organizations = [
-    { key: '1', name: 'org1' },
-    { key: '2', name: 'org2' },
-  ];
-  (getGithubOrganizations as jest.Mock).mockResolvedValueOnce({ organizations });
-  const repositories = [mockGitHubRepository()];
-  (getGithubRepositories as jest.Mock).mockResolvedValueOnce({
-    repositories,
-    paging: { total: 1, pageIndex: 1 },
-  });
-  const wrapper = shallowRender({ location: mockLocation({ query: { code: '123456' } }) });
-  await waitAndUpdate(wrapper);
-
-  wrapper.instance().handleSelectOrganization('1');
-  await waitAndUpdate(wrapper);
-
-  expect(wrapper.state().selectedOrganization).toBe(organizations[0]);
-  expect(getGithubRepositories).toHaveBeenCalled();
-
-  expect(wrapper.state().repositories).toBe(repositories);
-});
-
-it('should load more', async () => {
-  const wrapper = shallowRender();
-
-  const startRepos = [mockGitHubRepository({ key: 'first' })];
-  const repositories = [
-    mockGitHubRepository({ key: 'r1' }),
-    mockGitHubRepository({ key: 'r2' }),
-    mockGitHubRepository({ key: 'r3' }),
-  ];
-  (getGithubRepositories as jest.Mock).mockResolvedValueOnce({ repositories });
-
-  wrapper.setState({
-    repositories: startRepos,
-    selectedOrganization: { key: 'o1', name: 'org' },
-  });
-
-  wrapper.instance().handleLoadMore();
-
-  await waitAndUpdate(wrapper);
-
-  expect(getGithubRepositories).toHaveBeenCalled();
-  expect(wrapper.state().repositories).toEqual([...startRepos, ...repositories]);
-});
-
-it('should handle search', async () => {
-  const wrapper = shallowRender();
-  const query = 'query';
-  const startRepos = [mockGitHubRepository({ key: 'first' })];
-  const repositories = [
-    mockGitHubRepository({ key: 'r1' }),
-    mockGitHubRepository({ key: 'r2' }),
-    mockGitHubRepository({ key: 'r3' }),
-  ];
-  (getGithubRepositories as jest.Mock).mockResolvedValueOnce({ repositories });
-
-  wrapper.setState({
-    repositories: startRepos,
-    selectedOrganization: { key: 'o1', name: 'org' },
-  });
-
-  wrapper.instance().handleSearch(query);
-
-  await waitAndUpdate(wrapper);
-
-  expect(getGithubRepositories).toHaveBeenCalledWith({
-    almSetting: 'a',
-    organization: 'o1',
-    page: 1,
-    pageSize: 30,
-    query: 'query',
-  });
-  expect(wrapper.state().repositories).toEqual(repositories);
-});
-
-it('should handle repository selection', async () => {
-  const repo = mockGitHubRepository();
-  const wrapper = shallowRender();
-  wrapper.setState({ repositories: [repo, mockGitHubRepository({ key: 'other' })] });
-
-  wrapper.instance().handleSelectRepository(repo.key);
-  await waitAndUpdate(wrapper);
-
-  expect(wrapper.state().selectedRepository).toBe(repo);
-});
-
-it('should handle importing', async () => {
-  const project = { key: 'new_project' };
-
-  (importGithubRepository as jest.Mock).mockResolvedValueOnce({ project });
-
-  const onProjectCreate = jest.fn();
-  const wrapper = shallowRender({ onProjectCreate });
-
-  wrapper.instance().handleImportRepository();
-  expect(importGithubRepository).not.toHaveBeenCalled();
-
-  const selectedOrganization = { key: 'org1', name: 'org1' };
-  const selectedRepository = mockGitHubRepository();
-  wrapper.setState({
-    selectedOrganization,
-    selectedRepository,
-  });
-
-  wrapper.instance().handleImportRepository();
-  await waitAndUpdate(wrapper);
-  expect(importGithubRepository).toHaveBeenCalledWith(
-    'a',
-    selectedOrganization.key,
-    selectedRepository.key
-  );
-  expect(onProjectCreate).toHaveBeenCalledWith(project.key);
-});
-
-function shallowRender(props: Partial<GitHubProjectCreate['props']> = {}) {
-  return shallow<GitHubProjectCreate>(
-    <GitHubProjectCreate
-      canAdmin={false}
-      loadingBindings={false}
-      location={mockLocation()}
-      onProjectCreate={jest.fn()}
-      router={mockRouter()}
-      almInstances={[mockAlmSettingsInstance({ key: 'a', url: 'geh.company.com/api/v3' })]}
-      {...props}
-    />
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHubProjectCreateRenderer-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHubProjectCreateRenderer-test.tsx
deleted file mode 100644
index 7a249c19173..00000000000
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHubProjectCreateRenderer-test.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2022 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import Radio from '../../../../components/controls/Radio';
-import SearchBox from '../../../../components/controls/SearchBox';
-import Select from '../../../../components/controls/Select';
-import { mockGitHubRepository } from '../../../../helpers/mocks/alm-integrations';
-import { mockAlmSettingsInstance } from '../../../../helpers/mocks/alm-settings';
-import { GithubOrganization } from '../../../../types/alm-integration';
-import GitHubProjectCreateRenderer, {
-  GitHubProjectCreateRendererProps,
-} from '../GitHubProjectCreateRenderer';
-
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('default');
-  expect(shallowRender({ loadingBindings: true })).toMatchSnapshot('loading');
-  expect(shallowRender({ error: true })).toMatchSnapshot('error');
-  expect(shallowRender({ canAdmin: true, error: true })).toMatchSnapshot('error for admin');
-
-  const organizations: GithubOrganization[] = [
-    { key: 'o1', name: 'org1' },
-    { key: 'o2', name: 'org2' },
-  ];
-
-  expect(shallowRender({ organizations })).toMatchSnapshot('organizations');
-  expect(
-    shallowRender({
-      organizations,
-      selectedOrganization: organizations[1],
-    })
-  ).toMatchSnapshot('no repositories');
-
-  const repositories = [
-    mockGitHubRepository({ id: '1', key: 'repo1' }),
-    mockGitHubRepository({ id: '2', key: 'repo2', sqProjectKey: 'repo2' }),
-    mockGitHubRepository({ id: '3', key: 'repo3' }),
-  ];
-
-  expect(
-    shallowRender({
-      organizations,
-      selectedOrganization: organizations[1],
-      repositories,
-      selectedRepository: repositories[2],
-    })
-  ).toMatchSnapshot('repositories');
-});
-
-describe('callback', () => {
-  const onImportRepository = jest.fn();
-  const onSelectOrganization = jest.fn();
-  const onSelectRepository = jest.fn();
-  const onSearch = jest.fn();
-  const org = { key: 'o1', name: 'org' };
-  const wrapper = shallowRender({
-    onImportRepository,
-    onSelectOrganization,
-    onSelectRepository,
-    onSearch,
-    organizations: [org],
-    selectedOrganization: org,
-    repositories: [mockGitHubRepository()],
-  });
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should be called when org is selected', () => {
-    const value = 'o1';
-    wrapper.find(Select).simulate('change', { value });
-    expect(onSelectOrganization).toHaveBeenCalledWith(value);
-  });
-
-  it('should be called when searchbox is changed', () => {
-    const value = 'search query';
-    wrapper.find(SearchBox).props().onChange(value);
-    expect(onSearch).toHaveBeenCalledWith(value);
-  });
-
-  it('should be called when repo is selected', () => {
-    const value = 'repo1';
-    wrapper.find(Radio).props().onCheck(value);
-    expect(onSelectRepository).toHaveBeenCalledWith(value);
-  });
-});
-
-function shallowRender(props: Partial<GitHubProjectCreateRendererProps> = {}) {
-  return shallow<GitHubProjectCreateRendererProps>(
-    <GitHubProjectCreateRenderer
-      canAdmin={false}
-      error={false}
-      importing={false}
-      loadingBindings={false}
-      loadingOrganizations={false}
-      loadingRepositories={false}
-      onImportRepository={jest.fn()}
-      onLoadMore={jest.fn()}
-      onSearch={jest.fn()}
-      onSelectOrganization={jest.fn()}
-      onSelectRepository={jest.fn()}
-      onSelectedAlmInstanceChange={jest.fn()}
-      almInstances={[mockAlmSettingsInstance(), mockAlmSettingsInstance()]}
-      organizations={[]}
-      repositoryPaging={{ total: 0, pageIndex: 1, pageSize: 30 }}
-      searchQuery=""
-      {...props}
-    />
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap
deleted file mode 100644
index 82dda043b22..00000000000
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap
+++ /dev/null
@@ -1,508 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly: default 1`] = `
-<div>
-  <CreateProjectPageHeader
-    title={
-      <span
-        className="text-middle display-flex-center"
-      >
-        <img
-          alt=""
-          className="spacer-right"
-          height={24}
-          src="/images/alm/github.svg"
-        />
-        onboarding.create_project.github.title
-      </span>
-    }
-  />
-  <AlmSettingsInstanceDropdown
-    almInstances={
-      Array [
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-      ]
-    }
-    almKey="github"
-    onChangeConfig={[MockFunction]}
-  />
-  <DeferredSpinner
-    loading={false}
-  >
-    <div
-      className="form-field"
-    >
-      <label>
-        onboarding.create_project.github.choose_organization
-      </label>
-      <Alert
-        className="spacer-top"
-        variant="error"
-      >
-        onboarding.create_project.github.no_orgs
-      </Alert>
-    </div>
-  </DeferredSpinner>
-</div>
-`;
-
-exports[`should render correctly: error 1`] = `
-<div>
-  <CreateProjectPageHeader
-    title={
-      <span
-        className="text-middle display-flex-center"
-      >
-        <img
-          alt=""
-          className="spacer-right"
-          height={24}
-          src="/images/alm/github.svg"
-        />
-        onboarding.create_project.github.title
-      </span>
-    }
-  />
-  <AlmSettingsInstanceDropdown
-    almInstances={
-      Array [
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-      ]
-    }
-    almKey="github"
-    onChangeConfig={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly: error for admin 1`] = `
-<div>
-  <CreateProjectPageHeader
-    title={
-      <span
-        className="text-middle display-flex-center"
-      >
-        <img
-          alt=""
-          className="spacer-right"
-          height={24}
-          src="/images/alm/github.svg"
-        />
-        onboarding.create_project.github.title
-      </span>
-    }
-  />
-  <AlmSettingsInstanceDropdown
-    almInstances={
-      Array [
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-      ]
-    }
-    almKey="github"
-    onChangeConfig={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly: loading 1`] = `<DeferredSpinner />`;
-
-exports[`should render correctly: no repositories 1`] = `
-<div>
-  <CreateProjectPageHeader
-    additionalActions={
-      <div
-        className="display-flex-center pull-right"
-      >
-        <DeferredSpinner
-          className="spacer-right"
-          loading={false}
-        />
-        <Button
-          className="button-large button-primary"
-          disabled={true}
-          onClick={[MockFunction]}
-        >
-          onboarding.create_project.import_selected_repo
-        </Button>
-      </div>
-    }
-    title={
-      <span
-        className="text-middle display-flex-center"
-      >
-        <img
-          alt=""
-          className="spacer-right"
-          height={24}
-          src="/images/alm/github.svg"
-        />
-        onboarding.create_project.github.title
-      </span>
-    }
-  />
-  <AlmSettingsInstanceDropdown
-    almInstances={
-      Array [
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-      ]
-    }
-    almKey="github"
-    onChangeConfig={[MockFunction]}
-  />
-  <DeferredSpinner
-    loading={false}
-  >
-    <div
-      className="form-field"
-    >
-      <label>
-        onboarding.create_project.github.choose_organization
-      </label>
-      <Select
-        className="input-super-large"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "label": "org1",
-              "value": "o1",
-            },
-            Object {
-              "label": "org2",
-              "value": "o2",
-            },
-          ]
-        }
-        value={
-          Object {
-            "label": "org2",
-            "value": "o2",
-          }
-        }
-      />
-    </div>
-  </DeferredSpinner>
-</div>
-`;
-
-exports[`should render correctly: organizations 1`] = `
-<div>
-  <CreateProjectPageHeader
-    title={
-      <span
-        className="text-middle display-flex-center"
-      >
-        <img
-          alt=""
-          className="spacer-right"
-          height={24}
-          src="/images/alm/github.svg"
-        />
-        onboarding.create_project.github.title
-      </span>
-    }
-  />
-  <AlmSettingsInstanceDropdown
-    almInstances={
-      Array [
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-      ]
-    }
-    almKey="github"
-    onChangeConfig={[MockFunction]}
-  />
-  <DeferredSpinner
-    loading={false}
-  >
-    <div
-      className="form-field"
-    >
-      <label>
-        onboarding.create_project.github.choose_organization
-      </label>
-      <Select
-        className="input-super-large"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "label": "org1",
-              "value": "o1",
-            },
-            Object {
-              "label": "org2",
-              "value": "o2",
-            },
-          ]
-        }
-        value={null}
-      />
-    </div>
-  </DeferredSpinner>
-</div>
-`;
-
-exports[`should render correctly: repositories 1`] = `
-<div>
-  <CreateProjectPageHeader
-    additionalActions={
-      <div
-        className="display-flex-center pull-right"
-      >
-        <DeferredSpinner
-          className="spacer-right"
-          loading={false}
-        />
-        <Button
-          className="button-large button-primary"
-          disabled={false}
-          onClick={[MockFunction]}
-        >
-          onboarding.create_project.import_selected_repo
-        </Button>
-      </div>
-    }
-    title={
-      <span
-        className="text-middle display-flex-center"
-      >
-        <img
-          alt=""
-          className="spacer-right"
-          height={24}
-          src="/images/alm/github.svg"
-        />
-        onboarding.create_project.github.title
-      </span>
-    }
-  />
-  <AlmSettingsInstanceDropdown
-    almInstances={
-      Array [
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-        Object {
-          "alm": "github",
-          "key": "key",
-        },
-      ]
-    }
-    almKey="github"
-    onChangeConfig={[MockFunction]}
-  />
-  <DeferredSpinner
-    loading={false}
-  >
-    <div
-      className="form-field"
-    >
-      <label>
-        onboarding.create_project.github.choose_organization
-      </label>
-      <Select
-        className="input-super-large"
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "label": "org1",
-              "value": "o1",
-            },
-            Object {
-              "label": "org2",
-              "value": "o2",
-            },
-          ]
-        }
-        value={
-          Object {
-            "label": "org2",
-            "value": "o2",
-          }
-        }
-      />
-    </div>
-  </DeferredSpinner>
-  <div
-    className="boxed-group padded display-flex-wrap"
-  >
-    <div
-      className="width-100"
-    >
-      <SearchBox
-        className="big-spacer-bottom"
-        onChange={[MockFunction]}
-        placeholder="onboarding.create_project.search_repositories"
-        value=""
-      />
-    </div>
-    <Radio
-      checked={false}
-      className="spacer-top spacer-bottom padded create-project-github-repository"
-      disabled={false}
-      key="repo1"
-      onCheck={[MockFunction]}
-      value="repo1"
-    >
-      <div
-        className="big overflow-hidden max-width-100"
-        title="repository 1"
-      >
-        <div
-          className="text-ellipsis"
-        >
-          repository 1
-        </div>
-        <a
-          className="notice small display-flex-center little-spacer-top"
-          href="https://github.com/owner/repo1"
-          onClick={[Function]}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          onboarding.create_project.see_on_github
-        </a>
-      </div>
-    </Radio>
-    <Radio
-      checked={true}
-      className="spacer-top spacer-bottom padded create-project-github-repository"
-      disabled={true}
-      key="repo2"
-      onCheck={[MockFunction]}
-      value="repo2"
-    >
-      <div
-        className="big overflow-hidden max-width-100"
-        title="repository 1"
-      >
-        <div
-          className="text-ellipsis"
-        >
-          <div
-            className="display-flex-center max-width-100"
-          >
-            <ForwardRef(Link)
-              className="display-flex-center max-width-60"
-              to={
-                Object {
-                  "pathname": "/dashboard",
-                  "search": "?id=repo2",
-                }
-              }
-            >
-              <QualifierIcon
-                className="spacer-right"
-                qualifier="TRK"
-              />
-              <span
-                className="text-ellipsis"
-              >
-                repository 1
-              </span>
-            </ForwardRef(Link)>
-            <em
-              className="display-flex-center small big-spacer-left flex-0"
-            >
-              <span
-                className="text-muted-2"
-              >
-                onboarding.create_project.repository_imported
-              </span>
-              <CheckIcon
-                className="little-spacer-left"
-                fill="#00aa00"
-                size={12}
-              />
-            </em>
-          </div>
-        </div>
-        <a
-          className="notice small display-flex-center little-spacer-top"
-          href="https://github.com/owner/repo1"
-          onClick={[Function]}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          onboarding.create_project.see_on_github
-        </a>
-      </div>
-    </Radio>
-    <Radio
-      checked={true}
-      className="spacer-top spacer-bottom padded create-project-github-repository"
-      disabled={false}
-      key="repo3"
-      onCheck={[MockFunction]}
-      value="repo3"
-    >
-      <div
-        className="big overflow-hidden max-width-100"
-        title="repository 1"
-      >
-        <div
-          className="text-ellipsis"
-        >
-          repository 1
-        </div>
-        <a
-          className="notice small display-flex-center little-spacer-top"
-          href="https://github.com/owner/repo1"
-          onClick={[Function]}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          onboarding.create_project.see_on_github
-        </a>
-      </div>
-    </Radio>
-    <div
-      className="display-flex-justify-center width-100"
-    >
-      <ListFooter
-        count={3}
-        loadMore={[MockFunction]}
-        loading={false}
-        total={0}
-      />
-    </div>
-  </div>
-</div>
-`;