Roadmap EpicListEmpty Component

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

+<script>
+  import { s__, sprintf } from '~/locale';
+  import { dateInWords } from '~/lib/utils/datetime_utility';
+
+  export default {
+    props: {
+      timeframeStart: {
+        type: Date,
+        required: true,
+      },
+      timeframeEnd: {
+        type: Date,
+        required: true,
+      },
+      emptyStateIllustrationPath: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      timeframeRange() {
+        const startDate = dateInWords(
+          this.timeframeStart,
+          true,
+          this.timeframeStart.getFullYear() === this.timeframeEnd.getFullYear(),
+        );
+        const endDate = dateInWords(this.timeframeEnd, true);
+
+        return {
+          startDate,
+          endDate,
+        };
+      },
+      message() {
+        return s__('GroupRoadmap|Epics let you manage your portfolio of projects more efficiently and with less effort');
+      },
+      subMessage() {
+        return sprintf(s__('GroupRoadmap|To view the roadmap, add a planned start or finish date to one of your epics in this group or its subgroups. Only epics in the past 3 months and the next 3 months are shown &ndash; from %{startDate} to %{endDate}.'), {
+          startDate: this.timeframeRange.startDate,
+          endDate: this.timeframeRange.endDate,
+        });
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content">
+        <img
+          :src="emptyStateIllustrationPath"
+        />
+      </div>
+    </div>
+    <div class="col-xs-12">
+      <div class="text-content">
+        <h4>{{ message }}</h4>
+        <p v-html="subMessage"></p>
+      </div>
+    </div>
+  </div>
+</template>

spec/javascripts/roadmap/components/epics_list_empty_spec.js

+import Vue from 'vue';
+
+import epicsListEmptyComponent from 'ee/roadmap/components/epics_list_empty.vue';
+
+import { mockTimeframe, mockSvgPath } from '../mock_data';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = () => {
+  const Component = Vue.extend(epicsListEmptyComponent);
+
+  return mountComponent(Component, {
+    timeframeStart: mockTimeframe[0],
+    timeframeEnd: mockTimeframe[mockTimeframe.length - 1],
+    emptyStateIllustrationPath: mockSvgPath,
+  });
+};
+
+describe('EpicsListEmptyComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('message', () => {
+      it('returns correct empty state message', () => {
+        expect(vm.message).toBe('Epics let you manage your portfolio of projects more efficiently and with less effort');
+      });
+    });
+
+    describe('subMessage', () => {
+      it('returns correct empty state sub-message', () => {
+        expect(vm.subMessage).toBe('To view the roadmap, add a planned start or finish date to one of your epics in this group or its subgroups. Only epics in the past 3 months and the next 3 months are shown – from Nov 1, 2017 to Apr 30, 2018.');
+      });
+    });
+
+    describe('timeframeRange', () => {
+      it('returns correct timeframe startDate and endDate in words', () => {
+        expect(vm.timeframeRange.startDate).toBe('Nov 1, 2017');
+        expect(vm.timeframeRange.endDate).toBe('Apr 30, 2018');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders empty state illustration in image element with provided `emptyStateIllustrationPath`', () => {
+      expect(vm.$el.querySelector('.svg-content img').getAttribute('src')).toBe(vm.emptyStateIllustrationPath);
+    });
+  });
+});