Come utilizzare lo scenario angolare con requirejs

Question

Lo scenario angolare funziona bene quando l'app angolare è pronta su DOM ready. Non è il caso quando si usa requirejs o un'altra lib di AMD. Come aggiungere supporto per AMD in uno scenario angolare?

Answer 1

Quello che devi fare è sovrascrivere il comportamento di caricamento del frame predefinito ed emettere un nuovo evento quando l'app amd è pronta.

La prima cosa è aggiungere le seguenti righe nell'applicazione angolare insieme alla chiamata angular.bootstrap. Questi dati sono richiesti dallo scenario angolare.

angular.bootstrap(document, ['app']); 

var html = document.getElementsByTagName('html')[0]; 

html.setAttribute('ng-app', 'app'); 
html.dataset.ngApp = 'app'; 

if (top !== window) { 
    top.postMessage({ 
     type: 'loadamd' 
    }, '*'); 
} 

Successivamente, nel tuo e2e runner, devi includere quelle linee. Se si tratta di uno script esterno, esso deve essere caricato dopo angolare scenario e deve essere analizzato prima che il DOM è pronto:

/** 
* Hack to support amd with angular-scenario 
*/ 
(function() { 
    var setUpAndRun = angular.scenario.setUpAndRun; 

    angular.scenario.setUpAndRun = function(config) { 
     if (config.useamd) { 
      amdSupport(); 
     } 
     return setUpAndRun.apply(this, arguments); 
    }; 

    function amdSupport() { 
     var getFrame_ = angular.scenario.Application.prototype.getFrame_; 

     /** 
     * This function should be added to angular-scenario to support amd. It overrides the load behavior to wait from 
     * the inner amd frame to be ready. 
     */ 
     angular.scenario.Application.prototype.getFrame_ = function() { 
      var frame = getFrame_.apply(this, arguments); 
      var load = frame.load; 

      frame.load = function(fn) { 
       if (typeof fn === 'function') { 
        angular.element(window).bind('message', function(e) { 
         if (e.data && e.source === frame.prop('contentWindow') && e.data.type === 'loadamd') { 
          fn.call(frame, e); 
         } 
        }); 
        return this; 
       } 
       return load.apply(this, arguments); 
      } 

      return frame; 
     }; 
    } 
})(); 

Infine, per consentire la configurazione di amd, è necessario aggiungere l'attributo ng-useamd a angolare -scenario tag script.

<script type="text/javascript" src="lib/angular-1.0.3/angular-scenario.js" ng-autotest ng-useamd></script> 

Ora sei pronto ad andare

testato con angolare scenario v1.0.3

Answer 2

La risposta di cui sopra non è riuscita in parte a mio scenario (angolare 1.1.4, fresco Karma). Nella vista di debug funzionava bene, nella normale pagina di panoramica non funzionava. Ho notato un altro annidato.

Ho cambiato il codice in messaggio per l'iframe padre dell'applicazione testata.

Answer 3

La risposta accettata è assolutamente corretta, ma è un peccato che devi inserire quel codice nella tua pagina.

Quindi, se aiuta, ho creato un preprocessore per karma per iniettare la 'correzione' come parte dell'esecuzione del test.

Codice: https://github.com/tapmantwo/karma-ng-bootstrap-fix-preprocessor NPM: https://www.npmjs.org/package/karma-ng-bootstrap-fix-preprocessor

Nota, questo funziona solo se si stanno servendo i file attraverso il karma. Se li stai trasmettendo, non passano attraverso il pre-processore. Quindi, in alternativa, ho un fork di ng-scenario che fa qualcosa di simile a consentire l'esecuzione manuale dei siti bootstrap;

https://github.com/tapmantwo/karma-ng-scenario

Questo non è un modulo nodo, quindi dovrete configurarlo manualmente, ma il suo meglio (secondo me) per avere qualcosa di simile al posto invece di infettare codice di produzione con qualcosa solo per ottenere test per passare.