Question

运行我的jasmine组件测试时出现以下错误：

Error: Error in ./AppComponent class AppComponent - inline template:10:2 caused by: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at MdMenu.ngOnDestroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/material/menu/menu-directive.js:44:0 <- src/test.ts:25370:30)
    at _View_AppComponent0.destroyInternal (/DynamicTestModule/AppComponent/component.ngfactory.js:296:29)
    at _View_AppComponent0.AppView.destroyLocal (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:153:0 <- src/test.ts:34349:14)
    at _View_AppComponent0.DebugAppView.destroyLocal (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:314:0 <- src/test.ts:34510:43)
    at _View_AppComponent0.AppView._destroyRecurse (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:141:0 <- src/test.ts:34337:14)
    at _View_AppComponent_Host0.AppView._destroyRecurse (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:139:0 <- src/test.ts:34335:25)
    at _View_AppComponent_Host0.AppView.destroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:127:0 <- src/test.ts:34323:14)
    at ComponentRef_.destroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/component_factory.js:118:51 <- src/test.ts:20668:82)
    at ComponentFixture.destroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/bundles/core-testing.umd.js:261:0 <- src/test.ts:4275:35)
    at webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/bundles/core-testing.umd.js:719:61 <- src/test.ts:4733:78

当我删除茉莉花测试成功的<md-menu>...</md-menu>元素时。

我的组件模板app.component.html：

     <div [class.dark-theme]="isDarkTheme">
      <md-toolbar color="primary">
        <span>
          <md-icon class="icon-20">apps</md-icon>
          Miaxello
        </span>
        <button md-icon-button [md-menu-trigger-for]="menu">
          <md-icon>more_vert</md-icon>
        </button>
      </md-toolbar>
      <md-menu #menu="mdMenu">
        <button md-menu-item>Settings</button>
      </md-menu>

    </div>
    <h1>
      {{title}}
    </h1>

我的spec文件app.component.spec.ts：

  import { TestBed, async } from '@angular/core/testing';
  import { AppComponent } from './app.component';
  import {MaterialModule} from "@angular/material";

  describe('App: miaxello', () => {
    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent
        ],
        imports: [
          MaterialModule.forRoot()
        ]
      });
    });

    it('should create the app', async(() => {
      let fixture = TestBed.createComponent(AppComponent);
      let app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
  });

我的package.json文件：

{
    "name": "miaxello",
    "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.1.0",
      "@angular/compiler": "~2.1.0",
      "@angular/core": "~2.1.0",
      "@angular/forms": "~2.1.0",
      "@angular/http": "~2.1.0",
      "@angular/platform-browser": "~2.1.0",
      "@angular/platform-browser-dynamic": "~2.1.0",
      "@angular/router": "~3.1.0",
      "@angular/material": "2.0.0-alpha.10",
      "core-js": "^2.4.1",
      "rxjs": "5.0.0-beta.12",
      "ts-helpers": "^1.1.1",
      "zone.js": "^0.6.23"
    },
    "devDependencies": {
      "@types/jasmine": "^2.2.30",
      "@types/node": "^6.0.42",
      "angular-cli": "1.0.0-beta.19-3",
      "codelyzer": "1.0.0-beta.1",
      "jasmine-core": "2.4.1",
      "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-remap-istanbul": "^0.2.1",
      "protractor": "4.0.9",
      "ts-node": "1.2.1",
      "tslint": "3.13.0",
      "typescript": "~2.0.3",
      "webdriver-manager": "10.2.5"
    }
  }

提前感谢您的帮助。

此致

Joost的

Answer 1

请更改：

let fixture = TestBed.createComponent(AppComponent);

成为：

let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();

对我来说就像一个魅力。

Answer 2

describe('App: miaxello', () => {
 let fixture: ComponentFixture<CheckInComponent>;
 let app: any;
 beforeEach(async(() => {
  TestBed
    .configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        MaterialModule.forRoot()
      ]
    })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(AppComponent);
      app = fixture.debugElement.componentInstance;
     }
}));

试试这个。在这种情况下，它只包含expect。

在组件模板中使用md-menu时，带有材质茉莉组件测试的角度2失败

2 个答案: