Shared code for Epics list and timeline sections

ee/app/assets/javascripts/roadmap/mixins/section_mixin.js

+import { EPIC_DETAILS_CELL_WIDTH, TIMELINE_CELL_MIN_WIDTH, SCROLL_BAR_SIZE } from '../constants';
+
+export default {
+  computed: {
+    /**
+     * Return section width after reducing scrollbar size
+     * based on listScrollable such that Epic item cells
+     * do not consider scrollbar presence in shellWidth
+     */
+    sectionShellWidth() {
+      return this.shellWidth - (this.listScrollable ? SCROLL_BAR_SIZE : 0);
+    },
+    sectionItemWidth() {
+      const timeframeLength = this.timeframe.length;
+
+      // Calculate minimum width for single cell
+      // based on total number of months in current timeframe
+      // and available shellWidth
+      const width = (this.sectionShellWidth - EPIC_DETAILS_CELL_WIDTH) / timeframeLength;
+
+      // When shellWidth is too low, we need to obey global
+      // minimum cell width.
+      return Math.max(width, TIMELINE_CELL_MIN_WIDTH);
+    },
+    sectionContainerStyles() {
+      const width = EPIC_DETAILS_CELL_WIDTH + (this.sectionItemWidth * this.timeframe.length);
+      return {
+        width: `${width}px`,
+      };
+    },
+  },
+};

spec/javascripts/roadmap/mixins/section_mixin_spec.js

+import Vue from 'vue';
+
+import roadmapTimelineSectionComponent from 'ee/roadmap/components/roadmap_timeline_section.vue';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mockEpic, mockTimeframe, mockShellWidth, mockScrollBarSize } from '../mock_data';
+
+const createComponent = ({
+  epics = [mockEpic],
+  timeframe = mockTimeframe,
+  shellWidth = mockShellWidth,
+  listScrollable = false,
+}) => {
+  const Component = Vue.extend(roadmapTimelineSectionComponent);
+
+  return mountComponent(Component, {
+    epics,
+    timeframe,
+    shellWidth,
+    listScrollable,
+  });
+};
+
+describe('SectionMixin', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent({});
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('sectionShellWidth', () => {
+      it('returns shellWidth as it is when `listScrollable` prop is false', () => {
+        expect(vm.sectionShellWidth).toBe(mockShellWidth);
+      });
+
+      it('returns shellWidth after deducating value of SCROLL_BAR_SIZE when `listScrollable` prop is true', () => {
+        const vmScrollable = createComponent({ listScrollable: true });
+        expect(vmScrollable.sectionShellWidth).toBe(mockShellWidth - mockScrollBarSize);
+        vmScrollable.$destroy();
+      });
+    });
+
+    describe('sectionItemWidth', () => {
+      it('returns calculated item width based on sectionShellWidth and timeframe size', () => {
+        expect(vm.sectionItemWidth).toBe(280);
+      });
+    });
+
+    describe('sectionContainerStyles', () => {
+      it('returns style string for container element based on sectionShellWidth', () => {
+        expect(vm.sectionContainerStyles.width).toBe(`${mockShellWidth}px`);
+      });
+    });
+  });
+});