Use snapshot testing for group_item_name

Change isFunction to use a simple implementation
instead of importing from lodash

app/assets/javascripts/jira_connect/utils.js

-import { isFunction } from 'lodash';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { ALERT_LOCALSTORAGE_KEY } from './constants';
 
+const isFunction = (fn) => typeof fn === 'function';
+
 /**
  * Persist alert data to localStorage.
  */

spec/frontend/jira_connect/components/__snapshots__/group_item_name_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GroupItemName template matches the snapshot 1`] = `
+<div
+  class="gl-display-flex gl-align-items-center"
+>
+  <gl-icon-stub
+    class="gl-mr-3"
+    name="folder-o"
+    size="16"
+  />
+   
+  <div
+    class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"
+  >
+    <gl-avatar-stub
+      alt="avatar"
+      entityid="0"
+      entityname="Gitlab Org"
+      shape="rect"
+      size="32"
+      src="avatar.png"
+    />
+  </div>
+   
+  <div>
+    <span
+      class="gl-mr-3 gl-text-gray-900! gl-font-weight-bold"
+      data-testid="group-list-item-name"
+    >
+      
+      Gitlab Org
+    
+    </span>
+     
+    <div
+      data-testid="group-list-item-description"
+    >
+      <p
+        class="gl-mt-2! gl-mb-0 gl-text-gray-600"
+      >
+        Open source software to collaborate on code
+      </p>
+    </div>
+  </div>
+</div>
+`;

spec/frontend/jira_connect/components/group_item_name_spec.js

-import { GlAvatar } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import GroupItemName from '~/jira_connect/components/group_item_name.vue';
 import { mockGroup1 } from '../mock_data';
@@ -9,39 +7,22 @@ describe('GroupItemName', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = extendedWrapper(
-      shallowMount(GroupItemName, {
-        propsData: {
-          group: mockGroup1,
-        },
-      }),
-    );
+    wrapper = shallowMount(GroupItemName, {
+      propsData: {
+        group: mockGroup1,
+      },
+    });
   };
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  const findGlAvatar = () => wrapper.findComponent(GlAvatar);
-  const findGroupName = () => wrapper.findByTestId('group-list-item-name');
-  const findGroupDescription = () => wrapper.findByTestId('group-list-item-description');
-
   describe('template', () => {
-    beforeEach(() => {
+    it('matches the snapshot', () => {
       createComponent();
-    });
-
-    it('renders group avatar', () => {
-      expect(findGlAvatar().exists()).toBe(true);
-      expect(findGlAvatar().props('src')).toBe(mockGroup1.avatar_url);
-    });
-
-    it('renders group name', () => {
-      expect(findGroupName().text()).toBe(mockGroup1.full_name);
-    });
 
-    it('renders group description', () => {
-      expect(findGroupDescription().text()).toBe(mockGroup1.description);
+      expect(wrapper.element).toMatchSnapshot();
     });
   });
 });