diff --git a/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.spec.tsx b/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.spec.tsx index 73c59be1470..f1f67090ad5 100644 --- a/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.spec.tsx +++ b/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.spec.tsx @@ -1,27 +1,55 @@ import { wrapWithReactHookForm } from '__tests__/utils/wrap-with-react-hook-form' -import { renderWithProviders } from '@qovery/shared/util-tests' +import { renderWithProviders, screen } from '@qovery/shared/util-tests' import { GitBranchSettings } from './git-branch-settings' +let mockBranches: { name: string }[] = [ + { + name: 'main', + }, +] + jest.mock('../hooks/use-branches/use-branches', () => { return { ...jest.requireActual('../hooks/use-branches/use-branches'), useBranches: () => ({ isLoading: false, isRefetching: false, - data: [ - { - name: 'main', - }, - ], + data: mockBranches, }), } }) describe('GitBranchSettings', () => { + beforeEach(() => { + mockBranches = [ + { + name: 'main', + }, + ] + }) + it('should match snapshot', () => { const { baseElement } = renderWithProviders( wrapWithReactHookForm() ) expect(baseElement).toMatchSnapshot() }) + + it('should display the selected branch when it is not part of returned branches', () => { + mockBranches = [ + { + name: 'develop', + }, + ] + + renderWithProviders( + wrapWithReactHookForm(, { + defaultValues: { + branch: 'main', + }, + }) + ) + + expect(screen.getByText('main')).toBeInTheDocument() + }) }) diff --git a/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.tsx b/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.tsx index 7deff50891e..034ff5d08b7 100644 --- a/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.tsx +++ b/libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.tsx @@ -1,4 +1,5 @@ import { type GitProviderEnum } from 'qovery-typescript-axios' +import { useMemo } from 'react' import { Controller, useFormContext } from 'react-hook-form' import { InputSelect, InputText, LoaderSpinner } from '@qovery/shared/ui' import { useBranches } from '../hooks/use-branches/use-branches' @@ -40,6 +41,25 @@ export function GitBranchSettings({ enabled: !disabled, }) + const branchOptionsWithSelectedValue = useMemo(() => { + const branchOptions = branches.map((branch) => ({ + label: branch.name, + value: branch.name, + })) + + if (disabled || !watchFieldBranch || branchOptions.some((branch) => branch.value === watchFieldBranch)) { + return branchOptions + } + + return [ + ...branchOptions, + { + label: watchFieldBranch, + value: watchFieldBranch, + }, + ] + }, [branches, disabled, watchFieldBranch]) + if (isError) { return null } @@ -71,16 +91,14 @@ export function GitBranchSettings({ value: watchFieldBranch ?? '', }, ] - : branches.map((branch) => ({ - label: branch.name, - value: branch.name, - })) + : branchOptionsWithSelectedValue } onChange={field.onChange} value={field.value} error={error?.message} disabled={disabled} isSearchable + isCreatable /> )} />