"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "src/material/button/button.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.spec.ts  (components-12.0.3):button.spec.ts  (components-12.0.4)
skipping to change at line 20 skipping to change at line 20
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [MatButtonModule], imports: [MatButtonModule],
declarations: [TestApp], declarations: [TestApp],
}); });
TestBed.compileComponents(); TestBed.compileComponents();
})); }));
// General button tests // General button tests
it('should apply class based on color attribute', () => { it('should apply class based on color attribute', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'))!; const buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
let aDebugElement = fixture.debugElement.query(By.css('a'))!; const attributeDebugElement = fixture.debugElement.query(By.css('a'))!;
testComponent.buttonColor = 'primary'; testComponent.buttonColor = 'primary';
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).t oBe(true); expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).t oBe(true);
expect(aDebugElement.nativeElement.classList.contains('mat-primary')).toBe(t rue); expect(attributeDebugElement.nativeElement.classList.contains('mat-primary') ).toBe(true);
testComponent.buttonColor = 'accent'; testComponent.buttonColor = 'accent';
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).to Be(true); expect(buttonDebugElement.nativeElement.classList.contains('mat-accent')).to Be(true);
expect(aDebugElement.nativeElement.classList.contains('mat-accent')).toBe(tr ue); expect(attributeDebugElement.nativeElement.classList.contains('mat-accent')) .toBe(true);
testComponent.buttonColor = null; testComponent.buttonColor = null;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList).not.toContain('mat-accent '); expect(buttonDebugElement.nativeElement.classList).not.toContain('mat-accent ');
expect(aDebugElement.nativeElement.classList).not.toContain('mat-accent'); expect(attributeDebugElement.nativeElement.classList).not.toContain('mat-acc ent');
}); });
it('should expose the ripple instance', () => { it('should expose the ripple instance', () => {
const fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
fixture.detectChanges(); fixture.detectChanges();
const button = fixture.debugElement.query(By.directive(MatButton))!.componen tInstance; const button = fixture.debugElement.query(By.directive(MatButton))!.componen tInstance;
expect(button.ripple).toBeTruthy(); expect(button.ripple).toBeTruthy();
}); });
it('should not clear previous defined classes', () => { it('should not clear previous defined classes', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'))!; const buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
buttonDebugElement.nativeElement.classList.add('custom-class'); buttonDebugElement.nativeElement.classList.add('custom-class');
testComponent.buttonColor = 'primary'; testComponent.buttonColor = 'primary';
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).t oBe(true); expect(buttonDebugElement.nativeElement.classList.contains('mat-primary')).t oBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')). toBe(true); expect(buttonDebugElement.nativeElement.classList.contains('custom-class')). toBe(true);
testComponent.buttonColor = 'accent'; testComponent.buttonColor = 'accent';
skipping to change at line 130 skipping to change at line 130
fixture.detectChanges(); fixture.detectChanges();
expect(miniFabButtonDebugEl.nativeElement.classList) expect(miniFabButtonDebugEl.nativeElement.classList)
.toContain('mat-accent', 'Expected mini-fab buttons to use accent palett e by default'); .toContain('mat-accent', 'Expected mini-fab buttons to use accent palett e by default');
}); });
}); });
// Regular button tests // Regular button tests
describe('button[mat-button]', () => { describe('button[mat-button]', () => {
it('should handle a click on the button', () => { it('should handle a click on the button', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'))!; const buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
buttonDebugElement.nativeElement.click(); buttonDebugElement.nativeElement.click();
expect(testComponent.clickCount).toBe(1); expect(testComponent.clickCount).toBe(1);
}); });
it('should not increment if disabled', () => { it('should not increment if disabled', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'))!; const buttonDebugElement = fixture.debugElement.query(By.css('button'))!;
testComponent.isDisabled = true; testComponent.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
buttonDebugElement.nativeElement.click(); buttonDebugElement.nativeElement.click();
expect(testComponent.clickCount).toBe(0); expect(testComponent.clickCount).toBe(0);
}); });
it('should disable the native button element', () => { it('should disable the native button element', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let buttonNativeElement = fixture.nativeElement.querySelector('button'); const buttonNativeElement = fixture.nativeElement.querySelector('button');
expect(buttonNativeElement.disabled).toBeFalsy('Expected button not to be disabled'); expect(buttonNativeElement.disabled).toBeFalsy('Expected button not to be disabled');
fixture.componentInstance.isDisabled = true; fixture.componentInstance.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be dis abled'); expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be dis abled');
}); });
}); });
// Anchor button tests // Anchor button tests
describe('a[mat-button]', () => { describe('a[mat-button]', () => {
it('should not redirect if disabled', () => { it('should not redirect if disabled', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'))!; const buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
testComponent.isDisabled = true; testComponent.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
buttonDebugElement.nativeElement.click(); buttonDebugElement.nativeElement.click();
}); });
it('should remove tabindex if disabled', () => { it('should remove tabindex if disabled', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'))!; const buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(nul l); expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(nul l);
testComponent.isDisabled = true; testComponent.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe('-1 '); expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe('-1 ');
}); });
it('should add aria-disabled attribute if disabled', () => { it('should add aria-disabled attribute if disabled', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'))!; const buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toB e('false'); expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toB e('false');
testComponent.isDisabled = true; testComponent.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toB e('true'); expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toB e('true');
}); });
it('should not add aria-disabled attribute if disabled is false', () => { it('should not add aria-disabled attribute if disabled is false', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'))!; const buttonDebugElement = fixture.debugElement.query(By.css('a'))!;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')) expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled'))
.toBe('false', 'Expect aria-disabled="false"'); .toBe('false', 'Expect aria-disabled="false"');
expect(buttonDebugElement.nativeElement.getAttribute('disabled')) expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
.toBeNull('Expect disabled="false"'); .toBeNull('Expect disabled="false"');
testComponent.isDisabled = false; testComponent.isDisabled = false;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')) expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled'))
.toBe('false', 'Expect no aria-disabled'); .toBe('false', 'Expect no aria-disabled');
expect(buttonDebugElement.nativeElement.getAttribute('disabled')) expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
.toBeNull('Expect no disabled'); .toBeNull('Expect no disabled');
}); });
it('should be able to set a custom tabindex', () => { it('should be able to set a custom tabindex', () => {
let fixture = TestBed.createComponent(TestApp); const fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance; const testComponent = fixture.debugElement.componentInstance;
let buttonElement = fixture.debugElement.query(By.css('a'))!.nativeElement const buttonElement = fixture.debugElement.query(By.css('a'))!.nativeEleme
; nt;
fixture.componentInstance.tabIndex = 3; fixture.componentInstance.tabIndex = 3;
fixture.detectChanges(); fixture.detectChanges();
expect(buttonElement.getAttribute('tabIndex')) expect(buttonElement.getAttribute('tabIndex'))
.toBe('3', 'Expected custom tabindex to be set'); .toBe('3', 'Expected custom tabindex to be set');
testComponent.isDisabled = true; testComponent.isDisabled = true;
fixture.detectChanges(); fixture.detectChanges();
 End of changes. 14 change blocks. 
34 lines changed or deleted 34 lines changed or added

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