Added feature specs

Fixes the time_summary fixture spec
to fetch from the correct controller

Minor test fixes

Use gl utility classes

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -14,6 +14,7 @@ import TypeOfWorkCharts from './type_of_work_charts.vue';
 import UrlSyncMixin from '../../shared/mixins/url_sync_mixin';
 import { toYmd } from '../../shared/utils';
 import RecentActivityCard from './recent_activity_card.vue';
+import TimeMetricsCard from './time_metrics_card.vue';
 import StageTableNav from './stage_table_nav.vue';
 import CustomStageForm from './custom_stage_form.vue';
 import PathNavigation from './path_navigation.vue';
@@ -30,6 +31,7 @@ export default {
     StageTable,
     TypeOfWorkCharts,
     RecentActivityCard,
+    TimeMetricsCard,
     CustomStageForm,
     StageTableNav,
     PathNavigation,
@@ -265,12 +267,20 @@ export default {
         "
       />
       <div v-else-if="!errorCode">
-        <div class="js-recent-activity mt-3">
+        <div class="js-recent-activity mt-3 gl-display-flex">
+          <div class="gl-flex-fill-1 gl-pr-2">
+            <time-metrics-card
+              :group-path="currentGroupPath"
+              :additional-params="cycleAnalyticsRequestParams"
+            />
+          </div>
+          <div class="gl-flex-fill-1 gl-pl-2">
             <recent-activity-card
               :group-path="currentGroupPath"
               :additional-params="cycleAnalyticsRequestParams"
             />
           </div>
+        </div>
         <div v-if="isLoading">
           <gl-loading-icon class="mt-4" size="md" />
         </div>

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -203,10 +203,15 @@ describe 'Group Value Stream Analytics', :js do
     context 'summary table', :js do
       it 'will display recent activity' do
         page.within(find('.js-recent-activity')) do
-          expect(page).to have_selector('.card-header')
           expect(page).to have_content(_('Recent Activity'))
         end
       end
+
+      it 'will display time metrics' do
+        page.within(find('.js-recent-activity')) do
+          expect(page).to have_content(_('Time'))
+        end
+      end
     end
 
     context 'stage panel' do
@@ -261,14 +266,14 @@ describe 'Group Value Stream Analytics', :js do
     it_behaves_like 'group value stream analytics'
 
     it 'displays the number of issues' do
-      issue_count = page.all(card_metric_selector).first
+      issue_count = page.all(card_metric_selector)[2]
 
       expect(issue_count).to have_content(n_('New Issue', 'New Issues', 3))
       expect(issue_count).to have_content('3')
     end
 
     it 'displays the number of deploys' do
-      deploys_count = page.all(card_metric_selector)[1]
+      deploys_count = page.all(card_metric_selector)[3]
 
       expect(deploys_count).to have_content(n_('Deploy', 'Deploys', 0))
       expect(deploys_count).to have_content('-')
@@ -280,6 +285,20 @@ describe 'Group Value Stream Analytics', :js do
       expect(deployment_frequency).to have_content(_('Deployment Frequency'))
       expect(deployment_frequency).to have_content('-')
     end
+
+    it 'displays the lead time' do
+      lead_time = page.all(card_metric_selector).first
+
+      expect(lead_time).to have_content(n_('Lead time', 'Lead time', 10))
+      expect(lead_time).to have_content('10')
+    end
+
+    it 'displays the cycle time' do
+      cycle_time = page.all(card_metric_selector)[1]
+
+      expect(cycle_time).to have_content(n_('Cycle time', 'Cycle time', 0))
+      expect(cycle_time).to have_content('-')
+    end
   end
 
   context 'with a sub group selected' do

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/time_metrics_card_spec.js.snap

@@ -21,21 +21,6 @@ exports[`TimeMetricsCard matches the snapshot 1`] = `
     <div
       class="d-flex"
     >
-      <div
-        class="js-metric-card-item flex-grow text-center"
-      >
-        <h3
-          class="my-2"
-        >
-          3
-        </h3>
-         
-        <p
-          class="text-secondary gl-font-sm mb-2"
-        >
-          New Issues
-        </p>
-      </div>
       <div
         class="js-metric-card-item flex-grow text-center"
       >
@@ -48,7 +33,7 @@ exports[`TimeMetricsCard matches the snapshot 1`] = `
         <p
           class="text-secondary gl-font-sm mb-2"
         >
-          Deploys
+          Lead Time
         </p>
       </div>
       <div
@@ -63,7 +48,7 @@ exports[`TimeMetricsCard matches the snapshot 1`] = `
         <p
           class="text-secondary gl-font-sm mb-2"
         >
-          Deployment Frequency
+          Cycle Time
         </p>
       </div>
     </div>

ee/spec/frontend/analytics/cycle_analytics/components/time_metrics_card_spec.js

@@ -43,8 +43,8 @@ describe('TimeMetricsCard', () => {
   describe('with data', () => {
     it.each`
       metric          | value  | index
-      ${'Lead time'}  | ${'2 days'}   | ${0}
-      ${'Cycle time'} | ${'1.5 days'} | ${1}
+      ${'Lead Time'}  | ${'-'} | ${0}
+      ${'Cycle Time'} | ${'-'} | ${1}
     `('Renders the $metric', ({ metric, value, index }) => {
       const card = findMetricCards().at(index);
       expect(card.html()).toContain(metric);

ee/spec/frontend/fixtures/analytics.rb

@@ -203,6 +203,21 @@ describe 'Analytics (JavaScript fixtures)', :sidekiq_inline do
 
       expect(response).to be_successful
     end
+  end
+
+  describe Analytics::CycleAnalytics::TimeSummaryController, type: :controller do
+    render_views
+
+    let(:params) { { created_after: 3.months.ago, created_before: Time.now, group_id: group.full_path } }
+
+    before do
+      stub_feature_flags(Gitlab::Analytics::CYCLE_ANALYTICS_FEATURE_FLAG => true)
+      stub_licensed_features(cycle_analytics_for_groups: true)
+
+      prepare_cycle_analytics_data
+
+      sign_in(user)
+    end
 
     it 'analytics/value_stream_analytics/time_summary.json' do
       get(:show, params: params, format: :json)