Add latest changes from gitlab-org/gitlab@master

4 files changed, 135 insertions, 56 deletions

diff --git a/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap b/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap
new file mode 100644
index 00000000000..f3ce03796f9
--- /dev/null
+++ b/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Issue placeholder note component matches snapshot 1`] = `
+<timeline-entry-item-stub
+  class="note note-wrapper being-posted fade-in-half"
+>
+  <div
+    class="timeline-icon"
+  >
+    <user-avatar-link-stub
+      imgalt=""
+      imgcssclasses=""
+      imgsize="40"
+      imgsrc="mock_path"
+      linkhref="/root"
+      tooltipplacement="top"
+      tooltiptext=""
+      username=""
+    />
+  </div>
+   
+  <div
+    class="timeline-content discussion"
+  >
+    <div
+      class="note-header"
+    >
+      <div
+        class="note-header-info"
+      >
+        <a
+          href="/root"
+        >
+          <span
+            class="d-none d-sm-inline-block bold"
+          >
+            Root
+          </span>
+           
+          <span
+            class="note-headline-light"
+          >
+            @root
+          </span>
+        </a>
+      </div>
+    </div>
+     
+    <div
+      class="note-body"
+    >
+      <div
+        class="note-text md"
+      >
+        <p>
+          Foo
+        </p>
+      </div>
+    </div>
+  </div>
+</timeline-entry-item-stub>
+`;
diff --git a/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_system_note_spec.js.snap b/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_system_note_spec.js.snap
new file mode 100644
index 00000000000..10c33269107
--- /dev/null
+++ b/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_system_note_spec.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Placeholder system note component matches snapshot 1`] = `
+<timeline-entry-item-stub
+  class="note system-note being-posted fade-in-half"
+>
+  <div
+    class="timeline-content"
+  >
+    <em>
+      This is a placeholder
+    </em>
+  </div>
+</timeline-entry-item-stub>
+`;
diff --git a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
index 45f131194ca..0f30b50da0b 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
@@ -1,51 +1,55 @@
-import Vue from 'vue';
-import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
-import createStore from '~/notes/stores';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import IssuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
 import { userDataMock } from '../../../notes/mock_data';
 
-describe('issue placeholder system note component', () => {
-  let store;
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(issuePlaceholderNote);
-    store = createStore();
-    store.dispatch('setUserData', userDataMock);
-    vm = new Component({
-      store,
-      propsData: { note: { body: 'Foo' } },
-    }).$mount();
-  });
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const getters = {
+  getUserData: () => userDataMock,
+};
+
+describe('Issue placeholder note component', () => {
+  let wrapper;
+
+  const findNote = () => wrapper.find({ ref: 'note' });
+
+  const createComponent = (isIndividual = false) => {
+    wrapper = shallowMount(IssuePlaceholderNote, {
+      localVue,
+      store: new Vuex.Store({
+        getters,
+      }),
+      propsData: {
+        note: {
+          body: 'Foo',
+          individual_note: isIndividual,
+        },
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('user information', () => {
-    it('should render user avatar with link', () => {
-      expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual(
-        userDataMock.path,
-      );
+  it('matches snapshot', () => {
+    createComponent();
 
-      expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(
-        `${userDataMock.avatar_url}?width=40`,
-      );
-    });
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('note content', () => {
-    it('should render note header information', () => {
-      expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual(
-        userDataMock.path,
-      );
+  it('does not add "discussion" class to individual notes', () => {
+    createComponent(true);
 
-      expect(
-        vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim(),
-      ).toEqual(`@${userDataMock.username}`);
-    });
+    expect(findNote().classes()).not.toContain('discussion');
+  });
 
-    it('should render note body', () => {
-      expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo');
-    });
+  it('adds "discussion" class to non-individual notes', () => {
+    createComponent();
+
+    expect(findNote().classes()).toContain('discussion');
   });
 });
diff --git a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
index 81c5cd6a057..de6ab43bc41 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
@@ -1,27 +1,25 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
+import { shallowMount } from '@vue/test-utils';
+import PlaceholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
 
-describe('placeholder system note component', () => {
-  let PlaceholderSystemNote;
-  let vm;
+describe('Placeholder system note component', () => {
+  let wrapper;
 
-  beforeEach(() => {
-    PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
-  });
+  const createComponent = () => {
+    wrapper = shallowMount(PlaceholderSystemNote, {
+      propsData: {
+        note: { body: 'This is a placeholder' },
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  it('should render system note placeholder with plain text', () => {
-    vm = mountComponent(PlaceholderSystemNote, {
-      note: { body: 'This is a placeholder' },
-    });
+  it('matches snapshot', () => {
+    createComponent();
 
-    expect(vm.$el.tagName).toEqual('LI');
-    expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual(
-      'This is a placeholder',
-    );
+    expect(wrapper.element).toMatchSnapshot();
   });
 });