1 files changed, 118 insertions, 0 deletions
diff --git a/spec/javascripts/image_diff/helpers/dom_helper_spec.js b/spec/javascripts/image_diff/helpers/dom_helper_spec.js
new file mode 100644
index 00000000000..8dde924e8ae
--- /dev/null
+++ b/spec/javascripts/image_diff/helpers/dom_helper_spec.js
@@ -0,0 +1,118 @@
+import * as domHelper from '~/image_diff/helpers/dom_helper';
+import * as mockData from '../mock_data';
+
+describe('domHelper', () => {
+  const { imageMeta, badgeNumber } = mockData;
+
+  describe('setPositionDataAttribute', () => {
+    let containerEl;
+    let attributeAfterCall;
+    const position = {
+      myProperty: 'myProperty',
+    };
+
+    beforeEach(() => {
+      containerEl = document.createElement('div');
+      containerEl.dataset.position = JSON.stringify(position);
+      domHelper.setPositionDataAttribute(containerEl, imageMeta);
+      attributeAfterCall = JSON.parse(containerEl.dataset.position);
+    });
+
+    it('should set x, y, width, height', () => {
+      expect(attributeAfterCall.x).toEqual(imageMeta.x);
+      expect(attributeAfterCall.y).toEqual(imageMeta.y);
+      expect(attributeAfterCall.width).toEqual(imageMeta.width);
+      expect(attributeAfterCall.height).toEqual(imageMeta.height);
+    });
+
+    it('should not override other properties', () => {
+      expect(attributeAfterCall.myProperty).toEqual('myProperty');
+    });
+  });
+
+  describe('updateDiscussionAvatarBadgeNumber', () => {
+    let discussionEl;
+
+    beforeEach(() => {
+      discussionEl = document.createElement('div');
+      discussionEl.innerHTML = `
+        <a href="#" class="image-diff-avatar-link">
+          <div class="badge"></div>
+        </a>
+      `;
+      domHelper.updateDiscussionAvatarBadgeNumber(discussionEl, badgeNumber);
+    });
+
+    it('should update avatar badge number', () => {
+      expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
+    });
+  });
+
+  describe('updateDiscussionBadgeNumber', () => {
+    let discussionEl;
+
+    beforeEach(() => {
+      discussionEl = document.createElement('div');
+      discussionEl.innerHTML = `
+        <div class="badge"></div>
+      `;
+      domHelper.updateDiscussionBadgeNumber(discussionEl, badgeNumber);
+    });
+
+    it('should update discussion badge number', () => {
+      expect(discussionEl.querySelector('.badge').innerText).toEqual(badgeNumber.toString());
+    });
+  });
+
+  describe('toggleCollapsed', () => {
+    let element;
+    let discussionNotesEl;
+
+    beforeEach(() => {
+      element = document.createElement('div');
+      element.innerHTML = `
+        <div class="discussion-notes">
+          <button></button>
+          <form class="discussion-form"></form>
+        </div>
+      `;
+      discussionNotesEl = element.querySelector('.discussion-notes');
+    });
+
+    describe('not collapsed', () => {
+      beforeEach(() => {
+        domHelper.toggleCollapsed({
+          currentTarget: element.querySelector('button'),
+        });
+      });
+
+      it('should add collapsed class', () => {
+        expect(discussionNotesEl.classList.contains('collapsed')).toEqual(true);
+      });
+
+      it('should force formEl to display none', () => {
+        const formEl = element.querySelector('.discussion-form');
+        expect(formEl.style.display).toEqual('none');
+      });
+    });
+
+    describe('collapsed', () => {
+      beforeEach(() => {
+        discussionNotesEl.classList.add('collapsed');
+
+        domHelper.toggleCollapsed({
+          currentTarget: element.querySelector('button'),
+        });
+      });
+
+      it('should remove collapsed class', () => {
+        expect(discussionNotesEl.classList.contains('collapsed')).toEqual(false);
+      });
+
+      it('should force formEl to display block', () => {
+        const formEl = element.querySelector('.discussion-form');
+        expect(formEl.style.display).toEqual('block');
+      });
+    });
+  });
+});