Added some additional specs to check filters

Adds additional feature specs to ensure
filters are applied correctly

Minor refactor specs

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

@@ -43,7 +43,7 @@ export default {
 <template>
   <chart-skeleton-loader v-if="isLoading" size="md" class="gl-my-4 gl-py-4" />
-  <div v-else class="gl-display-flex gl-flex-direction-column">
+  <div v-else class="gl-display-flex gl-flex-direction-column" data-testid="vsa-duration-chart">
     <h4 class="gl-mt-0">{{ s__('CycleAnalytics|Days to completion') }}</h4>
     <stage-dropdown-filter
       v-if="stages.length"
@@ -58,7 +58,7 @@ export default {
       :tooltip-date-format="$options.durationChartTooltipDateFormat"
       :scatter-data="durationChartPlottableData"
     />
-    <div v-else ref="duration-chart-no-data" class="bs-callout bs-callout-info">
+    <div v-else class="bs-callout bs-callout-info">
       {{ error }}
     </div>
   </div>

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

@@ -113,7 +113,7 @@ export default {
 };
 </script>
 <template>
-  <div class="stage-panel-container">
+  <div class="stage-panel-container" data-testid="vsa-stage-table">
     <div
       v-if="isLoading"
       class="gl-display-flex gl-justify-content-center gl-align-items-center gl-w-full"

ee/spec/features/groups/analytics/cycle_analytics/filters_and_data_spec.rb

@@ -8,6 +8,8 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
   let_it_be(:project) { create(:project, :repository, namespace: group, group: group, name: 'Cool fun project') }
   let_it_be(:sub_group) { create(:group, name: 'CA-sub-group', parent: group) }
   let_it_be(:sub_group_project) { create(:project, :repository, namespace: group, group: sub_group, name: 'Cool sub group project') }
+  let_it_be(:group_label1) { create(:group_label, group: group) }
+  let_it_be(:group_label2) { create(:group_label, group: group) }
   let(:milestone) { create(:milestone, project: project) }
   let(:mr) { create_merge_request_closing_issue(user, project, issue, commit_message: "References #{issue.to_reference}") }
@@ -287,6 +289,8 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
     before do
       create_cycle(user, project, issue, mr, milestone, pipeline)
+      create(:labeled_issue, created_at: 5.days.ago, project: create(:project, group: group), labels: [group_label1])
+      create(:labeled_issue, created_at: 3.days.ago, project: create(:project, group: group), labels: [group_label2])
       issue.metrics.update!(first_mentioned_in_commit_at: mr.created_at - 5.hours)
       mr.metrics.update!(first_deployed_to_production_at: mr.created_at + 2.hours, merged_at: mr.created_at + 1.hour)
@@ -297,54 +301,91 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
       select_group
     end
-    dummy_stages = [
+    stages_with_data = [
       { title: 'Issue', description: 'Time before an issue gets scheduled', events_count: 1, median: '5 days' },
-      { title: 'Plan', description: 'Time before an issue starts implementation', events_count: 0, median: 'Not enough data' },
       { title: 'Code', description: 'Time until first merge request', events_count: 1, median: 'about 5 hours' },
-      { title: 'Test', description: 'Total test time for all commits/merges', events_count: 0, median: 'Not enough data' },
       { title: 'Review', description: 'Time between merge request creation and merge/close', events_count: 1, median: 'about 1 hour' },
       { title: 'Staging', description: 'From merge request merge until deploy to production', events_count: 1, median: 'about 1 hour' }
     ]
+    stages_without_data = [
+      { title: 'Plan', description: 'Time before an issue starts implementation', events_count: 0, median: 'Not enough data' },
+      { title: 'Test', description: 'Total test time for all commits/merges', events_count: 0, median: 'Not enough data' }
+    ]
+
     it 'each stage will have median values', :sidekiq_might_not_need_inline do
-      stages = page.all('.stage-nav .stage-median').collect(&:text)
-      stages.each_with_index do |median, index|
-        expect(median).to eq(dummy_stages[index][:median])
-      end
+      stage_medians = page.all('.stage-nav .stage-median').collect(&:text)
+      expect(stage_medians).to eq(["5 days", "Not enough data", "about 5 hours", "Not enough data", "about 1 hour", "about 1 hour"])
     end
     it 'each stage will display the events description when selected', :sidekiq_might_not_need_inline do
-      dummy_stages.each do |stage|
+      stages_without_data.each do |stage|
         select_stage(stage[:title])
-        if stage[:events_count] == 0
-          expect(page).not_to have_selector('.stage-events .events-description')
-        else
-          expect(page.find('.stage-events .events-description').text).to have_text(_(stage[:description]))
-        end
+        expect(page).not_to have_selector('.stage-events .events-description')
+      end
+      stages_with_data.each do |stage|
+        select_stage(stage[:title])
+        expect(page.find('.stage-events .events-description').text).to have_text(_(stage[:description]))
       end
     end
     it 'each stage with events will display the stage events list when selected', :sidekiq_might_not_need_inline do
-      dummy_stages.each do |stage|
+      stages_without_data.each do |stage|
         select_stage(stage[:title])
-        if stage[:events_count] == 0
-          expect(page).not_to have_selector('.stage-events .stage-event-item')
-        else
-          expect(page).to have_selector('.stage-events .stage-event-list')
-          expect(page.all('.stage-events .stage-event-item').length).to eq(stage[:events_count])
-        end
+        expect(page).not_to have_selector('.stage-events .stage-event-item')
+      end
+      stages_with_data.each do |stage|
+        select_stage(stage[:title])
+        expect(page).to have_selector('.stage-events .stage-event-list')
+        expect(page.all('.stage-events .stage-event-item').length).to eq(stage[:events_count])
       end
     end
     it 'each stage will be selectable' do
-      dummy_stages.each do |stage|
+      [].concat(stages_without_data, stages_with_data).each do |stage|
         select_stage(stage[:title])
         expect(page.find('.stage-nav .active .stage-name').text).to eq(stage[:title])
       end
     end
+
+    it 'will have data available' do
+      expect(page.find('[data-testid="vsa-stage-table"]')).not_to have_text("We don't have enough data to show this stage.")
+
+      duration_chart_content = page.find('[data-testid="vsa-duration-chart"]')
+      expect(duration_chart_content).not_to have_text("There is no data available. Please change your selection.")
+      expect(duration_chart_content).to have_text('Total days to completion')
+
+      tasks_by_type_chart_content = page.find('.js-tasks-by-type-chart')
+      expect(tasks_by_type_chart_content).not_to have_text("There is no data available. Please change your selection.")
+    end
+
+    context 'with filters applied' do
+      before do
+        visit "#{group_analytics_cycle_analytics_path(group)}?created_before=2019-12-31&created_after=2019-11-01"
+
+        wait_for_stages_to_load
+      end
+
+      it 'will filter the stage median values' do
+        stage_medians = page.all('.stage-nav .stage-median').collect(&:text)
+
+        expect(stage_medians).to eq(["Not enough data", "Not enough data", "Not enough data", "Not enough data", "Not enough data", "Not enough data"])
+      end
+
+      it 'will filter the data' do
+        expect(page.find('[data-testid="vsa-stage-table"]')).to have_text(s_("We don't have enough data to show this stage."))
+
+        duration_chart_content = page.find('[data-testid="vsa-duration-chart"]')
+        expect(duration_chart_content).not_to have_text('Total days to completion')
+        expect(duration_chart_content).to have_text("There is no data available. Please change your selection.")
+
+        tasks_by_type_chart_content = page.find('.js-tasks-by-type-chart')
+        expect(tasks_by_type_chart_content).to have_text("There is no data available. Please change your selection.")
+      end
+    end
   end
 end

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 exports[`DurationChart renders the duration chart 1`] = `
-"<div class=\\"gl-display-flex gl-flex-direction-column\\">
+"<div data-testid=\\"vsa-duration-chart\\" class=\\"gl-display-flex gl-flex-direction-column\\">
   <h4 class=\\"gl-mt-0\\">Days to completion</h4>
   <stagedropdownfilter-stub stages=\\"[object Object],[object Object],[object Object]\\" label=\\"stage dropdown\\" class=\\"gl-ml-auto\\"></stagedropdownfilter-stub>
   <scatterplot-stub xaxistitle=\\"Date\\" yaxistitle=\\"Total days to completion\\" scatterdata=\\"2019-01-01,29,2019-01-01,2019-01-02,100,2019-01-02\\" medianlinedata=\\"\\" tooltipdateformat=\\"mmm d, yyyy\\"></scatterplot-stub>

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

@@ -59,7 +59,7 @@ function createComponent({
 describe('DurationChart', () => {
   let wrapper;
-  const findNoDataContainer = _wrapper => _wrapper.find({ ref: 'duration-chart-no-data' });
+  const findContainer = _wrapper => _wrapper.find('[data-testid="vsa-duration-chart"]');
   const findScatterPlot = _wrapper => _wrapper.find(Scatterplot);
   const findStageDropdown = _wrapper => _wrapper.find(StageDropdownFilter);
   const findLoader = _wrapper => _wrapper.find(ChartSkeletonLoader);
@@ -133,7 +133,7 @@ describe('DurationChart', () => {
     });
     it('renders the no data available message', () => {
-      expect(findNoDataContainer(wrapper).text()).toEqual(
+      expect(findContainer(wrapper).text()).toContain(
         'There is no data available. Please change your selection.',
       );
     });