test(Refactored notes tests from Karma to Jest):

fix #58829

Added changelog entry

Added merge request id

3 files changed, 137 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
new file mode 100644
index 00000000000..eafff7f681e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
+import createStore from '~/notes/stores';
+import { userDataMock } from '../../../../javascripts/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();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('user information', () => {
+    it('should render user avatar with link', () => {
+      expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual(
+        userDataMock.path,
+      );
+
+      expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(
+        `${userDataMock.avatar_url}?width=40`,
+      );
+    });
+  });
+
+  describe('note content', () => {
+    it('should render note header information', () => {
+      expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual(
+        userDataMock.path,
+      );
+
+      expect(
+        vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim(),
+      ).toEqual(`@${userDataMock.username}`);
+    });
+
+    it('should render note body', () => {
+      expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo');
+    });
+  });
+});
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
new file mode 100644
index 00000000000..976e38c15ee
--- /dev/null
+++ b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue';
+import mountComponent from 'helpers/vue_mount_component_helper';
+
+describe('placeholder system note component', () => {
+  let PlaceholderSystemNote;
+  let vm;
+
+  beforeEach(() => {
+    PlaceholderSystemNote = Vue.extend(placeholderSystemNote);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render system note placeholder with plain text', () => {
+    vm = mountComponent(PlaceholderSystemNote, {
+      note: { body: 'This is a placeholder' },
+    });
+
+    expect(vm.$el.tagName).toEqual('LI');
+    expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual(
+      'This is a placeholder',
+    );
+  });
+});
diff --git a/spec/frontend/vue_shared/components/notes/system_note_spec.js b/spec/frontend/vue_shared/components/notes/system_note_spec.js
new file mode 100644
index 00000000000..adcb1c858aa
--- /dev/null
+++ b/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import issueSystemNote from '~/vue_shared/components/notes/system_note.vue';
+import createStore from '~/notes/stores';
+
+describe('system note component', () => {
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      note: {
+        id: '1424',
+        author: {
+          id: 1,
+          name: 'Root',
+          username: 'root',
+          state: 'active',
+          avatar_url: 'path',
+          path: '/root',
+        },
+        note_html: '<p dir="auto">closed</p>',
+        system_note_icon_name: 'status_closed',
+        created_at: '2017-08-02T10:51:58.559Z',
+      },
+    };
+
+    const store = createStore();
+    store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
+
+    const Component = Vue.extend(issueSystemNote);
+    vm = new Component({
+      store,
+      propsData: props,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render a list item with correct id', () => {
+    expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`);
+  });
+
+  it('should render target class is note is target note', () => {
+    expect(vm.$el.classList).toContain('target');
+  });
+
+  it('should render svg icon', () => {
+    expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined();
+  });
+
+  // Redcarpet Markdown renderer wraps text in `<p>` tags
+  // we need to strip them because they break layout of commit lists in system notes:
+  // https://gitlab.com/gitlab-org/gitlab-ce/uploads/b07a10670919254f0220d3ff5c1aa110/jqzI.png
+  it('removes wrapping paragraph from note HTML', () => {
+    expect(vm.$el.querySelector('.system-note-message').innerHTML).toEqual('<span>closed</span>');
+  });
+});