Question

我正在尝试编写导航到延迟加载模块中的路由的测试。它失败，因为无法找到延迟加载的模块。我不知道如何将延迟加载的模块加载/注入测试。

这是main.ts：

car

这是app / lazy.module.ts

export const routes: Routes = [
  {path: '', component: EagerComponent},
  {path: 'lazy', loadChildren: 'app/lazy.module'}
];

@NgModule({
 imports: [ BrowserModule, RouterModule.forRoot(routes) ],
 declarations: [ AppComponent, EagerComponent ],
 providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy}
 ],
 bootstrap: [ AppComponent ] 
}) 
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

这是测试规范。 '/'路径有效但'/ lazy'路径得到：

@NgModule({
  imports: [ CommonModule,
    RouterModule.forChild([
      {path: '', component: LazyComponent}
    ]) ],
  declarations: [ LazyComponent ],
  providers: [ LazyComponent ]
})
export default class LazyModule {
}

我在使用SystemJS的Jasmine页面上运行它。

Error: Uncaught (in promise): Error: Cannot find module app/lazy.module



describe( 'Router', () => {
  beforeEach( () => {
      TestBed.configureTestingModule({
        imports: [ RouterTestingModule, RouterTestingModule.withRoutes(routes) ],
        declarations: [ AppComponent, EagerComponent, LazyComponent ]
      });
    }
  );

  beforeEach( async(() => {
      TestBed.compileComponents();
    }
  ));

  it('should be able to navigate to home using commands API',
    fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
        TestBed.createComponent(AppComponent);
        router.navigate(['/']);
        tick();
        expect(location.path()).toBe('/');
      })
    ));

  it('should be able to navigate to /lazy using commands API',
    fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
        TestBed.createComponent(AppComponent);
        router.navigate(['/lazy']);
        tick();
        expect(location.path()).toBe('/lazy');
      })
    ));
});

systemjs.test-config.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>[TEST] Lazy</title>

  <!-- TypeScript in-browser compiler -->
  <script src="node_modules/typescript/lib/typescript.js"></script>

  <!-- Polyfills -->
  <script src="node_modules/reflect-metadata/Reflect.js"></script>

  <!-- Jasmine -->
  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

  <!-- Zone.js -->
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/zone.js/dist/proxy.js"></script>
  <script src="node_modules/zone.js/dist/sync-test.js"></script>
  <script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
  <script src="node_modules/zone.js/dist/async-test.js"></script>
  <script src="node_modules/zone.js/dist/fake-async-test.js"></script>
  <script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>

  <!-- SystemJS -->
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="systemjs.test-config.js"></script>
</head>
<body>
<script>
  var SPEC_MODULES = [
    'app/app.routing.spec'//
  ];

  Promise.all([
        System.import('@angular/core/testing'),
        System.import('@angular/platform-browser-dynamic/testing')
      ])
      .then(function(modules) {
        var testing = modules[0];
        var browser = modules[1];

        testing.TestBed.initTestEnvironment(
            browser.BrowserDynamicTestingModule,
            browser.platformBrowserDynamicTesting());

        // Load all the spec files.
        return Promise.all(SPEC_MODULES.map(function(module) {
          return System.import(module);
        }));
      })
      .then(window.onload)
      .catch(console.error.bind(console));
</script>
</body>
</html>

在Angular 2中测试延迟加载的路由

0 个答案: