Add latest changes from gitlab-org/gitlab@master

5 files changed, 413 insertions, 222 deletions

diff --git a/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap b/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap
new file mode 100644
index 00000000000..32d67120183
--- /dev/null
+++ b/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap
@@ -0,0 +1,229 @@
+// 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>
+`;
diff --git a/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap b/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
new file mode 100644
index 00000000000..e680c917611
--- /dev/null
+++ b/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SidebarTodo template renders component container element with proper data attributes 1`] = `
+<button
+  aria-label="Mark as done"
+  class="btn btn-default btn-todo issuable-header-btn float-right"
+  data-boundary="viewport"
+  data-container="body"
+  data-issuable-id="1"
+  data-issuable-type="epic"
+  data-original-title=""
+  data-placement="left"
+  title=""
+  type="button"
+>
+  <icon-stub
+    cssclasses="todo-undone"
+    name="todo-done"
+    size="16"
+    style="display: none;"
+  />
+   
+  <span
+    class="issuable-todo-inner"
+  >
+     Mark as done 
+  </span>
+   
+  <glloadingicon-stub
+    color="orange"
+    inline="true"
+    label="Loading"
+    size="sm"
+    style="display: none;"
+  />
+</button>
+`;
diff --git a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js
index 549010075db..0fd50c0e989 100644
--- a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js
+++ b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js
@@ -1,77 +1,85 @@
-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',
+      });
     });
   });
 });
