1 files changed, 73 insertions, 25 deletions

diff --git a/spec/features/cycle_analytics_spec.rb b/spec/features/cycle_analytics_spec.rb
index 4fe05abd73b..a2551c72877 100644
--- a/spec/features/cycle_analytics_spec.rb
+++ b/spec/features/cycle_analytics_spec.rb
@@ -15,6 +15,7 @@ RSpec.describe 'Value Stream Analytics', :js, feature_category: :value_stream_ma
   let_it_be(:stage_table_duration_column_header_selector) { '[data-testid="vsa-stage-header-duration"]' }
   let_it_be(:metrics_selector) { "[data-testid='vsa-metrics']" }
   let_it_be(:metric_value_selector) { "[data-testid='displayValue']" }
+  let_it_be(:predefined_date_ranges_dropdown_selector) { '[data-testid="vsa-predefined-date-ranges-dropdown"]' }
 
   let(:stage_table) { find(stage_table_selector) }
   let(:project) { create(:project, :repository) }
@@ -92,6 +93,43 @@ RSpec.describe 'Value Stream Analytics', :js, feature_category: :value_stream_ma
 
       let(:stage_table_events) { stage_table.all(stage_table_event_selector) }
 
+      shared_examples 'filters the issues by date' do
+        it 'can filter the issues by date' do
+          expect(page).to have_selector(stage_table_event_selector)
+
+          set_daterange(from, to)
+
+          expect(page).not_to have_selector(stage_table_event_selector)
+          expect(page).not_to have_selector(stage_table_pagination_selector)
+        end
+      end
+
+      shared_examples 'filters the metrics by date' do
+        it 'can filter the metrics by date' do
+          expect(metrics_values).to match_array(%w[21 2 1])
+
+          set_daterange(from, to)
+
+          expect(metrics_values).to eq(['-'] * 3)
+        end
+      end
+
+      shared_examples 'navigates directly to a value stream stream stage with filters applied' do
+        before do
+          visit project_cycle_analytics_path(project, created_before: '2019-12-31', created_after: '2019-11-01', stage_id: 'code', milestone_title: milestone.title)
+          wait_for_requests
+        end
+
+        it 'can navigate directly to a value stream stream stage with filters applied' do
+          expect(page).to have_selector('.gl-path-active-item-indigo', text: 'Code')
+          expect(page.find(".js-daterange-picker-from input").value).to eq("2019-11-01")
+          expect(page.find(".js-daterange-picker-to input").value).to eq("2019-12-31")
+
+          filter_bar = page.find(stage_filter_bar)
+          expect(filter_bar.find(".gl-filtered-search-token-data-content").text).to eq("%#{milestone.title}")
+        end
+      end
+
       it 'displays metrics' do
         metrics_tiles = page.find(metrics_selector)
 
@@ -121,23 +159,6 @@ RSpec.describe 'Value Stream Analytics', :js, feature_category: :value_stream_ma
         expect_merge_request_to_be_present
       end
 
-      it 'can filter the issues by date' do
-        expect(page).to have_selector(stage_table_event_selector)
-
-        set_daterange(from, to)
-
-        expect(page).not_to have_selector(stage_table_event_selector)
-        expect(page).not_to have_selector(stage_table_pagination_selector)
-      end
-
-      it 'can filter the metrics by date' do
-        expect(metrics_values).to match_array(%w[21 2 1])
-
-        set_daterange(from, to)
-
-        expect(metrics_values).to eq(['-'] * 3)
-      end
-
       it 'can sort records', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/338332' do
         # NOTE: checking that the string changes should suffice
         # depending on the order the tests are run we might run into problems with hard coded strings
@@ -163,16 +184,43 @@ RSpec.describe 'Value Stream Analytics', :js, feature_category: :value_stream_ma
         expect(page).not_to have_text(original_first_title, exact: true)
       end
 
-      it 'can navigate directly to a value stream stream stage with filters applied' do
-        visit project_cycle_analytics_path(project, created_before: '2019-12-31', created_after: '2019-11-01', stage_id: 'code', milestone_title: milestone.title)
-        wait_for_requests
+      context 'when the `vsa_predefined_date_ranges` feature flag is enabled' do
+        before do
+          visit project_cycle_analytics_path(project)
+
+          wait_for_requests
+        end
+
+        it 'shows predefined date ranges dropdown with `Custom` option selected' do
+          page.within(predefined_date_ranges_dropdown_selector) do
+            expect(page).to have_button('Custom')
+          end
+        end
+
+        it_behaves_like 'filters the issues by date'
+
+        it_behaves_like 'filters the metrics by date'
+
+        it_behaves_like 'navigates directly to a value stream stream stage with filters applied'
+      end
+
+      context 'when the `vsa_predefined_date_ranges` feature flag is disabled' do
+        before do
+          stub_feature_flags(vsa_predefined_date_ranges: false)
+          visit project_cycle_analytics_path(project)
+
+          wait_for_requests
+        end
+
+        it 'does not show predefined date ranges dropdown' do
+          expect(page).not_to have_css(predefined_date_ranges_dropdown_selector)
+        end
+
+        it_behaves_like 'filters the issues by date'
 
-        expect(page).to have_selector('.gl-path-active-item-indigo', text: 'Code')
-        expect(page.find(".js-daterange-picker-from input").value).to eq("2019-11-01")
-        expect(page.find(".js-daterange-picker-to input").value).to eq("2019-12-31")
+        it_behaves_like 'filters the metrics by date'
 
-        filter_bar = page.find(stage_filter_bar)
-        expect(filter_bar.find(".gl-filtered-search-token-data-content").text).to eq("%#{milestone.title}")
+        it_behaves_like 'navigates directly to a value stream stream stage with filters applied'
       end
 
       def stage_time_column