Choices/test/scripts/components/container.test.ts

import { expect } from 'chai';
import { stub } from 'sinon';
import { DEFAULT_CLASSNAMES } from '../../../src';
import Container from '../../../src/scripts/components/container';

describe('components/container', () => {
  let instance;
  let element;

  beforeEach(() => {
    element = document.createElement('div');
    element.id = 'container';

    document.body.appendChild(element);
    instance = new Container({
      element: document.getElementById('container') as HTMLElement,
      classNames: DEFAULT_CLASSNAMES,
      position: 'auto',
      type: 'text',
    });
  });

  afterEach(() => {
    document.body.innerHTML = '';
    element = null;
    instance = null;
  });

  describe('constructor', () => {
    it('assigns choices element to class', () => {
      expect(instance.element).to.equal(element);
    });

    it('assigns classnames to class', () => {
      expect(instance.classNames).to.deep.equal(DEFAULT_CLASSNAMES);
    });
  });

  describe('shouldFlip', () => {
    describe('passing dropdownPos', () => {
      describe('position config option set to "top"', () => {
        beforeEach(() => {
          instance.position = 'top';
        });

        it('returns true', () => {
          expect(instance.shouldFlip(100, 100)).to.equal(true);
        });
      });

      describe('position config option set to "bottom"', () => {
        beforeEach(() => {
          instance.position = 'bottom';
        });

        it('returns false', () => {
          expect(instance.shouldFlip(100, 100)).to.equal(false);
        });
      });
    });
  });

  describe('setActiveDescendant', () => {
    it("sets element's aria-activedescendant attribute with passed descendant ID", () => {
      const activeDescendantID = '1234';
      expect(instance.element.getAttribute('aria-activedescendant')).to.equal(null);
      instance.setActiveDescendant(activeDescendantID);
      expect(instance.element.getAttribute('aria-activedescendant')).to.equal(activeDescendantID);
    });
  });

  describe('removeActiveDescendant', () => {
    it("remove elememnt's aria-activedescendant attribute", () => {
      const activeDescendantID = '1234';
      instance.element.setAttribute('aria-activedescendant', activeDescendantID);
      expect(instance.element.getAttribute('aria-activedescendant')).to.equal(activeDescendantID);
      instance.removeActiveDescendant();
      expect(instance.element.getAttribute('aria-activedescendant')).to.equal(null);
    });
  });

  describe('open', () => {
    beforeEach(() => {
      instance.open(element);
    });

    it('adds open state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.openState)).to.equal(true);
    });

    it('sets aria-expanded attribute to true', () => {
      expect(instance.element.getAttribute('aria-expanded')).to.equal('true');
    });

    it('sets isOpen flag to true', () => {
      expect(instance.isOpen).to.equal(true);
    });

    describe('flipping dropdown', () => {
      let shouldFlipStub;
      beforeEach(() => {
        shouldFlipStub = stub().returns(true);

        instance.shouldFlip = shouldFlipStub;
        instance.open(element);
      });

      afterEach(() => {
        instance.shouldFlip.reset();
      });

      it('adds adds flipped state class', () => {
        expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.flippedState)).to.equal(true);
      });

      it('sets isFlipped flag to true', () => {
        expect(instance.isFlipped).to.equal(true);
      });
    });
  });

  describe('close', () => {
    beforeEach(() => {
      instance.close(element);
    });

    it('adds open state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.openState)).to.equal(false);
    });

    it('sets aria-expanded attribute to true', () => {
      expect(instance.element.getAttribute('aria-expanded')).to.equal('false');
    });

    it('sets isOpen flag to true', () => {
      expect(instance.isOpen).to.equal(false);
    });

    describe('flipped dropdown', () => {
      beforeEach(() => {
        instance.isFlipped = true;
        instance.close(element);
      });

      it('removes adds flipped state class', () => {
        expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.flippedState)).to.equal(false);
      });

      it('sets isFlipped flag to false', () => {
        expect(instance.isFlipped).to.equal(false);
      });
    });
  });

  describe('addFocusState', () => {
    beforeEach(() => {
      instance.removeLoadingState();
    });

    it('adds focus state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState)).to.equal(false);
      instance.addFocusState();
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState)).to.equal(true);
    });
  });

  describe('removeFocusState', () => {
    beforeEach(() => {
      instance.addFocusState();
    });

    it('removes focus state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState)).to.equal(true);
      instance.removeFocusState();
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.focusState)).to.equal(false);
    });
  });

  describe('enable', () => {
    beforeEach(() => {
      instance.disable();
    });

    it('removes disabled state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState)).to.equal(true);
      instance.enable();
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState)).to.equal(false);
    });

    it('removes aria-disabled attribute', () => {
      expect(instance.element.getAttribute('aria-disabled')).to.equal('true');
      instance.enable();
      expect(instance.element.getAttribute('aria-disabled')).to.equal(null);
    });

    it('sets isDisabled flag to true', () => {
      instance.enable();
      expect(instance.isDisabled).to.equal(false);
    });

    describe('select one element', () => {
      beforeEach(() => {
        instance.type = 'select-one';
        instance.enable();
      });

      it('sets tabindex attribute', () => {
        expect(instance.element.getAttribute('tabindex')).to.equal('0');
      });
    });
  });

  describe('disable', () => {
    beforeEach(() => {
      instance.enable();
    });

    it('removes disabled state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState)).to.equal(false);
      instance.disable();
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.disabledState)).to.equal(true);
    });

    it('removes aria-disabled attribute', () => {
      expect(instance.element.getAttribute('aria-disabled')).to.equal(null);
      instance.disable();
      expect(instance.element.getAttribute('aria-disabled')).to.equal('true');
    });

    it('sets isDisabled flag to true', () => {
      instance.disable();
      expect(instance.isDisabled).to.equal(true);
    });

    describe('select one element', () => {
      beforeEach(() => {
        instance.type = 'select-one';
        instance.disable();
      });

      it('sets tabindex attribute', () => {
        expect(instance.element.getAttribute('tabindex')).to.equal('-1');
      });
    });
  });

  describe('wrap', () => {
    let elementToWrap;

    beforeEach(() => {
      elementToWrap = document.createElement('div');
      elementToWrap.id = 'wrap-test';
      document.body.appendChild(elementToWrap);
    });

    afterEach(() => {
      document.getElementById('wrap-test')!.remove();
    });

    it('wraps passed element inside element', () => {
      expect(instance.element.querySelector('div#wrap-test')).to.equal(null);
      instance.wrap(document.querySelector('div#wrap-test'));
      expect(instance.element.querySelector('div#wrap-test')).to.equal(elementToWrap);
    });
  });

  describe('unwrap', () => {
    let elementToUnwrap;

    beforeEach(() => {
      elementToUnwrap = document.createElement('div');
      elementToUnwrap.id = 'unwrap-test';
      document.body.appendChild(elementToUnwrap);
      instance.wrap(document.getElementById('unwrap-test'));
    });

    afterEach(() => {
      document.body.removeChild(document.getElementById('unwrap-test') as Node);
    });

    it('moves wrapped element outside of element', () => {
      expect(instance.element.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement);
      instance.unwrap(elementToUnwrap);
      expect(instance.element.querySelector('div#unwrap-test')).to.equal(null);
      expect(document.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement);
    });

    it('removes element from DOM', () => {
      expect(document.getElementById('container')).to.not.equal(null);
      instance.unwrap(elementToUnwrap);
      expect(document.getElementById('container')).to.equal(null);
    });
  });

  describe('addLoadingState', () => {
    beforeEach(() => {
      instance.removeLoadingState();
    });

    it('adds loading state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState)).to.equal(false);
      instance.addLoadingState();
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState)).to.equal(true);
    });

    it('sets aria-busy attribute to true', () => {
      expect(instance.element.getAttribute('aria-busy')).to.equal(null);
      instance.addLoadingState();
      expect(instance.element.getAttribute('aria-busy')).to.equal('true');
    });

    it('sets isLoading flag to false', () => {
      expect(instance.isLoading).to.equal(false);
      instance.addLoadingState();
      expect(instance.isLoading).to.equal(true);
    });
  });

  describe('removeLoadingState', () => {
    beforeEach(() => {
      instance.addLoadingState();
    });

    it('removes loading state class', () => {
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState)).to.equal(true);
      instance.removeLoadingState();
      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.loadingState)).to.equal(false);
    });

    it('removes aria-busy attribute', () => {
      expect(instance.element.getAttribute('aria-busy')).to.equal('true');
      instance.removeLoadingState();
      expect(instance.element.getAttribute('aria-busy')).to.equal(null);
    });

    it('sets isLoading flag to true', () => {
      expect(instance.isLoading).to.equal(true);
      instance.removeLoadingState();
      expect(instance.isLoading).to.equal(false);
    });
  });
});