Angular, Redux, ES6, Modular Controllers

Question

Our Angular project switched to ES6 and Reduxjs, and now I'm struggling to get the controller working tests. In particular, I cannot correctly make fun of when it comes to the class constructor. From what I explored, I cannot create an constructor for the ES6 class, so I need to mock its dependencies and also place a binding on the lexical 'this', which simplifies ngRedux.connect ().

My test does this for the connect function in the constructor and then gives me an error: "connect" is not a function "

I think that maybe a few things are wrong here. If I comment out the connection string in the constructor, it will get into my runOnLoad function, and the error will tell me that fromMyActions is not a function. this is due to the fact that the connectix connectix function binds actions to 'this', so given these problems, I accept this, I can not scoff at the abbreviation if I did not provide its implementation. any advice? I'm relatively new to Angular, and my weak area is unit testing and DI.

Here is my module and controller:

export const myControllerModule = angular.module('my-controller-module',[]);

export class MyController {

constructor($ngRedux, $scope) {
'ngInject';

  this.ngRedux = $ngRedux;
  const unsubscribe = this.ngRedux.connect(this.mapState.bind(this), myActions)(this);
  $scope.$on('$destroy', unsubscribe);
  this.runOnLoad();
}

mapState(state) {
  return {};
}

runOnLoad() {
   this.fromMyActions(this.prop);
  }
}

myControllerModule 
  .controller(controllerId, MyController
  .directive('myDirective', () => {
    return {
      restrict: 'E',
      controllerAs: 'vm',
      controller: controllerId,
      templateUrl: htmltemplate
      bindToController: true,
      scope: {
        data: '=',
        person: '='
      }
    };
  });

export default myControllerModule.name;

and my test:

import {myControllerModule,MyController} from './myController';
import 'angular-mocks/angular-mocks';

describe('test', () => {

  let controller, scope;

  beforeEach(function() {

let reduxFuncs = {
  connect: function(){}
}

angular.mock.module('my-controller-module', function ($provide) {
  $provide.constant('$ngRedux',reduxFuncs);
});

angular.mock.inject(function (_$ngRedux_, _$controller_, _$rootScope_) {
  scope = _$rootScope_.$new();
  redux = _$ngRedux_;

  var scopeData = {
    data : {"test":"stuff"},
    person : {"name":"thatDude"}
  } ;
        scope.$digest();

        controller = _$controller_(MyController, {
        $scope: scope,
        $ngRedux: redux
      }, scopeData);
    });

  });
});

Answer 1

Redux , . , . , , - . , , .

, , :

• . , , . , , . , mocks ..

• , ng-redux (- : https://gist.github.com/wbuchwalter/d1448395f0dee9212b70 ( TypeScript))

:

let myState = {
  someProp: 'someValue'
}

let ngReduxStub;
let myController;
beforeEach(angular.mock.inject($injector => {
  ngReduxStub = new NgReduxStub();

  //how the state should be initially
  ngReduxStub.push(myState);
  myController = new MyController(ngReduxStub, $injector.get('someOtherService');
}));

. mapDispatchToProps ( angular), , .

Answer 2

Karma Jasmine:

TypeError: undefined is not a constructor (evaluating 
$ngRedux.connect(function (state) { ({}, state.editAudience); }, _actions2.default)')

, wbuch stub es6 :

angular.mock.module( $provide => {
    ngReduxStub = new NgReduxStub()
    ngReduxStub.push(myState)
    const dependencies = ['$scope', '$ngRedux']
    dependencies.forEach( dependency => {
        if(dependency =='$ngRedux') { return $provide.value('$ngRedux', ngReduxStub)}
        return $provide.value(dependency, {})
    })
})

angular.mock.inject( ($compile, $rootScope, $componentController) => {
    scope = $rootScope.$new()
    ctrl = $componentController('csEditAudience', {$scope: scope}, {})
})

, !