1 files changed, 105 insertions, 38 deletions
diff --git a/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js b/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js
index 7326b84ad54..b9fed5f34f1 100644
--- a/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js
+++ b/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js
@@ -1,5 +1,6 @@
-import { GlAlert, GlForm, GlFormInput, GlButton } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlAlert, GlForm, GlFormInput, GlButton, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -9,17 +10,12 @@ import SourceBranchDropdown from '~/jira_connect/branches/components/source_bran
 import {
   CREATE_BRANCH_ERROR_GENERIC,
   CREATE_BRANCH_ERROR_WITH_CONTEXT,
+  I18N_NEW_BRANCH_PERMISSION_ALERT,
 } from '~/jira_connect/branches/constants';
 import createBranchMutation from '~/jira_connect/branches/graphql/mutations/create_branch.mutation.graphql';
+import { mockProjects } from '../mock_data';
 
-const mockProject = {
-  id: 'test',
-  fullPath: 'test-path',
-  repository: {
-    branchNames: ['main', 'f-test', 'release'],
-    rootRef: 'main',
-  },
-};
+const mockProject = mockProjects[0];
 const mockCreateBranchMutationResponse = {
   data: {
     createBranch: {
@@ -45,28 +41,27 @@ const mockCreateBranchMutationWithErrors = jest
 const mockCreateBranchMutationFailed = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 const mockMutationLoading = jest.fn().mockReturnValue(new Promise(() => {}));
 
-const localVue = createLocalVue();
-
 describe('NewBranchForm', () => {
   let wrapper;
 
   const findSourceBranchDropdown = () => wrapper.findComponent(SourceBranchDropdown);
   const findProjectDropdown = () => wrapper.findComponent(ProjectDropdown);
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findAlertSprintf = () => findAlert().findComponent(GlSprintf);
   const findForm = () => wrapper.findComponent(GlForm);
   const findInput = () => wrapper.findComponent(GlFormInput);
   const findButton = () => wrapper.findComponent(GlButton);
 
   const completeForm = async () => {
-    await findInput().vm.$emit('input', 'cool-branch-name');
     await findProjectDropdown().vm.$emit('change', mockProject);
     await findSourceBranchDropdown().vm.$emit('change', 'source-branch');
+    await findInput().vm.$emit('input', 'cool-branch-name');
   };
 
   function createMockApolloProvider({
     mockCreateBranchMutation = mockCreateBranchMutationSuccess,
   } = {}) {
-    localVue.use(VueApollo);
+    Vue.use(VueApollo);
 
     const mockApollo = createMockApollo([[createBranchMutation, mockCreateBranchMutation]]);
 
@@ -75,7 +70,6 @@ describe('NewBranchForm', () => {
 
   function createComponent({ mockApollo, provide } = {}) {
     wrapper = shallowMount(NewBranchForm, {
-      localVue,
       apolloProvider: mockApollo || createMockApolloProvider(),
       provide: {
         initialBranchName: '',
@@ -89,27 +83,107 @@ describe('NewBranchForm', () => {
   });
 
   describe('when selecting items from dropdowns', () => {
-    describe('when a project is selected', () => {
-      it('sets the `selectedProject` prop for ProjectDropdown and SourceBranchDropdown', async () => {
+    describe('when no project selected', () => {
+      beforeEach(() => {
         createComponent();
+      });
 
-        const projectDropdown = findProjectDropdown();
-        await projectDropdown.vm.$emit('change', mockProject);
+      it('hides source branch selection and branch name input', () => {
+        expect(findSourceBranchDropdown().exists()).toBe(false);
+        expect(findInput().exists()).toBe(false);
+      });
 
-        expect(projectDropdown.props('selectedProject')).toEqual(mockProject);
-        expect(findSourceBranchDropdown().props('selectedProject')).toEqual(mockProject);
+      it('disables the submit button', () => {
+        expect(findButton().props('disabled')).toBe(true);
       });
     });
 
-    describe('when a source branch is selected', () => {
-      it('sets the `selectedBranchName` prop for SourceBranchDropdown', async () => {
+    describe('when a valid project is selected', () => {
+      describe("when a source branch isn't selected", () => {
+        beforeEach(async () => {
+          createComponent();
+          await findProjectDropdown().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);
+        });
+
+        it('renders branch input field', () => {
+          expect(findInput().exists()).toBe(true);
+        });
+      });
+
+      describe('when `initialBranchName` is provided', () => {
+        it('sets value of branch name input to `initialBranchName` by default', async () => {
+          const mockInitialBranchName = 'ap1-test-branch-name';
+
+          createComponent({ provide: { initialBranchName: mockInitialBranchName } });
+          await findProjectDropdown().vm.$emit('change', mockProject);
+
+          expect(findInput().attributes('value')).toBe(mockInitialBranchName);
+        });
+      });
+
+      describe('when a source branch is selected', () => {
+        it('sets the `selectedBranchName` prop for SourceBranchDropdown', async () => {
+          createComponent();
+          await completeForm();
+
+          const mockBranchName = 'main';
+          const sourceBranchDropdown = findSourceBranchDropdown();
+          await sourceBranchDropdown.vm.$emit('change', mockBranchName);
+
+          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);
+          });
+        });
+      });
+    });
+
+    describe("when user doesn't have push permissions for the selected project", () => {
+      beforeEach(async () => {
         createComponent();
 
-        const mockBranchName = 'main';
-        const sourceBranchDropdown = findSourceBranchDropdown();
-        await sourceBranchDropdown.vm.$emit('change', mockBranchName);
+        const projectDropdown = findProjectDropdown();
+        await projectDropdown.vm.$emit('change', {
+          ...mockProject,
+          userPermissions: { pushCode: false },
+        });
+      });
+
+      it('displays an alert', () => {
+        const alert = findAlert();
+
+        expect(alert.exists()).toBe(true);
+        expect(findAlertSprintf().attributes('message')).toBe(I18N_NEW_BRANCH_PERMISSION_ALERT);
+        expect(alert.props('variant')).toBe('warning');
+        expect(alert.props('dismissible')).toBe(false);
+      });
 
-        expect(sourceBranchDropdown.props('selectedBranchName')).toBe(mockBranchName);
+      it('hides source branch selection and branch name input', () => {
+        expect(findSourceBranchDropdown().exists()).toBe(false);
+        expect(findInput().exists()).toBe(false);
       });
     });
   });
@@ -181,7 +255,7 @@ describe('NewBranchForm', () => {
         it('displays an alert', () => {
           const alert = findAlert();
           expect(alert.exists()).toBe(true);
-          expect(alert.text()).toBe(alertText);
+          expect(findAlertSprintf().attributes('message')).toBe(alertText);
           expect(alert.props()).toMatchObject({ title: alertTitle, variant: 'danger' });
         });
 
@@ -192,15 +266,6 @@ describe('NewBranchForm', () => {
     });
   });
 
-  describe('when `initialBranchName` is specified', () => {
-    it('sets value of branch name input to `initialBranchName` by default', () => {
-      const mockInitialBranchName = 'ap1-test-branch-name';
-
-      createComponent({ provide: { initialBranchName: mockInitialBranchName } });
-      expect(findInput().attributes('value')).toBe(mockInitialBranchName);
-    });
-  });
-
   describe('error handling', () => {
     describe.each`
       component               | componentName
@@ -211,13 +276,15 @@ describe('NewBranchForm', () => {
 
       beforeEach(async () => {
         createComponent();
+        await completeForm();
         await wrapper.findComponent(component).vm.$emit('error', { message: mockErrorMessage });
       });
 
       it('displays an alert', () => {
         const alert = findAlert();
+
         expect(alert.exists()).toBe(true);
-        expect(alert.text()).toBe(mockErrorMessage);
+        expect(findAlertSprintf().attributes('message')).toBe(mockErrorMessage);
         expect(alert.props('variant')).toBe('danger');
       });