1 files changed, 115 insertions, 0 deletions
diff --git a/spec/frontend/boards/components/board_add_new_column_spec.js b/spec/frontend/boards/components/board_add_new_column_spec.js
new file mode 100644
index 00000000000..60584eaf6cf
--- /dev/null
+++ b/spec/frontend/boards/components/board_add_new_column_spec.js
@@ -0,0 +1,115 @@
+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';
+
+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 = ({
+    selectedId,
+    labels = [],
+    getListByLabelId = jest.fn(),
+    actions = {},
+  } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(BoardAddNewColumn, {
+        data() {
+          return {
+            selectedId,
+          };
+        },
+        store: createStore({
+          actions: {
+            fetchLabels: jest.fn(),
+            setAddColumnFormVisibility: jest.fn(),
+            ...actions,
+          },
+          getters: {
+            shouldUseGraphQL: () => true,
+            getListByLabelId: () => getListByLabelId,
+          },
+          state: {
+            labels,
+            labelsLoading: false,
+            isEpicBoard: false,
+          },
+        }),
+        provide: {
+          scopedLabelsAvailable: true,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Add list button', () => {
+    it('calls addList', async () => {
+      const getListByLabelId = jest.fn().mockReturnValue(null);
+      const highlightList = jest.fn();
+      const createList = jest.fn();
+
+      mountComponent({
+        labels: [mockLabelList.label],
+        selectedId: mockLabelList.label.id,
+        getListByLabelId,
+        actions: {
+          createList,
+          highlightList,
+        },
+      });
+
+      wrapper.findComponent(BoardAddNewColumnForm).vm.$emit('add-list');
+
+      await nextTick();
+
+      expect(highlightList).not.toHaveBeenCalled();
+      expect(createList).toHaveBeenCalledWith(expect.anything(), {
+        labelId: mockLabelList.label.id,
+      });
+    });
+
+    it('highlights existing list if trying to re-add', async () => {
+      const getListByLabelId = jest.fn().mockReturnValue(mockLabelList);
+      const highlightList = jest.fn();
+      const createList = jest.fn();
+
+      mountComponent({
+        labels: [mockLabelList.label],
+        selectedId: mockLabelList.label.id,
+        getListByLabelId,
+        actions: {
+          createList,
+          highlightList,
+        },
+      });
+
+      wrapper.findComponent(BoardAddNewColumnForm).vm.$emit('add-list');
+
+      await nextTick();
+
+      expect(highlightList).toHaveBeenCalledWith(expect.anything(), mockLabelList.id);
+      expect(createList).not.toHaveBeenCalled();
+    });
+  });
+});