Wie kann ich prüfen, ob die Sichtbarkeit eines Elements mit der Prüfung von Winkel-Richtlinien?

Ich versuche zu schreiben, einen einfachen test für meine angularjs Richtlinie.

Die Richtlinie schließt eine div in einem anderen div schafft, ein zweites Kind zu zeigen, "LADEN" und wählt das Kind ist sichtbar $scope.ready. Also das original HTML-Code könnte so Aussehen:

<loading>
  <div>This is my data</div>
</loading>

Und die HTML nach dem ausführen der Richtlinie würde wie folgt Aussehen:

<div>
  <div ng-show="ready">
    <div>This is my data</div>
  </div>
  <div ng-show="!ready">
    LOADING
  </div>
</div>

Die Richtlinie funktioniert, wenn die Ausführung im Browser. Ich schrieb ein unit-test (Mokka+shouldjs, konnte aber gut mit Jasmin+erwarten) wie folgt:

describe('loading', function(){
    var scope, element, loading, wrapper, parent;
    beforeEach(function () {
    inject(function ($compile,$rootScope) {
            scope = $rootScope;
            wrapper = $($compile('<div id="a"><loading><div id="b">RUN</div></loading></div>')($rootScope));
            element = wrapper.find("#b");
            parent = element.parent();
            loading = wrapper.children("div").children("div:eq(1)");
    });
    });
  it('should wrap the element with loading', function(){
        wrapper.children("div").children("div:eq(0)").children("div")[0].should.equal(element[0]);
  });
    it('should create the loading element', function(){
        loading.html().should.eql("Loading");
    });
    describe('when ready is false', function(){
        before(function () {
            scope.ready = false;
        });
        it('should show the loading element', function(){
            loading.is(":visible").should.be.true;
        });
        it('should hide the actual element', function(){
            element.is(":visible").should.be.false;
        });
    });
    describe('when ready is true', function(){
        it('should hide the loading element', function(){
            loading.is(":visible").should.be.false;
        });
        it('should show the actual element', function(){
            element.is(":visible").should.be.true;
        });
    });
});

Die transklusion funktioniert, alle der HTML-Code wird Hinzugefügt und wickelte richtig. Aber keine Elemente sichtbar sind. Fehler sind (gekürzt):

Chrome 37.0.2062 (Mac OS X 10.9.5) die Richtlinien laden, wenn Sie bereit ist false sollte zeigen das be-element ist FEHLGESCHLAGEN

AssertionError: expected falsch, um wahr zu sein

Chrome 37.0.2062 (Mac OS X 10.9.5) die Richtlinien laden, wenn Sie bereit wahr ist, sollte zeigen das eigentliche element FEHLGESCHLAGEN

AssertionError: expected falsch, um wahr zu sein

Chrome 37.0.2062 (Mac OS X 10.9.5): Ausgeführt 7 von 7 (2 GESCHEITERT) (0.235 Sek. /0.048 Sek.)

Hinweis: ja, ich habe jQuery in meine test-suite, also kann ich die oben element.is() und ähnliches. Natürlich, es gar nicht funktioniert, so dass eine einfachere Methode, die tatsächlich funktioniert, ist immer willkommen.

UPDATE:

Basierend auf die Informationen unten aus @Esteban, ich habe es vereinfacht, aber es funktioniert immer noch nicht. Ändern $scope.ready = true scheint nicht zu bekommen, und schräg Prozess das element. Fiddle ist hier:

http://jsfiddle.net/L825ks1w/6/

InformationsquelleAutor deitch | 2014-09-30
Schreibe einen Kommentar