Migrate confidential_issue_sidebar_spec.js to Vue test utils

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -66,6 +66,7 @@ export default {
 <template>
   <div class="block issuable-sidebar-item confidentiality">
     <div
+      ref="collapseIcon"
       v-tooltip
       :title="tooltipLabel"
       class="sidebar-collapsed-icon"
@@ -80,6 +81,7 @@ export default {
       {{ __('Confidentiality') }}
       <a
         v-if="isEditable"
+        ref="editLink"
         class="float-right confidential-edit"
         href="#"
         data-track-event="click_edit_button"

spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Confidential Issue Sidebar Block renders for isConfidential = false and isEditable = false 1`] = `
+<div
+  class="block issuable-sidebar-item confidentiality"
+>
+  <div
+    class="sidebar-collapsed-icon"
+    data-boundary="viewport"
+    data-container="body"
+    data-original-title="Not confidential"
+    data-placement="left"
+    title=""
+  >
+    <icon-stub
+      aria-hidden="true"
+      cssclasses=""
+      name="eye"
+      size="16"
+    />
+  </div>
+   
+  <div
+    class="title hide-collapsed"
+  >
+    
+    Confidentiality
+    
+    <!---->
+  </div>
+   
+  <div
+    class="value sidebar-item-value hide-collapsed"
+  >
+    <!---->
+     
+    <div
+      class="no-value sidebar-item-value"
+    >
+      <icon-stub
+        aria-hidden="true"
+        class="sidebar-item-icon inline"
+        cssclasses=""
+        name="eye"
+        size="16"
+      />
+      
+      Not confidential
+    
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Confidential Issue Sidebar Block renders for isConfidential = false and isEditable = true 1`] = `
+<div
+  class="block issuable-sidebar-item confidentiality"
+>
+  <div
+    class="sidebar-collapsed-icon"
+    data-boundary="viewport"
+    data-container="body"
+    data-original-title="Not confidential"
+    data-placement="left"
+    title=""
+  >
+    <icon-stub
+      aria-hidden="true"
+      cssclasses=""
+      name="eye"
+      size="16"
+    />
+  </div>
+   
+  <div
+    class="title hide-collapsed"
+  >
+    
+    Confidentiality
+    
+    <a
+      class="float-right confidential-edit"
+      data-track-event="click_edit_button"
+      data-track-label="right_sidebar"
+      data-track-property="confidentiality"
+      href="#"
+    >
+      
+      Edit
+    
+    </a>
+  </div>
+   
+  <div
+    class="value sidebar-item-value hide-collapsed"
+  >
+    <!---->
+     
+    <div
+      class="no-value sidebar-item-value"
+    >
+      <icon-stub
+        aria-hidden="true"
+        class="sidebar-item-icon inline"
+        cssclasses=""
+        name="eye"
+        size="16"
+      />
+      
+      Not confidential
+    
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Confidential Issue Sidebar Block renders for isConfidential = true and isEditable = false 1`] = `
+<div
+  class="block issuable-sidebar-item confidentiality"
+>
+  <div
+    class="sidebar-collapsed-icon"
+    data-boundary="viewport"
+    data-container="body"
+    data-original-title="Confidential"
+    data-placement="left"
+    title=""
+  >
+    <icon-stub
+      aria-hidden="true"
+      cssclasses=""
+      name="eye-slash"
+      size="16"
+    />
+  </div>
+   
+  <div
+    class="title hide-collapsed"
+  >
+    
+    Confidentiality
+    
+    <!---->
+  </div>
+   
+  <div
+    class="value sidebar-item-value hide-collapsed"
+  >
+    <!---->
+     
+    <div
+      class="value sidebar-item-value hide-collapsed"
+    >
+      <icon-stub
+        aria-hidden="true"
+        class="sidebar-item-icon inline is-active"
+        cssclasses=""
+        name="eye-slash"
+        size="16"
+      />
+      
+      This issue is confidential
+    
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Confidential Issue Sidebar Block renders for isConfidential = true and isEditable = true 1`] = `
+<div
+  class="block issuable-sidebar-item confidentiality"
+>
+  <div
+    class="sidebar-collapsed-icon"
+    data-boundary="viewport"
+    data-container="body"
+    data-original-title="Confidential"
+    data-placement="left"
+    title=""
+  >
+    <icon-stub
+      aria-hidden="true"
+      cssclasses=""
+      name="eye-slash"
+      size="16"
+    />
+  </div>
+   
+  <div
+    class="title hide-collapsed"
+  >
+    
+    Confidentiality
+    
+    <a
+      class="float-right confidential-edit"
+      data-track-event="click_edit_button"
+      data-track-label="right_sidebar"
+      data-track-property="confidentiality"
+      href="#"
+    >
+      
+      Edit
+    
+    </a>
+  </div>
+   
+  <div
+    class="value sidebar-item-value hide-collapsed"
+  >
+    <!---->
+     
+    <div
+      class="value sidebar-item-value hide-collapsed"
+    >
+      <icon-stub
+        aria-hidden="true"
+        class="sidebar-item-icon inline is-active"
+        cssclasses=""
+        name="eye-slash"
+        size="16"
+      />
+      
+      This issue is confidential
+    
+    </div>
+  </div>
+</div>
+`;

spec/frontend/sidebar/confidential_issue_sidebar_spec.js

-import Vue from 'vue';
-import confidentialIssueSidebar from '~/sidebar/components/confidential/confidential_issue_sidebar.vue';
+import { shallowMount } from '@vue/test-utils';
+import ConfidentialIssueSidebar from '~/sidebar/components/confidential/confidential_issue_sidebar.vue';
 import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
+import EditForm from '~/sidebar/components/confidential/edit_form.vue';
 
 describe('Confidential Issue Sidebar Block', () => {
-  let vm1;
-  let vm2;
+  let wrapper;
 
-  beforeEach(() => {
-    const Component = Vue.extend(confidentialIssueSidebar);
+  const createComponent = propsData => {
     const service = {
       update: () => Promise.resolve(true),
     };
 
-    vm1 = new Component({
+    wrapper = shallowMount(ConfidentialIssueSidebar, {
       propsData: {
-        isConfidential: true,
-        isEditable: true,
         service,
+        ...propsData,
       },
-    }).$mount();
-
-    vm2 = new Component({
-      propsData: {
-        isConfidential: false,
-        isEditable: false,
-        service,
-      },
-    }).$mount();
-  });
-
-  it('shows if confidential and/or editable', () => {
-    expect(vm1.$el.innerHTML.includes('Edit')).toBe(true);
-
-    expect(vm1.$el.innerHTML.includes('This issue is confidential')).toBe(true);
-
-    expect(vm2.$el.innerHTML.includes('Not confidential')).toBe(true);
+      sync: false,
+    });
+  };
+
+  it.each`
+    isConfidential | isEditable
+    ${false}       | ${false}
+    ${false}       | ${true}
+    ${true}        | ${false}
+    ${true}        | ${true}
+  `(
+    'renders for isConfidential = $isConfidential and isEditable = $isEditable',
+    ({ isConfidential, isEditable }) => {
+      createComponent({
+        isConfidential,
+        isEditable,
+      });
+
+      expect(wrapper.element).toMatchSnapshot();
+    },
+  );
+
+  afterEach(() => {
+    wrapper.destroy();
   });
 
-  it('displays the edit form when editable', () => {
-    expect(vm1.edit).toBe(false);
+  describe('if editable', () => {
+    beforeEach(() => {
+      createComponent({
+        isConfidential: true,
+        isEditable: true,
+      });
+    });
 
-    vm1.$el.querySelector('.confidential-edit').click();
+    it('displays the edit form when editable', () => {
+      wrapper.setData({ edit: false });
 
-    expect(vm1.edit).toBe(true);
+      wrapper.find({ ref: 'editLink' }).trigger('click');
 
-    return Vue.nextTick().then(() => {
-      expect(vm1.$el.innerHTML.includes('You are going to turn off the confidentiality.')).toBe(
-        true,
-      );
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(EditForm).exists()).toBe(true);
+      });
     });
-  });
-
-  it('displays the edit form when opened from collapsed state', () => {
-    expect(vm1.edit).toBe(false);
 
-    vm1.$el.querySelector('.sidebar-collapsed-icon').click();
+    it('displays the edit form when opened from collapsed state', () => {
+      wrapper.setData({ edit: false });
 
-    expect(vm1.edit).toBe(true);
+      wrapper.find({ ref: 'collapseIcon' }).trigger('click');
 
-    return Vue.nextTick().then(() => {
-      expect(vm1.$el.innerHTML.includes('You are going to turn off the confidentiality.')).toBe(
-        true,
-      );
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(EditForm).exists()).toBe(true);
+      });
     });
-  });
 
-  it('tracks the event when "Edit" is clicked', () => {
-    const spy = mockTracking('_category_', vm1.$el, jest.spyOn);
-    triggerEvent('.confidential-edit');
+    it('tracks the event when "Edit" is clicked', () => {
+      const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
+
+      const editLink = wrapper.find({ ref: 'editLink' });
+      triggerEvent(editLink.element);
 
-    expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
-      label: 'right_sidebar',
-      property: 'confidentiality',
+      expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
+        label: 'right_sidebar',
+        property: 'confidentiality',
+      });
     });
   });
 });