Jak używać scenariusza kątowego z requirejs

Question

Scenariusz kątowy działa dobrze, gdy aplikacja kątowa jest gotowa do pracy w DOM. Nie jest tak w przypadku używania requirejs lub innej biblioteki AMD. Jak dodać obsługę AMD w scenariuszu kątowym?

Answer 1

To, co musisz zrobić, to przesłonić domyślne zachowanie się ramki i wydać nowe wydarzenie, kiedy aplikacja jest gotowa.

Pierwszą rzeczą jest dodanie następujących linii w swoim kanciastym zastosowaniu wraz z wywołaniem angular.bootstrap. Te dane są wymagane przez scenariusz kątowy.

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' 
    }, '*'); 
} 

Następnie, w swoim biegunie e2e, musisz uwzględnić te linie. Jeśli jest to skrypt zewnętrzny, musi być załadowany po kątowym-scenariuszem i musi być analizowany przed DOM jest gotowy:

/** 
* 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; 
     }; 
    } 
})(); 

Wreszcie, aby umożliwić AMD konfigurację, należy dodać atrybut NG-useamd do kątowa -skrypt skryptu scenario.

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

Jesteś teraz gotowy do

testowane kątowe-scenariusz v1.0.3

Answer 2

Powyższa odpowiedź nie powiodła się częściowo w moim scenariuszu (kątowa 1.1.4, świeże Karma). W widoku debugowania działało poprawnie, na normalnej stronie przeglądu nie powiodło się. Zauważyłem dodatkowy zagnieżdżony.

Zmieniłem kod na wiadomość na nadrzędną ramkę iframe testowanej aplikacji.

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

Answer 3

Przyjęta odpowiedź jest absolutnie poprawna, ale wstyd, że musisz umieścić ten kod na swojej stronie.

Tak więc, jeśli to pomaga, stworzyłem preprocesor dla karmy, aby wstrzyknąć "poprawkę" jako część testu.

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

Uwaga, to działa tylko jeśli służą pliki poprzez karmy. Jeśli używasz proxy, nie przechodzą przez preprocesor. Jako alternatywę mam rozwidlenie scenariusza ng, który robi coś podobnego, aby umożliwić ręczne uruchamianie stron do uruchomienia;

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

To nie jest modułem węzła, więc musisz ustawić go ręcznie, ale jego lepsze (moim skromnym zdaniem), aby mieć coś takiego w miejscu zamiast zainfekowania kod produkcyjny z czymś po prostu dostać testy do zaliczenia.