vendredi 3 juin 2016

Jasmine unit test not loading component Angular2 RC1

I can't get my jasmine unit-tests to load the a component for testing.

Webstorm is telling me that everything is good to go in terms of syntax. But when I load live-server to have the unit test load it doesn't seem to work.

I have it compiling to a test directory at root.

So here is my directory tree (abv for the ease):

-- client(src)
|-- common
|---- welcome.component.ts
|---- welcome.spec.ts
-- node_modules
-- tests(compiled spec and components) 
|-- client(src)
|---- common
|------ welcome.component.ts
|------ welcome.spec.ts
--unit-tests.html 
--systemjs.config.js

live server is giving me this:

GET /tests/client/common/welcome.component 404 

welcome.spec.ts

/// <reference path="../../typings/main/ambient/jasmine/index.d.ts" />

import {WelcomeComponent} from './welcome.component';

describe('Welcome tests', () => {
    let welcome:WelcomeComponent;

    beforeEach(() => {
        welcome = new WelcomeComponent('sir');
    });

    it('Nombre should equal sir', () => {
        expect(welcome.nombre).toEqual('sir');
    })
});

unit-tests.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Tests</title>
    <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>
</head>
<body>
    <!-- #1. add the system.js library -->
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        // #2. Configure systemjs to use the .js extension
        //     for imports from the app folder
        System.config({
            packages: {
                'client': {defaultExtension: 'js'}
            }
        });

        // #3. Import the spec file explicitly
        System.import('tests/client/common/welcome.spec.js');
        System.import('tests/client/common/header.spec.js')
        // #4. wait for all imports to load ...
        //     then re-execute `window.onload` which
        //     triggers the Jasmine test-runner start
        //     or explain what went wrong.
                .then(window.onload)
                .catch(console.error.bind(console));
    </script>
</body>
</html>

systemjs.config.js

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'node_modules/assets/js/app', // 'dist',
    'rxjs':                       'node_modules/assets/js/rxjs',
    'angular2-in-memory-web-api': 'node_modules/assets/js/angular2-in-memory-web-api',
    '@angular':                   'node_modules/assets/js/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

I can add more if you need me too, the header.spec works great, but it's self-container. (expect true = true, etc)

SystemJS should be loading this for the unit-tests but it does not, the site itself works great so the Welcome.component is fine. But for some reason I cannot load the unit test.

Where would I be going wrong? I feel like this is a config issue, but I am not very familiar with unit-tests.

Aucun commentaire:

Enregistrer un commentaire