Fix refetching stage counts

Updates the cycle_analytics_specs to test
for changes to the date range

Fix value stream filter specs

Adds additional specs for testing the project
value stream filters.

Fixes an issue where the seed data was being
created multiple times in the feature spec, causing
the metric values to increase between each test
case.

app/assets/javascripts/cycle_analytics/index.js

@@ -22,7 +22,6 @@ export default () => {
     milestonesPath,
   } = el.dataset;
 
-  // TODO: should we pass these as params from the ~backend, like group level
   const { now, past } = calculateFormattedDayInPast(DEFAULT_DAYS_TO_DISPLAY);
 
   store.dispatch('initializeVsa', {

app/assets/javascripts/cycle_analytics/store/actions.js

@@ -164,6 +164,7 @@ const refetchStageData = (dispatch) => {
         dispatch('fetchCycleAnalyticsData'),
         dispatch('fetchStageData'),
         dispatch('fetchStageMedians'),
+        dispatch('fetchStageCountValues'),
       ]),
     )
     .finally(() => dispatch('setLoading', false));

spec/features/cycle_analytics_spec.rb

@@ -5,35 +5,40 @@ require 'spec_helper'
 RSpec.describe 'Value Stream Analytics', :js do
   let_it_be(:user) { create(:user) }
   let_it_be(:guest) { create(:user) }
-  let_it_be(:project) { create(:project, :repository) }
   let_it_be(:stage_table_selector) { '[data-testid="vsa-stage-table"]' }
+  let_it_be(:stage_table_event_selector) { '[data-testid="vsa-stage-event"]' }
   let_it_be(:metrics_selector) { "[data-testid='vsa-time-metrics']" }
+  let_it_be(:metric_value_selector) { "[data-testid='displayValue']" }
 
+  let(:stage_table) { page.find(stage_table_selector) }
+  let(:project) { create(:project, :repository) }
   let(:issue) { create(:issue, project: project, created_at: 2.days.ago) }
   let(:milestone) { create(:milestone, project: project) }
   let(:mr) { create_merge_request_closing_issue(user, project, issue, commit_message: "References #{issue.to_reference}") }
   let(:pipeline) { create(:ci_empty_pipeline, status: 'created', project: project, ref: mr.source_branch, sha: mr.source_branch_sha, head_pipeline_of: mr) }
 
+  def metrics_values
+    page.find(metrics_selector).all(metric_value_selector).collect(&:text)
+  end
+
+  def set_daterange(from_date, to_date)
+    page.find(".js-daterange-picker-from input").set(from_date)
+    page.find(".js-daterange-picker-to input").set(to_date)
+    wait_for_all_requests
+  end
+
   context 'as an allowed user' do
     context 'when project is new' do
-      before(:all) do
-        project.add_maintainer(user)
-      end
-
       before do
+        project.add_maintainer(user)
         sign_in(user)
 
         visit project_cycle_analytics_path(project)
         wait_for_requests
       end
 
-      it 'displays metrics' do
-        aggregate_failures 'with relevant values' do
-          expect(new_issues_counter).to have_content('-')
-          expect(commits_counter).to have_content('-')
-          expect(deploys_counter).to have_content('-')
-          expect(deployment_frequency_counter).to have_content('-')
-        end
+      it 'displays metrics with relevant values' do
+        expect(metrics_values).to eq(['-'] * 4)
       end
 
       it 'shows active stage with empty message' do
@@ -43,14 +48,21 @@ RSpec.describe 'Value Stream Analytics', :js do
     end
 
     context "when there's value stream analytics data" do
+      # NOTE: in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68595 travel back
+      # 5 days in time before we create data for these specs, to mitigate some flakiness
+      # So setting the date range to be the last 2 days should skip past the existing data
+      from = 2.days.ago.strftime("%Y-%m-%d")
+      to = 1.day.ago.strftime("%Y-%m-%d")
+
       around do |example|
         travel_to(5.days.ago) { example.run }
       end
 
       before do
         project.add_maintainer(user)
+        create_list(:issue, 2, project: project, created_at: 2.weeks.ago, milestone: milestone)
 
-        @build = create_cycle(user, project, issue, mr, milestone, pipeline)
+        create_cycle(user, project, issue, mr, milestone, pipeline)
         deploy_master(user, project)
 
         issue.metrics.update!(first_mentioned_in_commit_at: issue.metrics.first_associated_with_milestone_at + 1.hour)
