Add unit tests for unconfigured_security_rows and i18n changes

- Add vue component unit tests
- Update text copy and i18n artifacts
- Run prettier and linter

ee/app/assets/javascripts/approvals/components/security_configuration/unconfigured_security_rules.vue

@@ -34,20 +34,20 @@ export default {
         {
           name: VULNERABILITY_CHECK_NAME,
           description: s__(
-            'SecurityApprovals|One or more of the security scanners must be enabled %{linkStart}more information%{linkEnd}',
+            'SecurityApprovals|One or more of the security scanners must be enabled. %{linkStart}More information%{linkEnd}',
           ),
           enableDescription: s__(
-            'SecurityApprovals|Requires approval for vulnerabilties of Critical, High, or Unknown severity %{linkStart}more information%{linkEnd}',
+            'SecurityApprovals|Requires approval for vulnerabilties of Critical, High, or Unknown severity. %{linkStart}More information%{linkEnd}',
           ),
           docsPath: this.vulnerabilityCheckHelpPagePath,
         },
         {
           name: LICENSE_CHECK_NAME,
           description: s__(
-            'SecurityApprovals|License Scanning must be enabled %{linkStart}more information%{linkEnd}',
+            'SecurityApprovals|License Scanning must be enabled. %{linkStart}More information%{linkEnd}',
           ),
           enableDescription: s__(
-            'SecurityApprovals|Requires license policy rules for licenses of Allowed, or Denied %{linkStart}more information%{linkEnd}',
+            'SecurityApprovals|Requires license policy rules for licenses of Allowed, or Denied. %{linkStart}More information%{linkEnd}',
           ),
           docsPath: this.licenseCheckHelpPagePath,
         },

ee/spec/frontend/approvals/components/security_configuration/unconfigured_security_rule_spec.js

 import Vuex from 'vuex';
 import { LICENSE_CHECK_NAME, VULNERABILITY_CHECK_NAME } from 'ee/approvals/constants';
 import UnconfiguredSecurityRule from 'ee/approvals/components/security_configuration/unconfigured_security_rule.vue';
-import createStore from 'ee/security_dashboard/store';
 import { mount, createLocalVue } from '@vue/test-utils';
 import { GlSkeletonLoading, GlSprintf, GlButton } from '@gitlab/ui';
 
@@ -10,7 +9,6 @@ localVue.use(Vuex);
 
 describe('UnconfiguredSecurityRule component', () => {
   let wrapper;
-  let store;
   let description;
 
   const findDescription = () => wrapper.find(GlSprintf);
@@ -90,20 +88,16 @@ describe('UnconfiguredSecurityRule component', () => {
     },
   ];
 
-  const createWrapper = (props = {}) => {
+  const createWrapper = (props = {}, options = {}) => {
     wrapper = mount(UnconfiguredSecurityRule, {
       localVue,
-      store,
       propsData: {
         ...props,
       },
+      ...options,
     });
   };
 
-  beforeEach(() => {
-    store = createStore();
-  });
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -145,13 +139,24 @@ describe('UnconfiguredSecurityRule component', () => {
     });
 
     describe('without a Vulnerability-Check rule defined', () => {
+      let enableButtonHandler;
+
       beforeEach(() => {
-        createWrapper({
-          rules: [],
-          configuration: { features },
-          matchRule: vulnCheckMatchRule,
-          isLoading: false,
-        });
+        enableButtonHandler = jest.fn();
+
+        createWrapper(
+          {
+            rules: [],
+            configuration: { features },
+            matchRule: vulnCheckMatchRule,
+            isLoading: false,
+          },
+          {
+            listeners: {
+              enable: enableButtonHandler,
+            },
+          },
+        );
         description = findDescription();
       });
 
@@ -164,6 +169,11 @@ describe('UnconfiguredSecurityRule component', () => {
         expect(description.text()).toBe(vulnCheckMatchRule.enableDescription);
         expect(findButton().exists()).toBe(true);
       });
+
+      it('should emit the "enable" event when the button is clicked', () => {
+        findButton().trigger('click');
+        expect(enableButtonHandler).toHaveBeenCalled();
+      });
     });
   });
 

ee/spec/frontend/approvals/components/security_configuration/unconfigured_security_rules_spec.js

+import Vuex from 'vuex';
+import UnconfiguredSecurityRules from 'ee/approvals/components/security_configuration/unconfigured_security_rules.vue';
+import UnconfiguredSecurityRule from 'ee/approvals/components/security_configuration/unconfigured_security_rule.vue';
+import { createStoreOptions } from 'ee/approvals/stores';
+import projectSettingsModule from 'ee/approvals/stores/modules/project_settings';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('UnconfiguredSecurityRules component', () => {
+  let wrapper;
+  let store;
+  let mockFetch;
+
+  const TEST_PROJECT_ID = '7';
+
+  const createWrapper = (props = {}) => {
+    mockFetch = jest.fn();
+
+    wrapper = shallowMount(UnconfiguredSecurityRules, {
+      localVue,
+      store,
+      propsData: {
+        ...props,
+      },
+      methods: {
+        fetchSecurityConfiguration: mockFetch,
+      },
+      provide: {
+        vulnerabilityCheckHelpPagePath: '',
+        licenseCheckHelpPagePath: '',
+      },
+    });
+  };
+
+  beforeEach(() => {
+    store = new Vuex.Store(
+      createStoreOptions(projectSettingsModule(), { projectId: TEST_PROJECT_ID }),
+    );
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when created ', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should fetch the security configuration', () => {
+      expect(mockFetch).toHaveBeenCalled();
+    });
+
+    it('should render a unconfigured-security-rule component for every security rule ', () => {
+      expect(wrapper.findAll(UnconfiguredSecurityRule).length).toBe(2);
+    });
+  });
+});

locale/gitlab.pot

@@ -21348,16 +21348,16 @@ msgstr ""
 msgid "Security report is out of date. Run %{newPipelineLinkStart}a new pipeline%{newPipelineLinkEnd} for the target branch (%{targetBranchName})"
 msgstr ""
 
-msgid "SecurityApprovals|License Scanning must be enabled %{linkStart}more information%{linkEnd}"
+msgid "SecurityApprovals|License Scanning must be enabled. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
-msgid "SecurityApprovals|One or more of the security scanners must be enabled %{linkStart}more information%{linkEnd}"
+msgid "SecurityApprovals|One or more of the security scanners must be enabled. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
-msgid "SecurityApprovals|Requires approval for vulnerabilties of Critical, High, or Unknown severity %{linkStart}more information%{linkEnd}"
+msgid "SecurityApprovals|Requires approval for vulnerabilties of Critical, High, or Unknown severity. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
-msgid "SecurityApprovals|Requires license policy rules for licenses of Allowed, or Denied %{linkStart}more information%{linkEnd}"
+msgid "SecurityApprovals|Requires license policy rules for licenses of Allowed, or Denied. %{linkStart}More information%{linkEnd}"
 msgstr ""
 
 msgid "SecurityConfiguration|An error occurred while creating the merge request."