Refactor threat monitoring section tests

- make them more readable and organized
- remove useless snapshot tests

ee/app/assets/javascripts/threat_monitoring/components/threat_monitoring_section.vue

@@ -120,19 +120,19 @@ export default {
 
 <template>
   <div class="my-3">
-    <h4 ref="chartTitle" class="h4">{{ title }}</h4>
+    <h4 data-testid="chartTitle" class="h4">{{ title }}</h4>
 
     <loading-skeleton v-if="isLoading" class="mt-3" />
 
     <template v-else-if="hasHistory">
-      <h5 ref="chartSubtitle" class="h5">{{ subtitle }}</h5>
+      <h5 data-testid="chartSubtitle" class="h5">{{ subtitle }}</h5>
       <statistics-summary class="mt-3" :data="summary" />
       <statistics-history class="mt-3" :data="chart" :y-legend="yLegend" />
     </template>
 
     <gl-empty-state
       v-else
-      ref="chartEmptyState"
+      data-testid="chartEmptyState"
       :title="chartEmptyStateTitle"
       :description="chartEmptyStateText"
       :svg-path="chartEmptyStateSvgPath"

ee/spec/frontend/threat_monitoring/components/__snapshots__/threat_monitoring_section_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ThreatMonitoringSection component given the statistics are loading shows the loading skeleton 1`] = `
-<loading-skeleton-stub
-  class="mt-3"
-/>
-`;
-
-exports[`ThreatMonitoringSection component given there is a default environment with no data to display shows the chart empty state 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  description="Empty Text"
-  primarybuttonlink="documentation_path#anchor"
-  primarybuttontext="Learn more"
-  svgpath="svg_path"
-  title="Empty Title"
-/>
-`;

ee/spec/frontend/threat_monitoring/components/threat_monitoring_section_spec.js

-import { shallowMount } from '@vue/test-utils';
 import LoadingSkeleton from 'ee/threat_monitoring/components/loading_skeleton.vue';
 import StatisticsHistory from 'ee/threat_monitoring/components/statistics_history.vue';
 import StatisticsSummary from 'ee/threat_monitoring/components/statistics_summary.vue';
 import ThreatMonitoringSection from 'ee/threat_monitoring/components/threat_monitoring_section.vue';
 import createStore from 'ee/threat_monitoring/store';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import { mockNominalHistory, mockAnomalousHistory } from '../mocks/mock_data';
 
@@ -11,6 +11,8 @@ describe('ThreatMonitoringSection component', () => {
   let store;
   let wrapper;
 
+  const title = 'Test Title';
+
   const timeRange = {
     from: new Date(Date.UTC(2020, 2, 6)).toISOString(),
     to: new Date(Date.UTC(2020, 2, 13)).toISOString(),
@@ -34,10 +36,10 @@ describe('ThreatMonitoringSection component', () => {
 
     jest.spyOn(store, 'dispatch').mockImplementation(() => Promise.resolve());
 
-    wrapper = shallowMount(ThreatMonitoringSection, {
+    wrapper = shallowMountExtended(ThreatMonitoringSection, {
       propsData: {
         storeNamespace: 'threatMonitoringNetworkPolicy',
-        title: 'Container Network Policy',
+        title,
         subtitle: 'Requests',
         nominalTitle: 'Total Requests',
         anomalousTitle: 'Anomalous Requests',
@@ -53,23 +55,37 @@ describe('ThreatMonitoringSection component', () => {
     });
   };
 
-  const findLoadingSkeleton = () => wrapper.find(LoadingSkeleton);
-  const findStatisticsHistory = () => wrapper.find(StatisticsHistory);
-  const findStatisticsSummary = () => wrapper.find(StatisticsSummary);
-  const findChartEmptyState = () => wrapper.find({ ref: 'chartEmptyState' });
-  const findChartTitle = () => wrapper.find({ ref: 'chartTitle' });
-  const findChartSubtitle = () => wrapper.find({ ref: 'chartSubtitle' });
+  const findLoadingSkeleton = () => wrapper.findComponent(LoadingSkeleton);
+  const findStatisticsHistory = () => wrapper.findComponent(StatisticsHistory);
+  const findStatisticsSummary = () => wrapper.findComponent(StatisticsSummary);
+  const findChartEmptyState = () => wrapper.findByTestId('chartEmptyState');
+  const findChartTitle = () => wrapper.findByTestId('chartTitle');
+  const findChartSubtitle = () => wrapper.findByTestId('chartSubtitle');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
+  describe('given there is data to display', () => {
     beforeEach(() => {
       factory({});
     });
 
-  afterEach(() => {
-    wrapper.destroy();
+    it('shows the chart title', () => {
+      const chartTitle = findChartTitle();
+      expect(chartTitle.exists()).toBe(true);
+      expect(chartTitle.text()).toBe(title);
     });
 
-  it('does not show the loading skeleton', () => {
-    expect(findLoadingSkeleton().exists()).toBe(false);
+    it.each`
+      component               | status                | findComponent            | state
+      ${'loading skeleton'}   | ${'does not display'} | ${findLoadingSkeleton}   | ${false}
+      ${'chart subtitle'}     | ${'does display'}     | ${findChartSubtitle}     | ${true}
+      ${'statistics summary'} | ${'does display'}     | ${findStatisticsSummary} | ${true}
+      ${'statistics history'} | ${'does display'}     | ${findStatisticsHistory} | ${true}
+      ${'chart empty state'}  | ${'does not display'} | ${findChartEmptyState}   | ${false}
+    `('$status the $component', async ({ findComponent, state }) => {
+      expect(findComponent().exists()).toBe(state);
     });
 
     it('sets data to the summary', () => {
@@ -100,18 +116,6 @@ describe('ThreatMonitoringSection component', () => {
       expect(chart.props('yLegend')).toEqual('Requests');
     });
 
-  it('shows the chart title', () => {
-    expect(findChartTitle().exists()).toBe(true);
-  });
-
-  it('shows the chart subtitle', () => {
-    expect(findChartSubtitle().exists()).toBe(true);
-  });
-
-  it('does not show the chart empty state', () => {
-    expect(findChartEmptyState().exists()).toBe(false);
-  });
-
     it('fetches statistics', () => {
       expect(store.dispatch).toHaveBeenCalledWith('threatMonitoringNetworkPolicy/fetchStatistics');
     });
@@ -129,6 +133,7 @@ describe('ThreatMonitoringSection component', () => {
 
       expect(store.dispatch).toHaveBeenCalledWith('threatMonitoringNetworkPolicy/fetchStatistics');
     });
+  });
 
   describe('given the statistics are loading', () => {
     beforeEach(() => {
@@ -137,25 +142,15 @@ describe('ThreatMonitoringSection component', () => {
       });
     });
 
-    it('shows the loading skeleton', () => {
-      expect(findLoadingSkeleton().element).toMatchSnapshot();
-    });
-
-    it('does not show the summary or history statistics', () => {
-      expect(findStatisticsSummary().exists()).toBe(false);
-      expect(findStatisticsHistory().exists()).toBe(false);
-    });
-
-    it('shows the chart title', () => {
-      expect(findChartTitle().exists()).toBe(true);
-    });
-
-    it('does not show the chart subtitle', () => {
-      expect(findChartSubtitle().exists()).toBe(false);
-    });
-
-    it('does not show the chart empty state', () => {
-      expect(findChartEmptyState().exists()).toBe(false);
+    it.each`
+      component               | status                | findComponent            | state
+      ${'loading skeleton'}   | ${'does display'}     | ${findLoadingSkeleton}   | ${true}
+      ${'chart subtitle'}     | ${'does not display'} | ${findChartSubtitle}     | ${false}
+      ${'statistics summary'} | ${'does not display'} | ${findStatisticsSummary} | ${false}
+      ${'statistics history'} | ${'does not display'} | ${findStatisticsHistory} | ${false}
+      ${'chart empty state'}  | ${'does not display'} | ${findChartEmptyState}   | ${false}
+    `('$status the $component', async ({ findComponent, state }) => {
+      expect(findComponent().exists()).toBe(state);
     });
   });
 
@@ -172,25 +167,15 @@ describe('ThreatMonitoringSection component', () => {
       });
     });
 
-    it('does not show the loading skeleton', () => {
-      expect(findLoadingSkeleton().exists()).toBe(false);
-    });
-
-    it('does not show the summary or history statistics', () => {
-      expect(findStatisticsSummary().exists()).toBe(false);
-      expect(findStatisticsHistory().exists()).toBe(false);
-    });
-
-    it('shows the chart title', () => {
-      expect(findChartTitle().exists()).toBe(true);
-    });
-
-    it('does not show the chart subtitle', () => {
-      expect(findChartSubtitle().exists()).toBe(false);
-    });
-
-    it('shows the chart empty state', () => {
-      expect(findChartEmptyState().element).toMatchSnapshot();
+    it.each`
+      component               | status                | findComponent            | state
+      ${'loading skeleton'}   | ${'does not display'} | ${findLoadingSkeleton}   | ${false}
+      ${'chart subtitle'}     | ${'does not display'} | ${findChartSubtitle}     | ${false}
+      ${'statistics summary'} | ${'does not display'} | ${findStatisticsSummary} | ${false}
+      ${'statistics history'} | ${'does not display'} | ${findStatisticsHistory} | ${false}
+      ${'chart empty state'}  | ${'does not display'} | ${findChartEmptyState}   | ${true}
+    `('$status the $component', async ({ findComponent, state }) => {
+      expect(findComponent().exists()).toBe(state);
     });
   });
 });