diff --git a/spec/frontend/sidebar/todo_spec.js b/spec/frontend/sidebar/todo_spec.js
new file mode 100644
index 00000000000..b6cf799126b
--- /dev/null
+++ b/spec/frontend/sidebar/todo_spec.js
@@ -0,0 +1,88 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+
+import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+const defaultProps = {
+  issuableId: 1,
+  issuableType: 'epic',
+};
+
+describe('SidebarTodo', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(SidebarTodos, {
+      sync: false,
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    state    | classes
+    ${false} | ${['btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
+    ${true}  | ${['btn-blank', 'btn-todo', 'sidebar-collapsed-icon', 'dont-change-state']}
+  `('returns todo button classes for when `collapsed` prop is `$state`', ({ state, classes }) => {
+    createComponent({ collapsed: state });
+    expect(wrapper.find('button').classes()).toStrictEqual(classes);
+  });
+
+  it.each`
+    isTodo   | iconClass        | label             | icon
+    ${false} | ${''}            | ${'Add a To Do'}  | ${'todo-add'}
+    ${true}  | ${'todo-undone'} | ${'Mark as done'} | ${'todo-done'}
+  `(
+    'renders proper button when `isTodo` prop is `$isTodo`',
+    ({ isTodo, iconClass, label, icon }) => {
+      createComponent({ isTodo });
+
+      expect(wrapper.find(Icon).props('cssClasses')).toStrictEqual(iconClass);
+      expect(wrapper.find(Icon).props('name')).toStrictEqual(icon);
+      expect(wrapper.find('button').text()).toBe(label);
+    },
+  );
+
+  describe('template', () => {
+    it('emits `toggleTodo` event when clicked on button', () => {
+      createComponent();
+      wrapper.find('button').trigger('click');
+
+      expect(wrapper.emitted().toggleTodo).toBeTruthy();
+    });
+
+    it('renders component container element with proper data attributes', () => {
+      createComponent({
+        issuableId: 1,
+        issuableType: 'epic',
+      });
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders button label element when `collapsed` prop is `false`', () => {
+      createComponent({ collapsed: false });
+
+      expect(wrapper.find('span.issuable-todo-inner').text()).toBe('Mark as done');
+    });
+
+    it('renders button icon when `collapsed` prop is `true`', () => {
+      createComponent({ collapsed: true });
+
+      expect(wrapper.find(Icon).props('name')).toBe('todo-done');
+    });
+
+    it('renders loading icon when `isActionActive` prop is true', () => {
+      createComponent({ isActionActive: true });
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/sidebar/todo_spec.js b/spec/javascripts/sidebar/todo_spec.js
deleted file mode 100644
index e7abd19c865..00000000000
--- a/spec/javascripts/sidebar/todo_spec.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import Vue from 'vue';
-
-import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const createComponent = ({
-  issuableId = 1,
-  issuableType = 'epic',
-  isTodo,
-  isActionActive,
-  collapsed,
-}) => {
-  const Component = Vue.extend(SidebarTodos);
-
-  return mountComponent(Component, {
-    issuableId,
-    issuableType,
-    isTodo,
-    isActionActive,
-    collapsed,
-  });
-};
-
-describe('SidebarTodo', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent({});
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('buttonClasses', () => {
-      it('returns todo button classes for when `collapsed` prop is `false`', () => {
-        expect(vm.buttonClasses).toBe('btn btn-default btn-todo issuable-header-btn float-right');
-      });
-
-      it('returns todo button classes for when `collapsed` prop is `true`', done => {
-        vm.collapsed = true;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.buttonClasses).toBe(
-              'btn-blank btn-todo sidebar-collapsed-icon dont-change-state',
-            );
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-
-    describe('buttonLabel', () => {
-      it('returns todo button text for marking todo as done when `isTodo` prop is `true`', () => {
-        expect(vm.buttonLabel).toBe('Mark as done');
-      });
-
-      it('returns todo button text for add todo when `isTodo` prop is `false`', done => {
-        vm.isTodo = false;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.buttonLabel).toBe('Add a To Do');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-
-    describe('collapsedButtonIconClasses', () => {
-      it('returns collapsed button icon class when `isTodo` prop is `true`', () => {
-        expect(vm.collapsedButtonIconClasses).toBe('todo-undone');
-      });
-
-      it('returns empty string when `isTodo` prop is `false`', done => {
-        vm.isTodo = false;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.collapsedButtonIconClasses).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-
-    describe('collapsedButtonIcon', () => {
-      it('returns button icon name when `isTodo` prop is `true`', () => {
-        expect(vm.collapsedButtonIcon).toBe('todo-done');
-      });
-
-      it('returns button icon name when `isTodo` prop is `false`', done => {
-        vm.isTodo = false;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.collapsedButtonIcon).toBe('todo-add');
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('handleButtonClick', () => {
-      it('emits `toggleTodo` event on component', () => {
-        spyOn(vm, '$emit');
-        vm.handleButtonClick();
-
-        expect(vm.$emit).toHaveBeenCalledWith('toggleTodo');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element', () => {
-      const dataAttributes = {
-        issuableId: '1',
-        issuableType: 'epic',
-        originalTitle: '',
-        placement: 'left',
-        container: 'body',
-        boundary: 'viewport',
-      };
-
-      expect(vm.$el.nodeName).toBe('BUTTON');
-
-      const elDataAttrs = vm.$el.dataset;
-      Object.keys(elDataAttrs).forEach(attr => {
-        expect(elDataAttrs[attr]).toBe(dataAttributes[attr]);
-      });
-    });
-
-    it('check button label computed property', () => {
-      expect(vm.buttonLabel).toEqual('Mark as done');
-    });
-
-    it('renders button label element when `collapsed` prop is `false`', () => {
-      const buttonLabelEl = vm.$el.querySelector('span.issuable-todo-inner');
-
-      expect(buttonLabelEl).not.toBeNull();
-      expect(buttonLabelEl.innerText.trim()).toBe('Mark as done');
-    });
-
-    it('renders button icon when `collapsed` prop is `true`', done => {
-      vm.collapsed = true;
-      Vue.nextTick()
-        .then(() => {
-          const buttonIconEl = vm.$el.querySelector('svg');
-
-          expect(buttonIconEl).not.toBeNull();
-          expect(buttonIconEl.querySelector('use').getAttribute('xlink:href')).toContain(
-            'todo-done',
-          );
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
-    it('renders loading icon when `isActionActive` prop is true', done => {
-      vm.isActionActive = true;
-      Vue.nextTick()
-        .then(() => {
-          const loadingEl = vm.$el.querySelector('span.loading-container');
-
-          expect(loadingEl).not.toBeNull();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});