Add specs for hidden groups item component

* Make sure we display the correct icons
* Check for the correct text
* Test that the help-tooltip is wired up

ee/app/assets/javascripts/approvals/components/hidden_groups_item.vue

@@ -14,7 +14,7 @@ export default {
 <template>
   <div class="d-flex align-items-center">
     <div class="square s24 d-flex-center mr-2 text-tertiary">
-      <gl-icon name="folder-o" :size="16" />
+      <gl-icon name="folder-o" :size="16" data-testid="folder-icon" />
     </div>
     <span>{{ __('Private group(s)') }}</span>
     <gl-icon
@@ -23,6 +23,7 @@ export default {
       class="ml-1 gl-text-gray-500"
       name="question-o"
       :size="16"
+      data-testid="help-icon"
     />
   </div>
 </template>

ee/spec/frontend/approvals/components/hidden_groups_item_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue';
 
 const localVue = createLocalVue();
@@ -7,20 +10,48 @@ describe('Approvals HiddenGroupsItem', () => {
   let wrapper;
 
   const factory = (options = {}) => {
-    wrapper = shallowMount(localVue.extend(HiddenGroupsItem), {
-      ...options,
-      localVue,
-    });
+    wrapper = extendedWrapper(
+      shallowMount(localVue.extend(HiddenGroupsItem), {
+        ...options,
+        localVue,
+        directives: {
+          GlTooltip: createMockDirective(),
+        },
+      }),
+    );
   };
 
+  const findFolderIcon = () => wrapper.findByTestId('folder-icon');
+  const findHelpIcon = () => wrapper.findByTestId('help-icon');
+
+  beforeEach(() => {
+    factory();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('renders successfully', () => {
-    factory();
+  it('contains the correct text', () => {
+    expect(wrapper.text()).toContain('Private group(s)');
+  });
+
+  it('shows a folder icon', () => {
+    const folderIcon = findFolderIcon();
+
+    expect(folderIcon.is(GlIcon)).toBe(true);
+    expect(folderIcon.props('name')).toBe('folder-o');
+  });
+
+  it('shows a help-icon with a tooltip', () => {
+    const helpIcon = findHelpIcon();
+    const tooltip = getBinding(helpIcon.element, 'gl-tooltip');
+
+    expect(helpIcon.is(GlIcon)).toBe(true);
+    expect(helpIcon.props('name')).toBe('question-o');
 
-    expect(wrapper.exists()).toBe(true);
+    expect(tooltip).not.toBe(undefined);
+    expect(helpIcon.attributes('title')).toBe(`One or more groups that you don't have access to.`);
   });
 });