Update tests for LabelsSelect component

spec/javascripts/epics/epic_show/components/epic_show_app_spec.js

@@ -36,6 +36,11 @@ describe('EpicShowApp', () => {
       markdownDocsPath,
       author,
       created,
+      namespace,
+      labelsPath,
+      labelsWebUrl,
+      epicsWebUrl,
+      labels,
     } = props;
 
     const EpicShowApp = Vue.extend(epicShowApp);
@@ -72,6 +77,12 @@ describe('EpicShowApp', () => {
       editable: canUpdate,
       initialStartDate: startDate,
       initialEndDate: endDate,
+      initialLabels: labels,
+      updatePath: updateEndpoint,
+      labelsPath,
+      labelsWebUrl,
+      epicsWebUrl,
+      namespace,
     });
 
     setTimeout(done);

spec/javascripts/epics/sidebar/components/sidebar_app_spec.js

@@ -3,15 +3,23 @@ import _ from 'underscore';
 import Cookies from 'js-cookie';
 import epicSidebar from 'ee/epics/sidebar/components/sidebar_app.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { props } from '../../epic_show/mock_data';
 
 describe('epicSidebar', () => {
   let vm;
   let originalCookieState;
   let EpicSidebar;
+  const {
+    updateEndpoint,
+    labelsPath,
+    labelsWebUrl,
+    epicsWebUrl,
+    labels,
+  } = props;
 
   beforeEach(() => {
     setFixtures(`
-      <div class="page-with-sidebar right-sidebar-expanded">
+      <div class="page-with-contextual-sidebar right-sidebar-expanded">
         <div id="epic-sidebar"></div>
       </div>
     `);
@@ -21,6 +29,11 @@ describe('epicSidebar', () => {
     EpicSidebar = Vue.extend(epicSidebar);
     vm = mountComponent(EpicSidebar, {
       endpoint: gl.TEST_HOST,
+      initialLabels: labels,
+      updatePath: updateEndpoint,
+      labelsPath,
+      labelsWebUrl,
+      epicsWebUrl,
     }, '#epic-sidebar');
   });
 
@@ -36,6 +49,11 @@ describe('epicSidebar', () => {
     vm = mountComponent(EpicSidebar, {
       endpoint: gl.TEST_HOST,
       initialStartDate: '2017-01-01',
+      initialLabels: labels,
+      updatePath: updateEndpoint,
+      labelsPath,
+      labelsWebUrl,
+      epicsWebUrl,
     });
 
     expect(vm.$el.querySelector('.value-content strong').innerText.trim()).toEqual('Jan 1, 2017');
@@ -45,6 +63,11 @@ describe('epicSidebar', () => {
     vm = mountComponent(EpicSidebar, {
       endpoint: gl.TEST_HOST,
       initialEndDate: '2018-01-01',
+      initialLabels: labels,
+      updatePath: updateEndpoint,
+      labelsPath,
+      labelsWebUrl,
+      epicsWebUrl,
     });
 
     expect(vm.$el.querySelector('.value-content strong').innerText.trim()).toEqual('Jan 1, 2018');
@@ -55,6 +78,11 @@ describe('epicSidebar', () => {
       endpoint: gl.TEST_HOST,
       initialStartDate: '2017-01-01',
       initialEndDate: '2018-01-01',
+      initialLabels: labels,
+      updatePath: updateEndpoint,
+      labelsPath,
+      labelsWebUrl,
+      epicsWebUrl,
     });
 
     const datePickers = vm.$el.querySelectorAll('.block');
@@ -68,6 +96,11 @@ describe('epicSidebar', () => {
       vm = mountComponent(EpicSidebar, {
         endpoint: gl.TEST_HOST,
         initialStartDate: '2017-01-01',
+        initialLabels: labels,
+        updatePath: updateEndpoint,
+        labelsPath,
+        labelsWebUrl,
+        epicsWebUrl,
       });
     });
 
@@ -89,7 +122,7 @@ describe('epicSidebar', () => {
     });
 
     it('should toggle contentContainer css class', () => {
-      const contentContainer = document.querySelector('.page-with-sidebar');
+      const contentContainer = document.querySelector('.page-with-contextual-sidebar');
       expect(contentContainer.classList.contains('right-sidebar-expanded')).toEqual(true);
       expect(contentContainer.classList.contains('right-sidebar-collapsed')).toEqual(false);
 
@@ -113,6 +146,11 @@ describe('epicSidebar', () => {
       component = new EpicSidebar({
         propsData: {
           endpoint: gl.TEST_HOST,
+          initialLabels: labels,
+          updatePath: updateEndpoint,
+          labelsPath,
+          labelsWebUrl,
+          epicsWebUrl,
         },
       });
     });
@@ -146,6 +184,38 @@ describe('epicSidebar', () => {
     it('should handle errors gracefully', () => {});
   });
 
+  describe('handleLabelClick', () => {
+    const label = {
+      id: 1,
+      title: 'Foo',
+      color: ['#BADA55'],
+      text_color: '#FFFFFF',
+    };
+
+    it('initializes `epicContext.labels` as empty array when `label.isAny` is `true`', () => {
+      const labelIsAny = { isAny: true };
+      vm.handleLabelClick(labelIsAny);
+      expect(Array.isArray(vm.epicContext.labels)).toBe(true);
+      expect(vm.epicContext.labels.length).toBe(0);
+    });
+
+    it('adds provided `label` to epicContext.labels', () => {
+      vm.handleLabelClick(label);
+      // epicContext.labels gets initialized with initialLabels, hence
+      // newly insert label will be at second position (index `1`)
+      expect(vm.epicContext.labels.length).toBe(2);
+      expect(vm.epicContext.labels[1].id).toBe(label.id);
+      vm.handleLabelClick(label);
+    });
+
+    it('filters epicContext.labels to exclude provided `label` if it is already present in `epicContext.labels`', () => {
+      vm.handleLabelClick(label); // Select
+      vm.handleLabelClick(label); // Un-select
+      expect(vm.epicContext.labels.length).toBe(1);
+      expect(vm.epicContext.labels[0].id).toBe(labels[0].id);
+    });
+  });
+
   describe('saveDate error', () => {
     let interceptor;
     let component;
@@ -160,6 +230,11 @@ describe('epicSidebar', () => {
       component = new EpicSidebar({
         propsData: {
           endpoint: gl.TEST_HOST,
+          initialLabels: labels,
+          updatePath: updateEndpoint,
+          labelsPath,
+          labelsWebUrl,
+          epicsWebUrl,
         },
       });
     });