skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove TestComponentBuilder from button through input (#1005)

Browse Source
This commit is contained in:
Jeremy Elbourn
2016-08-12 16:31:59 -07:00
committed by GitHub
parent df20a28835
commit fa67deec01
7 changed files with 1347 additions and 1538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/button-toggle/button-toggle.spec.ts
+53 -70
View File
@@ -1,9 +1,7 @@
import {
inject,
async,
fakeAsync,
tick,
TestComponentBuilder,
ComponentFixture,
TestBed,
} from '@angular/core/testing';
@@ -19,7 +17,6 @@ import {
describe('MdButtonToggle', () => {
let builder: TestComponentBuilder;
beforeEach(async(() => {
TestBed.configureTestingModule({
@@ -36,10 +33,6 @@ describe('MdButtonToggle', () => {
TestBed.compileComponents();
}));
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
builder = tcb;
}));
describe('inside of an exclusive selection group', () => {
let fixture: ComponentFixture<ButtonTogglesInsideButtonToggleGroup>;
@@ -53,26 +46,24 @@ describe('MdButtonToggle', () => {
let testComponent: ButtonTogglesInsideButtonToggleGroup;
beforeEach(async(() => {
builder.createAsync(ButtonTogglesInsideButtonToggleGroup).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements = buttonToggleDebugElements
.map(debugEl => debugEl.nativeElement);
buttonToggleNativeElements = buttonToggleDebugElements
.map(debugEl => debugEl.nativeElement);
buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
.map(debugEl => debugEl.nativeElement);
buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
});
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
}));
it('should set individual button toggle names based on the group name', () => {
@@ -215,22 +206,20 @@ describe('MdButtonToggle', () => {
let groupNgControl: NgControl;
beforeEach(async(() => {
builder.createAsync(ButtonToggleGroupWithNgModel).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements =
buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
});
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements =
buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
}));
it('should set individual radio names based on the group name', () => {
@@ -303,23 +292,21 @@ describe('MdButtonToggle', () => {
let groupNgControl: NgControl;
beforeEach(async(() => {
builder.createAsync(ButtonToggleGroupWithNgModel).then(f => {
fixture = f;
fixture = TestBed.createComponent(ButtonToggleGroupWithNgModel);
testComponent = fixture.debugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
groupNgControl = groupDebugElement.injector.get(NgControl);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements =
buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements =
buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
fixture.detectChanges();
});
fixture.detectChanges();
}));
it('should update the model before firing change event', fakeAsync(() => {
@@ -347,23 +334,21 @@ describe('MdButtonToggle', () => {
let testComponent: ButtonTogglesInsideButtonToggleGroupMultiple;
beforeEach(async(() => {
builder.createAsync(ButtonTogglesInsideButtonToggleGroupMultiple).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroupMultiple);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple));
groupNativeElement = groupDebugElement.nativeElement;
groupInstance = groupDebugElement.injector.get(MdButtonToggleGroupMultiple);
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements = buttonToggleDebugElements
.map(debugEl => debugEl.nativeElement);
buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
});
buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
buttonToggleNativeElements = buttonToggleDebugElements
.map(debugEl => debugEl.nativeElement);
buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
.map(debugEl => debugEl.nativeElement);
buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
}));
it('should disable click interactions when the group is disabled', () => {
@@ -446,17 +431,15 @@ describe('MdButtonToggle', () => {
let testComponent: StandaloneButtonToggle;
beforeEach(async(() => {
builder.createAsync(StandaloneButtonToggle).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(StandaloneButtonToggle);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
buttonToggleDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle));
buttonToggleNativeElement = buttonToggleDebugElement.nativeElement;
buttonToggleLabelElement = fixture.debugElement.query(By.css('label')).nativeElement;
buttonToggleInstance = buttonToggleDebugElement.componentInstance;
});
buttonToggleDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle));
buttonToggleNativeElement = buttonToggleDebugElement.nativeElement;
buttonToggleLabelElement = fixture.debugElement.query(By.css('label')).nativeElement;
buttonToggleInstance = buttonToggleDebugElement.componentInstance;
}));
it('should toggle when clicked', () => {
src/components/button/button.spec.ts
+66 -87
View File
@@ -1,6 +1,4 @@
import {
inject,
TestComponentBuilder,
async,
TestBed,
} from '@angular/core/testing';
@@ -10,7 +8,6 @@ import {MdButtonModule} from './button';
describe('MdButton', () => {
let builder: TestComponentBuilder;
beforeEach(async(() => {
TestBed.configureTestingModule({
@@ -21,125 +18,107 @@ describe('MdButton', () => {
TestBed.compileComponents();
}));
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
builder = tcb;
}));
// General button tests
it('should apply class based on color attribute', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
let aDebugElement = fixture.debugElement.query(By.css('a'));
it('should apply class based on color attribute', () => {
let fixture = TestBed.createComponent(TestApp);
testComponent.buttonColor = 'primary';
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
expect(aDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
let aDebugElement = fixture.debugElement.query(By.css('a'));
testComponent.buttonColor = 'accent';
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
expect(aDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
done();
});
testComponent.buttonColor = 'primary';
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
expect(aDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
testComponent.buttonColor = 'accent';
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
expect(aDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
});
it('should should not clear previous defined classes', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
it('should should not clear previous defined classes', () => {
let fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
buttonDebugElement.nativeElement.classList.add('custom-class');
buttonDebugElement.nativeElement.classList.add('custom-class');
testComponent.buttonColor = 'primary';
fixture.detectChanges();
testComponent.buttonColor = 'primary';
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
testComponent.buttonColor = 'accent';
fixture.detectChanges();
testComponent.buttonColor = 'accent';
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('md-primary')).toBe(false);
expect(buttonDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
done();
});
});
// Regular button tests
describe('button[md-button]', () => {
it('should handle a click on the button', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
it('should handle a click on the button', () => {
let fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
buttonDebugElement.nativeElement.click();
expect(testComponent.clickCount).toBe(1);
done();
});
buttonDebugElement.nativeElement.click();
expect(testComponent.clickCount).toBe(1);
});
it('should not increment if disabled', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
it('should not increment if disabled', () => {
let fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
testComponent.isDisabled = true;
fixture.detectChanges();
testComponent.isDisabled = true;
fixture.detectChanges();
buttonDebugElement.nativeElement.click();
buttonDebugElement.nativeElement.click();
expect(testComponent.clickCount).toBe(0);
done();
});
expect(testComponent.clickCount).toBe(0);
});
});
// Anchor button tests
describe('a[md-button]', () => {
it('should not redirect if disabled', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'));
it('should not redirect if disabled', () => {
let fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'));
testComponent.isDisabled = true;
fixture.detectChanges();
testComponent.isDisabled = true;
fixture.detectChanges();
buttonDebugElement.nativeElement.click();
// will error if page reloads
done();
});
buttonDebugElement.nativeElement.click();
});
it('should remove tabindex if disabled', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'));
expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(null);
it('should remove tabindex if disabled', () => {
let fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'));
expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe(null);
testComponent.isDisabled = true;
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe('-1');
done();
});
testComponent.isDisabled = true;
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('tabIndex')).toBe('-1');
});
it('should add aria-disabled attribute if disabled', (done: () => void) => {
return builder.createAsync(TestApp).then(fixture => {
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'));
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('false');
it('should add aria-disabled attribute if disabled', () => {
let fixture = TestBed.createComponent(TestApp);
let testComponent = fixture.debugElement.componentInstance;
let buttonDebugElement = fixture.debugElement.query(By.css('a'));
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('false');
testComponent.isDisabled = true;
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
done();
});
testComponent.isDisabled = true;
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
});
});
src/components/checkbox/checkbox.spec.ts
+47 -73
View File
@@ -1,9 +1,7 @@
import {
inject,
async,
fakeAsync,
flushMicrotasks,
TestComponentBuilder,
ComponentFixture,
TestBed,
} from '@angular/core/testing';
@@ -19,7 +17,6 @@ import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './checkbox';
// TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
describe('MdCheckbox', () => {
let builder: TestComponentBuilder;
let fixture: ComponentFixture<any>;
beforeEach(async(() => {
@@ -40,10 +37,6 @@ describe('MdCheckbox', () => {
TestBed.compileComponents();
}));
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
builder = tcb;
}));
describe('basic behaviors', () => {
let checkboxDebugElement: DebugElement;
let checkboxNativeElement: HTMLElement;
@@ -53,17 +46,15 @@ describe('MdCheckbox', () => {
let labelElement: HTMLLabelElement;
beforeEach(async(() => {
builder.createAsync(SingleCheckbox).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(SingleCheckbox);
fixture.detectChanges();
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
checkboxInstance = checkboxDebugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
});
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
checkboxInstance = checkboxDebugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
}));
it('should add and remove the checked state', () => {
@@ -328,17 +319,15 @@ describe('MdCheckbox', () => {
let labelElement: HTMLLabelElement;
beforeEach(async(() => {
builder.createAsync(CheckboxWithChangeEvent).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(CheckboxWithChangeEvent);
fixture.detectChanges();
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
checkboxInstance = checkboxDebugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
});
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
checkboxInstance = checkboxDebugElement.componentInstance;
testComponent = fixture.debugElement.componentInstance;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
}));
it('should emit the event to the change observable', () => {
@@ -382,15 +371,13 @@ describe('MdCheckbox', () => {
let inputElement: HTMLInputElement;
it('should use the provided aria-label', async(() => {
builder.createAsync(CheckboxWithAriaLabel).then(f => {
fixture = f;
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
fixture = TestBed.createComponent(CheckboxWithAriaLabel);
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
fixture.detectChanges();
expect(inputElement.getAttribute('aria-label')).toBe('Super effective');
});
fixture.detectChanges();
expect(inputElement.getAttribute('aria-label')).toBe('Super effective');
}));
});
@@ -400,27 +387,23 @@ describe('MdCheckbox', () => {
let inputElement: HTMLInputElement;
it('should use the provided aria-labelledby', async(() => {
builder.createAsync(CheckboxWithAriaLabelledby).then(f => {
fixture = f;
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
fixture = TestBed.createComponent(CheckboxWithAriaLabelledby);
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
fixture.detectChanges();
expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id');
});
fixture.detectChanges();
expect(inputElement.getAttribute('aria-labelledby')).toBe('some-id');
}));
it('should not assign aria-labelledby if none is provided', async(() => {
builder.createAsync(SingleCheckbox).then(f => {
fixture = f;
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
fixture = TestBed.createComponent(SingleCheckbox);
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
fixture.detectChanges();
expect(inputElement.getAttribute('aria-labelledby')).toBe(null);
});
fixture.detectChanges();
expect(inputElement.getAttribute('aria-labelledby')).toBe(null);
}));
});
@@ -432,16 +415,14 @@ describe('MdCheckbox', () => {
let labelElement: HTMLLabelElement;
beforeEach(async(() => {
builder.createAsync(CheckboxWithTabIndex).then(f => {
fixture = f;
fixture.detectChanges();
fixture = TestBed.createComponent(CheckboxWithTabIndex);
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
});
testComponent = fixture.debugElement.componentInstance;
checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox));
checkboxNativeElement = checkboxDebugElement.nativeElement;
inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
labelElement = <HTMLLabelElement>checkboxNativeElement.querySelector('label');
}));
it('should preserve any given tabIndex', async(() => {
@@ -464,10 +445,8 @@ describe('MdCheckbox', () => {
describe('with multiple checkboxes', () => {
beforeEach(async(() => {
builder.createAsync(MultipleCheckboxes).then(f => {
fixture = f;
fixture.detectChanges();
});
fixture = TestBed.createComponent(MultipleCheckboxes);
fixture.detectChanges();
}));
it('should assign a unique id to each checkbox', () => {
@@ -483,10 +462,8 @@ describe('MdCheckbox', () => {
describe('with ngModel', () => {
beforeEach(async(() => {
builder.createAsync(CheckboxWithFormDirectives).then(f => {
f.detectChanges();
fixture = f;
});
fixture = TestBed.createComponent(CheckboxWithFormDirectives);
fixture.detectChanges();
}));
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
@@ -506,10 +483,8 @@ describe('MdCheckbox', () => {
describe('with name attribute', () => {
beforeEach(async(() => {
builder.createAsync(CheckboxWithNameAttribute).then(f => {
f.detectChanges();
fixture = f;
});
fixture = TestBed.createComponent(CheckboxWithNameAttribute);
fixture.detectChanges();
}));
it('should forward name value to input element', fakeAsync(() => {
@@ -610,4 +585,3 @@ class CheckboxWithNameAttribute {}
class CheckboxWithChangeEvent {
lastEvent: MdCheckboxChange;
}
src/components/dialog/dialog.spec.ts
+12 -23
View File
@@ -2,8 +2,6 @@ import {
inject,
fakeAsync,
async,
addProviders,
TestComponentBuilder,
ComponentFixture,
TestBed,
} from '@angular/core/testing';
@@ -12,7 +10,6 @@ import {
Directive,
ViewChild,
ViewContainerRef,
ChangeDetectorRef,
} from '@angular/core';
import {MdDialog, MdDialogModule} from './dialog';
import {OverlayContainer} from '@angular2-material/core/overlay/overlay-container';
@@ -22,7 +19,6 @@ import {MdDialogRef} from './dialog-ref';
describe('MdDialog', () => {
let builder: TestComponentBuilder;
let dialog: MdDialog;
let overlayContainerElement: HTMLElement;
@@ -33,32 +29,27 @@ describe('MdDialog', () => {
TestBed.configureTestingModule({
imports: [MdDialogModule],
declarations: [PizzaMsg, ComponentWithChildViewContainer, DirectiveWithViewContainer],
providers: [
{provide: OverlayContainer, useFactory: () => {
overlayContainerElement = document.createElement('div');
return {getContainerElement: () => overlayContainerElement};
}}
],
});
addProviders([
{provide: OverlayContainer, useFactory: () => {
overlayContainerElement = document.createElement('div');
return {getContainerElement: () => overlayContainerElement};
}}
]);
TestBed.compileComponents();
}));
let deps = [TestComponentBuilder, MdDialog];
beforeEach(inject(deps, fakeAsync((tcb: TestComponentBuilder, d: MdDialog) => {
builder = tcb;
beforeEach(inject([MdDialog], fakeAsync((d: MdDialog) => {
dialog = d;
})));
beforeEach(async(() => {
builder.createAsync(ComponentWithChildViewContainer).then(fixture => {
viewContainerFixture = fixture;
beforeEach(() => {
viewContainerFixture = TestBed.createComponent(ComponentWithChildViewContainer);
viewContainerFixture.detectChanges();
testViewContainerRef = fixture.componentInstance.childViewContainer;
});
}));
viewContainerFixture.detectChanges();
testViewContainerRef = viewContainerFixture.componentInstance.childViewContainer;
});
it('should open a dialog with a component', async(() => {
let config = new MdDialogConfig();
@@ -139,8 +130,6 @@ class DirectiveWithViewContainer {
class ComponentWithChildViewContainer {
@ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
constructor(public changeDetectorRef: ChangeDetectorRef) { }
get childViewContainer() {
return this.childWithViewContainer.viewContainerRef;
}
src/components/grid-list/grid-list.spec.ts
+324 -311
View File
@@ -1,4 +1,4 @@
import {inject, async, TestComponentBuilder, TestBed} from '@angular/core/testing';
import {async, TestBed} from '@angular/core/testing';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdGridList, MdGridListModule} from './grid-list';
@@ -6,312 +6,207 @@ import {MdGridTile, MdGridTileText} from './grid-tile';
describe('MdGridList', () => {
let builder: TestComponentBuilder;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [MdGridListModule],
declarations: [TestGridList],
declarations: [
GridListWithoutCols,
GridListWithInvalidRowHeightRatio,
GridListWithTooWideColspan,
GridListWithUnspecifiedRowHeight,
GirdListWithRowHeightRatio,
GridListWithFitRowHeightMode,
GridListWithFixedRowHeightMode,
GridListWithUnitlessFixedRowHeight,
GridListWithUnspecifiedGutterSize,
GridListWithGutterSize,
GridListWithUnitlessGutterSize,
GridListWithRatioHeightAndMulipleRows,
GridListWithFixRowHeightAndMultipleRows,
GridListWithColspanBinding,
GridListWithRowspanBinding,
GridListWithComplexLayout,
GridListWithFootersWithoutLines,
GridListWithFooterContainingTwoLines,
],
});
TestBed.compileComponents();
}));
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
builder = tcb;
}));
it('should throw error if cols is not defined', () => {
let fixture = TestBed.createComponent(GridListWithoutCols);
it('should throw error if cols is not defined', async(() => {
var template = `<md-grid-list></md-grid-list>`;
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
expect(() => {
fixture.detectChanges();
}).toThrowError(/must pass in number of columns/);
});
}));
expect(() => fixture.detectChanges()).toThrowError(/must pass in number of columns/);
});
it('should throw error if rowHeight ratio is invalid', async(() => {
var template = `<md-grid-list cols="4" rowHeight="4:3:2"></md-grid-list>`;
it('should throw error if rowHeight ratio is invalid', () => {
let fixture = TestBed.createComponent(GridListWithInvalidRowHeightRatio);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
expect(() => {
fixture.detectChanges();
}).toThrowError(/invalid ratio given for row-height/);
});
}));
expect(() => fixture.detectChanges()).toThrowError(/invalid ratio given for row-height/);
});
it('should throw error if tile colspan is wider than total cols', async(() => {
var template = `
<md-grid-list cols="4">
<md-grid-tile colspan="5"></md-grid-tile>
</md-grid-list>`;
it('should throw error if tile colspan is wider than total cols', () => {
let fixture = TestBed.createComponent(GridListWithTooWideColspan);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
expect(() => {
fixture.detectChanges();
}).toThrowError(/tile with colspan 5 is wider than grid/);
});
}));
expect(() => fixture.detectChanges()).toThrowError(/tile with colspan 5 is wider than grid/);
});
it('should default to 1:1 row height if undefined ', async(() => {
var template = `
<div style="width:200px">
<md-grid-list cols="1">
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`;
it('should default to 1:1 row height if undefined ', () => {
let fixture = TestBed.createComponent(GridListWithUnspecifiedRowHeight);
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
// In ratio mode, heights are set using the padding-top property.
expect(getStyle(tile, 'padding-top')).toBe('200px');
});
// in ratio mode, heights are set using the padding-top property
expect(getProp(tile, 'padding-top')).toBe('200px');
});
}));
it('should use a ratio row height if passed in', () => {
let fixture = TestBed.createComponent(GirdListWithRowHeightRatio);
it('should use a ratio row height if passed in', async(() => {
var template = `
<div style="width:400px">
<md-grid-list cols="1" [rowHeight]="height">
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`;
fixture.componentInstance.heightRatio = '4:1';
fixture.detectChanges();
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.componentInstance.height = '4:1';
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getStyle(tile, 'padding-top')).toBe('100px');
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getProp(tile, 'padding-top')).toBe('100px');
fixture.componentInstance.heightRatio = '2:1';
fixture.detectChanges();
fixture.componentInstance.height = '2:1';
fixture.detectChanges();
expect(getStyle(tile, 'padding-top')).toBe('200px');
});
expect(getProp(tile, 'padding-top')).toBe('200px');
});
}));
it('should divide row height evenly in "fit" mode', () => {
let fixture = TestBed.createComponent(GridListWithFitRowHeightMode);
it('should divide row height evenly in "fit" mode', async(() => {
var template = `
<md-grid-list cols="1" rowHeight="fit" [style.height]="height">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>`;
fixture.componentInstance.totalHeight = '300px';
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.componentInstance.height = '300px';
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
// 149.5 * 2 = 299px + 1px gutter = 300px
expect(getStyle(tile, 'height')).toBe('149.5px');
// 149.5 * 2 = 299px + 1px gutter = 300px
expect(getProp(tile, 'height')).toBe('149.5px');
fixture.componentInstance.totalHeight = '200px';
fixture.detectChanges();
fixture.componentInstance.height = '200px';
fixture.detectChanges();
// 99.5 * 2 = 199px + 1px gutter = 200px
expect(getStyle(tile, 'height')).toBe('99.5px');
});
// 99.5 * 2 = 199px + 1px gutter = 200px
expect(getProp(tile, 'height')).toBe('99.5px');
});
}));
it('should use the fixed row height if passed in', () => {
let fixture = TestBed.createComponent(GridListWithFixedRowHeightMode);
it('should use the fixed row height if passed in', async(() => {
var template = `
<md-grid-list cols="4" [rowHeight]="height">
<md-grid-tile></md-grid-tile>
</md-grid-list>`;
fixture.componentInstance.rowHeight = '100px';
fixture.detectChanges();
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.componentInstance.height = '100px';
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getStyle(tile, 'height')).toBe('100px');
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getProp(tile, 'height')).toBe('100px');
fixture.componentInstance.rowHeight = '200px';
fixture.detectChanges();
fixture.componentInstance.height = '200px';
fixture.detectChanges();
expect(getStyle(tile, 'height')).toBe('200px');
});
expect(getProp(tile, 'height')).toBe('200px');
});
}));
it('should default to pixels if row height units are missing', () => {
let fixture = TestBed.createComponent(GridListWithUnitlessFixedRowHeight);
fixture.detectChanges();
it('should default to pixels if row height units are missing', async(() => {
var template = `
<md-grid-list cols="4" rowHeight="100">
<md-grid-tile></md-grid-tile>
</md-grid-list>`;
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getStyle(tile, 'height')).toBe('100px');
});
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
it('should default gutter size to 1px', () => {
let fixture = TestBed.createComponent(GridListWithUnspecifiedGutterSize);
fixture.detectChanges();
fixture.whenStable().then(() => {
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getProp(tile, 'height')).toBe('100px');
});
});
}));
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
it('should default gutter size to 1px', async(() => {
var template = `
<div style="width:200px">
<md-grid-list cols="2" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`;
// check horizontal gutter
expect(getStyle(tiles[0], 'width')).toBe('99.5px');
expect(getComputedLeft(tiles[1])).toBe(100.5);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
fixture.whenStable().then(() => {
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
// check vertical gutter
expect(getStyle(tiles[0], 'height')).toBe('100px');
expect(getStyle(tiles[2], 'top')).toBe('101px');
});
// check horizontal gutter
expect(getProp(tiles[0], 'width')).toBe('99.5px');
expect(getComputedLeft(tiles[1])).toBe(100.5);
it('should set the gutter size if passed', () => {
let fixture = TestBed.createComponent(GridListWithGutterSize);
fixture.detectChanges();
// check vertical gutter
expect(getProp(tiles[0], 'height')).toBe('100px');
expect(getProp(tiles[2], 'top')).toBe('101px');
});
});
}));
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
it('should set the gutter size if passed', async(() => {
var template = `
<div style="width:200px">
<md-grid-list cols="2" gutterSize="2px" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`;
// check horizontal gutter
expect(getStyle(tiles[0], 'width')).toBe('99px');
expect(getComputedLeft(tiles[1])).toBe(101);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
fixture.whenStable().then(() => {
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
// check vertical gutter
expect(getStyle(tiles[0], 'height')).toBe('100px');
expect(getStyle(tiles[2], 'top')).toBe('102px');
});
// check horizontal gutter
expect(getProp(tiles[0], 'width')).toBe('99px');
expect(getComputedLeft(tiles[1])).toBe(101);
it('should use pixels if gutter units are missing', () => {
let fixture = TestBed.createComponent(GridListWithUnitlessGutterSize);
fixture.detectChanges();
// check vertical gutter
expect(getProp(tiles[0], 'height')).toBe('100px');
expect(getProp(tiles[2], 'top')).toBe('102px');
});
});
}));
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
it('should use pixels if gutter units are missing', async(() => {
var template = `
<div style="width:200px">
<md-grid-list cols="2" gutterSize="2" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`;
// check horizontal gutter
expect(getStyle(tiles[0], 'width')).toBe('99px');
expect(getComputedLeft(tiles[1])).toBe(101);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
fixture.whenStable().then(() => {
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
// check vertical gutter
expect(getStyle(tiles[0], 'height')).toBe('100px');
expect(getStyle(tiles[2], 'top')).toBe('102px');
});
// check horizontal gutter
expect(getProp(tiles[0], 'width')).toBe('99px');
expect(getComputedLeft(tiles[1])).toBe(101);
it('should set the correct list height in ratio mode', () => {
let fixture = TestBed.createComponent(GridListWithRatioHeightAndMulipleRows);
fixture.detectChanges();
// check vertical gutter
expect(getProp(tiles[0], 'height')).toBe('100px');
expect(getProp(tiles[2], 'top')).toBe('102px');
});
});
}));
let list = fixture.debugElement.query(By.directive(MdGridList));
expect(getStyle(list, 'padding-bottom')).toBe('201px');
});
it('should set the correct list height in ratio mode', async(() => {
var template = `
<div style="width:400px">
<md-grid-list cols="1" rowHeight="4:1">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>
`;
it('should set the correct list height in fixed mode', () => {
let fixture = TestBed.createComponent(GridListWithFixRowHeightAndMultipleRows);
fixture.detectChanges();
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
let list = fixture.debugElement.query(By.directive(MdGridList));
expect(getProp(list, 'padding-bottom')).toBe('201px');
});
}));
let list = fixture.debugElement.query(By.directive(MdGridList));
expect(getStyle(list, 'height')).toBe('201px');
});
it('should set the correct list height in fixed mode', async(() => {
var template = `
<md-grid-list cols="1" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>`;
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
let list = fixture.debugElement.query(By.directive(MdGridList));
expect(getProp(list, 'height')).toBe('201px');
});
}));
it('should allow adjustment of tile colspan', async(() => {
var template = `
<div style="width:400px">
<md-grid-list cols="4">
<md-grid-tile [colspan]="colspan"></md-grid-tile>
</md-grid-list>
</div>`;
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
it('should allow adjustment of tile colspan', () => {
let fixture = TestBed.createComponent(GridListWithColspanBinding);
fixture.componentInstance.colspan = 2;
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getProp(tile, 'width')).toBe('199.5px');
expect(getStyle(tile, 'width')).toBe('199.5px');
fixture.componentInstance.colspan = 3;
fixture.detectChanges();
expect(getProp(tile, 'width')).toBe('299.75px');
});
}));
expect(getStyle(tile, 'width')).toBe('299.75px');
});
it('should allow adjustment of tile rowspan', async(() => {
var template = `
<md-grid-list cols="1" rowHeight="100px">
<md-grid-tile [rowspan]="rowspan"></md-grid-tile>
</md-grid-list>`;
it('should allow adjustment of tile rowspan', () => {
let fixture = TestBed.createComponent(GridListWithRowspanBinding);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.componentInstance.rowspan = 2;
fixture.detectChanges();
fixture.componentInstance.rowspan = 2;
fixture.detectChanges();
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getProp(tile, 'height')).toBe('201px');
let tile = fixture.debugElement.query(By.directive(MdGridTile));
expect(getStyle(tile, 'height')).toBe('201px');
fixture.componentInstance.rowspan = 3;
fixture.detectChanges();
expect(getProp(tile, 'height')).toBe('302px');
});
}));
fixture.componentInstance.rowspan = 3;
fixture.detectChanges();
expect(getStyle(tile, 'height')).toBe('302px');
});
it('should lay out tiles correctly for a complex layout', async(() => {
var template = `
<div style="width:400px">
<md-grid-list cols="4" rowHeight="100px">
<md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
</md-grid-tile>
</md-grid-list>
</div>`;
it('should lay out tiles correctly for a complex layout', () => {
let fixture = TestBed.createComponent(GridListWithComplexLayout);
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.componentInstance.tiles = [
{cols: 3, rows: 1},
{cols: 1, rows: 2},
@@ -320,83 +215,48 @@ describe('MdGridList', () => {
];
fixture.detectChanges();
fixture.whenStable().then(() => {
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile'));
expect(getProp(tiles[0], 'width')).toBe('299.75px');
expect(getProp(tiles[0], 'height')).toBe('100px');
expect(getComputedLeft(tiles[0])).toBe(0);
expect(getProp(tiles[0], 'top')).toBe('0px');
expect(getStyle(tiles[0], 'width')).toBe('299.75px');
expect(getStyle(tiles[0], 'height')).toBe('100px');
expect(getComputedLeft(tiles[0])).toBe(0);
expect(getStyle(tiles[0], 'top')).toBe('0px');
expect(getProp(tiles[1], 'width')).toBe('99.25px');
expect(getProp(tiles[1], 'height')).toBe('201px');
expect(getComputedLeft(tiles[1])).toBe(300.75);
expect(getProp(tiles[1], 'top')).toBe('0px');
expect(getStyle(tiles[1], 'width')).toBe('99.25px');
expect(getStyle(tiles[1], 'height')).toBe('201px');
expect(getComputedLeft(tiles[1])).toBe(300.75);
expect(getStyle(tiles[1], 'top')).toBe('0px');
expect(getProp(tiles[2], 'width')).toBe('99.25px');
expect(getProp(tiles[2], 'height')).toBe('100px');
expect(getComputedLeft(tiles[2])).toBe(0);
expect(getProp(tiles[2], 'top')).toBe('101px');
expect(getStyle(tiles[2], 'width')).toBe('99.25px');
expect(getStyle(tiles[2], 'height')).toBe('100px');
expect(getComputedLeft(tiles[2])).toBe(0);
expect(getStyle(tiles[2], 'top')).toBe('101px');
expect(getProp(tiles[3], 'width')).toBe('199.5px');
expect(getProp(tiles[3], 'height')).toBe('100px');
expect(getComputedLeft(tiles[3])).toBe(100.25);
expect(getProp(tiles[3], 'top')).toBe('101px');
});
});
}));
expect(getStyle(tiles[3], 'width')).toBe('199.5px');
expect(getStyle(tiles[3], 'height')).toBe('100px');
expect(getComputedLeft(tiles[3])).toBe(100.25);
expect(getStyle(tiles[3], 'top')).toBe('101px');
});
it('should add not add any classes to footers without lines', async(() => {
var template = `
<md-grid-list cols="1">
<md-grid-tile>
<md-grid-tile-footer>
I'm a footer!
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>`;
it('should add not add any classes to footers without lines', () => {
let fixture = TestBed.createComponent(GridListWithFootersWithoutLines);
fixture.detectChanges();
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
let footer = fixture.debugElement.query(By.directive(MdGridTileText));
expect(footer.nativeElement.classList.contains('md-2-line')).toBe(false);
});
let footer = fixture.debugElement.query(By.directive(MdGridTileText));
expect(footer.nativeElement.classList.contains('md-2-line')).toBe(false);
});
}));
it('should add class to footers with two lines', async(() => {
var template = `
<md-grid-list cols="1">
<md-grid-tile>
<md-grid-tile-footer>
<h3 md-line>First line</h3>
<span md-line>Second line</span>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>`;
builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => {
fixture.detectChanges();
let footer = fixture.debugElement.query(By.directive(MdGridTileText));
expect(footer.nativeElement.classList.contains('md-2-line')).toBe(true);
});
}));
it('should add class to footers with two lines', () => {
let fixture = TestBed.createComponent(GridListWithFooterContainingTwoLines);
fixture.detectChanges();
let footer = fixture.debugElement.query(By.directive(MdGridTileText));
expect(footer.nativeElement.classList.contains('md-2-line')).toBe(true);
});
});
@Component({
selector: 'test-grid-list',
template: ``
})
class TestGridList {
tiles: any[];
height: string | number;
colspan: number;
rowspan: number;
}
function getProp(el: DebugElement, prop: string): string {
function getStyle(el: DebugElement, prop: string): string {
return getComputedStyle(el.nativeElement).getPropertyValue(prop);
}
@@ -411,3 +271,156 @@ function getComputedLeft(element: DebugElement): number {
return elementRect.left - bodyRect.left;
}
@Component({template: '<md-grid-list></md-grid-list>'})
class GridListWithoutCols { }
@Component({template: '<md-grid-list cols="4" rowHeight="4:3:2"></md-grid-list>'})
class GridListWithInvalidRowHeightRatio { }
@Component({template:
'<md-grid-list cols="4"><md-grid-tile colspan="5"></md-grid-tile></md-grid-list>'})
class GridListWithTooWideColspan { }
@Component({template: `
<div style="width:200px">
<md-grid-list cols="1">
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithUnspecifiedRowHeight { }
@Component({template: `
<div style="width:400px">
<md-grid-list cols="1" [rowHeight]="heightRatio">
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`})
class GirdListWithRowHeightRatio {
heightRatio: string;
}
@Component({template: `
<md-grid-list cols="1" rowHeight="fit" [style.height]="totalHeight">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>`})
class GridListWithFitRowHeightMode {
totalHeight: string;
}
@Component({template: `
<md-grid-list cols="4" [rowHeight]="rowHeight">
<md-grid-tile></md-grid-tile>
</md-grid-list>`})
class GridListWithFixedRowHeightMode {
rowHeight: string;
}
@Component({template: `
<md-grid-list cols="4" rowHeight="100">
<md-grid-tile></md-grid-tile>
</md-grid-list>`})
class GridListWithUnitlessFixedRowHeight {
rowHeight: string;
}
@Component({template: `
<div style="width:200px">
<md-grid-list cols="2" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithUnspecifiedGutterSize { }
@Component({template: `
<div style="width:200px">
<md-grid-list cols="2" gutterSize="2px" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithGutterSize { }
@Component({template: `
<div style="width:200px">
<md-grid-list cols="2" gutterSize="2" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithUnitlessGutterSize { }
@Component({template: `
<div style="width:400px">
<md-grid-list cols="1" rowHeight="4:1">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithRatioHeightAndMulipleRows { }
@Component({template: `
<md-grid-list cols="1" rowHeight="100px">
<md-grid-tile></md-grid-tile>
<md-grid-tile></md-grid-tile>
</md-grid-list>`})
class GridListWithFixRowHeightAndMultipleRows { }
@Component({template: `
<div style="width:400px">
<md-grid-list cols="4">
<md-grid-tile [colspan]="colspan"></md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithColspanBinding {
colspan: number;
}
@Component({template: `
<md-grid-list cols="1" rowHeight="100px">
<md-grid-tile [rowspan]="rowspan"></md-grid-tile>
</md-grid-list>`})
class GridListWithRowspanBinding {
rowspan: number;
}
@Component({template: `
<div style="width:400px">
<md-grid-list cols="4" rowHeight="100px">
<md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
</md-grid-tile>
</md-grid-list>
</div>`})
class GridListWithComplexLayout {
tiles: any[];
}
@Component({template: `
<md-grid-list cols="1">
<md-grid-tile>
<md-grid-tile-footer>
I'm a footer!
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>`})
class GridListWithFootersWithoutLines { }
@Component({template: `
<md-grid-list cols="1">
<md-grid-tile>
<md-grid-tile-footer>
<h3 md-line>First line</h3>
<span md-line>Second line</span>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>`})
class GridListWithFooterContainingTwoLines { }
src/components/icon/icon.spec.ts
+278 -279
View File
@@ -1,8 +1,6 @@
import {
addProviders,
inject,
async,
TestComponentBuilder,
TestBed,
} from '@angular/core/testing';
import {XHRBackend} from '@angular/http';
@@ -49,24 +47,20 @@ describe('MdIcon', () => {
MdIconFromSvgUrlTestApp,
MdIconFromSvgNameTestApp,
],
providers: [
MockBackend,
{provide: XHRBackend, useExisting: MockBackend},
]
});
addProviders([
MockBackend,
{provide: XHRBackend, useExisting: MockBackend},
]);
TestBed.compileComponents();
}));
let builder: TestComponentBuilder;
let mdIconRegistry: MdIconRegistry;
let httpRequestUrls: string[];
beforeEach(
inject([TestComponentBuilder, MdIconRegistry, MockBackend],
(tcb: TestComponentBuilder, mir: MdIconRegistry, mockBackend: MockBackend) => {
builder = tcb;
let deps = [MdIconRegistry, MockBackend];
beforeEach(inject(deps, (mir: MdIconRegistry, mockBackend: MockBackend) => {
mdIconRegistry = mir;
// Keep track of requests so we can verify caching behavior.
// Return responses for the SVGs defined in fake-svgs.ts.
@@ -79,328 +73,333 @@ describe('MdIcon', () => {
}));
describe('Ligature icons', () => {
it('should add material-icons class by default', async(() => {
builder.createAsync(MdIconLigatureTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']);
});
}));
it('should add material-icons class by default', () => {
let fixture = TestBed.createComponent(MdIconLigatureTestApp);
it('should use alternate icon font if set', async(() => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']);
});
it('should use alternate icon font if set', () => {
mdIconRegistry.setDefaultFontSetClass('myfont');
builder.createAsync(MdIconLigatureTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['myfont']);
});
}));
let fixture = TestBed.createComponent(MdIconLigatureTestApp);
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['myfont']);
});
});
describe('Icons from URLs', () => {
it('should fetch SVG icon from URL and inline the content', async(() => {
builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
it('should fetch SVG icon from URL and inline the content', () => {
let fixture = TestBed.createComponent(MdIconFromSvgUrlTestApp);
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
// An <svg> element should have been added as a child of <md-icon>.
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
// Default attributes should be set.
expect(svgElement.getAttribute('height')).toBe('100%');
expect(svgElement.getAttribute('height')).toBe('100%');
// Make sure SVG content is taken from response.
verifyPathChildElement(svgElement, 'meow');
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
// Change the icon, and the SVG element should be replaced.
testComponent.iconUrl = 'dog.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
// An <svg> element should have been added as a child of <md-icon>.
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
// Default attributes should be set.
expect(svgElement.getAttribute('height')).toBe('100%');
expect(svgElement.getAttribute('height')).toBe('100%');
// Make sure SVG content is taken from response.
verifyPathChildElement(svgElement, 'meow');
expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
// Using an icon from a previously loaded URL should not cause another HTTP request.
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
});
}));
// Change the icon, and the SVG element should be replaced.
testComponent.iconUrl = 'dog.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
it('should register icon URLs by name', async(() => {
expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
// Using an icon from a previously loaded URL should not cause another HTTP request.
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']);
});
it('should register icon URLs by name', () => {
mdIconRegistry.addSvgIcon('fluffy', 'cat.svg');
mdIconRegistry.addSvgIcon('fido', 'dog.svg');
builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: SVGElement;
testComponent.iconName = 'fido';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
// The aria label should be taken from the icon name.
expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: SVGElement;
// Change the icon, and the SVG element should be replaced.
testComponent.iconName = 'fluffy';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
testComponent.iconName = 'fido';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
// The aria label should be taken from the icon name.
expect(mdIconElement.getAttribute('aria-label')).toBe('fido');
expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
// Using an icon from a previously loaded URL should not cause another HTTP request.
testComponent.iconName = 'fido';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
});
}));
// Change the icon, and the SVG element should be replaced.
testComponent.iconName = 'fluffy';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
expect(mdIconElement.getAttribute('aria-label')).toBe('fluffy');
it('should extract icon from SVG icon set', async(() => {
expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
// Using an icon from a previously loaded URL should not cause another HTTP request.
testComponent.iconName = 'fido';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']);
});
it('should extract icon from SVG icon set', () => {
mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
let svgChild: any;
testComponent.iconName = 'farm:pig';
fixture.detectChanges();
let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
expect(mdIconElement.childNodes.length).toBe(1);
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
expect(svgElement.childNodes.length).toBe(1);
svgChild = svgElement.childNodes[0];
// The first <svg> child should be the <g id="pig"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('pig');
verifyPathChildElement(svgChild, 'oink');
// The aria label should be taken from the icon name (without the icon set portion).
expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
let svgChild: any;
// Change the icon, and the SVG element should be replaced.
testComponent.iconName = 'farm:cow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
svgChild = svgElement.childNodes[0];
// The first <svg> child should be the <g id="cow"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('cow');
verifyPathChildElement(svgChild, 'moo');
expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
});
}));
testComponent.iconName = 'farm:pig';
fixture.detectChanges();
it('should allow multiple icon sets in a namespace', async(() => {
expect(mdIconElement.childNodes.length).toBe(1);
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
expect(svgElement.childNodes.length).toBe(1);
svgChild = svgElement.childNodes[0];
// The first <svg> child should be the <g id="pig"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('pig');
verifyPathChildElement(svgChild, 'oink');
// The aria label should be taken from the icon name (without the icon set portion).
expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
// Change the icon, and the SVG element should be replaced.
testComponent.iconName = 'farm:cow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
svgChild = svgElement.childNodes[0];
// The first <svg> child should be the <g id="cow"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('cow');
verifyPathChildElement(svgChild, 'moo');
expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
});
it('should allow multiple icon sets in a namespace', () => {
mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg');
mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-2.svg');
mdIconRegistry.addSvgIconSetInNamespace('arrows', 'arrow-set.svg');
builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
let svgChild: any;
testComponent.iconName = 'farm:pig';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
expect(svgElement.childNodes.length).toBe(1);
svgChild = svgElement.childNodes[0];
// The <svg> child should be the <g id="pig"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('pig');
expect(svgChild.childNodes.length).toBe(1);
verifyPathChildElement(svgChild, 'oink');
// The aria label should be taken from the icon name (without the namespace).
expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
// Both icon sets registered in the 'farm' namespace should have been fetched.
expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
let svgChild: any;
// Change the icon name to one that appears in both icon sets. The icon from the set that
// was registered last should be used (with id attribute of 'moo moo' instead of 'moo'),
// and no additional HTTP request should be made.
testComponent.iconName = 'farm:cow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
svgChild = svgElement.childNodes[0];
// The first <svg> child should be the <g id="cow"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('cow');
expect(svgChild.childNodes.length).toBe(1);
verifyPathChildElement(svgChild, 'moo moo');
expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
});
}));
testComponent.iconName = 'farm:pig';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
expect(svgElement.childNodes.length).toBe(1);
svgChild = svgElement.childNodes[0];
// The <svg> child should be the <g id="pig"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('pig');
expect(svgChild.childNodes.length).toBe(1);
verifyPathChildElement(svgChild, 'oink');
// The aria label should be taken from the icon name (without the namespace).
expect(mdIconElement.getAttribute('aria-label')).toBe('pig');
it('should not wrap <svg> elements in icon sets in another svg tag', async(() => {
// Both icon sets registered in the 'farm' namespace should have been fetched.
expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
// Change the icon name to one that appears in both icon sets. The icon from the set that
// was registered last should be used (with id attribute of 'moo moo' instead of 'moo'),
// and no additional HTTP request should be made.
testComponent.iconName = 'farm:cow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
svgChild = svgElement.childNodes[0];
// The first <svg> child should be the <g id="cow"> element.
expect(svgChild.tagName.toLowerCase()).toBe('g');
expect(svgChild.getAttribute('id')).toBe('cow');
expect(svgChild.childNodes.length).toBe(1);
verifyPathChildElement(svgChild, 'moo moo');
expect(mdIconElement.getAttribute('aria-label')).toBe('cow');
expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']);
});
it('should not wrap <svg> elements in icon sets in another svg tag', () => {
mdIconRegistry.addSvgIconSet('arrow-set.svg');
builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
testComponent.iconName = 'left-arrow';
fixture.detectChanges();
// arrow-set.svg stores its icons as nested <svg> elements, so they should be used
// directly and not wrapped in an outer <svg> tag like the <g> elements in other sets.
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'left');
expect(mdIconElement.getAttribute('aria-label')).toBe('left-arrow');
});
}));
let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
it('should return unmodified copies of icons from URLs', async(() => {
builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
// Modify the SVG element by setting a viewBox attribute.
svgElement.setAttribute('viewBox', '0 0 100 100');
testComponent.iconName = 'left-arrow';
fixture.detectChanges();
// arrow-set.svg stores its icons as nested <svg> elements, so they should be used
// directly and not wrapped in an outer <svg> tag like the <g> elements in other sets.
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'left');
expect(mdIconElement.getAttribute('aria-label')).toBe('left-arrow');
});
// Switch to a different icon.
testComponent.iconUrl = 'dog.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
it('should return unmodified copies of icons from URLs', () => {
let fixture = TestBed.createComponent(MdIconFromSvgUrlTestApp);
// Switch back to the first icon. The viewBox attribute should not be present.
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
expect(svgElement.getAttribute('viewBox')).toBeFalsy();
});
}));
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
it('should return unmodified copies of icons from icon sets', async(() => {
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
// Modify the SVG element by setting a viewBox attribute.
svgElement.setAttribute('viewBox', '0 0 100 100');
// Switch to a different icon.
testComponent.iconUrl = 'dog.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'woof');
// Switch back to the first icon. The viewBox attribute should not be present.
testComponent.iconUrl = 'cat.svg';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'meow');
expect(svgElement.getAttribute('viewBox')).toBeFalsy();
});
it('should return unmodified copies of icons from icon sets', () => {
mdIconRegistry.addSvgIconSet('arrow-set.svg');
builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
testComponent.iconName = 'left-arrow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'left');
// Modify the SVG element by setting a viewBox attribute.
svgElement.setAttribute('viewBox', '0 0 100 100');
let fixture = TestBed.createComponent(MdIconFromSvgNameTestApp);
// Switch to a different icon.
testComponent.iconName = 'right-arrow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'right');
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
let svgElement: any;
// Switch back to the first icon. The viewBox attribute should not be present.
testComponent.iconName = 'left-arrow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'left');
expect(svgElement.getAttribute('viewBox')).toBeFalsy();
});
}));
testComponent.iconName = 'left-arrow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'left');
// Modify the SVG element by setting a viewBox attribute.
svgElement.setAttribute('viewBox', '0 0 100 100');
// Switch to a different icon.
testComponent.iconName = 'right-arrow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'right');
// Switch back to the first icon. The viewBox attribute should not be present.
testComponent.iconName = 'left-arrow';
fixture.detectChanges();
svgElement = verifyAndGetSingleSvgChild(mdIconElement);
verifyPathChildElement(svgElement, 'left');
expect(svgElement.getAttribute('viewBox')).toBeFalsy();
});
});
describe('custom fonts', () => {
it('should apply CSS classes for custom font and icon', async(() => {
it('should apply CSS classes for custom font and icon', () => {
mdIconRegistry.registerFontClassAlias('f1', 'font1');
mdIconRegistry.registerFontClassAlias('f2');
builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.fontSet = 'f1';
testComponent.fontIcon = 'house';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['font1', 'house']);
expect(mdIconElement.getAttribute('aria-label')).toBe('house');
testComponent.fontSet = 'f2';
testComponent.fontIcon = 'igloo';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['f2', 'igloo']);
expect(mdIconElement.getAttribute('aria-label')).toBe('igloo');
let fixture = TestBed.createComponent(MdIconCustomFontCssTestApp);
testComponent.fontSet = 'f3';
testComponent.fontIcon = 'tent';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['f3', 'tent']);
expect(mdIconElement.getAttribute('aria-label')).toBe('tent');
});
}));
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.fontSet = 'f1';
testComponent.fontIcon = 'house';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['font1', 'house']);
expect(mdIconElement.getAttribute('aria-label')).toBe('house');
testComponent.fontSet = 'f2';
testComponent.fontIcon = 'igloo';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['f2', 'igloo']);
expect(mdIconElement.getAttribute('aria-label')).toBe('igloo');
testComponent.fontSet = 'f3';
testComponent.fontIcon = 'tent';
fixture.detectChanges();
expect(sortedClassNames(mdIconElement)).toEqual(['f3', 'tent']);
expect(mdIconElement.getAttribute('aria-label')).toBe('tent');
});
});
describe('aria label', () => {
it('should set aria label from text content if not specified', async(() => {
builder.createAsync(MdIconLigatureTestApp).then(fixture => {
it('should set aria label from text content if not specified', () => {
let fixture = TestBed.createComponent(MdIconLigatureTestApp);
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('home');
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('home');
testComponent.iconName = 'hand';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
});
}));
testComponent.iconName = 'hand';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('hand');
});
it('should use alt tag if aria label is not specified', async(() => {
builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
testComponent.altText = 'castle';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('castle');
it('should use alt tag if aria label is not specified', () => {
let fixture = TestBed.createComponent(MdIconLigatureWithAriaBindingTestApp);
testComponent.ariaLabel = 'house';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('house');
});
}));
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
testComponent.altText = 'castle';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('castle');
it('should use provided aria label rather than icon name', async(() => {
builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
testComponent.ariaLabel = 'house';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('house');
});
}));
testComponent.ariaLabel = 'house';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('house');
});
it('should use provided aria label rather than font icon', async(() => {
builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => {
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.fontSet = 'f1';
testComponent.fontIcon = 'house';
testComponent.ariaLabel = 'home';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('home');
});
}));
it('should use provided aria label rather than icon name', () => {
let fixture = TestBed.createComponent(MdIconLigatureWithAriaBindingTestApp);
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.iconName = 'home';
testComponent.ariaLabel = 'house';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('house');
});
it('should use provided aria label rather than font icon', () => {
let fixture = TestBed.createComponent(MdIconCustomFontCssTestApp);
const testComponent = fixture.debugElement.componentInstance;
const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon');
testComponent.fontSet = 'f1';
testComponent.fontIcon = 'house';
testComponent.ariaLabel = 'home';
fixture.detectChanges();
expect(mdIconElement.getAttribute('aria-label')).toBe('home');
});
});
});
src/components/input/input.spec.ts
+567 -695
View File
File diff suppressed because it is too large Load Diff