Skip to content

Commit

Permalink
tests(button directive) (#645)
Browse files Browse the repository at this point in the history
  • Loading branch information
otelnov authored and valorkin committed Jun 24, 2016
1 parent 1ffd2b4 commit 0c9bb0d
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 0 deletions.
2 changes: 2 additions & 0 deletions components/buttons/button-checkbox.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import {
} from '@angular/core';
import {ControlValueAccessor, NgModel} from '@angular/common';

// TODO: config: activeClass - Class to apply to the checked buttons.

@Directive({selector: '[btnCheckbox][ngModel]'})
export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {
public cd:NgModel;
Expand Down
3 changes: 3 additions & 0 deletions components/buttons/button-radio.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import {
} from '@angular/core';
import {ControlValueAccessor, NgModel} from '@angular/common';

// TODO: if uncheckable, null should be set to ngModel
// if disabled, button should not be checkable

@Directive({selector: '[btnRadio][ngModel]'})
export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
public cd:NgModel;
Expand Down
231 changes: 231 additions & 0 deletions components/buttons/button.directive.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
import {Component} from '@angular/core';
import {it, beforeEach, beforeEachProviders, injectAsync, expect} from '@angular/core/testing';
import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
import {ButtonCheckboxDirective} from './button-checkbox.directive';
import {ButtonRadioDirective} from './button-radio.directive';

const html = `
<div>
<button id="default" [(ngModel)]="singleModel" btnCheckbox>
Default
</button>
<button id="disabled" disabled [(ngModel)]="singleModel" btnCheckbox>
Disabled
</button>
<button id="custom" type="button" class="btn btn-primary"
[(ngModel)]="singleModel" btnCheckbox
btnCheckboxTrue="1" btnCheckboxFalse="0">
Single Toggle
</button>
<div class="btn-group checkbox">
<label class="btn btn-primary" [(ngModel)]="checkModel.left" btnCheckbox>Left</label>
<label class="btn btn-primary" [(ngModel)]="checkModel.middle" btnCheckbox>Middle</label>
<label class="btn btn-primary" [(ngModel)]="checkModel.right" btnCheckbox>Right</label>
</div>
<div class="btn-group radio">
<label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="Left">Left</label>
<label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="Middle">Middle</label>
<label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="Right">Right</label>
<label class="btn btn-primary" [(ngModel)]="radioModel" btnRadio="1" disabled>Disabled</label>
</div>
<div class="btn-group radioUncheckable">
<label class="btn btn-success" [(ngModel)]="radioUncheckableModel" btnRadio="Left" uncheckable>Left</label>
<label class="btn btn-success" [(ngModel)]="radioUncheckableModel" btnRadio="Middle" uncheckable>Middle</label>
<label class="btn btn-success" [(ngModel)]="radioUncheckableModel" btnRadio="Right" uncheckable>Right</label>
</div>
</div>
`;

describe('Directive: Buttons', () => {
let fixture:ComponentFixture<any>;
let context:any;
let element:any;

beforeEachProviders(() => [
TestComponentBuilder
]);

beforeEach(injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
return tcb
.overrideTemplate(TestButtonsComponent, html)
.createAsync(TestButtonsComponent)
.then((f:ComponentFixture<any>) => {
fixture = f;
context = fixture.componentInstance;
element = fixture.nativeElement;
fixture.detectChanges();
});
}));

describe('checkbox', () => {
it('should work correctly with default model values', () => {
expect(element.querySelector('#default')).not.toHaveCssClass('active');
context.singleModel = true;
fixture.detectChanges();
expect(element.querySelector('#default')).toHaveCssClass('active');
});

it('should bind custom model values', () => {
expect(element.querySelector('#custom')).not.toHaveCssClass('active');
context.singleModel = '1';
fixture.detectChanges();
expect(element.querySelector('#custom')).toHaveCssClass('active');
});

it('should toggle default model values on click', () => {
context.singleModel = false;
fixture.detectChanges();
let btn = element.querySelector('#default');

btn.click();
fixture.detectChanges();
expect(context.singleModel).toEqual(true);
expect(btn).toHaveCssClass('active');

btn.click();
fixture.detectChanges();
expect(context.singleModel).toEqual(false);
expect(btn).not.toHaveCssClass('active');
});

it('should toggle custom model values on click', () => {
let btn = element.querySelector('#custom');

btn.click();
fixture.detectChanges();
expect(context.singleModel).toEqual('1');
expect(btn).toHaveCssClass('active');

btn.click();
fixture.detectChanges();
expect(context.singleModel).toEqual('0');
expect(btn).not.toHaveCssClass('active');
});

it('should not toggle when disabled', () => {
context.singleModel = false;
fixture.detectChanges();
let btn = element.querySelector('#disabled');

btn.click();
fixture.detectChanges();
expect(context.singleModel).toEqual(false);
expect(btn).not.toHaveCssClass('active');

btn.click();
fixture.detectChanges();
expect(context.singleModel).toEqual(false);
expect(btn).not.toHaveCssClass('active');
});

it('should work for btn-group', () => {
let btn = element.querySelector('.btn-group.checkbox');
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');
});
});

describe('radio', () => {
it('should set active class based on model', () => {
let btn = element.querySelector('.btn-group.radio');
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');

context.radioModel = 'Left';
fixture.detectChanges();
expect(btn.children[0]).toHaveCssClass('active');
expect(btn.children[1]).not.toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');
});

it('should set active class via click', () => {
let btn = element.querySelector('.btn-group.radio');
delete context.radioModel;
expect(context.radioModel).toBeUndefined();

btn.children[2].click();
fixture.detectChanges();
expect(context.radioModel).toEqual('Right');
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).not.toHaveCssClass('active');
expect(btn.children[2]).toHaveCssClass('active');

btn.children[1].click();
fixture.detectChanges();
expect(context.radioModel).toEqual('Middle');
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');
});

it('should do nothing when clicking an active radio', () => {
let btn = element.querySelector('.btn-group.radio');
expect(context.radioModel).toEqual('Middle');
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');

btn.children[1].click();
fixture.detectChanges();
expect(context.radioModel).toEqual('Middle');
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');
});

xit('should not toggle when disabled', () => {
let btn = element.querySelector('.btn-group.radio');
expect(context.radioModel).toEqual('Middle');
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[3]).not.toHaveCssClass('active');

context.radioModel = '1';
fixture.detectChanges();
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[3]).not.toHaveCssClass('active');

btn.children[3].click();
fixture.detectChanges();
expect(btn.children[1]).toHaveCssClass('active');
expect(btn.children[3]).not.toHaveCssClass('active');
});

xit('should unset active class via click', () => {
let btn = element.querySelector('.btn-group.radioUncheckable');
expect(context.radioUncheckableModel).toBeUndefined();

btn.children[0].click();
fixture.detectChanges();
expect(context.radioUncheckableModel).toEqual('Left');
expect(btn.children[0]).toHaveCssClass('active');
expect(btn.children[1]).not.toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');

btn.children[0].click();
fixture.detectChanges();
expect(context.radioUncheckableModel).toBeNull();
expect(btn.children[0]).not.toHaveCssClass('active');
expect(btn.children[1]).not.toHaveCssClass('active');
expect(btn.children[2]).not.toHaveCssClass('active');
});
});
});

@Component({
selector: 'buttons-test',
directives: [ButtonCheckboxDirective, ButtonRadioDirective],
template: ''
})

class TestButtonsComponent {
public singleModel:string = '0';
public checkModel:any = {left: false, middle: true, right: false};
public radioModel:string = 'Middle';
}

0 comments on commit 0c9bb0d

Please sign in to comment.