Roadmap Shell Component

ee/app/assets/javascripts/roadmap/components/roadmap_shell.vue

+<script>
+  import { SCROLL_BAR_SIZE } from '../constants';
+
+  import epicsListSection from './epics_list_section.vue';
+  import roadmapTimelineSection from './roadmap_timeline_section.vue';
+
+  export default {
+    components: {
+      epicsListSection,
+      roadmapTimelineSection,
+    },
+    props: {
+      epics: {
+        type: Array,
+        required: true,
+      },
+      timeframe: {
+        type: Array,
+        required: true,
+      },
+      currentGroupId: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        shellWidth: 0,
+      };
+    },
+    computed: {
+      tableStyles() {
+        // return width after deducting size of vertical scrollbar
+        // to hide the scrollbar while preserving ability to scroll
+        return `width: ${this.shellWidth - SCROLL_BAR_SIZE}px;`;
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        // Client width at the time of component mount will not
+        // provide accurate size of viewport until child contents are
+        // actually loaded and rendered into the DOM, hence
+        // we wait for nextTick which ensures DOM update has completed
+        // before setting shellWidth
+        // see https://vuejs.org/v2/api/#Vue-nextTick
+        if (this.$el.parentElement) {
+          this.shellWidth = this.$el.parentElement.clientWidth;
+        }
+      });
+    },
+  };
+</script>
+
+<template>
+  <table
+    class="roadmap-shell"
+    :style="tableStyles"
+  >
+    <roadmap-timeline-section
+      :epics="epics"
+      :timeframe="timeframe"
+      :shell-width="shellWidth"
+    />
+    <epics-list-section
+      :epics="epics"
+      :timeframe="timeframe"
+      :shell-width="shellWidth"
+      :current-group-id="currentGroupId"
+    />
+  </table>
+</template>

spec/javascripts/roadmap/components/roadmap_shell_spec.js

+import Vue from 'vue';
+
+import roadmapShellComponent from 'ee/roadmap/components/roadmap_shell.vue';
+
+import { mockEpic, mockTimeframe, mockGroupId } from '../mock_data';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = ({
+  epics = [mockEpic],
+  timeframe = mockTimeframe,
+  currentGroupId = mockGroupId,
+}) => {
+  const Component = Vue.extend(roadmapShellComponent);
+
+  return mountComponent(Component, {
+    epics,
+    timeframe,
+    currentGroupId,
+  });
+};
+
+describe('RoadmapShellComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent({});
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('data', () => {
+    it('returns default data props', () => {
+      expect(vm.shellWidth).toBe(0);
+    });
+  });
+
+  describe('tableStyles', () => {
+    it('returns style string based on shellWidth and Scollbar size', () => {
+      // Since shellWidth is initialized on component mount
+      // from parentElement.clientWidth, it will always be Zero
+      // as parentElement is not available during tests.
+      // so end result is 0 - scrollbar_size = -15
+      expect(vm.tableStyles).toBe('width: -15px;');
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `roadmap-shell`', () => {
+      expect(vm.$el.classList.contains('roadmap-shell')).toBeTruthy();
+    });
+  });
+});