Add unit tests with feature flag for license compliance vue

* Add unit tests related to license-check approval group

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

@@ -152,6 +152,5 @@ export default {
         </gl-tab>
       </gl-tabs>
     </template>
-
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue

@@ -49,8 +49,8 @@ export default {
       return this.isLoadingManagedLicenses && !this.hasPendingLicenses;
     },
     isTooltipEnabled() {
-      return gon.features.licenseComplianceDeniesMr;
-    }
+      return Boolean(gon?.features?.licenseComplianceDeniesMr);
+    },
   },
   watch: {
     isAddingNewLicense(isAddingNewLicense) {
@@ -116,34 +116,38 @@ export default {
             {{ tableHeaders[0].label }}
 
             <gl-icon
+              v-if="isTooltipEnabled"
               ref="reportInfo"
               name="question"
               class="text-info ml-1"
               :aria-label="__('help')"
               :size="14"
-              :v-if="isTooltipEnabled"
             />
             <gl-popover
+              v-if="isTooltipEnabled"
               :target="() => $refs.reportInfo.$el"
               placement="bottom"
               triggers="click blur"
-              :title="title"
+              :css-classes="['mt-3']"
             >
-              <h5>Allowed</h5>
-              <span class="text-secondary"> {{s__('Licenses|Acceptable license to be used in the project')}}</span>
-              <h5>Denied</h5>
-              <span class="text-secondary"> {{s__('Licenses|Dissallow Merge request if detected and will instruct the developer to remove')}}</span>
-            </gl-popover>            
-          </div>     
+              <h5>{{ __('Allowed') }}</h5>
+              <span class="text-secondary">
+                {{ s__('Licenses|Acceptable license to be used in the project') }}</span
+              >
+              <h5>{{ __('Denied') }}</h5>
+              <span class="text-secondary">
+                {{
+                  s__(
+                    'Licenses|Dissallow Merge request if detected and will instruct the developer to remove',
+                  )
+                }}</span
+              >
+            </gl-popover>
+          </div>
 
-          <div
-            class="table-section"
-            :class="tableHeaders[1].className"
-            role="rowheader"
-          >
-             {{ tableHeaders[1].label }}
+          <div class="table-section" :class="tableHeaders[1].className" role="rowheader">
+            {{ tableHeaders[1].label }}
           </div>
-  
         </template>
       </template>
 

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

@@ -323,5 +323,4 @@ describe('Project Licenses', () => {
       });
     });
   });
-
 });

ee/spec/frontend/vue_shared/license_compliance/license_management_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon, GlPopover } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import LicenseManagement from 'ee/vue_shared/license_compliance/license_management.vue';
@@ -69,6 +69,10 @@ const createComponent = ({ state, getters, props, actionMocks, isAdmin, options
 };
 
 describe('License Management', () => {
+  beforeEach(() => {
+    window.gon = { features: { licenseComplianceDeniesMr: false } };
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -190,6 +194,34 @@ describe('License Management', () => {
           expect(wrapper.find(AdminLicenseManagementRow).exists()).toBe(true);
         });
       });
+
+      describe('when licenseComplianceDeniesMr feature flag enabled', () => {
+        it('should not show the developer only tooltip', () => {
+          window.gon.features.licenseComplianceDeniesMr = true;
+
+          createComponent({
+            state: { isLoadingManagedLicenses: false },
+            isAdmin: true,
+          });
+
+          expect(wrapper.find(GlIcon).exists()).toBe(false);
+          expect(wrapper.find(GlPopover).exists()).toBe(false);
+        });
+      });
+
+      describe('when licenseComplianceDeniesMr feature flag disabled', () => {
+        it('should not show the developer only tooltip', () => {
+          window.gon.features.licenseComplianceDeniesMr = false;
+
+          createComponent({
+            state: { isLoadingManagedLicenses: false },
+            isAdmin: true,
+          });
+
+          expect(wrapper.find(GlIcon).exists()).toBe(false);
+          expect(wrapper.find(GlPopover).exists()).toBe(false);
+        });
+      });
     });
 
     describe('when developer', () => {
@@ -228,6 +260,34 @@ describe('License Management', () => {
           expect(wrapper.find(AdminLicenseManagementRow).exists()).toBe(false);
         });
       });
+
+      describe('when licenseComplianceDeniesMr feature flag enabled', () => {
+        it('should show the developer only tooltip', () => {
+          window.gon.features.licenseComplianceDeniesMr = true;
+
+          createComponent({
+            state: { isLoadingManagedLicenses: false },
+            isAdmin: false,
+          });
+
+          expect(wrapper.find(GlIcon).exists()).toBe(true);
+          expect(wrapper.find(GlPopover).exists()).toBe(true);
+        });
+      });
+
+      describe('when licenseComplianceDeniesMr feature flag disabled', () => {
+        it('should not show the developer only tooltip', () => {
+          window.gon.features.licenseComplianceDeniesMr = false;
+
+          createComponent({
+            state: { isLoadingManagedLicenses: false },
+            isAdmin: false,
+          });
+
+          expect(wrapper.find(GlIcon).exists()).toBe(false);
+          expect(wrapper.find(GlPopover).exists()).toBe(false);
+        });
+      });
     });
   });
 });