"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "src/material/button-toggle/button-toggle.spec.ts" between
components-12.0.3.tar.gz and components-12.0.4.tar.gz

About: components offers Component infrastructure and Material Design components for Angular.

button-toggle.spec.ts  (components-12.0.3):button-toggle.spec.ts  (components-12.0.4)
skipping to change at line 66 skipping to change at line 66
testComponent.control.setValue('green'); testComponent.control.setValue('green');
expect(groupInstance.value).toBe('green'); expect(groupInstance.value).toBe('green');
testComponent.control.setValue('red'); testComponent.control.setValue('red');
expect(groupInstance.value).toBe('red'); expect(groupInstance.value).toBe('red');
}); });
it('should register the on change callback', () => { it('should register the on change callback', () => {
let spy = jasmine.createSpy('onChange callback'); const spy = jasmine.createSpy('onChange callback');
testComponent.control.registerOnChange(spy); testComponent.control.registerOnChange(spy);
testComponent.control.setValue('blue'); testComponent.control.setValue('blue');
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
}); });
}); });
describe('button toggle group with ngModel and change event', () => { describe('button toggle group with ngModel and change event', () => {
let fixture: ComponentFixture<ButtonToggleGroupWithNgModel>; let fixture: ComponentFixture<ButtonToggleGroupWithNgModel>;
skipping to change at line 416 skipping to change at line 416
groupInstance.vertical = true; groupInstance.vertical = true;
fixture.detectChanges(); fixture.detectChanges();
expect(groupNativeElement.classList).toContain('mat-button-toggle-vertical '); expect(groupNativeElement.classList).toContain('mat-button-toggle-vertical ');
}); });
it('should emit a change event from button toggles', fakeAsync(() => { it('should emit a change event from button toggles', fakeAsync(() => {
expect(buttonToggleInstances[0].checked).toBe(false); expect(buttonToggleInstances[0].checked).toBe(false);
let changeSpy = jasmine.createSpy('button-toggle change listener'); const changeSpy = jasmine.createSpy('button-toggle change listener');
buttonToggleInstances[0].change.subscribe(changeSpy); buttonToggleInstances[0].change.subscribe(changeSpy);
buttonToggleLabelElements[0].click(); buttonToggleLabelElements[0].click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(changeSpy).toHaveBeenCalledTimes(1); expect(changeSpy).toHaveBeenCalledTimes(1);
buttonToggleLabelElements[0].click(); buttonToggleLabelElements[0].click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
// Always emit change event when button toggle is clicked // Always emit change event when button toggle is clicked
expect(changeSpy).toHaveBeenCalledTimes(2); expect(changeSpy).toHaveBeenCalledTimes(2);
})); }));
it('should emit a change event from the button toggle group', fakeAsync(() = > { it('should emit a change event from the button toggle group', fakeAsync(() = > {
expect(groupInstance.value).toBeFalsy(); expect(groupInstance.value).toBeFalsy();
let changeSpy = jasmine.createSpy('button-toggle-group change listener'); const changeSpy = jasmine.createSpy('button-toggle-group change listener') ;
groupInstance.change.subscribe(changeSpy); groupInstance.change.subscribe(changeSpy);
buttonToggleLabelElements[0].click(); buttonToggleLabelElements[0].click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(changeSpy).toHaveBeenCalled(); expect(changeSpy).toHaveBeenCalled();
buttonToggleLabelElements[1].click(); buttonToggleLabelElements[1].click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
skipping to change at line 500 skipping to change at line 500
expect(groupInstance.value).toBeFalsy(); expect(groupInstance.value).toBeFalsy();
expect(groupInstance.selected).toBeFalsy(); expect(groupInstance.selected).toBeFalsy();
})); }));
}); });
describe('with initial value and change event', () => { describe('with initial value and change event', () => {
it('should not fire an initial change event', () => { it('should not fire an initial change event', () => {
let fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue); const fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue)
let testComponent = fixture.debugElement.componentInstance; ;
let groupDebugElement = fixture.debugElement.query(By.directive(MatButtonT const testComponent = fixture.debugElement.componentInstance;
oggleGroup))!; const groupDebugElement = fixture.debugElement.query(By.directive(MatButto
let groupInstance: MatButtonToggleGroup = groupDebugElement.injector nToggleGroup))!;
const groupInstance: MatButtonToggleGroup = groupDebugElement.injector
.get<MatButtonToggleGroup>(MatButtonToggleGroup); .get<MatButtonToggleGroup>(MatButtonToggleGroup);
fixture.detectChanges(); fixture.detectChanges();
// Note that we cast to a boolean, because the event has some circular ref erences // Note that we cast to a boolean, because the event has some circular ref erences
// which will crash the runner when Jasmine attempts to stringify them. // which will crash the runner when Jasmine attempts to stringify them.
expect(!!testComponent.lastEvent).toBe(false); expect(!!testComponent.lastEvent).toBe(false);
expect(groupInstance.value).toBe('red'); expect(groupInstance.value).toBe('red');
groupInstance.value = 'green'; groupInstance.value = 'green';
skipping to change at line 562 skipping to change at line 562
testComponent.isGroupDisabled = true; testComponent.isGroupDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
buttonToggleNativeElements[0].click(); buttonToggleNativeElements[0].click();
expect(buttonToggleInstances[0].checked).toBe(false); expect(buttonToggleInstances[0].checked).toBe(false);
}); });
it('should check a button toggle when clicked', () => { it('should check a button toggle when clicked', () => {
expect(buttonToggleInstances.every(buttonToggle => !buttonToggle.checked)) .toBe(true); expect(buttonToggleInstances.every(buttonToggle => !buttonToggle.checked)) .toBe(true);
let nativeCheckboxLabel = buttonToggleDebugElements[0].query(By.css('butto const nativeCheckboxLabel =
n'))!.nativeElement; buttonToggleDebugElements[0].query(By.css('button'))!.nativeElement;
nativeCheckboxLabel.click(); nativeCheckboxLabel.click();
expect(groupInstance.value).toEqual(['eggs']); expect(groupInstance.value).toEqual(['eggs']);
expect(buttonToggleInstances[0].checked).toBe(true); expect(buttonToggleInstances[0].checked).toBe(true);
}); });
it('should allow for multiple toggles to be selected', () => { it('should allow for multiple toggles to be selected', () => {
buttonToggleInstances[0].checked = true; buttonToggleInstances[0].checked = true;
fixture.detectChanges(); fixture.detectChanges();
skipping to change at line 586 skipping to change at line 587
buttonToggleInstances[1].checked = true; buttonToggleInstances[1].checked = true;
fixture.detectChanges(); fixture.detectChanges();
expect(groupInstance.value).toEqual(['eggs', 'flour']); expect(groupInstance.value).toEqual(['eggs', 'flour']);
expect(buttonToggleInstances[1].checked).toBe(true); expect(buttonToggleInstances[1].checked).toBe(true);
expect(buttonToggleInstances[0].checked).toBe(true); expect(buttonToggleInstances[0].checked).toBe(true);
}); });
it('should check a button toggle upon interaction with underlying native che ckbox', () => { it('should check a button toggle upon interaction with underlying native che ckbox', () => {
let nativeCheckboxButton = const nativeCheckboxButton =
buttonToggleDebugElements[0].query(By.css('button'))!.nativeElement; buttonToggleDebugElements[0].query(By.css('button'))!.nativeElement;
nativeCheckboxButton.click(); nativeCheckboxButton.click();
fixture.detectChanges(); fixture.detectChanges();
expect(groupInstance.value).toEqual(['eggs']); expect(groupInstance.value).toEqual(['eggs']);
expect(buttonToggleInstances[0].checked).toBe(true); expect(buttonToggleInstances[0].checked).toBe(true);
}); });
it('should change the vertical state', () => { it('should change the vertical state', () => {
skipping to change at line 624 skipping to change at line 625
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(groupInstance.value).toEqual([]); expect(groupInstance.value).toEqual([]);
expect(buttonToggleInstances[0].checked).toBe(false); expect(buttonToggleInstances[0].checked).toBe(false);
})); }));
it('should emit a change event for state changes', fakeAsync(() => { it('should emit a change event for state changes', fakeAsync(() => {
expect(buttonToggleInstances[0].checked).toBe(false); expect(buttonToggleInstances[0].checked).toBe(false);
let changeSpy = jasmine.createSpy('button-toggle change listener'); const changeSpy = jasmine.createSpy('button-toggle change listener');
buttonToggleInstances[0].change.subscribe(changeSpy); buttonToggleInstances[0].change.subscribe(changeSpy);
buttonToggleLabelElements[0].click(); buttonToggleLabelElements[0].click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(changeSpy).toHaveBeenCalled(); expect(changeSpy).toHaveBeenCalled();
expect(groupInstance.value).toEqual(['eggs']); expect(groupInstance.value).toEqual(['eggs']);
buttonToggleLabelElements[0].click(); buttonToggleLabelElements[0].click();
fixture.detectChanges(); fixture.detectChanges();
skipping to change at line 691 skipping to change at line 692
fixture.detectChanges(); fixture.detectChanges();
flush(); flush();
expect(buttonToggleInstance.checked).toBe(false); expect(buttonToggleInstance.checked).toBe(false);
})); }));
it('should emit a change event for state changes', fakeAsync(() => { it('should emit a change event for state changes', fakeAsync(() => {
expect(buttonToggleInstance.checked).toBe(false); expect(buttonToggleInstance.checked).toBe(false);
let changeSpy = jasmine.createSpy('button-toggle change listener'); const changeSpy = jasmine.createSpy('button-toggle change listener');
buttonToggleInstance.change.subscribe(changeSpy); buttonToggleInstance.change.subscribe(changeSpy);
buttonToggleLabelElement.click(); buttonToggleLabelElement.click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
expect(changeSpy).toHaveBeenCalled(); expect(changeSpy).toHaveBeenCalled();
buttonToggleLabelElement.click(); buttonToggleLabelElement.click();
fixture.detectChanges(); fixture.detectChanges();
tick(); tick();
// The default browser behavior is to emit an event, when the value was se t // The default browser behavior is to emit an event, when the value was se t
// to false. That's because the current input type is set to `checkbox`. // to false. That's because the current input type is set to `checkbox`.
expect(changeSpy).toHaveBeenCalledTimes(2); expect(changeSpy).toHaveBeenCalledTimes(2);
})); }));
it('should focus on underlying input element when focus() is called', () => { it('should focus on underlying input element when focus() is called', () => {
let nativeButton = buttonToggleDebugElement.query(By.css('button'))!.nativ eElement; const nativeButton = buttonToggleDebugElement.query(By.css('button'))!.nat iveElement;
expect(document.activeElement).not.toBe(nativeButton); expect(document.activeElement).not.toBe(nativeButton);
buttonToggleInstance.focus(); buttonToggleInstance.focus();
fixture.detectChanges(); fixture.detectChanges();
expect(document.activeElement).toBe(nativeButton); expect(document.activeElement).toBe(nativeButton);
}); });
it('should not assign a name to the underlying input if one is not passed in ', () => { it('should not assign a name to the underlying input if one is not passed in ', () => {
expect(buttonToggleButtonElement.getAttribute('name')).toBeFalsy(); expect(buttonToggleButtonElement.getAttribute('name')).toBeFalsy();
skipping to change at line 737 skipping to change at line 738
fixture.detectChanges(); fixture.detectChanges();
expect(buttonToggleButtonElement.getAttribute('aria-pressed')) expect(buttonToggleButtonElement.getAttribute('aria-pressed'))
.toBe('true'); .toBe('true');
}); });
}); });
describe('aria-label handling ', () => { describe('aria-label handling ', () => {
it('should not set the aria-label attribute if none is provided', () => { it('should not set the aria-label attribute if none is provided', () => {
let fixture = TestBed.createComponent(StandaloneButtonToggle); const fixture = TestBed.createComponent(StandaloneButtonToggle);
let checkboxDebugElement = fixture.debugElement.query(By.directive(MatButt const checkboxDebugElement = fixture.debugElement.query(By.directive(MatBu
onToggle))!; ttonToggle))!;
let checkboxNativeElement = checkboxDebugElement.nativeElement; const checkboxNativeElement = checkboxDebugElement.nativeElement;
let buttonElement = checkboxNativeElement.querySelector('button') as HTMLB const buttonElement = checkboxNativeElement.querySelector('button') as HTM
uttonElement; LButtonElement;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonElement.hasAttribute('aria-label')).toBe(false); expect(buttonElement.hasAttribute('aria-label')).toBe(false);
}); });
it('should use the provided aria-label', () => { it('should use the provided aria-label', () => {
let fixture = TestBed.createComponent(ButtonToggleWithAriaLabel); const fixture = TestBed.createComponent(ButtonToggleWithAriaLabel);
let checkboxDebugElement = fixture.debugElement.query(By.directive(MatButt const checkboxDebugElement = fixture.debugElement.query(By.directive(MatBu
onToggle))!; ttonToggle))!;
let checkboxNativeElement = checkboxDebugElement.nativeElement; const checkboxNativeElement = checkboxDebugElement.nativeElement;
let buttonElement = checkboxNativeElement.querySelector('button') as HTMLB const buttonElement = checkboxNativeElement.querySelector('button') as HTM
uttonElement; LButtonElement;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonElement.getAttribute('aria-label')).toBe('Super effective'); expect(buttonElement.getAttribute('aria-label')).toBe('Super effective');
}); });
it('should clear the static aria from the host node', () => { it('should clear the static aria from the host node', () => {
const fixture = TestBed.createComponent(ButtonToggleWithStaticAriaAttribut es); const fixture = TestBed.createComponent(ButtonToggleWithStaticAriaAttribut es);
fixture.detectChanges(); fixture.detectChanges();
const hostNode: HTMLElement = fixture.nativeElement.querySelector('mat-but ton-toggle'); const hostNode: HTMLElement = fixture.nativeElement.querySelector('mat-but ton-toggle');
skipping to change at line 773 skipping to change at line 774
}); });
}); });
describe('with provided aria-labelledby ', () => { describe('with provided aria-labelledby ', () => {
let checkboxDebugElement: DebugElement; let checkboxDebugElement: DebugElement;
let checkboxNativeElement: HTMLElement; let checkboxNativeElement: HTMLElement;
let buttonElement: HTMLButtonElement; let buttonElement: HTMLButtonElement;
it('should use the provided aria-labelledby', () => { it('should use the provided aria-labelledby', () => {
let fixture = TestBed.createComponent(ButtonToggleWithAriaLabelledby); const fixture = TestBed.createComponent(ButtonToggleWithAriaLabelledby);
checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonTo ggle))!; checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonTo ggle))!;
checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxNativeElement = checkboxDebugElement.nativeElement;
buttonElement = checkboxNativeElement.querySelector('button') as HTMLButto nElement; buttonElement = checkboxNativeElement.querySelector('button') as HTMLButto nElement;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonElement.getAttribute('aria-labelledby')).toBe('some-id'); expect(buttonElement.getAttribute('aria-labelledby')).toBe('some-id');
}); });
it('should not assign aria-labelledby if none is provided', () => { it('should not assign aria-labelledby if none is provided', () => {
let fixture = TestBed.createComponent(StandaloneButtonToggle); const fixture = TestBed.createComponent(StandaloneButtonToggle);
checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonTo ggle))!; checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonTo ggle))!;
checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxNativeElement = checkboxDebugElement.nativeElement;
buttonElement = checkboxNativeElement.querySelector('button') as HTMLButto nElement; buttonElement = checkboxNativeElement.querySelector('button') as HTMLButto nElement;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonElement.getAttribute('aria-labelledby')).toBe(null); expect(buttonElement.getAttribute('aria-labelledby')).toBe(null);
}); });
}); });
describe('with tabindex', () => { describe('with tabindex', () => {
 End of changes. 13 change blocks. 
28 lines changed or deleted 29 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)