ionic-framework/src/components/button/test/button.spec.ts

import { Button, Config } from '../../../../src';


export function run() {

  describe('button', () => {

    it('should set a different button role', () => {
      let b = mockButton();
      b.outline = true;
      b.small = true;
      b.full = true;
      b.color = 'primary';
      b.setRole('bar-button');
      b._assignCss(true);

      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
      expect(hasClass(b, 'bar-button-small')).toEqual(true);
      expect(hasClass(b, 'bar-button-full')).toEqual(true);
      expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);

      expect(hasClass(b, 'button-outline')).toEqual(false);
      expect(hasClass(b, 'button-small')).toEqual(false);
      expect(hasClass(b, 'button-full')).toEqual(false);
      expect(hasClass(b, 'button-primary')).toEqual(false);
    });

    it('should remove button color attributes and add different role', () => {
      let b = mockButton();
      b.outline = true;
      b.small = true;
      b.full = true;
      b.color = 'primary';

      b._assignCss(true);
      expect(hasClass(b, 'button-outline')).toEqual(true);
      expect(hasClass(b, 'button-small')).toEqual(true);
      expect(hasClass(b, 'button-full')).toEqual(true);
      expect(hasClass(b, 'button-outline-primary')).toEqual(true);

      b._assignCss(false);
      expect(hasClass(b, 'button-outline')).toEqual(false);
      expect(hasClass(b, 'button-small')).toEqual(false);
      expect(hasClass(b, 'button-full')).toEqual(false);
      expect(hasClass(b, 'button-outline-primary')).toEqual(false);
    });

    it('should read button color attributes with styles', () => {
      let b = mockButton();
      b.outline = true;
      b.small = true;
      b.full = true;
      b.color = 'primary';

      b._assignCss(true);
      expect(hasClass(b, 'button')).toEqual(true);
      expect(hasClass(b, 'button-outline')).toEqual(true);
      expect(hasClass(b, 'button-small')).toEqual(true);
      expect(hasClass(b, 'button-full')).toEqual(true);
      expect(hasClass(b, 'button-outline-primary')).toEqual(true);

      b = mockButton();
      b.clear = true;
      b.color = 'primary';
      b.color = 'secondary';

      b._assignCss(true);
      expect(hasClass(b, 'button')).toEqual(true);
      expect(hasClass(b, 'button-clear')).toEqual(true);
      expect(hasClass(b, 'button-clear-primary')).toEqual(false);
      expect(hasClass(b, 'button-clear-secondary')).toEqual(true);

      b = mockButton();
      b.solid = true;
      b.color = 'primary';
      b.color = 'secondary';

      b._assignCss(true);
      expect(hasClass(b, 'button')).toEqual(true);
      expect(hasClass(b, 'button-solid')).toEqual(true);
      expect(hasClass(b, 'button-primary')).toEqual(false);
      expect(hasClass(b, 'button-secondary')).toEqual(true);

      b = mockButton();
      b.solid = true;
      b.color = 'primary';
      b.color = 'secondary';

      b.setRole('bar-button');
      b._assignCss(true);
      expect(hasClass(b, 'bar-button-solid')).toEqual(true);
      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(false);
      expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
    });

    it('should auto add the default style', () => {
      let b = mockButton();
      b._assignCss(true);
      expect(hasClass(b, 'button')).toEqual(true);
      expect(hasClass(b, 'button-default')).toEqual(true);

      b = mockButton();
      b.clear = true;

      b._assignCss(true);
      expect(hasClass(b, 'button')).toEqual(true);
      expect(hasClass(b, 'button-default')).toEqual(false);
      expect(hasClass(b, 'button-clear')).toEqual(true);
    });

    it('should read button color attributes', () => {
      let b = mockButton();
      b.color = 'primary';
      b._assignCss(true);
      expect(hasClass(b, 'button-primary')).toEqual(true);

      b = mockButton();
      b.color = 'primary';
      b.color = 'secondary';
      b._assignCss(true);
      expect(hasClass(b, 'button-primary')).toEqual(false);
      expect(hasClass(b, 'button-secondary')).toEqual(true);
    });

    it('should read button style attributes', () => {
      let b = mockButton();
      b.clear = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-clear')).toEqual(true);

      b = mockButton();
      b.outline = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-outline')).toEqual(true);

      b = mockButton();
      b.solid = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-solid')).toEqual(true);

      b = mockButton();
      b.clear = true;
      b.outline = true;
      b.small = true;
      b.full = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-clear')).toEqual(false);
      expect(hasClass(b, 'button-outline')).toEqual(true);
      expect(hasClass(b, 'button-small')).toEqual(true);
      expect(hasClass(b, 'button-full')).toEqual(true);

      b = mockButton();
      b.outline = true;
      b.setRole('bar-button');
      b._assignCss(true);
      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
    });

    it('should read button shape attributes', () => {
      let b = mockButton();
      b.round = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-round')).toEqual(true);

      b = mockButton();
      b.fab = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-fab')).toEqual(true);
    });

    it('should read button display attributes', () => {
      let b = mockButton();
      b.block = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-block')).toEqual(true);

      b = mockButton();
      b.full = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-full')).toEqual(true);

      b = mockButton();
      b.block = true;
      b.full = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-block')).toEqual(false);
      expect(hasClass(b, 'button-full')).toEqual(true);
    });

    it('should read button size attributes', () => {
      let b = mockButton();
      b.small = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-small')).toEqual(true);

      b = mockButton();
      b.large = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-large')).toEqual(true);

      b = mockButton();
      b.large = true;
      b.small = true;
      b._assignCss(true);
      expect(hasClass(b, 'button-large')).toEqual(false);
      expect(hasClass(b, 'button-small')).toEqual(true);
    });

    it('should add button css class', () => {
      let b = mockButton();
      b._assignCss(true);
      expect(hasClass(b, 'button')).toEqual(true);
    });

    it('should add disable-hover css class', () => {
      let config = new Config({
        hoverCSS: false
      });
      let b = mockButton(config);

      expect(hasClass(b, 'disable-hover')).toEqual(true);
    });

    it('should set defaults', () => {
      let b = mockButton();
      expect(b._role).toEqual('button');
      expect(b._size).toEqual(null);
      expect(b._color).toEqual(null);
      expect(b._style).toEqual('default');
      expect(b._display).toEqual(null);
    });

    it('should add alert-button css class', () => {
      let b = mockButton(null, 'alert-button');
      b._assignCss(true);
      expect(hasClass(b, 'alert-button')).toEqual(true);
    });

  });

  function mockButton(config?, ionButton?) {
    config = config || new Config();
    ionButton = ionButton || '';
    let elementRef = {
      nativeElement: document.createElement('button')
    };
    let renderer: any = {
      setElementClass: function(nativeElement, className, shouldAdd) {
        nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
      }
    };
    let b = new Button(null, ionButton, config, elementRef, renderer);
    b._init = true;
    return b;
  }

  function hasClass(button, className) {
    return button._elementRef.nativeElement.classList.contains(className);
  }

}