Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

3 files changed, 168 insertions, 0 deletions

diff --git a/spec/frontend/projects/settings/branch_rules/branch_dropdown_spec.js b/spec/frontend/projects/settings/branch_rules/branch_dropdown_spec.js
new file mode 100644
index 00000000000..5997c2a083c
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/branch_dropdown_spec.js
@@ -0,0 +1,101 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import BranchDropdown, {
+  i18n,
+} from '~/projects/settings/branch_rules/components/branch_dropdown.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import branchesQuery from '~/projects/settings/branch_rules/queries/branches.query.graphql';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/flash';
+
+Vue.use(VueApollo);
+jest.mock('~/flash');
+
+describe('Branch dropdown', () => {
+  let wrapper;
+
+  const projectPath = 'test/project';
+  const value = 'main';
+  const mockBranchNames = ['test 1', 'test 2'];
+
+  const createComponent = async ({ branchNames = mockBranchNames, resolver } = {}) => {
+    const mockResolver =
+      resolver ||
+      jest.fn().mockResolvedValue({
+        data: { project: { id: '1', repository: { branchNames } } },
+      });
+    const apolloProvider = createMockApollo([[branchesQuery, mockResolver]]);
+
+    wrapper = shallowMountExtended(BranchDropdown, {
+      apolloProvider,
+      propsData: { projectPath, value },
+    });
+
+    await waitForPromises();
+  };
+
+  const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findAllBranches = () => wrapper.findAll(GlDropdownItem);
+  const findNoDataMsg = () => wrapper.findByTestId('no-data');
+  const findGlSearchBoxByType = () => wrapper.find(GlSearchBoxByType);
+  const findWildcardButton = () => wrapper.findByTestId('create-wildcard-button');
+  const setSearchTerm = (searchTerm) => findGlSearchBoxByType().vm.$emit('input', searchTerm);
+
+  beforeEach(() => createComponent());
+
+  it('renders a GlDropdown component with the correct props', () => {
+    expect(findGlDropdown().props()).toMatchObject({ text: value });
+  });
+
+  it('renders GlDropdownItem components for each branch', () => {
+    expect(findAllBranches().length).toBe(mockBranchNames.length);
+
+    mockBranchNames.forEach((branchName, index) =>
+      expect(findAllBranches().at(index).text()).toBe(branchName),
+    );
+  });
+
+  it('emits `select` with the branch name when a branch is clicked', () => {
+    findAllBranches().at(0).vm.$emit('click');
+    expect(wrapper.emitted('input')).toEqual([[mockBranchNames[0]]]);
+  });
+
+  describe('branch searching', () => {
+    it('displays a message if no branches can be found', async () => {
+      await createComponent({ branchNames: [] });
+
+      expect(findNoDataMsg().text()).toBe(i18n.noMatch);
+    });
+
+    it('displays a loading state while search request is in flight', async () => {
+      setSearchTerm('test');
+      await nextTick();
+
+      expect(findGlSearchBoxByType().props()).toMatchObject({ isLoading: true });
+    });
+
+    it('renders a wildcard button', async () => {
+      const searchTerm = 'test-*';
+      setSearchTerm(searchTerm);
+      await nextTick();
+
+      expect(findWildcardButton().exists()).toBe(true);
+      findWildcardButton().vm.$emit('click');
+      expect(wrapper.emitted('createWildcard')).toEqual([[searchTerm]]);
+    });
+  });
+
+  it('displays an error message if fetch failed', async () => {
+    const error = new Error('an error occurred');
+    const resolver = jest.fn().mockRejectedValueOnce(error);
+    await createComponent({ resolver });
+
+    expect(createAlert).toHaveBeenCalledWith({
+      message: i18n.fetchBranchesError,
+      captureError: true,
+      error,
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js b/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js
new file mode 100644
index 00000000000..66ae6ddc02d
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js
@@ -0,0 +1,49 @@
+import { nextTick } from 'vue';
+import { getParameterByName } from '~/lib/utils/url_utility';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import RuleEdit from '~/projects/settings/branch_rules/components/rule_edit.vue';
+import BranchDropdown from '~/projects/settings/branch_rules/components/branch_dropdown.vue';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterByName: jest.fn().mockImplementation(() => 'main'),
+}));
+
+describe('Edit branch rule', () => {
+  let wrapper;
+  const projectPath = 'test/testing';
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(RuleEdit, { propsData: { projectPath } });
+  };
+
+  const findBranchDropdown = () => wrapper.find(BranchDropdown);
+
+  beforeEach(() => createComponent());
+
+  it('gets the branch param from url', () => {
+    expect(getParameterByName).toHaveBeenCalledWith('branch');
+  });
+
+  describe('BranchDropdown', () => {
+    it('renders a BranchDropdown component with the correct props', () => {
+      expect(findBranchDropdown().props()).toMatchObject({
+        projectPath,
+        value: 'main',
+      });
+    });
+
+    it('sets the correct value when `input` is emitted', async () => {
+      const branch = 'test';
+      findBranchDropdown().vm.$emit('input', branch);
+      await nextTick();
+      expect(findBranchDropdown().props('value')).toBe(branch);
+    });
+
+    it('sets the correct value when `createWildcard` is emitted', async () => {
+      const wildcard = 'test-*';
+      findBranchDropdown().vm.$emit('createWildcard', wildcard);
+      await nextTick();
+      expect(findBranchDropdown().props('value')).toBe(wildcard);
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
new file mode 100644
index 00000000000..e12c3aeedd6
--- /dev/null
+++ b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
@@ -0,0 +1,18 @@
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import BranchRules from '~/projects/settings/repository/branch_rules/app.vue';
+
+describe('Branch rules app', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mountExtended(BranchRules);
+  };
+
+  const findTitle = () => wrapper.find('strong');
+
+  beforeEach(() => createComponent());
+
+  it('renders a title', () => {
+    expect(findTitle().text()).toBe('Branch');
+  });
+});