Add latest changes from gitlab-org/gitlab@master

2 files changed, 232 insertions, 0 deletions

diff --git a/spec/frontend/milestones/mock_data.js b/spec/frontend/milestones/mock_data.js
new file mode 100644
index 00000000000..c64eeeba663
--- /dev/null
+++ b/spec/frontend/milestones/mock_data.js
@@ -0,0 +1,82 @@
+export const milestones = [
+  {
+    id: 41,
+    iid: 6,
+    project_id: 8,
+    title: 'v0.1',
+    description: '',
+    state: 'active',
+    created_at: '2020-04-04T01:30:40.051Z',
+    updated_at: '2020-04-04T01:30:40.051Z',
+    due_date: null,
+    start_date: null,
+    web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/6',
+  },
+  {
+    id: 40,
+    iid: 5,
+    project_id: 8,
+    title: 'v4.0',
+    description: 'Laboriosam nisi sapiente dolores et magnam nobis ad earum.',
+    state: 'closed',
+    created_at: '2020-01-13T19:39:15.191Z',
+    updated_at: '2020-01-13T19:39:15.191Z',
+    due_date: null,
+    start_date: null,
+    web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/5',
+  },
+  {
+    id: 39,
+    iid: 4,
+    project_id: 8,
+    title: 'v3.0',
+    description: 'Necessitatibus illo alias et repellat dolorum assumenda ut.',
+    state: 'closed',
+    created_at: '2020-01-13T19:39:15.176Z',
+    updated_at: '2020-01-13T19:39:15.176Z',
+    due_date: null,
+    start_date: null,
+    web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/4',
+  },
+  {
+    id: 38,
+    iid: 3,
+    project_id: 8,
+    title: 'v2.0',
+    description: 'Doloribus qui repudiandae iste sit.',
+    state: 'closed',
+    created_at: '2020-01-13T19:39:15.161Z',
+    updated_at: '2020-01-13T19:39:15.161Z',
+    due_date: null,
+    start_date: null,
+    web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/3',
+  },
+  {
+    id: 37,
+    iid: 2,
+    project_id: 8,
+    title: 'v1.0',
+    description: 'Illo sint odio officia ea.',
+    state: 'closed',
+    created_at: '2020-01-13T19:39:15.146Z',
+    updated_at: '2020-01-13T19:39:15.146Z',
+    due_date: null,
+    start_date: null,
+    web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/2',
+  },
+  {
+    id: 36,
+    iid: 1,
+    project_id: 8,
+    title: 'v0.0',
+    description: 'Sed quae facilis deleniti at delectus assumenda nobis veritatis.',
+    state: 'active',
+    created_at: '2020-01-13T19:39:15.127Z',
+    updated_at: '2020-01-13T19:39:15.127Z',
+    due_date: null,
+    start_date: null,
+    web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/1',
+  },
+];
+
+export default milestones;
diff --git a/spec/frontend/milestones/project_milestone_combobox_spec.js b/spec/frontend/milestones/project_milestone_combobox_spec.js
new file mode 100644
index 00000000000..a7321d21559
--- /dev/null
+++ b/spec/frontend/milestones/project_milestone_combobox_spec.js
@@ -0,0 +1,150 @@
+import { milestones as projectMilestones } from './mock_data';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { shallowMount } from '@vue/test-utils';
+import MilestoneCombobox from '~/milestones/project_milestone_combobox.vue';
+import { GlNewDropdown, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
+
+const TEST_SEARCH_ENDPOINT = '/api/v4/projects/8/search';
+
+const extraLinks = [
+  { text: 'Create new', url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/new' },
+  { text: 'Manage milestones', url: '/h5bp/html5-boilerplate/-/milestones' },
+];
+
+const preselectedMilestones = [];
+const projectId = '8';
+
+describe('Milestone selector', () => {
+  let wrapper;
+  let mock;
+
+  const findNoResultsMessage = () => wrapper.find({ ref: 'noResults' });
+
+  const factory = (options = {}) => {
+    wrapper = shallowMount(MilestoneCombobox, {
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    gon.api_version = 'v4';
+
+    mock.onGet('/api/v4/projects/8/milestones').reply(200, projectMilestones);
+
+    factory({
+      propsData: {
+        projectId,
+        preselectedMilestones,
+        extraLinks,
+      },
+    });
+  });
+
+  afterEach(() => {
+    mock.restore();
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders the dropdown', () => {
+    expect(wrapper.find(GlNewDropdown)).toExist();
+  });
+
+  it('renders additional links', () => {
+    const links = wrapper.findAll('[href]');
+    links.wrappers.forEach((item, idx) => {
+      expect(item.text()).toBe(extraLinks[idx].text);
+      expect(item.attributes('href')).toBe(extraLinks[idx].url);
+    });
+  });
+
+  describe('before results', () => {
+    it('should show a loading icon', () => {
+      const request = mock.onGet(TEST_SEARCH_ENDPOINT, {
+        params: { search: 'TEST_SEARCH', scope: 'milestones' },
+      });
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+
+      return wrapper.vm.$nextTick().then(() => {
+        request.reply(200, []);
+      });
+    });
+
+    it('should not show any dropdown items', () => {
+      expect(wrapper.findAll('[role="milestone option"]')).toHaveLength(0);
+    });
+
+    it('should have "No milestone" as the button text', () => {
+      expect(wrapper.find({ ref: 'buttonText' }).text()).toBe('No milestone');
+    });
+  });
+
+  describe('with empty results', () => {
+    beforeEach(() => {
+      mock
+        .onGet(TEST_SEARCH_ENDPOINT, { params: { search: 'TEST_SEARCH', scope: 'milestones' } })
+        .reply(200, []);
+      wrapper.find(GlSearchBoxByType).vm.$emit('input', 'TEST_SEARCH');
+      return axios.waitForAll();
+    });
+
+    it('should display that no matching items are found', () => {
+      expect(findNoResultsMessage().exists()).toBe(true);
+    });
+  });
+
+  describe('with results', () => {
+    let items;
+    beforeEach(() => {
+      mock
+        .onGet(TEST_SEARCH_ENDPOINT, { params: { search: 'v0.1', scope: 'milestones' } })
+        .reply(200, [
+          {
+            id: 41,
+            iid: 6,
+            project_id: 8,
+            title: 'v0.1',
+            description: '',
+            state: 'active',
+            created_at: '2020-04-04T01:30:40.051Z',
+            updated_at: '2020-04-04T01:30:40.051Z',
+            due_date: null,
+            start_date: null,
+            web_url: 'http://127.0.0.1:3000/h5bp/html5-boilerplate/-/milestones/6',
+          },
+        ]);
+      wrapper.find(GlSearchBoxByType).vm.$emit('input', 'v0.1');
+      return axios.waitForAll().then(() => {
+        items = wrapper.findAll('[role="milestone option"]');
+      });
+    });
+
+    it('should display one item per result', () => {
+      expect(items).toHaveLength(1);
+    });
+
+    it('should emit a change if an item is clicked', () => {
+      items.at(0).vm.$emit('click');
+      expect(wrapper.emitted().change.length).toBe(1);
+      expect(wrapper.emitted().change[0]).toEqual([[{ title: 'v0.1' }]]);
+    });
+
+    it('should not have a selecton icon on any item', () => {
+      items.wrappers.forEach(item => {
+        expect(item.find('.selected-item').exists()).toBe(false);
+      });
+    });
+
+    it('should have a selecton icon if an item is clicked', () => {
+      items.at(0).vm.$emit('click');
+      expect(wrapper.find('.selected-item').exists()).toBe(true);
+    });
+
+    it('should not display a message about no results', () => {
+      expect(findNoResultsMessage().exists()).toBe(false);
+    });
+  });
+});