Angular2 RC5 TestBed - 使用注入构造函数的Location参数

时间:2016-09-02 13:03:22

标签: unit-testing angular

升级到RC5后,我将Angular2单元测试转换为新语法。我有一个测试,它使用一个值(Location)注入到被测组件的构造函数中,我无法弄清楚如何使用新的TestBed类执行此操作。

待测组件

export class RSUAppComponent implements AfterViewInit {
    constructor(private _location: Location, private _appSettingsService: AppSettingsService) {
        _appSettingsService.DeleteAppSettings();
    }

    // To maintain proper nav item highlighting
    public IndicateSelected(linkRoute: string) {
        let path = this._location.path().toLowerCase();
        if (path.length == 0 && linkRoute.toLowerCase() == 'dashboard') {
            return "mdl-navigation__link mdl-navigation__link--current";
        } else {
            if (this._location.path().toLowerCase().includes(linkRoute.toLowerCase())) {
                return "mdl-navigation__link mdl-navigation__link--current";
            } else {
                return "mdl-navigation__link";
            }
        }
    }
}

在RC5之前工作的测试

let testAppComponent: RSUAppComponent;

beforeEach(() => {
    addProviders([
        AppSettingsService,
        // injected into the constructor of RSUViewer
        provide(Location, { useClass: SpyLocation })])
});

it('#IndicateSelected should return the selected styling for the selected menu item',
    async(inject([TestComponentBuilder, Location], (tcb: TestComponentBuilder, testLocation: SpyLocation) => {
        return tcb
            .overrideTemplate(RSUAppComponent, `
                    <nav class="mdl-navigation">                           
                    </nav>
            `)
            .overrideDirective(RSUAppComponent, RSUHomeComponent, EmptyComponent)
            .overrideDirective(RSUAppComponent, RSUNotiesComponent, EmptyComponent)
            .createAsync(RSUAppComponent)
            .then((fixture: ComponentFixture<RSUAppComponent>) => {
                let selectedOutput: string;
                fixture.detectChanges();
                testAppComponent = fixture.componentInstance;

                // initial navigation by app - user has not selected any menu link
                selectedOutput = testAppComponent.IndicateSelected('Dashboard');
                expect(selectedOutput).toMatch('mdl-navigation__link--current');
                selectedOutput = testAppComponent.IndicateSelected('Noties');
                expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
                selectedOutput = testAppComponent.IndicateSelected('Users');
                expect(selectedOutput).not.toMatch('mdl-navigation__link--current');

                // user has selected the Users link
                testLocation.go('/users');
                selectedOutput = testAppComponent.IndicateSelected('Dashboard');
                expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
                selectedOutput = testAppComponent.IndicateSelected('Noties');
                expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
                selectedOutput = testAppComponent.IndicateSelected('Users');
                expect(selectedOutput).toMatch('mdl-navigation__link--current');
            });
    }))
);

这就是我尝试重写测试的方法。问题是我不知道如何让测试使用testLocation参数,以便它可以切换位置。在RC5之前,它与TestComponentBuilder一起注入测试,但现在我们没有将测试组件注入测试中。

let testAppComponent: RSUAppComponent;
let testLocation: SpyLocation;

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [RSUAppComponent],
        providers: [
            AppSettingsService,
            // injected into the constructor of RSUViewer
            {provide: Location,  useClass: SpyLocation }
        ]
    })
});

it('#IndicateSelected should return the selected styling for the selected menu item',
    async(() => {
        TestBed.overrideComponent(RSUAppComponent, {
            set: {
                template: `
                    <nav class="mdl-navigation">                           
                    </nav>
            `

            }
        })
            .overrideDirective(RSUHomeComponent, EmptyComponent)
            .overrideDirective(RSUNotiesComponent, EmptyComponent);

        TestBed.compileComponents().then(() => {
            const fixture = TestBed.createComponent(RSUAppComponent);
            let selectedOutput: string;
            fixture.detectChanges();
            testAppComponent = fixture.componentInstance;

            // initial navigation by app - user has not selected any menu link
            selectedOutput = testAppComponent.IndicateSelected('Dashboard');
            expect(selectedOutput).toMatch('mdl-navigation__link--current');
            selectedOutput = testAppComponent.IndicateSelected('Noties');
            expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
            selectedOutput = testAppComponent.IndicateSelected('Users');
            expect(selectedOutput).not.toMatch('mdl-navigation__link--current');

            // user has selected the Users link
            testLocation.go('/users');
            selectedOutput = testAppComponent.IndicateSelected('Dashboard');
            expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
            selectedOutput = testAppComponent.IndicateSelected('Noties');
            expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
            selectedOutput = testAppComponent.IndicateSelected('Users');
            expect(selectedOutput).toMatch('mdl-navigation__link--current');
        });


    }));

0 个答案:

没有答案