javascript - not - TypeError: undefined no es un constructor

typeerror is not a function

Question

Soy muy nuevo en Angular y estoy tratando de resolver mucho de esto todavía. Estoy escribiendo algunas pruebas usando Angular 1.5.8 que generé desde el Generador Yeoman.

Específicamente, estoy tratando de averiguar cómo manipular los resultados de $ httpBackend (no estoy seguro si eso es importante o no) ...

En mi archivo app.js tengo el siguiente código:

.run([''$rootScope'', ''$location'', ''breadcrumbService'', function ($rootScope, $location, breadcrumbService) {
    $rootScope.$on(''$viewContentLoaded'', function () {
        jQuery(''html, body'').animate({scrollTop: 0}, 200);
    });

    $rootScope.isEditMode = false;
    $rootScope.$on(''$stateChangeSuccess'', function () {
        // ------------ this next line is failing -----------
        $rootScope.isEditMode = $location.path().toLowerCase().endsWith(''/edit'') || $location.path().toLowerCase().endsWith(''/new'');
    });

    $rootScope.parseJson = function (value) {
        return angular.fromJson(value);
    };

    $rootScope.bc = breadcrumbService;

    $rootScope.title = "";
}])

La línea a mitad de camino (donde agregué el comentario) está fallando. Específicamente, la función endsWith está fallando (para disminuir está bien), con este error:

PhantomJS 2.1.1 (Windows 8 0.0.0) Service: breadcrumbService should return breadcrumb label in json format FAILED
        TypeError: undefined is not a constructor (evaluating ''$location.path().toLowerCase().endsWith(''/edit'')'') in app/scripts/app.js (line 44)
        app/scripts/app.js:44:72
        $broadcast@bower_components/angular/angular.js:18005:33
        bower_components/angular-ui-router/release/angular-ui-router.js:3353:32
        processQueue@bower_components/angular/angular.js:16383:30
        bower_components/angular/angular.js:16399:39
        $eval@bower_components/angular/angular.js:17682:28
        $digest@bower_components/angular/angular.js:17495:36
        $apply@bower_components/angular/angular.js:17790:31
        done@bower_components/angular/angular.js:11831:53
        handleResponse@bower_components/angular-mocks/angular-mocks.js:1368:17
        flush@bower_components/angular-mocks/angular-mocks.js:1808:26
        test/spec/services/breadcrumbservice.js:33:27
        invoke@bower_components/angular/angular.js:4718:24
        workFn@bower_components/angular-mocks/angular-mocks.js:3085:26

Aquí está mi código de prueba (algunos archivos no deseados modificados de diferentes ejemplos, solo tratando de hacer que funcione):

''use strict'';

describe(''Service: breadcrumbService'', function () {

    // load the service''s module
    beforeEach(module(''myModule''));

    var $httpBackend, $rootScope, createController, authRequestHandler;
    beforeEach(inject(function($injector) {

        $httpBackend = $injector.get(''$httpBackend'');
        console.log(''Is null? ''+ ($httpBackend == null));
        $httpBackend.whenGET(/views//.*/).respond(200, [{}, {}, {}]);

        authRequestHandler = $httpBackend.when(''GET'', ''/api/v1/SiteStagings'')
            .respond({userId: ''userX''}, {''A-Token'': ''xxx''});

        // Get hold of a scope (i.e. the root scope)
        $rootScope = $injector.get(''$rootScope'');
        $httpBackend.flush();
    }));

    // instantiate service
    var breadcrumbService;
    beforeEach(inject(function (_breadcrumbService_) {
        breadcrumbService = _breadcrumbService_;
    }));

    it(''svc should exist'', function () {
        expect(!!breadcrumbService).toBe(true);
    });

    it(''should return breadcrumb label in json format'', function () {
        var result = breadcrumbService.getFromCache(''site'', ''SiteGroupStagings'', 46, ''SiteGroupDesc'');
        console.log(result);
        expect(!!result).toBe(true);

    });
});

No dudo que esté haciendo algo mal aquí, simplemente no puedo entender qué es. ¿Qué significa realmente este error y por qué no le gusta mi llamada a endsWith ?

Gracias

Answer 1

undefined no es un constructor

es un mensaje de error que muestra PhantomJS cuando intentó llamar a una función que no está definida. Depende de la versión de ECMAScript que admita PhantomJS. Entonces, como dijiste, funciona bien en Chrome, porque este navegador admite la función que estás usando en la prueba. Para solucionar su problema y poder seguir utilizando PhantomJS, puede reemplazar la función "desconocido para PhantomJS" por la suya.

Answer 2

Debatí si publicar o no esto como una respuesta o solo una edición de mi pregunta, pero supongo que es mi respuesta (por ahora):

Parece que el problema está relacionado con PhantomJS. Tan pronto como cambié el motor a Chrome en el archivo karma.conf.js, esas pruebas pasaron.

Todavía no sé qué significa ese mensaje de error y por qué no funcionó con PhantomJS, pero al menos ahora puedo continuar.

Aquí están las modificaciones a mi karma.conf.js (en caso de que alguien sea curioso):

browsers: [
 //''PhantomJS'',
 ''Chrome''
],

// Which plugins to enable
plugins: [
 ''karma-chrome-launcher'',
 //''karma-phantomjs-launcher'',
 ''karma-jasmine''
],

Por cierto, me di cuenta de que endsWith (pensaba que era más antiguo), pero WebStorm muestra que está haciendo referencia a una función auxiliar en la cuadrícula-ui angular. Pasé bastante tiempo jugando con la matriz de files en el archivo karma.conf.js en un intento de ver si la dependencia de ui-grid se estaba cargando demasiado tarde o algo así. En cada prueba, funcionó bien en Chrome pero no en PhantomJS. Todavía no tengo idea de por qué.

Answer 3

Recibí TypeError: undefined is not a constructor error de TypeError: undefined is not a constructor usando el método includes() . Los métodos includes() y endsWith() son nuevos en ECMAScript 2015 y no son compatibles con Internet Explorer, y evidentemente no lo son para PhantomJS.

Existe la posibilidad de que su usuario final esté utilizando Internet Explorer. En cuyo caso, es posible que desee usar el método indexOf() totalmente compatible en lugar de includes() o endsWith()

Por ejemplo, en mi caso, todo funcionó muy bien en Chrome, pero mis pruebas fallaron en la línea:

if (item.name.includes(''contents''))

Cambié a usar el método indexOf () en su lugar:

if (item.name.indexOf(''contents'') !== -1)

Y luego ya no estaba recibiendo el error

TypeError: undefined no es un constructor

Answer 4

En mi caso: dependencias cíclicas causantes:

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR TypeError: undefined no es un constructor (evaluando ''(0, _actions.prefix) ('' SET_USER_INPUT_PHONE_NUMBER '')'') sin definir: 12

Recibí el mismo error después de agregar importaciones en mi código de producción javascript (sintaxis ES6 compilada con babel / webpack). Los cambios fueron correctos cuando se cargó una versión de producción de la aplicación en Chrome pero al ejecutar las pruebas con phantomJS se produjo el error. En mi caso las importaciones añadidas crearon dependencias cíclicas.

Estoy dejando esto aquí para futuras referencias (me topé con el mismo problema hace unas semanas y no quiero volver a rascarme la cabeza en un par de semanas más) y para otros que busquen el mismo error.