Merge branch 'master' into 38869-ci-global38869-ci-global

* master: (116 commits)
  Fix bad type checking to prevent 0 count badge to be shown
  fix incorrect description for advanced settings section of project settings
  Introduce new hook data builders for Issue and MergeRequest
  Don't create todos for old issue assignees
  Start adding Gitlab::HookData::IssuableBuilder
  Include the changes in issuable webhook payloads
  Rename the `codeclimate` job to `codequality`
  Don't show an "Unsubscribe" link in snippet comment notifications
  Add QA::Scenario::Gitlab::Group::Create
  Removes CommitsList from global namespace
  Fix wiki empty page translation namespace not being removed
  Fixes mini graph in commit view
  Fix link to new i18n index page
  Update i18n docs
  Move i18n/introduction to i18n/index
  Resolve "Simple documentation update - backup to restore in restore section"
  Remove AjaxLoadingSpinner and CreateLabelDropdown from global namespace
  Move cycle analytics banner into a vue file
  Updated Icons + Fix for Collapsed Groups Angle
  Don't create fork networks for root projects that are deleted
  ...

1 files changed, 132 insertions, 0 deletions

diff --git a/spec/javascripts/image_diff/helpers/badge_helper_spec.js b/spec/javascripts/image_diff/helpers/badge_helper_spec.js
new file mode 100644
index 00000000000..fb9c7e59031
--- /dev/null
+++ b/spec/javascripts/image_diff/helpers/badge_helper_spec.js
@@ -0,0 +1,132 @@
+import * as badgeHelper from '~/image_diff/helpers/badge_helper';
+import * as mockData from '../mock_data';
+
+describe('badge helper', () => {
+  const { coordinate, noteId, badgeText, badgeNumber } = mockData;
+  let containerEl;
+  let buttonEl;
+
+  beforeEach(() => {
+    containerEl = document.createElement('div');
+  });
+
+  describe('createImageBadge', () => {
+    beforeEach(() => {
+      buttonEl = badgeHelper.createImageBadge(noteId, coordinate);
+    });
+
+    it('should create button', () => {
+      expect(buttonEl.tagName).toEqual('BUTTON');
+      expect(buttonEl.getAttribute('type')).toEqual('button');
+    });
+
+    it('should set disabled attribute', () => {
+      expect(buttonEl.hasAttribute('disabled')).toEqual(true);
+    });
+
+    it('should set noteId', () => {
+      expect(buttonEl.dataset.noteId).toEqual(noteId);
+    });
+
+    it('should set coordinate', () => {
+      expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
+      expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
+    });
+
+    describe('classNames', () => {
+      it('should set .js-image-badge by default', () => {
+        expect(buttonEl.className).toEqual('js-image-badge');
+      });
+
+      it('should add additional class names if parameter is passed', () => {
+        const classNames = ['first-class', 'second-class'];
+        buttonEl = badgeHelper.createImageBadge(noteId, coordinate, classNames);
+
+        expect(buttonEl.className).toEqual(classNames.concat('js-image-badge').join(' '));
+      });
+    });
+  });
+
+  describe('addImageBadge', () => {
+    beforeEach(() => {
+      badgeHelper.addImageBadge(containerEl, {
+        coordinate,
+        badgeText,
+        noteId,
+      });
+      buttonEl = containerEl.querySelector('button');
+    });
+
+    it('should appends button to container', () => {
+      expect(buttonEl).toBeDefined();
+    });
+
+    it('should set the badge text', () => {
+      expect(buttonEl.innerText).toEqual(badgeText);
+    });
+
+    it('should set the button coordinates', () => {
+      expect(buttonEl.style.left).toEqual(`${coordinate.x}px`);
+      expect(buttonEl.style.top).toEqual(`${coordinate.y}px`);
+    });
+
+    it('should set the button noteId', () => {
+      expect(buttonEl.dataset.noteId).toEqual(noteId);
+    });
+  });
+
+  describe('addImageCommentBadge', () => {
+    beforeEach(() => {
+      badgeHelper.addImageCommentBadge(containerEl, {
+        coordinate,
+        noteId,
+      });
+      buttonEl = containerEl.querySelector('button');
+    });
+
+    it('should append icon button to container', () => {
+      expect(buttonEl).toBeDefined();
+    });
+
+    it('should create icon comment button', () => {
+      const iconEl = buttonEl.querySelector('i');
+      expect(iconEl).toBeDefined();
+      expect(iconEl.classList.contains('fa')).toEqual(true);
+      expect(iconEl.classList.contains('fa-comment-o')).toEqual(true);
+    });
+
+    it('should have .image-comment-badge.inverted in button class', () => {
+      expect(buttonEl.classList.contains('image-comment-badge')).toEqual(true);
+      expect(buttonEl.classList.contains('inverted')).toEqual(true);
+    });
+  });
+
+  describe('addAvatarBadge', () => {
+    let avatarBadgeEl;
+
+    beforeEach(() => {
+      containerEl.innerHTML = `
+        <div id="${noteId}">
+          <div class="badge hidden">
+          </div>
+        </div>
+      `;
+
+      badgeHelper.addAvatarBadge(containerEl, {
+        detail: {
+          noteId,
+          badgeNumber,
+        },
+      });
+      avatarBadgeEl = containerEl.querySelector(`#${noteId} .badge`);
+    });
+
+    it('should update badge number', () => {
+      expect(avatarBadgeEl.innerText).toEqual(badgeNumber.toString());
+    });
+
+    it('should remove hidden class', () => {
+      expect(avatarBadgeEl.classList.contains('hidden')).toEqual(false);
+    });
+  });
+});