BigW Consortium Gitlab

dom_helper_spec.js 3.49 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 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');
      });
    });
  });
});