gitlab-org--gitlab-foss/spec/frontend/behaviors/bind_in_out_spec.js

import BindInOut from '~/behaviors/bind_in_out';

describe('BindInOut', () => {
  let testContext;

  beforeEach(() => {
    testContext = {};
  });

  describe('constructor', () => {
    beforeEach(() => {
      testContext.in = {};
      testContext.out = {};

      testContext.bindInOut = new BindInOut(testContext.in, testContext.out);
    });

    it('should set .in', () => {
      expect(testContext.bindInOut.in).toBe(testContext.in);
    });

    it('should set .out', () => {
      expect(testContext.bindInOut.out).toBe(testContext.out);
    });

    it('should set .eventWrapper', () => {
      expect(testContext.bindInOut.eventWrapper).toEqual({});
    });

    describe('if .in is an input', () => {
      beforeEach(() => {
        testContext.bindInOut = new BindInOut({ tagName: 'INPUT' });
      });

      it('should set .eventType to keyup', () => {
        expect(testContext.bindInOut.eventType).toEqual('keyup');
      });
    });

    describe('if .in is a textarea', () => {
      beforeEach(() => {
        testContext.bindInOut = new BindInOut({ tagName: 'TEXTAREA' });
      });

      it('should set .eventType to keyup', () => {
        expect(testContext.bindInOut.eventType).toEqual('keyup');
      });
    });

    describe('if .in is not an input or textarea', () => {
      beforeEach(() => {
        testContext.bindInOut = new BindInOut({ tagName: 'SELECT' });
      });

      it('should set .eventType to change', () => {
        expect(testContext.bindInOut.eventType).toEqual('change');
      });
    });
  });

  describe('addEvents', () => {
    beforeEach(() => {
      testContext.in = {
        addEventListener: jest.fn(),
      };

      testContext.bindInOut = new BindInOut(testContext.in);

      testContext.addEvents = testContext.bindInOut.addEvents();
    });

    it('should set .eventWrapper.updateOut', () => {
      expect(testContext.bindInOut.eventWrapper.updateOut).toEqual(expect.any(Function));
    });

    it('should call .addEventListener', () => {
      expect(testContext.in.addEventListener).toHaveBeenCalledWith(
        testContext.bindInOut.eventType,
        testContext.bindInOut.eventWrapper.updateOut,
      );
    });

    it('should return the instance', () => {
      expect(testContext.addEvents).toBe(testContext.bindInOut);
    });
  });

  describe('updateOut', () => {
    beforeEach(() => {
      testContext.in = { value: 'the-value' };
      testContext.out = { textContent: 'not-the-value' };

      testContext.bindInOut = new BindInOut(testContext.in, testContext.out);

      testContext.updateOut = testContext.bindInOut.updateOut();
    });

    it('should set .out.textContent to .in.value', () => {
      expect(testContext.out.textContent).toBe(testContext.in.value);
    });

    it('should return the instance', () => {
      expect(testContext.updateOut).toBe(testContext.bindInOut);
    });
  });

  describe('removeEvents', () => {
    beforeEach(() => {
      testContext.in = {
        removeEventListener: jest.fn(),
      };
      testContext.updateOut = () => {};

      testContext.bindInOut = new BindInOut(testContext.in);
      testContext.bindInOut.eventWrapper.updateOut = testContext.updateOut;

      testContext.removeEvents = testContext.bindInOut.removeEvents();
    });

    it('should call .removeEventListener', () => {
      expect(testContext.in.removeEventListener).toHaveBeenCalledWith(
        testContext.bindInOut.eventType,
        testContext.updateOut,
      );
    });

    it('should return the instance', () => {
      expect(testContext.removeEvents).toBe(testContext.bindInOut);
    });
  });

  describe('initAll', () => {
    beforeEach(() => {
      testContext.ins = [0, 1, 2];
      testContext.instances = [];

      jest.spyOn(document, 'querySelectorAll').mockReturnValue(testContext.ins);
      jest.spyOn(Array.prototype, 'map');
      jest.spyOn(BindInOut, 'init').mockImplementation(() => {});

      testContext.initAll = BindInOut.initAll();
    });

    it('should be a static method', () => {
      expect(BindInOut.initAll).toEqual(expect.any(Function));
    });

    it('should call .querySelectorAll', () => {
      expect(document.querySelectorAll).toHaveBeenCalledWith('*[data-bind-in]');
    });

    it('should call .map', () => {
      expect(Array.prototype.map).toHaveBeenCalledWith(expect.any(Function));
    });

    it('should call .init for each element', () => {
      expect(BindInOut.init.mock.calls.length).toEqual(3);
    });

    it('should return an array of instances', () => {
      expect(testContext.initAll).toEqual(expect.any(Array));
    });
  });

  describe('init', () => {
    beforeEach(() => {
      jest.spyOn(BindInOut.prototype, 'addEvents').mockReturnThis();
      jest.spyOn(BindInOut.prototype, 'updateOut').mockReturnThis();

      testContext.init = BindInOut.init({}, {});
    });

    it('should be a static method', () => {
      expect(BindInOut.init).toEqual(expect.any(Function));
    });

    it('should call .addEvents', () => {
      expect(BindInOut.prototype.addEvents).toHaveBeenCalled();
    });

    it('should call .updateOut', () => {
      expect(BindInOut.prototype.updateOut).toHaveBeenCalled();
    });

    describe('if no anOut is provided', () => {
      beforeEach(() => {
        testContext.anIn = { dataset: { bindIn: 'the-data-bind-in' } };

        jest.spyOn(document, 'querySelector').mockImplementation(() => {});

        BindInOut.init(testContext.anIn);
      });

      it('should call .querySelector', () => {
        expect(document.querySelector).toHaveBeenCalledWith(
          `*[data-bind-out="${testContext.anIn.dataset.bindIn}"]`,
        );
      });
    });
  });
});