Address reviewer feedback

- expand test coverage in new branch form spec
- fix type

app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue

@@ -36,7 +36,11 @@ export default {
     ProjectDropdown,
     SourceBranchDropdown,
   },
-  inject: ['initialBranchName'],
+  inject: {
+    initialBranchName: {
+      default: '',
+    },
+  },
   data() {
     return {
       selectedProject: null,
@@ -56,8 +60,11 @@ export default {
     showAlert() {
       return Boolean(this.alertParams?.message);
     },
+    isBranchNameValid() {
+      return (this.branchName ?? '').trim().length > 0;
+    },
     disableSubmitButton() {
-      return !(this.selectedProject && this.selectedSourceBranchName && this.branchName);
+      return !(this.selectedProject && this.selectedSourceBranchName && this.isBranchNameValid);
     },
   },
   methods: {

spec/features/jira_connect/branches_spec.rb

@@ -26,7 +26,7 @@ RSpec.describe 'Create GitLab branches from Jira', :js do
     visit new_jira_connect_branch_path(issue_key: 'ACME-123', issue_summary: 'My issue !@#$% title')
 
     expect(page).to have_button('Create branch', disabled: true)
-    # intiially, branch field should be hidden.
+    # initially, branch field should be hidden.
     expect(page).not_to have_field('Branch name')
 
     # Select project1

spec/frontend/jira_connect/branches/components/new_branch_form_spec.js

@@ -54,8 +54,8 @@ describe('NewBranchForm', () => {
 
   const completeForm = async () => {
     await findProjectDropdown().vm.$emit('change', mockProject);
-    await findInput().vm.$emit('input', 'cool-branch-name');
     await findSourceBranchDropdown().vm.$emit('change', 'source-branch');
+    await findInput().vm.$emit('input', 'cool-branch-name');
   };
 
   function createMockApolloProvider({
@@ -84,23 +84,40 @@ describe('NewBranchForm', () => {
 
   describe('when selecting items from dropdowns', () => {
     describe('when no project selected', () => {
-      it('hides source branch selection and branch name input', () => {
+      beforeEach(() => {
         createComponent();
+      });
 
+      it('hides source branch selection and branch name input', () => {
         expect(findSourceBranchDropdown().exists()).toBe(false);
         expect(findInput().exists()).toBe(false);
       });
+
+      it('disables the submit button', () => {
+        expect(findButton().props('disabled')).toBe(true);
+      });
     });
 
     describe('when a valid project is selected', () => {
-      it('sets the `selectedProject` prop for ProjectDropdown and SourceBranchDropdown', async () => {
-        createComponent();
+      describe("when a source branch isn't selected", () => {
+        beforeEach(async () => {
+          createComponent();
+          await findProjectDropdown().vm.$emit('change', mockProject);
+        });
 
-        const projectDropdown = findProjectDropdown();
-        await projectDropdown.vm.$emit('change', mockProject);
+        it('sets the `selectedProject` prop for ProjectDropdown and SourceBranchDropdown', () => {
+          expect(findProjectDropdown().props('selectedProject')).toEqual(mockProject);
+          expect(findSourceBranchDropdown().exists()).toBe(true);
+          expect(findSourceBranchDropdown().props('selectedProject')).toEqual(mockProject);
+        });
+
+        it('disables the submit button', () => {
+          expect(findButton().props('disabled')).toBe(true);
+        });
 
-        expect(projectDropdown.props('selectedProject')).toEqual(mockProject);
-        expect(findSourceBranchDropdown().props('selectedProject')).toEqual(mockProject);
+        it('renders branch input field', () => {
+          expect(findInput().exists()).toBe(true);
+        });
       });
 
       describe('when `initialBranchName` is provided', () => {
@@ -125,6 +142,22 @@ describe('NewBranchForm', () => {
 
           expect(sourceBranchDropdown.props('selectedBranchName')).toBe(mockBranchName);
         });
+
+        describe.each`
+          branchName       | submitButtonDisabled
+          ${undefined}     | ${true}
+          ${''}            | ${true}
+          ${' '}           | ${true}
+          ${'test-branch'} | ${false}
+        `('when branch name is $branchName', ({ branchName, submitButtonDisabled }) => {
+          it(`sets submit button 'disabled' prop to ${submitButtonDisabled}`, async () => {
+            createComponent();
+            await completeForm();
+            await findInput().vm.$emit('input', branchName);
+
+            expect(findButton().props('disabled')).toBe(submitButtonDisabled);
+          });
+        });
       });
     });