3
Grundlegende Verwendung von MD-Sidesnav-Container in einem frischen NG-Clipprojekt verursacht ng-Test bei zweiten und folgenden Tests fehlschlagen.Angular2 Material md-sidenav-Container verursacht Ausnahme im ng-Test
Exception
TypeError: Cannot read property 'unsubscribe' of undefined
at ScrollDispatcher.deregister (webpack:///~/@angular/material/core/overlay/scroll/scroll-dispatcher.js:52:0 <- src/test.ts:10756:50)
at Scrollable.ngOnDestroy (webpack:///~/@angular/material/core/overlay/scroll/scrollable.js:28:0 <- src/test.ts:86637:22)
at Wrapper_Scrollable.ngOnDestroy (/OverlayModule/Scrollable/wrapper.ngfactory.js:13:16)
at CompiledTemplate.proxyViewClass.View_MdSidenavContainer0.destroyInternal (/MdSidenavModule/MdSidenavContainer/component.ngfactory.js:66:24)
at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:82496:14)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:82899:38)
at CompiledTemplate.proxyViewClass.View_AppComponent0.destroyInternal (/DynamicTestModule/AppComponent/component.ngfactory.js:115:19)
at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:82496:14)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:82899:38)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.destroyInternal (/DynamicTestModule/AppComponent/host.ngfactory.js:33:19)
at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:82496:14)
at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:82899:38)
at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (webpack:///~/@angular/core/src/linker/view.js:187:0 <- src/test.ts:82480:14)
at ComponentRef_.destroy (webpack:///~/@angular/core/src/linker/component_factory.js:147:51 <- src/test.ts:40464:70)
at ComponentFixture.destroy (webpack:///~/@angular/core/bundles/core-testing.umd.js:263:0 <- src/test.ts:21186:35)
app.component.html
<div>
<md-sidenav-container>
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
<div class="my-content">Main content</div>
</md-sidenav-container>
</div>
app.component.spec.ts
import {TestBed, async} from '@angular/core/testing';
import {MaterialModule} from '@angular/material';
import {AppComponent} from './app.component';
import 'hammerjs';
describe('AppComponent',() => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
MaterialModule
],
declarations: [
AppComponent
],
});
TestBed.compileComponents();
});
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
// Same test repeated enough to generate exception
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
package.json (Standard + Material 2.0.0-beta.2)
{
"name": "admin",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/material": "^2.0.0-beta.2",
"@angular/router": "^3.4.0",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/cli": "1.0.0-beta.31",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.0"
}
}
app.component.ts
import {Component, ElementRef, OnInit} from '@angular/core';
import {HostListener} from '@angular/core/src/metadata/directives';
import {AuthService} from './services/auth.service';
import {ConceptService} from './services/concept.service';
import {AppService} from './services/app.service';
import {Router, NavigationStart} from '@angular/router';
import {LocationService} from './services/location.service';
import {ConfigService} from './services/config.service';
import {ToastService} from './services/toast.service';
import {ContextService} from './services/context.service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
})
export class AppComponent implements OnInit {
sidenavOpen = true;
appElement;
envName = 'default';
_serverVersion: any = '{}';
currentRoute = '';
menuItems = [
{route: 'home', name: 'Dashboard', icon: 'home'}
// some lines omitted
, {route: 'concepts', name: 'Concepts', icon: 'toc'}
];
constructor(elementRef: ElementRef,
private authService: AuthService,
private conceptService: ConceptService,
private configService: ConfigService,
private locationService: LocationService,
private appService: AppService,
private contextService: ContextService,
private toast: ToastService,
private router: Router) {
this.appElement = elementRef.nativeElement;
}
ngOnInit(): void {
this.appService.container = this.appElement.querySelector('.app-content');
// Warm caches
Promise.all([
this.conceptService.getAll(),
this.configService.getAll(),
this.locationService.getAll(),
this.configService.serverVersion().then(ver => this._serverVersion = ver),
this.contextService.getContext().then(ctx => this.envName = ctx.name.replace(' ', '_').toLowerCase())
]).catch(e => this.toast.error(e));
// Monitor size for handling sidebar
this.onResize(this.appElement.clientWidth);
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.onResize(this.appElement.clientWidth);
}
});
// Log out on closing or or navigating away
window.onbeforeunload = function() {
this.authService.logout();
}.bind(this);
}
@HostListener('window:resize', ['$event.target.innerWidth'])
onResize(w) {
this.sidenavOpen = w > 500;
}
isDisabled(path: string) {
return !this.authService.isAuthorised(path);
}
}
Können Sie Ihren AppComponent Code bekannt geben? –
Ich sehe das auch, könnte ein Fehler sein, der auf Github gemeldet werden sollte – nPn
Dieser letzte Kommentar lenkte die Aufmerksamkeit auf Ihre Frage, Jesse. Ich weiß nicht, wie ich es damals vermisst habe. Ich habe meine App.component.ts meinem Beitrag hinzugefügt. (Ich kehrte zu 2.0.0-beta.1 zurück, um dieses Problem zu vermeiden.) –