CSS Angeltests AngularJS Direktiven mit Karma + Jasmine

Question

Ich benutze Karma + Jasmine, um meine AngularJS Direktiven zu testen, ich schrieb mehr als 300 Tests und ich war sehr glücklich ... bis ich ein Problem fand, das mich hierher brachte, weil ich bin festgefahren: einige Tests scheitern, weil sie ein CSS benötigen, das auf einige Elemente angewandt wird (ein Stück Code in meiner Direktive tut eine Größenberechnung, die auf diesem Stil basiert), und obwohl ich die Datei hinzufügte, die die CSS Implementierung enthält, scheint diese Datei ignoriert während Tests. In meinem Karma Config habe ich die CSS-Datei auf diese Weise:

files: [ 
    // .. 
    'styles/foo.css', 
    // .. 
], 

die obigen Einstellungen erzeugt einen Link-Tag in der body anstatt head, also habe ich versucht, die CSS "manuell" mit js zu injizieren:

angular.element(document).find('head').prepend(
     '<style type="text/css">@charset "UTF-8";' + 
     '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
     '</style>' 
); 

aber keiner dieser Ansätze scheint zu funktionieren (ich habe getestet und das style-Tag wird richtig injiziert). Ich versuchte schließlich einen Block von Stil unter dem HTML-Code hinzufügen, die ich Winkel $compile mit kompilieren:

var element = ng.element('<div>' + 
'<style type="text/css">@charset "UTF-8";' + 
      '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
      '</style>' + 
'<my-directive></my-directive>' + 
+ '</div>'); 
$compile(element)(scope); 

... aber kein Glück noch ... Ich habe auch versucht, den Test Läufer aus PhantomJS zu wechseln zu Chrome, aber das Problem ist das gleiche: Stil irgendwie ignoriert werden (sie injiziert werden, aber sie bekommen nicht auf Elemente angewandt wird, in der Tat jQuery(targetElement).css('width') mit es gibt 0) ...

so, meine große Frage: Wie soll ich Stylesheet importieren und erfolgreich in Karmatests anwenden ??? :(

Answer 1

Ok, das Problem ist sehr einfach und dumm ... Ich frage mich, warum ich so viel Zeit verloren habe, um es zu realisieren: P Also ... die CSS werden perfekt von Karma durch Angabe in der Konfigurationsdatei, wie ich habe als erster Ansatz getan (es gibt keine Notwendigkeit für andere Plugin oder schwarze Magie), aber ... CSS-Stile werden nicht auf Elemente angewendet, bis sie zum DOM hinzugefügt werden! und das ist kein Problem im Zusammenhang mit Karma, eckig, Jasmin oder was sonst ... so funktioniert eine Browser-Engine! Ein Browser parst Definitionen CSS und es macht Elemente auf der Seite nach, aber wenn in Winkel Test, den ich schreiben:

var element = angular.element('<my-directive></my-directive>'); 
$compile(element)(scope); 

Ich bin mit In-Memory-DOM-Knoten handelt, die allen bekannt sind, aber mein JavaScript-Code! Wie sollte die Browser-Engine CSS auf einen In-Memory-Knoten anwenden, der in einer js-Variablen lebt? Es kann nicht offensichtlich ... es kann nur den Knoten Baum auf der Seite durchqueren, so ... die „fix“ ist sehr einfach: Ich habe das Element auf das DOM hinzuzufügen:

angular.element(document).find('body').append(element); 

Answer 2

Von den Klängen Ihrer Situation, Sie suchen, um zu prüfen, ob das DOM in einem bestimmten Zustand ist. Ich fand ein Plugin, das aussieht, als ob es mit diesem Anwendungsfall entworfen wurde: jasmine-jquery ‚re AngularJS für Ihre DOM-Manipulation verwenden, wird diese Erweiterung noch Sie das resultierende DOM des Staates lassen testen.

insbesondere denke ich Ihnen einen Blick auf die StyleSheet Fixtures haben sollten, die Sie CSS, um den Test injizieren lässt.

Haftungsausschluss: Ich habe noch nicht getestet, die Antwort ist nur das Ergebnis der Forschung.