Add latest changes from gitlab-org/gitlab@master

3 files changed, 185 insertions, 55 deletions

diff --git a/spec/frontend/boards/components/board_add_new_column_form_spec.js b/spec/frontend/boards/components/board_add_new_column_form_spec.js
new file mode 100644
index 00000000000..3702f55f17b
--- /dev/null
+++ b/spec/frontend/boards/components/board_add_new_column_form_spec.js
@@ -0,0 +1,166 @@
+import { GlFormGroup, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
+import defaultState from '~/boards/stores/state';
+import { mockLabelList } from '../mock_data';
+
+Vue.use(Vuex);
+
+describe('Board card layout', () => {
+  let wrapper;
+
+  const createStore = ({ actions = {}, getters = {}, state = {} } = {}) => {
+    return new Vuex.Store({
+      state: {
+        ...defaultState,
+        ...state,
+      },
+      actions,
+      getters,
+    });
+  };
+
+  const mountComponent = ({
+    loading = false,
+    formDescription = '',
+    searchLabel = '',
+    searchPlaceholder = '',
+    selectedId,
+    actions,
+    slots,
+  } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(BoardAddNewColumnForm, {
+        stubs: {
+          GlFormGroup: true,
+        },
+        propsData: {
+          loading,
+          formDescription,
+          searchLabel,
+          searchPlaceholder,
+          selectedId,
+        },
+        slots,
+        store: createStore({
+          actions: {
+            setAddColumnFormVisibility: jest.fn(),
+            ...actions,
+          },
+        }),
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const formTitle = () => wrapper.findByTestId('board-add-column-form-title').text();
+  const findSearchInput = () => wrapper.find(GlSearchBoxByType);
+  const findSearchLabel = () => wrapper.find(GlFormGroup);
+  const cancelButton = () => wrapper.findByTestId('cancelAddNewColumn');
+  const submitButton = () => wrapper.findByTestId('addNewColumnButton');
+
+  it('shows form title & search input', () => {
+    mountComponent();
+
+    expect(formTitle()).toEqual(BoardAddNewColumnForm.i18n.newList);
+    expect(findSearchInput().exists()).toBe(true);
+  });
+
+  it('clicking cancel hides the form', () => {
+    const setAddColumnFormVisibility = jest.fn();
+    mountComponent({
+      actions: {
+        setAddColumnFormVisibility,
+      },
+    });
+
+    cancelButton().vm.$emit('click');
+
+    expect(setAddColumnFormVisibility).toHaveBeenCalledWith(expect.anything(), false);
+  });
+
+  it('sets placeholder and description from props', () => {
+    const props = {
+      formDescription: 'Some description of a list',
+    };
+
+    mountComponent(props);
+
+    expect(wrapper.html()).toHaveText(props.formDescription);
+  });
+
+  describe('items', () => {
+    const mountWithItems = (loading) =>
+      mountComponent({
+        loading,
+        slots: {
+          items: '<div class="item-slot">Some kind of list</div>',
+        },
+      });
+
+    it('hides items slot and shows skeleton while loading', () => {
+      mountWithItems(true);
+
+      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
+      expect(wrapper.find('.item-slot').exists()).toBe(false);
+    });
+
+    it('shows items slot and hides skeleton while not loading', () => {
+      mountWithItems(false);
+
+      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
+      expect(wrapper.find('.item-slot').exists()).toBe(true);
+    });
+  });
+
+  describe('search box', () => {
+    it('sets label and placeholder text from props', () => {
+      const props = {
+        searchLabel: 'Some items',
+        searchPlaceholder: 'Search for an item',
+      };
+
+      mountComponent(props);
+
+      expect(findSearchLabel().attributes('label')).toEqual(props.searchLabel);
+      expect(findSearchInput().attributes('placeholder')).toEqual(props.searchPlaceholder);
+    });
+
+    it('emits filter event on input', () => {
+      mountComponent();
+
+      const searchText = 'some text';
+
+      findSearchInput().vm.$emit('input', searchText);
+
+      expect(wrapper.emitted('filter-items')).toEqual([[searchText]]);
+    });
+  });
+
+  describe('Add list button', () => {
+    it('is disabled if no item is selected', () => {
+      mountComponent();
+
+      expect(submitButton().props('disabled')).toBe(true);
+    });
+
+    it('emits add-list event on click', async () => {
+      mountComponent({
+        selectedId: mockLabelList.label.id,
+      });
+
+      await nextTick();
+
+      submitButton().vm.$emit('click');
+
+      expect(wrapper.emitted('add-list')).toEqual([[]]);
+    });
+  });
+});
diff --git a/spec/frontend/boards/components/board_add_new_column_spec.js b/spec/frontend/boards/components/board_add_new_column_spec.js
index 84b6d7abb1e..60584eaf6cf 100644
--- a/spec/frontend/boards/components/board_add_new_column_spec.js
+++ b/spec/frontend/boards/components/board_add_new_column_spec.js
@@ -1,9 +1,9 @@
-import { GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import BoardAddNewColumn from '~/boards/components/board_add_new_column.vue';
+import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
 import defaultState from '~/boards/stores/state';
 import { mockLabelList } from '../mock_data';
 
@@ -11,7 +11,6 @@ Vue.use(Vuex);
 
 describe('Board card layout', () => {
   let wrapper;
-  let shouldUseGraphQL;
 
   const createStore = ({ actions = {}, getters = {}, state = {} } = {}) => {
     return new Vuex.Store({
@@ -25,19 +24,16 @@ describe('Board card layout', () => {
   };
 
   const mountComponent = ({
-    selectedLabelId,
+    selectedId,
     labels = [],
     getListByLabelId = jest.fn(),
     actions = {},
   } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(BoardAddNewColumn, {
-        stubs: {
-          GlFormGroup: true,
-        },
         data() {
           return {
-            selectedLabelId,
+            selectedId,
           };
         },
         store: createStore({
@@ -47,12 +43,13 @@ describe('Board card layout', () => {
             ...actions,
           },
           getters: {
-            shouldUseGraphQL: () => shouldUseGraphQL,
+            shouldUseGraphQL: () => true,
             getListByLabelId: () => getListByLabelId,
           },
           state: {
             labels,
             labelsLoading: false,
+            isEpicBoard: false,
           },
         }),
         provide: {
@@ -64,65 +61,32 @@ describe('Board card layout', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
-  });
-
-  const formTitle = () => wrapper.findByTestId('board-add-column-form-title').text();
-  const findSearchInput = () => wrapper.find(GlSearchBoxByType);
-  const cancelButton = () => wrapper.findByTestId('cancelAddNewColumn');
-  const submitButton = () => wrapper.findByTestId('addNewColumnButton');
-
-  beforeEach(() => {
-    shouldUseGraphQL = true;
-  });
-
-  it('shows form title & search input', () => {
-    mountComponent();
-
-    expect(formTitle()).toEqual(BoardAddNewColumn.i18n.newLabelList);
-    expect(findSearchInput().exists()).toBe(true);
-  });
-
-  it('clicking cancel hides the form', () => {
-    const setAddColumnFormVisibility = jest.fn();
-    mountComponent({
-      actions: {
-        setAddColumnFormVisibility,
-      },
-    });
-
-    cancelButton().vm.$emit('click');
-
-    expect(setAddColumnFormVisibility).toHaveBeenCalledWith(expect.anything(), false);
   });
 
   describe('Add list button', () => {
-    it('is disabled if no item is selected', () => {
-      mountComponent();
-
-      expect(submitButton().props('disabled')).toBe(true);
-    });
-
-    it('adds a new list on click', async () => {
-      const labelId = mockLabelList.label.id;
+    it('calls addList', async () => {
+      const getListByLabelId = jest.fn().mockReturnValue(null);
       const highlightList = jest.fn();
       const createList = jest.fn();
 
       mountComponent({
         labels: [mockLabelList.label],
-        selectedLabelId: labelId,
+        selectedId: mockLabelList.label.id,
+        getListByLabelId,
         actions: {
           createList,
           highlightList,
         },
       });
 
-      await nextTick();
+      wrapper.findComponent(BoardAddNewColumnForm).vm.$emit('add-list');
 
-      submitButton().vm.$emit('click');
+      await nextTick();
 
       expect(highlightList).not.toHaveBeenCalled();
-      expect(createList).toHaveBeenCalledWith(expect.anything(), { labelId });
+      expect(createList).toHaveBeenCalledWith(expect.anything(), {
+        labelId: mockLabelList.label.id,
+      });
     });
 
     it('highlights existing list if trying to re-add', async () => {
@@ -132,7 +96,7 @@ describe('Board card layout', () => {
 
       mountComponent({
         labels: [mockLabelList.label],
-        selectedLabelId: mockLabelList.label.id,
+        selectedId: mockLabelList.label.id,
         getListByLabelId,
         actions: {
           createList,
@@ -140,9 +104,9 @@ describe('Board card layout', () => {
         },
       });
 
-      await nextTick();
+      wrapper.findComponent(BoardAddNewColumnForm).vm.$emit('add-list');
 
-      submitButton().vm.$emit('click');
+      await nextTick();
 
       expect(highlightList).toHaveBeenCalledWith(expect.anything(), mockLabelList.id);
       expect(createList).not.toHaveBeenCalled();
diff --git a/spec/frontend/boards/stores/actions_spec.js b/spec/frontend/boards/stores/actions_spec.js
index 9e1b5018cc1..377c606ac92 100644
--- a/spec/frontend/boards/stores/actions_spec.js
+++ b/spec/frontend/boards/stores/actions_spec.js
@@ -293,7 +293,7 @@ describe('createIssueList', () => {
         data: {
           boardListCreate: {
             list: {},
-            errors: [{ foo: 'bar' }],
+            errors: ['foo'],
           },
         },
       }),
@@ -301,7 +301,7 @@ describe('createIssueList', () => {
 
     await actions.createIssueList({ getters, state, commit, dispatch }, { backlog: true });
 
-    expect(commit).toHaveBeenCalledWith(types.CREATE_LIST_FAILURE);
+    expect(commit).toHaveBeenCalledWith(types.CREATE_LIST_FAILURE, 'foo');
   });
 
   it('highlights list and does not re-query if it already exists', async () => {