lundi 12 septembre 2016

Angular 1.* unable to access controller in karma unit test (webpack)

I'm trying to set up a unit test in karma to test an angular 1.* controller. Each time I run the code I get

[ng:areq] Argument 'MoviesListCtrl' is not a function, got undefined

When I have checked the module for the controller appears to get loaded so I'm not sure why its not loading. My project can be found here..

I'm project is available on bitbucket at

http://ift.tt/2cT3X8P

to run the tests..

npm install
npm test

Any help with this would be appreciated.

Files I'm working with are..

test - http://ift.tt/2cD8Osu

import '../../../../../src/js/app/services/movieslisting/';
import '../../../../../src/js/app/directives/movieslist/movieslistctrl';
import '../../../../../src/js/app/browserapp.js';

import {expect} from 'chai';

let createCtrl, scope, moviesListing;

beforeEach(angular.mock.module('BrowserApp'));

beforeEach(inject(($rootScope, $controller)=>{
    moviesListing = angular.injector(['ng', 'BrowserApp']).get("moviesListing");
    scope = $rootScope.$new();
    createCtrl = ()=>{
        return $controller('MoviesListCtrl', {
            $scope: scope,
            moviesListing: moviesListing
        });
    };
}));

describe('MoviesListCtrl', ()=>{

    it('placeholder test', ()=>{
        let ctrl = createCtrl();
        expect(1).to.equal(1);
    });
});

controller

import app from '../../browserapp';

let controllerName = 'MoviesListCtrl';

app.controller('MoviesListCtrl', ['$scope', 'moviesListing', function($scope, moviesListing) {

    $scope.moviesList = {
        moviesFilter: 'costLowToHigh',
        movies: moviesListing.movieCollection
    };

    $scope.createMovieHeader = movie =>{
        let prefix = `${movie.title} (${movie.category}`;
        return movie.subcategory ? `${prefix}/${movie.subcategory})` : `${prefix})`;
    };

    $scope.updateFilter = ()=>{
        moviesListing.sortMovies($scope.moviesList.moviesFilter);
    };
    
}]);

export default controllerName;

service thats a dependency

import app from '../../browserapp';

let factoryName = 'moviesListing';

app.factory(factoryName, [function() {
    let movieCollection = [];

    let currentSortKey = 'costLowToHigh';

    let costLowToHigh = (a, b)=>{
        if (a.castListTotalCost > b.castListTotalCost) {
            return 1;
        }
        if (a.castListTotalCost < b.castListTotalCost) {
            return -1;
        }
        return 0;
    };
    let costHighToLow = (a, b)=>{
        if (a.castListTotalCost < b.castListTotalCost) {
            return 1;
        }
        if (a.castListTotalCost > b.castListTotalCost) {
            return -1;
        }
        return 0;
    };

    let sortFunctionsLookup = {
        costLowToHigh,
        costHighToLow
    };

    let castListTotalCost = movie => movie.actors.reduce((total, actor) => total +  actor.salary, 0);

    let addMovie = (movie)=>{
        movie.castListTotalCost = castListTotalCost(movie);
        movieCollection.push(movie);
        movieCollection.sort(sortFunctionsLookup[currentSortKey]);
    };

    let sortMovies = (sortKey)=>{
        currentSortKey = sortKey;
        movieCollection.sort(sortFunctionsLookup[currentSortKey]);
    };

    let reset = ()=>{
        movieCollection.length = 0;
    };

    return {
        movieCollection,
        addMovie,
        sortMovies,
        reset
    };
}]);

export default factoryName;

app module

import * as angular from 'angular';

var app = angular.module('BrowserApp', []);

app.init = ()=>{
    angular.element(document).ready(function() {
        angular.bootstrap(document, ['BrowserApp']);
    });
};

export default app;

Karma config

module.exports = function(config) {
  config.set({

    basePath: '',

    frameworks: ['mocha', 'es6-shim'],

    files: [
      './node_modules/angular/angular.js',
      './node_modules/angular-mocks/angular-mocks.js',
      'test/**/*spec.js'
    ],

    preprocessors: {
      'test/**/*spec.js': ['webpack', 'sourcemap']
    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: false,

    browsers: ['PhantomJS'],

    singleRun: true,

    concurrency: Infinity,

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {test: /\.js$/, exclude: /node_modules/, loader:"babel-loader"},
          { test: /\.html$/, loader: "html" }
        ]
      },
      htmlLoader: {
        attrs: false
      }
    },

    webpackMiddleware: {
      noInfo: true
    }

  })
}

Aucun commentaire:

Enregistrer un commentaire