@@ -65,6 +77,8 @@ RSpec.describe 'Value Stream Analytics', :js do
 
         sign_in(user)
         visit project_cycle_analytics_path(project)
+
+        wait_for_requests
       end
 
       it 'displays metrics' do
@@ -97,17 +111,21 @@ RSpec.describe 'Value Stream Analytics', :js do
         expect_merge_request_to_be_present
       end
 
-      context "when I change the time period observed" do
-        before do
-          _two_weeks_old_issue = create(:issue, project: project, created_at: 2.weeks.ago)
+      it 'can filter the issues by date' do
+        expect(stage_table.all(stage_table_event_selector).length).to eq(3)
 
-          click_button('Last 30 days')
-          click_link('Last 7 days')
-          wait_for_requests
-        end
+        set_daterange(from, to)
+
+        expect(stage_table.all(stage_table_event_selector).length).to eq(0)
+      end
+
+      it 'can filter the metrics by date' do
+        aggregate_failures 'with relevant values' do
+          expect(metrics_values).to eq(["3.0", "2.0", "1.0", "0.0"])
+
+          set_daterange(from, to)
 
-        it 'shows only relevant data' do
-          expect(new_issue_counter).to have_content('1')
+          expect(metrics_values).to eq(['-'] * 4)
         end
       end
     end
@@ -141,31 +159,6 @@ RSpec.describe 'Value Stream Analytics', :js do
     end
   end
 
-  def find_metric_tile(sel)
-    page.find("#{metrics_selector} #{sel}")
-  end
-
-  # When now use proper pluralization for the metric names, which affects the id
-  def new_issue_counter
-    find_metric_tile("#new-issue")
-  end
-
-  def new_issues_counter
-    find_metric_tile("#new-issues")
-  end
-
-  def commits_counter
-    find_metric_tile("#commits")
-  end
-
-  def deploys_counter
-    find_metric_tile("#deploys")
-  end
-
-  def deployment_frequency_counter
-    find_metric_tile("#deployment-frequency")
-  end
-
   def expect_issue_to_be_present
     expect(find(stage_table_selector)).to have_content(issue.title)
     expect(find(stage_table_selector)).to have_content(issue.author.name)

spec/frontend/cycle_analytics/base_spec.js

@@ -76,7 +76,7 @@ function createComponent({ initialState, initialGetters } = {}) {
 
 const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 const findPathNavigation = () => wrapper.findComponent(PathNavigation);
-const findFilterBar = () => wrapper.findComponent(ValueStreamFilters);
+const findFilters = () => wrapper.findComponent(ValueStreamFilters);
 const findOverviewMetrics = () => wrapper.findComponent(ValueStreamMetrics);
 const findStageTable = () => wrapper.findComponent(StageTable);
 const findStageEvents = () => findStageTable().props('stageEvents');
@@ -126,17 +126,29 @@ describe('Value stream analytics component', () => {
     expect(findStageEvents()).toEqual(selectedStageEvents);
   });
 
-  it('renders the filter bar', () => {
-    expect(findFilterBar().exists()).toBe(true);
+  it('renders the filters', () => {
+    expect(findFilters().exists()).toBe(true);
   });
 
   it('displays the date range selector and hides the project selector', () => {
-    expect(findFilterBar().props()).toMatchObject({
+    expect(findFilters().props()).toMatchObject({
       hasProjectFilter: false,
       hasDateRangeFilter: true,
     });
   });
 
+  it('passes the paths to the filter bar', () => {
+    expect(findFilters().props()).toEqual({
+      groupId,
+      groupPath,
+      endDate: createdBefore,
+      hasDateRangeFilter: true,
+      hasProjectFilter: false,
+      selectedProjects: [],
+      startDate: createdAfter,
+    });
+  });
+
   it('does not render the loading icon', () => {
     expect(findLoadingIcon().exists()).toBe(false);
   });

spec/frontend/cycle_analytics/store/actions_spec.js

@@ -54,6 +54,7 @@ describe('Project Value Stream Analytics actions', () => {
     { type: 'fetchCycleAnalyticsData' },
     { type: 'fetchStageData' },
     { type: 'fetchStageMedians' },
+    { type: 'fetchStageCountValues' },
     { type: 'setLoading', payload: false },
   ];