Board refactor - Split BoardColumn and BoardHeader components

Consolidate graphQLBoardLists feature flag by splitting BoardColumn and
BoardHeader components to isolate boardStore to help with deprecation.

app/assets/javascripts/boards/components/board_column.vue

 <script>
-import { mapGetters, mapActions } from 'vuex';
+// This component is being replaced in favor of './board_column_new.vue' for GraphQL boards
 import Sortable from 'sortablejs';
 import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
 import EmptyComponent from '~/vue_shared/components/empty_component';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BoardList from './board_list.vue';
-import BoardListNew from './board_list_new.vue';
 import boardsStore from '../stores/boards_store';
-import eventHub from '../eventhub';
 import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 import { ListType } from '../constants';
 
@@ -15,9 +12,8 @@ export default {
   components: {
     BoardPromotionState: EmptyComponent,
     BoardListHeader,
-    BoardList: gon.features?.graphqlBoardLists ? BoardListNew : BoardList,
+    BoardList,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -46,44 +42,25 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getIssuesByList']),
     showBoardListAndBoardInfo() {
       return this.list.type !== ListType.promotion;
     },
-    uniqueKey() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
-    },
     listIssues() {
-      if (!this.glFeatures.graphqlBoardLists) {
       return this.list.issues;
-      }
-      return this.getIssuesByList(this.list.id);
-    },
-    shouldFetchIssues() {
-      return this.glFeatures.graphqlBoardLists && this.list.type !== ListType.blank;
     },
   },
   watch: {
     filter: {
       handler() {
-        if (this.shouldFetchIssues) {
-          this.fetchIssuesForList({ listId: this.list.id });
-        } else {
         this.list.page = 1;
         this.list.getIssues(true).catch(() => {
           // TODO: handle request error
         });
-        }
       },
       deep: true,
     },
   },
   mounted() {
-    if (this.shouldFetchIssues) {
-      this.fetchIssuesForList({ listId: this.list.id });
-    }
-
     const instance = this;
 
     const sortableOptions = getBoardSortableDefaultOptions({
@@ -109,12 +86,6 @@ export default {
 
     Sortable.create(this.$el.parentNode, sortableOptions);
   },
-  methods: {
-    ...mapActions(['fetchIssuesForList']),
-    showListNewIssueForm(listId) {
-      eventHub.$emit('showForm', listId);
-    },
-  },
 };
 </script>
 

app/assets/javascripts/boards/components/board_column_new.vue

+<script>
+import { mapGetters, mapActions, mapState } from 'vuex';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
+import BoardPromotionState from 'ee_else_ce/boards/components/board_promotion_state';
+import BoardList from './board_list_new.vue';
+import { ListType } from '../constants';
+
+export default {
+  components: {
+    BoardPromotionState,
+    BoardListHeader,
+    BoardList,
+  },
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  inject: {
+    boardId: {
+      default: '',
+    },
+  },
+  computed: {
+    ...mapState(['filterParams']),
+    ...mapGetters(['getIssuesByList']),
+    showBoardListAndBoardInfo() {
+      return this.list.type !== ListType.promotion;
+    },
+    listIssues() {
+      return this.getIssuesByList(this.list.id);
+    },
+    shouldFetchIssues() {
+      return this.list.type !== ListType.blank;
+    },
+  },
+  watch: {
+    filterParams: {
+      handler() {
+        if (this.shouldFetchIssues) {
+          this.fetchIssuesForList({ listId: this.list.id });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    ...mapActions(['fetchIssuesForList']),
+    // TODO: Reordering of lists https://gitlab.com/gitlab-org/gitlab/-/issues/280515
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      'is-draggable': !list.preset,
+      'is-expandable': list.isExpandable,
+      'is-collapsed': !list.isExpanded,
+      'board-type-assignee': list.type === 'assignee',
+    }"
+    :data-id="list.id"
+    class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
+    data-qa-selector="board_list"
+  >
+    <div
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+    >
+      <board-list-header :can-admin-list="canAdminList" :list="list" :disabled="disabled" />
+      <board-list
+        v-if="showBoardListAndBoardInfo"
+        ref="board-list"
+        :disabled="disabled"
+        :issues="listIssues"
+        :list="list"
+      />
+
+      <!-- Will be only available in EE -->
+      <board-promotion-state v-if="list.id === 'promotion'" />
+    </div>
+  </div>
+</template>

app/assets/javascripts/boards/components/board_content.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { sortBy } from 'lodash';
-import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
 import { GlAlert } from '@gitlab/ui';
+import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
+import BoardColumnNew from './board_column_new.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
-    BoardColumn,
+    BoardColumn: gon.features?.graphqlBoardLists ? BoardColumnNew : BoardColumn,
     BoardContentSidebar: () => import('ee_component/boards/components/board_content_sidebar.vue'),
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
     GlAlert,

app/assets/javascripts/boards/components/board_list_header.vue

@@ -17,7 +17,6 @@ import eventHub from '../eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
 import { inactiveId, LIST, ListType } from '../constants';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -32,7 +31,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -121,12 +119,9 @@ export default {
     collapsedTooltipTitle() {
       return this.listTitle || this.listAssignee;
     },
-    shouldDisplaySwimlanes() {
-      return this.glFeatures.boardsWithSwimlanes && this.isSwimlanesOn;
-    },
   },
   methods: {
-    ...mapActions(['updateList', 'setActiveId']),
+    ...mapActions(['setActiveId']),
     openSidebarSettings() {
       if (this.activeId === inactiveId) {
         sidebarEventHub.$emit('sidebar.closeAll');
@@ -160,11 +155,7 @@ export default {
       }
     },
     updateListFunction() {
-      if (this.shouldDisplaySwimlanes || this.glFeatures.graphqlBoardLists) {
-        this.updateList({ listId: this.list.id, collapsed: !this.list.isExpanded });
-      } else {
       this.list.update();
-      }
     },
   },
 };
@@ -254,7 +245,7 @@ export default {
         </span>
         <span
           v-if="list.type === 'assignee'"
-          class="board-title-sub-text gl-ml-2 gl-font-weight-normal"
+          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
           :class="{ 'gl-display-none': !list.isExpanded }"
         >
           @{{ listAssignee }}

app/assets/javascripts/boards/components/board_promotion_state.js

+export default {};

app/assets/javascripts/boards/index.js

@@ -86,6 +86,7 @@ export default () => {
       boardId: $boardApp.dataset.boardId,
       groupId: Number($boardApp.dataset.groupId),
       rootPath: $boardApp.dataset.rootPath,
+      currentUserId: gon.current_user_id || null,
       canUpdate: $boardApp.dataset.canUpdate,
       labelsFetchPath: $boardApp.dataset.labelsFetchPath,
       labelsManagePath: $boardApp.dataset.labelsManagePath,
@@ -95,6 +96,7 @@ export default () => {
       boardWeight: $boardApp.dataset.boardWeight
         ? parseInt($boardApp.dataset.boardWeight, 10)
         : null,
+      scopedLabelsAvailable: parseBoolean($boardApp.dataset.scopedLabels),
     },
     store,
     apolloProvider,

ee/app/assets/javascripts/boards/components/board_list_header.vue

 <script>
-import { mapState, mapGetters } from 'vuex';
 import BoardListHeaderFoss from '~/boards/components/board_list_header.vue';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
@@ -12,8 +11,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['issuesByListId']),
-    ...mapGetters(['isSwimlanesOn']),
     issuesTooltip() {
       const { maxIssueCount } = this.list;
 

ee/app/assets/javascripts/boards/components/board_list_header_new.vue

+<script>
+import BoardListHeaderFoss from '~/boards/components/board_list_header_new.vue';
+import { __, sprintf, s__ } from '~/locale';
+
+export default {
+  extends: BoardListHeaderFoss,
+  inject: ['weightFeatureAvailable'],
+  computed: {
+    issuesTooltip() {
+      const { maxIssueCount } = this.list;
+
+      if (maxIssueCount > 0) {
+        return sprintf(__('%{issuesCount} issues with a limit of %{maxIssueCount}'), {
+          issuesCount: this.issuesCount,
+          maxIssueCount,
+        });
+      }
+
+      // TODO: Remove this pattern.
+      return BoardListHeaderFoss.computed.issuesTooltip.call(this);
+    },
+    weightCountToolTip() {
+      const { totalWeight } = this.list;
+
+      if (this.weightFeatureAvailable) {
+        return sprintf(s__('%{totalWeight} total weight'), { totalWeight });
+      }
+
+      return null;
+    },
+  },
+};
+</script>

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import Draggable from 'vuedraggable';
-import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
 import { DRAGGABLE_TAG } from '../constants';
 import defaultSortableConfig from '~/sortable/sortable_config';
 import { n__ } from '~/locale';

ee/app/assets/stylesheets/page_bundles/boards.scss

@@ -69,12 +69,6 @@
   white-space: nowrap;
 }
 
-.board-type-assignee {
-  .board-title-sub-text {
-    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-  }
-}
-
 .boards-selector-wrapper > .show.dropdown .dropdown-menu {
   // we cannot use d-flex from Bootstrap because of !important
   // see https://gitlab.com/gitlab-org/gitlab-ui/issues/38

ee/spec/frontend/boards/components/board_list_header_new_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import BoardListHeader from 'ee/boards/components/board_list_header_new.vue';
+import { listObj } from 'jest/boards/mock_data';
+import getters from 'ee/boards/stores/getters';
+import List from '~/boards/models/list';
+import { ListType, inactiveId } from '~/boards/constants';
+import sidebarEventHub from '~/sidebar/event_hub';
+
+// board_promotion_state tries to mount on the real DOM,
+// so we are mocking it in this test
+jest.mock('ee/boards/components/board_promotion_state', () => ({}));
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('Board List Header Component', () => {
+  let store;
+  let wrapper;
+
+  beforeEach(() => {
+    store = new Vuex.Store({ state: { activeId: inactiveId }, getters });
+    jest.spyOn(store, 'dispatch').mockImplementation();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+
+    localStorage.clear();
+  });
+
+  const createComponent = ({
+    listType = ListType.backlog,
+    collapsed = false,
+    withLocalStorage = true,
+    isSwimlanesHeader = false,
+    weightFeatureAvailable = false,
+  } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    const list = new List({ ...listMock, doNotFetchIssues: true });
+
+    if (withLocalStorage) {
+      localStorage.setItem(
+        `boards.${boardId}.${list.type}.${list.id}.expanded`,
+        (!collapsed).toString(),
+      );
+    }
+
+    wrapper = shallowMount(BoardListHeader, {
+      store,
+      localVue,
+      propsData: {
+        disabled: false,
+        list,
+        isSwimlanesHeader,
+      },
+      provide: {
+        boardId,
+        weightFeatureAvailable,
+      },
+    });
+  };
+
+  const findSettingsButton = () => wrapper.find({ ref: 'settingsBtn' });
+
+  describe('Settings Button', () => {
+    const hasSettings = [ListType.assignee, ListType.milestone, ListType.label];
+    const hasNoSettings = [ListType.backlog, ListType.blank, ListType.closed, ListType.promotion];
+
+    it.each(hasSettings)('does render for List Type `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findSettingsButton().exists()).toBe(true);
+    });
+
+    it.each(hasNoSettings)('does not render for List Type `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findSettingsButton().exists()).toBe(false);
+    });
+
+    it('has a test for each list type', () => {
+      createComponent();
+
+      Object.values(ListType).forEach(value => {
+        expect([...hasSettings, ...hasNoSettings]).toContain(value);
+      });
+    });
+
+    describe('emits sidebar.closeAll event on openSidebarSettings', () => {
+      beforeEach(() => {
+        jest.spyOn(sidebarEventHub, '$emit');
+      });
+
+      it('emits event if no active List', () => {
+        // Shares the same behavior for any settings-enabled List type
+        createComponent({ listType: hasSettings[0] });
+        wrapper.vm.openSidebarSettings();
+
+        expect(sidebarEventHub.$emit).toHaveBeenCalledWith('sidebar.closeAll');
+      });
+
+      it('does not emit event when there is an active List', () => {
+        store.state.activeId = listObj.id;
+        createComponent({ listType: hasSettings[0] });
+        wrapper.vm.openSidebarSettings();
+
+        expect(sidebarEventHub.$emit).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Swimlanes header', () => {
+    it('when collapsed, it displays info icon', () => {
+      createComponent({ isSwimlanesHeader: true, collapsed: true });
+
+      expect(wrapper.find('.board-header-collapsed-info-icon').exists()).toBe(true);
+    });
+  });
+
+  describe('weightFeatureAvailable', () => {
+    it('weightFeatureAvailable is true', () => {
+      createComponent({ weightFeatureAvailable: true });
+
+      expect(wrapper.find({ ref: 'weightTooltip' }).exists()).toBe(true);
+    });
+
+    it('weightFeatureAvailable is false', () => {
+      createComponent();
+
+      expect(wrapper.find({ ref: 'weightTooltip' }).exists()).toBe(false);
+    });
+  });
+});

ee/spec/frontend/boards/components/board_list_header_spec.js

@@ -45,7 +45,6 @@ describe('Board List Header Component', () => {
     listType = ListType.backlog,
     collapsed = false,
     withLocalStorage = true,
-    isSwimlanesHeader = false,
   } = {}) => {
     const boardId = '1';
 
@@ -76,7 +75,6 @@ describe('Board List Header Component', () => {
       propsData: {
         disabled: false,
         list,
-        isSwimlanesHeader,
       },
       provide: {
         boardId,
@@ -130,12 +128,4 @@ describe('Board List Header Component', () => {
       });
     });
   });
-
-  describe('Swimlanes header', () => {
-    it('when collapsed, it displays info icon', () => {
-      createComponent({ isSwimlanesHeader: true, collapsed: true });
-
-      expect(wrapper.find('.board-header-collapsed-info-icon').exists()).toBe(true);
-    });
-  });
 });

ee/spec/frontend/boards/components/epics_swimlanes_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Draggable from 'vuedraggable';
 import EpicsSwimlanes from 'ee/boards/components/epics_swimlanes.vue';
-import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
 import EpicLane from 'ee/boards/components/epic_lane.vue';
 import IssueLaneList from 'ee/boards/components/issues_lane_list.vue';
 import getters from 'ee/boards/stores/getters';

ee/spec/frontend/boards/components/issues_lane_list_spec.js

-import Vue from 'vue';
-import AxiosMockAdapter from 'axios-mock-adapter';
 import { shallowMount } from '@vue/test-utils';
 import IssuesLaneList from 'ee/boards/components/issues_lane_list.vue';
 import { listObj } from 'jest/boards/mock_data';
-import { TEST_HOST } from 'helpers/test_constants';
 import BoardCard from '~/boards/components/board_card_layout.vue';
-import axios from '~/lib/utils/axios_utils';
 import { mockIssues } from '../mock_data';
 import List from '~/boards/models/list';
 import { createStore } from '~/boards/stores';
@@ -13,21 +9,9 @@ import { ListType } from '~/boards/constants';
 
 describe('IssuesLaneList', () => {
   let wrapper;
-  let axiosMock;
   let store;
 
-  beforeEach(() => {
-    axiosMock = new AxiosMockAdapter(axios);
-    axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] });
-  });
-
-  const createComponent = ({
-    listType = ListType.backlog,
-    collapsed = false,
-    withLocalStorage = true,
-  } = {}) => {
-    const boardId = '1';
-
+  const createComponent = ({ listType = ListType.backlog, collapsed = false } = {}) => {
     const listMock = {
       ...listObj,
       list_type: listType,
@@ -39,15 +23,7 @@ describe('IssuesLaneList', () => {
       listMock.user = {};
     }
 
-    // Making List reactive
-    const list = Vue.observable(new List(listMock));
-
-    if (withLocalStorage) {
-      localStorage.setItem(
-        `boards.${boardId}.${list.type}.${list.id}.expanded`,
-        (!collapsed).toString(),
-      );
-    }
+    const list = new List({ ...listMock, doNotFetchIssues: true });
 
     wrapper = shallowMount(IssuesLaneList, {
       store,
@@ -61,9 +37,8 @@ describe('IssuesLaneList', () => {
   };
 
   afterEach(() => {
-    axiosMock.restore();
     wrapper.destroy();
-    localStorage.clear();
+    wrapper = null;
   });
 
   describe('if list is expanded', () => {

spec/frontend/boards/components/board_column_new_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import { listObj } from 'jest/boards/mock_data';
+import BoardColumn from '~/boards/components/board_column_new.vue';
+import List from '~/boards/models/list';
+import { ListType } from '~/boards/constants';
+import { createStore } from '~/boards/stores';
+
+describe('Board Column Component', () => {
+  let wrapper;
+  let store;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createComponent = ({ listType = ListType.backlog, collapsed = false } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    const list = new List({ ...listMock, doNotFetchIssues: true });
+
+    store = createStore();
+
+    wrapper = shallowMount(BoardColumn, {
+      store,
+      propsData: {
+        disabled: false,
+        list,
+      },
+      provide: {
+        boardId,
+      },
+    });
+  };
+
+  const isExpandable = () => wrapper.classes('is-expandable');
+  const isCollapsed = () => wrapper.classes('is-collapsed');
+
+  describe('Given different list types', () => {
+    it('is expandable when List Type is `backlog`', () => {
+      createComponent({ listType: ListType.backlog });
+
+      expect(isExpandable()).toBe(true);
+    });
+  });
+
+  describe('expanded / collapsed column', () => {
+    it('has class is-collapsed when list is collapsed', () => {
+      createComponent({ collapsed: false });
+
+      expect(wrapper.vm.list.isExpanded).toBe(true);
+    });
+
+    it('does not have class is-collapsed when list is expanded', () => {
+      createComponent({ collapsed: true });
+
+      expect(isCollapsed()).toBe(true);
+    });
+  });
+});

spec/frontend/boards/components/board_column_spec.js

@@ -78,7 +78,7 @@ describe('Board Column Component', () => {
     });
   });
 
-  describe('expanded / collaped column', () => {
+  describe('expanded / collapsed column', () => {
     it('has class is-collapsed when list is collapsed', () => {
       createComponent({ collapsed: false });
 

spec/frontend/boards/components/board_list_header_new_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { listObj } from 'jest/boards/mock_data';
+import BoardListHeader from '~/boards/components/board_list_header_new.vue';
+import List from '~/boards/models/list';
+import { ListType } from '~/boards/constants';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('Board List Header Component', () => {
+  let wrapper;
+  let store;
+
+  const updateListSpy = jest.fn();
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+
+    localStorage.clear();
+  });
+
+  const createComponent = ({
+    listType = ListType.backlog,
+    collapsed = false,
+    withLocalStorage = true,
+    currentUserId = null,
+  } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    const list = new List({ ...listMock, doNotFetchIssues: true });
+
+    if (withLocalStorage) {
+      localStorage.setItem(
+        `boards.${boardId}.${list.type}.${list.id}.expanded`,
+        (!collapsed).toString(),
+      );
+    }
+
+    store = new Vuex.Store({
+      state: {},
+      actions: { updateList: updateListSpy },
+      getters: {},
+    });
+
+    wrapper = shallowMount(BoardListHeader, {
+      store,
+      localVue,
+      propsData: {
+        disabled: false,
+        list,
+      },
+      provide: {
+        boardId,
+        weightFeatureAvailable: false,
+        currentUserId,
+      },
+    });
+  };
+
+  const isExpanded = () => wrapper.vm.list.isExpanded;
+  const isCollapsed = () => !isExpanded();
+
+  const findAddIssueButton = () => wrapper.find({ ref: 'newIssueBtn' });
+  const findCaret = () => wrapper.find('.board-title-caret');
+
+  describe('Add issue button', () => {
+    const hasNoAddButton = [ListType.promotion, ListType.blank, ListType.closed];
+    const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee];
+
+    it.each(hasNoAddButton)('does not render when List Type is `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findAddIssueButton().exists()).toBe(false);
+    });
+
+    it.each(hasAddButton)('does render when List Type is `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findAddIssueButton().exists()).toBe(true);
+    });
+
+    it('has a test for each list type', () => {
+      createComponent();
+
+      Object.values(ListType).forEach(value => {
+        expect([...hasAddButton, ...hasNoAddButton]).toContain(value);
+      });
+    });
+
+    it('does render when logged out', () => {
+      createComponent();
+
+      expect(findAddIssueButton().exists()).toBe(true);
+    });
+  });
+
+  describe('expanding / collapsing the column', () => {
+    it('does not collapse when clicking the header', async () => {
+      createComponent();
+
+      expect(isCollapsed()).toBe(false);
+
+      wrapper.find('[data-testid="board-list-header"]').trigger('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(isCollapsed()).toBe(false);
+    });
+
+    it('collapses expanded Column when clicking the collapse icon', async () => {
+      createComponent();
+
+      expect(isExpanded()).toBe(true);
+
+      findCaret().vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(isCollapsed()).toBe(true);
+    });
+
+    it('expands collapsed Column when clicking the expand icon', async () => {
+      createComponent({ collapsed: true });
+
+      expect(isCollapsed()).toBe(true);
+
+      findCaret().vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(isCollapsed()).toBe(false);
+    });
+
+    it("when logged in it calls list update and doesn't set localStorage", async () => {
+      createComponent({ withLocalStorage: false, currentUserId: 1 });
+
+      findCaret().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      expect(updateListSpy).toHaveBeenCalledTimes(1);
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null);
+    });
+
+    it("when logged out it doesn't call list update and sets localStorage", async () => {
+      createComponent();
+
+      findCaret().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      expect(updateListSpy).not.toHaveBeenCalled();
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(String(isExpanded()));
+    });
+  });
+});