Clean up code/tests for threat monitoring

- replace div with template
- use extendedWrapper
- add additional tests

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

@@ -170,7 +170,7 @@ export default {
         data-testid="threat-monitoring-statistics-tab"
       >
         <no-environment-empty-state v-if="!isSetUpMaybe" />
-        <div v-else>
+        <template v-else>
           <threat-monitoring-filters />
 
           <threat-monitoring-section
@@ -206,7 +206,7 @@ export default {
             :documentation-path="documentationPath"
             documentation-anchor="container-network-policy"
           />
-        </div>
+        </template>
       </gl-tab>
     </gl-tabs>
   </section>

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

 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ThreatMonitoringAlerts from 'ee/threat_monitoring/components/alerts/alerts.vue';
 import ThreatMonitoringApp from 'ee/threat_monitoring/components/app.vue';
 import ThreatMonitoringFilters from 'ee/threat_monitoring/components/threat_monitoring_filters.vue';
@@ -38,27 +39,29 @@ describe('ThreatMonitoringApp component', () => {
 
     jest.spyOn(store, 'dispatch').mockImplementation();
 
-    wrapper = shallowMount(ThreatMonitoringApp, {
-      propsData: {
-        defaultEnvironmentId,
-        chartEmptyStateSvgPath,
-        emptyStateSvgPath,
-        wafNoDataSvgPath,
-        networkPolicyNoDataSvgPath,
-        newPolicyPath,
-        showUserCallout: true,
-        userCalloutId,
-        userCalloutsPath,
-        ...propsData,
-      },
-      provide: {
-        documentationPath,
-        glFeatures: { threatMonitoringAlerts: false },
-        ...provide,
-      },
-      store,
-      stubs,
-    });
+    wrapper = extendedWrapper(
+      shallowMount(ThreatMonitoringApp, {
+        propsData: {
+          defaultEnvironmentId,
+          chartEmptyStateSvgPath,
+          emptyStateSvgPath,
+          wafNoDataSvgPath,
+          networkPolicyNoDataSvgPath,
+          newPolicyPath,
+          showUserCallout: true,
+          userCalloutId,
+          userCalloutsPath,
+          ...propsData,
+        },
+        provide: {
+          documentationPath,
+          glFeatures: { threatMonitoringAlerts: false },
+          ...provide,
+        },
+        store,
+        stubs,
+      }),
+    );
   };
 
   const findAlert = () => wrapper.find(GlAlert);
@@ -69,8 +72,8 @@ describe('ThreatMonitoringApp component', () => {
   const findNetworkPolicySection = () => wrapper.find({ ref: 'networkPolicySection' });
   const findNoEnvironmentEmptyStates = () => wrapper.findAll(NoEnvironmentEmptyState);
   const findNetworkPolicyTab = () => wrapper.find({ ref: 'networkPolicyTab' });
-  const findAlertTab = () => wrapper.find('[data-testid="threat-monitoring-alerts-tab"]');
-  const findStatisticsTab = () => wrapper.find('[data-testid="threat-monitoring-statistics-tab"]');
+  const findAlertTab = () => wrapper.findByTestId('threat-monitoring-alerts-tab');
+  const findStatisticsTab = () => wrapper.findByTestId('threat-monitoring-statistics-tab');
 
   afterEach(() => {
     wrapper.destroy();
@@ -93,7 +96,7 @@ describe('ThreatMonitoringApp component', () => {
         expect(store.dispatch).not.toHaveBeenCalled();
       });
 
-      it('shows the no environment empty state', () => {
+      it('shows the "no environment" empty state', () => {
         expect(findNoEnvironmentEmptyStates().length).toBe(2);
       });
 

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

 import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState, GlSprintf } from '@gitlab/ui';
+import {
+  EMPTY_STATE_DESCRIPTION,
+  NO_ENVIRONMENT_TITLE,
+} from 'ee/threat_monitoring/components/constants';
 import NoEnvironmentEmptyState from 'ee/threat_monitoring/components/no_environment_empty_state.vue';
 
 const documentationPath = '/docs';
@@ -7,6 +12,9 @@ const emptyStateSvgPath = '/svgs';
 describe('NoEnvironmentEmptyState component', () => {
   let wrapper;
 
+  const findGlEmptyState = () => wrapper.find(GlEmptyState);
+  const findGlSprintf = () => wrapper.find(GlSprintf);
+
   const factory = () => {
     wrapper = shallowMount(NoEnvironmentEmptyState, {
       provide: {
@@ -29,5 +37,18 @@ describe('NoEnvironmentEmptyState component', () => {
     it('matches the snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
+
+    it('shows the GlEmptyState component', () => {
+      expect(findGlEmptyState().exists()).toBe(true);
+      expect(findGlEmptyState().attributes()).toMatchObject({
+        title: NO_ENVIRONMENT_TITLE,
+        svgpath: emptyStateSvgPath,
+      });
+    });
+
+    it('shows the message', () => {
+      expect(findGlSprintf().exists()).toBe(true);
+      expect(findGlSprintf().attributes('message')).toBe(EMPTY_STATE_DESCRIPTION);
+    });
   });
 });