1 files changed, 33 insertions, 5 deletions

diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index 0a2b18caf25..cbdf7f53913 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -1,4 +1,4 @@
-import { GlTab } from '@gitlab/ui';
+import { GlTab, GlTabs } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
@@ -77,6 +77,7 @@ describe('App component', () => {
   const findMainHeading = () => wrapper.find('h1');
   const findTab = () => wrapper.findComponent(GlTab);
   const findTabs = () => wrapper.findAllComponents(GlTab);
+  const findGlTabs = () => wrapper.findComponent(GlTabs);
   const findByTestId = (id) => wrapper.findByTestId(id);
   const findFeatureCards = () => wrapper.findAllComponents(FeatureCard);
   const findTrainingProviderList = () => wrapper.findComponent(TrainingProviderList);
@@ -154,6 +155,14 @@ describe('App component', () => {
         expect(findTab().exists()).toBe(true);
       });
 
+      it('passes the `sync-active-tab-with-query-params` prop', () => {
+        expect(findGlTabs().props('syncActiveTabWithQueryParams')).toBe(true);
+      });
+
+      it('lazy loads each tab', () => {
+        expect(findGlTabs().attributes('lazy')).not.toBe(undefined);
+      });
+
       it('renders correct amount of tabs', () => {
         expect(findTabs()).toHaveLength(expectedTabs.length);
       });
@@ -161,6 +170,10 @@ describe('App component', () => {
       it.each(expectedTabs)('renders the %s tab', (tabName) => {
         expect(findByTestId(`${tabName}-tab`).exists()).toBe(true);
       });
+
+      it.each(expectedTabs)('has the %s query-param-value', (tabName) => {
+        expect(findByTestId(`${tabName}-tab`).props('queryParamValue')).toBe(tabName);
+      });
     });
 
     it('renders right amount of feature cards for given props with correct props', () => {
@@ -182,10 +195,6 @@ describe('App component', () => {
       expect(findComplianceViewHistoryLink().exists()).toBe(false);
       expect(findSecurityViewHistoryLink().exists()).toBe(false);
     });
-
-    it('renders TrainingProviderList component', () => {
-      expect(findTrainingProviderList().exists()).toBe(true);
-    });
   });
 
   describe('Manage via MR Error Alert', () => {
@@ -432,6 +441,25 @@ describe('App component', () => {
     });
   });
 
+  describe('Vulnerability management', () => {
+    beforeEach(() => {
+      createComponent({
+        augmentedSecurityFeatures: securityFeaturesMock,
+        augmentedComplianceFeatures: complianceFeaturesMock,
+      });
+    });
+
+    it('renders TrainingProviderList component', () => {
+      expect(findTrainingProviderList().exists()).toBe(true);
+    });
+
+    it('renders security training description', () => {
+      const vulnerabilityManagementTab = wrapper.findByTestId('vulnerability-management-tab');
+
+      expect(vulnerabilityManagementTab.text()).toContain(i18n.securityTrainingDescription);
+    });
+  });
+
   describe('when secureVulnerabilityTraining feature flag is disabled', () => {
     beforeEach(() => {
       createComponent({