From fb528a9196450b09667950fa293108ce7f83dca4 Mon Sep 17 00:00:00 2001 From: Benjamin Janssens Date: Tue, 18 Jun 2024 14:44:12 +0200 Subject: [PATCH] refactor: move availableBranches from RepoBranchPickerState to BitbucketRepoBranchPicker; add tests for BitbucketRepoBranchPicker Signed-off-by: Benjamin Janssens --- .../BitbucketRepoBranchPicker.test.tsx | 105 ++++++++++++++++++ .../BitbucketRepoBranchPicker.tsx | 16 +-- .../fields/BitbucketRepoBranchPicker/types.ts | 1 - 3 files changed, 113 insertions(+), 9 deletions(-) create mode 100644 plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.test.tsx diff --git a/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.test.tsx b/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.test.tsx new file mode 100644 index 0000000000..6cbc561bc9 --- /dev/null +++ b/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.test.tsx @@ -0,0 +1,105 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { + ScaffolderApi, + scaffolderApiRef, +} from '@backstage/plugin-scaffolder-react'; +import { BitbucketRepoBranchPicker } from './BitbucketRepoBranchPicker'; +import { act, fireEvent, render, waitFor } from '@testing-library/react'; +import { TestApiProvider } from '@backstage/test-utils'; +import userEvent from '@testing-library/user-event'; + +describe('BitbucketRepoBranchPicker', () => { + const scaffolderApiMock: Partial = { + autocomplete: jest.fn().mockResolvedValue(['branch1']), + }; + + it('renders an input field', () => { + const { getByRole } = render( + + + , + ); + + expect(getByRole('textbox')).toBeInTheDocument(); + expect(getByRole('textbox')).toHaveValue('main'); + }); + + it('calls onChange when the input field changes', () => { + const onChange = jest.fn(); + + const { getByRole } = render( + + + , + ); + + const input = getByRole('textbox'); + + act(() => { + input.focus(); + fireEvent.change(input, { + target: { value: 'develop' }, + }); + input.blur(); + }); + + expect(onChange).toHaveBeenCalledWith({ branch: 'develop' }); + }); + + it('should populate branches', async () => { + const onChange = jest.fn(); + + const { getByRole, getByText } = render( + + + , + ); + + // Open the Autcomplete dropdown + const input = getByRole('textbox'); + await userEvent.click(input); + + // Verify that the available workspaces are shown + await waitFor(() => expect(getByText('branch1')).toBeInTheDocument()); + + // Verify that selecting an option calls onChange + await userEvent.click(getByText('branch1')); + expect(onChange).toHaveBeenCalledWith({ + branch: 'branch1', + }); + }); +}); diff --git a/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.tsx b/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.tsx index 27a0b5c027..3af7eb7e2c 100644 --- a/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.tsx +++ b/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/BitbucketRepoBranchPicker.tsx @@ -16,7 +16,7 @@ import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; import FormControl from '@material-ui/core/FormControl'; -import React from 'react'; +import React, { useState } from 'react'; import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; import useDebounce from 'react-use/esm/useDebounce'; @@ -35,7 +35,9 @@ export const BitbucketRepoBranchPicker = ({ rawErrors: string[]; accessToken?: string; }) => { - const { host, workspace, repository, branch, availableBranches } = state; + const { host, workspace, repository, branch } = state; + + const [availableBranches, setAvailableBranches] = useState([]); const scaffolderApi = useApi(scaffolderApiRef); @@ -55,15 +57,13 @@ export const BitbucketRepoBranchPicker = ({ { workspace, repository }, ); - onChange({ availableBranches: result }); + setAvailableBranches(result); } else { - onChange({ availableBranches: [] }); + setAvailableBranches([]); } }; - updateAvailableBranches().catch(() => - onChange({ availableBranches: [] }), - ); + updateAvailableBranches().catch(() => setAvailableBranches([])); }, 500, [host, workspace, repository, accessToken], @@ -80,7 +80,7 @@ export const BitbucketRepoBranchPicker = ({ onChange={(_, newValue) => { onChange({ branch: newValue || '' }); }} - options={availableBranches || []} + options={availableBranches} renderInput={params => ( )} diff --git a/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/types.ts b/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/types.ts index 4843ff767e..1d54ea7e8b 100644 --- a/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/types.ts +++ b/plugins/scaffolder/src/components/fields/BitbucketRepoBranchPicker/types.ts @@ -19,5 +19,4 @@ export interface RepoBranchPickerState { workspace?: string; repository?: string; branch?: string; - availableBranches?: string[]; }