Skip to content

chore(sidenav): remove TestComponentBuilder #1012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 15, 2016
Merged

chore(sidenav): remove TestComponentBuilder #1012

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 43 additions & 105 deletions src/components/sidenav/sidenav.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,12 @@
import {
fakeAsync,
async,
inject,
tick,
TestComponentBuilder,
ComponentFixture,
TestBed,
} from '@angular/core/testing';
import {XHR} from '@angular/compiler';
import {Component, ViewMetadata} from '@angular/core';
import {fakeAsync, async, tick, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdSidenav, MdSidenavLayout, MdSidenavModule} from './sidenav';


/**
* Create a ComponentFixture from the builder. This takes a template and a style for sidenav.
*/
function createFixture(appType: any, builder: TestComponentBuilder,
template: string, style: string): ComponentFixture<any> {
let fixture: ComponentFixture<any> = null;
// Remove the styles (which remove the animations/transitions).
builder
.overrideView(MdSidenavLayout, new ViewMetadata({
template: template,
styles: [style || ''],
}))
.createAsync(appType).then((f: ComponentFixture<any>) => {
fixture = f;
});
tick();

return fixture;
}
import {MdSidenav, MdSidenavModule} from './sidenav';


function endSidenavTransition(fixture: ComponentFixture<any>) {
let sidenav: any = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance;
sidenav._onTransitionEnd({
sidenav._onTransitionEnd(<any> {
target: (<any>sidenav)._elementRef.nativeElement,
propertyName: 'transform'
});
Expand All @@ -45,10 +15,6 @@ function endSidenavTransition(fixture: ComponentFixture<any>) {


describe('MdSidenav', () => {
let template: string;
let style: string;
let builder: TestComponentBuilder;
let xhr: XHR;

beforeEach(async(() => {
TestBed.configureTestingModule({
Expand All @@ -57,36 +23,17 @@ describe('MdSidenav', () => {
BasicTestApp,
SidenavLayoutTwoSidenavTestApp,
SidenavLayoutNoSidenavTestApp,
SidenavSetToOpenedFalse,
SidenavSetToOpenedTrue,
],
});

TestBed.compileComponents();
}));

beforeEach(fakeAsync(inject([TestComponentBuilder, XHR], (tcb: TestComponentBuilder, x: XHR) => {
builder = tcb;
xhr = x;
})));

/**
* We need to get the template and styles for the sidenav in an Async test.
* FakeAsync would block indefinitely on the XHR if we were to create the component async-ly.
* See https://github.com/angular/angular/issues/5601.
* We do some style verification so styles have to match.
* But we remove the transitions so we only set the regular `sidenav.css` styling.
*/
beforeEach(async(() => {
xhr.get('./components/sidenav/sidenav.html').then(t => {
template = t;
});
xhr.get('./components/sidenav/sidenav.css').then(css => {
style = css;
});
}));

describe('methods', () => {
it('should be able to open and close', fakeAsync(() => {
let fixture = createFixture(BasicTestApp, builder, template, style);
let fixture = TestBed.createComponent(BasicTestApp);

let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
let openButtonElement = fixture.debugElement.query(By.css('.open'));
Expand Down Expand Up @@ -135,7 +82,7 @@ describe('MdSidenav', () => {
}));

it('open/close() return a promise that resolves after animation end', fakeAsync(() => {
let fixture = createFixture(BasicTestApp, builder, template, style);
let fixture = TestBed.createComponent(BasicTestApp);
let sidenav: MdSidenav = fixture.debugElement
.query(By.directive(MdSidenav)).componentInstance;
let called = false;
Expand All @@ -162,7 +109,7 @@ describe('MdSidenav', () => {
}));

it('open/close() twice returns the same promise', fakeAsync(() => {
let fixture = createFixture(BasicTestApp, builder, template, style);
let fixture = TestBed.createComponent(BasicTestApp);
let sidenav: MdSidenav = fixture.debugElement
.query(By.directive(MdSidenav)).componentInstance;

Expand All @@ -177,7 +124,7 @@ describe('MdSidenav', () => {
}));

it('open() then close() cancel animations when called too fast', fakeAsync(() => {
let fixture = createFixture(BasicTestApp, builder, template, style);
let fixture = TestBed.createComponent(BasicTestApp);
let sidenav: MdSidenav = fixture.debugElement
.query(By.directive(MdSidenav)).componentInstance;

Expand Down Expand Up @@ -206,7 +153,7 @@ describe('MdSidenav', () => {
}));

it('close() then open() cancel animations when called too fast', fakeAsync(() => {
let fixture = createFixture(BasicTestApp, builder, template, style);
let fixture = TestBed.createComponent(BasicTestApp);
let sidenav: MdSidenav = fixture.debugElement
.query(By.directive(MdSidenav)).componentInstance;

Expand Down Expand Up @@ -241,15 +188,15 @@ describe('MdSidenav', () => {

it('does not throw when created without a sidenav', fakeAsync(() => {
expect(() => {
let fixture = createFixture(SidenavLayoutNoSidenavTestApp, builder, template, style);
let fixture = TestBed.createComponent(BasicTestApp);
fixture.detectChanges();
tick();
}).not.toThrow();
}));

it('does throw when created with two sidenav on the same side', fakeAsync(() => {
expect(() => {
let fixture = createFixture(SidenavLayoutTwoSidenavTestApp, builder, template, style);
let fixture = TestBed.createComponent(SidenavLayoutTwoSidenavTestApp);
fixture.detectChanges();
tick();
}).toThrow();
Expand All @@ -258,74 +205,47 @@ describe('MdSidenav', () => {

describe('attributes', () => {

it('should correctly parse opened="false"', fakeAsync(() => {
let newBuilder = builder.overrideTemplate(BasicTestApp, `
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" opened="false">
Closed Sidenav.
</md-sidenav>
</md-sidenav-layout>`);

let fixture = createFixture(BasicTestApp, newBuilder, template, style);
it('should correctly parse opened="false"', () => {
let fixture = TestBed.createComponent(SidenavSetToOpenedFalse);
fixture.detectChanges();

let sidenavEl = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;

expect(sidenavEl.classList).toContain('md-sidenav-closed');
expect(sidenavEl.classList).not.toContain('md-sidenav-opened');
}));

it('should correctly parse opened="true"', fakeAsync(() => {
let newBuilder = builder.overrideTemplate(BasicTestApp, `
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" opened="true">
Closed Sidenav.
</md-sidenav>
</md-sidenav-layout>`);
});

let fixture = createFixture(BasicTestApp, newBuilder, template, style);
it('should correctly parse opened="true"', () => {
let fixture = TestBed.createComponent(SidenavSetToOpenedTrue);
fixture.detectChanges();

let sidenavEl = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;

expect(sidenavEl.classList).not.toContain('md-sidenav-closed');
expect(sidenavEl.classList).toContain('md-sidenav-opened');
}));
});

});

});


/** Test component that contains an MdSidenavLayout but no MdSidenav. */
@Component({
selector: 'test-app',
template: `
<md-sidenav-layout>
</md-sidenav-layout>
`,
})
class SidenavLayoutNoSidenavTestApp {
}

@Component({template: `<md-sidenav-layout></md-sidenav-layout>`})
class SidenavLayoutNoSidenavTestApp { }

/** Test component that contains an MdSidenavLayout and 2 MdSidenav on the same side. */
@Component({
selector: 'test-app',
template: `
<md-sidenav-layout>
<md-sidenav> </md-sidenav>
<md-sidenav> </md-sidenav>
</md-sidenav-layout>
`,
</md-sidenav-layout>`,
})
class SidenavLayoutTwoSidenavTestApp {
}

class SidenavLayoutTwoSidenavTestApp { }

/** Test component that contains an MdSidenavLayout and one MdSidenav. */
@Component({
selector: 'test-app',
template: `
<md-sidenav-layout>
<md-sidenav #sidenav align="start"
Expand All @@ -337,8 +257,7 @@ class SidenavLayoutTwoSidenavTestApp {
</md-sidenav>
<button (click)="sidenav.open()" class="open"></button>
<button (click)="sidenav.close()" class="close"></button>
</md-sidenav-layout>
`,
</md-sidenav-layout>`,
})
class BasicTestApp {
openStartCount: number = 0;
Expand All @@ -363,3 +282,22 @@ class BasicTestApp {
}
}

@Component({
template: `
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" opened="false">
Closed Sidenav.
</md-sidenav>
</md-sidenav-layout>`,
})
class SidenavSetToOpenedFalse { }

@Component({
template: `
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" opened="true">
Closed Sidenav.
</md-sidenav>
</md-sidenav-layout>`,
})
class SidenavSetToOpenedTrue { }