Unit test feedback

* Refactor to not use array of table headers
* Use describe.each
* Add selector helpers

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

@@ -30,10 +30,6 @@ export default {
   data() {
     return {
       formIsOpen: false,
-      tableHeaders: [
-        { className: 'section-70', label: s__('Licenses|Policy') },
-        { className: 'section-30', label: s__('Licenses|Name') },
-      ],
     };
   },
   computed: {
@@ -109,13 +105,8 @@ export default {
         </div>
 
         <template v-else>
-          <div
-            class="table-section gl-d-flex gl-pl-2"
-            :class="tableHeaders[0].className"
-            role="rowheader"
-          >
-            {{ tableHeaders[0].label }}
-
+          <div class="table-section gl-d-flex gl-pl-2 section-70" role="rowheader">
+            {{ s__('Licenses|Policy') }}
             <gl-icon
               v-if="isTooltipEnabled"
               ref="reportInfo"
@@ -146,8 +137,8 @@ export default {
             </gl-popover>
           </div>
 
-          <div class="table-section" :class="tableHeaders[1].className" role="rowheader">
-            {{ tableHeaders[1].label }}
+          <div class="table-section section-30" role="rowheader">
+            {{ s__('Licenses|Name') }}
           </div>
         </template>
       </template>

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

@@ -29,6 +29,8 @@ const PaginatedListMock = {
 };
 
 const noop = () => {};
+const findIcon = () => wrapper.find(GlIcon);
+const findPopover = () => wrapper.find(GlPopover);
 
 const createComponent = ({ state, getters, props, actionMocks, isAdmin, options, provide }) => {
   const fakeStore = new Vuex.Store({
@@ -205,8 +207,8 @@ describe('License Management', () => {
             },
           });
 
-          expect(wrapper.find(GlIcon).exists()).toBe(false);
-          expect(wrapper.find(GlPopover).exists()).toBe(false);
+          expect(findIcon().exists()).toBe(false);
+          expect(findPopover().exists()).toBe(false);
         });
       });
 
@@ -217,8 +219,8 @@ describe('License Management', () => {
             isAdmin: true,
           });
 
-          expect(wrapper.find(GlIcon).exists()).toBe(false);
-          expect(wrapper.find(GlPopover).exists()).toBe(false);
+          expect(findIcon().exists()).toBe(false);
+          expect(findPopover().exists()).toBe(false);
         });
       });
     });
@@ -260,32 +262,23 @@ describe('License Management', () => {
         });
       });
 
-      describe('when licenseComplianceDeniesMr feature flag enabled', () => {
+      describe.each([true, false])(
+        'when licenseComplianceDeniesMr feature flag is %p',
+        licenseComplianceDeniesMr => {
           it('should show the developer only tooltip', () => {
             createComponent({
               state: { isLoadingManagedLicenses: false },
               isAdmin: false,
               provide: {
-              glFeatures: { licenseComplianceDeniesMr: true },
+                glFeatures: { licenseComplianceDeniesMr },
               },
             });
 
-          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', () => {
-          createComponent({
-            state: { isLoadingManagedLicenses: false },
-            isAdmin: false,
-          });
-
-          expect(wrapper.find(GlIcon).exists()).toBe(false);
-          expect(wrapper.find(GlPopover).exists()).toBe(false);
-        });
+            expect(findIcon().exists()).toBe(licenseComplianceDeniesMr);
+            expect(findPopover().exists()).toBe(licenseComplianceDeniesMr);
           });
+        },
+      );
     });
   });
 });