Add find and create helpers to user_popover_spec

spec/frontend/vue_shared/components/user_popover/user_popover_spec.js

@@ -29,23 +29,40 @@ describe('User Popover Component', () => {
     wrapper.destroy();
   });
 
+  const findUserStatus = () => wrapper.find('.js-user-status');
+  const findTarget = () => document.querySelector('.js-user-link');
+
+  const createWrapper = (props = {}, options = {}) => {
+    wrapper = shallowMount(UserPopover, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        target: findTarget(),
+        ...props,
+      },
+      sync: false,
+      ...options,
+    });
+  };
+
   describe('Empty', () => {
     beforeEach(() => {
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          target: document.querySelector('.js-user-link'),
-          user: {
-            name: null,
-            username: null,
-            location: null,
-            bio: null,
-            organization: null,
-            status: null,
+      createWrapper(
+        {},
+        {
+          propsData: {
+            target: findTarget(),
+            user: {
+              name: null,
+              username: null,
+              location: null,
+              bio: null,
+              organization: null,
+              status: null,
+            },
           },
+          attachToDocument: true,
         },
-        attachToDocument: true,
-        sync: false,
-      });
+      );
     });
 
     it('should return skeleton loaders', () => {
@@ -55,13 +72,7 @@ describe('User Popover Component', () => {
 
   describe('basic data', () => {
     it('should show basic fields', () => {
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper();
 
       expect(wrapper.text()).toContain(DEFAULT_PROPS.user.name);
       expect(wrapper.text()).toContain(DEFAULT_PROPS.user.username);
@@ -79,14 +90,7 @@ describe('User Popover Component', () => {
     it('should show only bio if no organization is available', () => {
       const user = { ...DEFAULT_PROPS.user, bio: 'Engineer' };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
       expect(wrapper.text()).toContain('Engineer');
     });
@@ -94,14 +98,7 @@ describe('User Popover Component', () => {
     it('should show only organization if no bio is available', () => {
       const user = { ...DEFAULT_PROPS.user, organization: 'GitLab' };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
       expect(wrapper.text()).toContain('GitLab');
     });
@@ -109,14 +106,7 @@ describe('User Popover Component', () => {
     it('should display bio and organization in separate lines', () => {
       const user = { ...DEFAULT_PROPS.user, bio: 'Engineer', organization: 'GitLab' };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
       expect(wrapper.find('.js-bio').text()).toContain('Engineer');
       expect(wrapper.find('.js-organization').text()).toContain('GitLab');
@@ -129,14 +119,7 @@ describe('User Popover Component', () => {
         organization: 'Me & my <funky> Company',
       };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
       expect(wrapper.find('.js-bio').text()).toContain('Manager & Team Lead');
       expect(wrapper.find('.js-organization').text()).toContain('Me & my <funky> Company');
@@ -157,16 +140,9 @@ describe('User Popover Component', () => {
     it('should show only message', () => {
       const user = { ...DEFAULT_PROPS.user, status: { message_html: 'Hello World' } };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
-      expect(wrapper.find('.js-user-status').exists()).toBe(true);
+      expect(findUserStatus().exists()).toBe(true);
       expect(wrapper.text()).toContain('Hello World');
     });
 
@@ -176,16 +152,9 @@ describe('User Popover Component', () => {
         status: { emoji: 'basketball_player', message_html: 'Hello World' },
       };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
-      expect(wrapper.find('.js-user-status').exists()).toBe(true);
+      expect(findUserStatus().exists()).toBe(true);
       expect(wrapper.text()).toContain('Hello World');
       expect(wrapper.html()).toContain('<gl-emoji data-name="basketball_player"');
     });
@@ -193,31 +162,17 @@ describe('User Popover Component', () => {
     it('hides the div when status is null', () => {
       const user = { ...DEFAULT_PROPS.user, status: null };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
-      expect(wrapper.find('.js-user-status').exists()).toBe(false);
+      expect(findUserStatus().exists()).toBe(false);
     });
 
     it('hides the div when status is empty', () => {
       const user = { ...DEFAULT_PROPS.user, status: { emoji: '', message_html: '' } };
 
-      wrapper = shallowMount(UserPopover, {
-        propsData: {
-          ...DEFAULT_PROPS,
-          user,
-          target: document.querySelector('.js-user-link'),
-        },
-        sync: false,
-      });
+      createWrapper({ user });
 
-      expect(wrapper.find('.js-user-status').exists()).toBe(false);
+      expect(findUserStatus().exists()).toBe(false);
     });
   });
 });