Testing ein Click-Ereignis mit Jasmin, die ein Stylesheet auf den Kopf

jQueryTesting ein Click-Ereignis mit Jasmin, die ein Stylesheet auf den Kopf

$(".theme-picker").click(function() { 
     $('head').append('<link rel="stylesheet" href="" type="text/css" media="screen" id="theme_switcher"/>'); 
});

Jasmin

describe("style.switcher", function() { 

beforeEach(function() { 
    jasmine.getFixtures().set(
     '<head></head>' + 
     '<div class="switcher">' + 
      '<a class="theme-picker" title="theme-picker"></a>' + 
      '<a class="folder-picker" title="folder-picker"></a>' + 
      '<a class="font-picker" title="font-picker"></a>' + 
      '<a class="color-picker" title="color-picker"></a>' + 
     '</div>'); 
    }); 

it("loads themes switcher link in head", function() { 
    $('.theme-picker').trigger('click'); 
    expect($('head')).toContain("theme_switcher"); 
}); 
});

Ich bin neu in Jasmin und der Test nicht anhängt derzeit. Ich bin mir nicht sicher, ob es das Fixture, das Trigger Event oder etwas anderes ist.

Quelle

2012-05-30 coreballs

Ich denke, die gewählte Antwort ist irreführend und falsch (auch wenn es durch die OP ist!). Ich bin nicht sicher, warum es "schlechte Form" sein würde, um den Effekt zu prüfen, den ein Stück Javascript auf irgendeinem gerichteten HTML hat. Oft ist dies die einzige Ausgabe, mit der Sie überprüfen können, ob eine Methode funktioniert.

Der Test, der als Beispiel verwendet wird, beweist eigentlich nichts: natürlich wurde der Klick ausgelöst, Sie haben ihn gerade ausgelöst! Was Sie tun möchten, ist etwas zu beweisen, das aus diesem Klick folgt, z. eine Änderung in einem DOM oder einer anderen Datenstruktur, was der ursprüngliche (IMO korrekte) Instinkt war.

Was Sie wollen, ist einen asynchronen Test (https://github.com/pivotal/jasmine/wiki/Asynchronous-specs) zu verwenden, um eine Änderung des DOM zu warten und dann aufgeben, ähnlich wie die Ruby-Bibliothek Capybara (https://github.com/jnicklas/capybara/) arbeitet:

it('loads themes switcher link in head', function() { 
    $('.theme-picker').trigger('click'); 

    waitsFor(function() { 
    return $('head').contains('theme_switcher'); 
    }, 'theme switcher never loaded', 10000); 
});

Quelle

2012-07-25 05:31:51 method

theme_switcher ist die ID Ihres Links. toContain nimmt einen Selektor, d.h. Sie sollten schreiben toContain('#theme_switcher').

Vergewissern Sie sich auch, dass Sie in der Sandbox anhängen und überprüfen Sie auch den Kopf der Sandbox, nicht Ihr Dokument.

EDIT:

Ich nehme an, Sie jasmine-jquery

Quelle

2012-06-01 19:00:43 ggozad

Ich war nicht bewusst, dass 'toContain()' einen CSS-Selektor als Argument verwenden könnte. Haben Sie eine Referenz, mit der Sie verlinken können? –

Ich war neugierig, also habe ich ein wenig gesucht. Unter der Haube ruft 'toContain()' 'jasmine.Env.prototype.contains _()' auf, was [hier definiert ist] (https://github.com/pivotal/jasmine/blob/master/src/core/Env. js). Ich sehe nichts, was darauf hindeutet, dass es einen CSS-Selektor akzeptiert, aber ich hätte es gerne falsch bewiesen! –

Wie überprüfen Sie den Kopf der Sandbox? Ich denke, dass der einzige Kopf, der im Test auftauchen wird, das Dokument ist. Sandkasten(); gibt

– coreballs

Forschung verwenden hat es in schlechter Form gezeigt ist seitenspezifische Elemente zu testen.

Mein aktueller Test (passing) ist wie folgt:

describe("zen switcher", function() { 

beforeEach(function() { 
    loadFixtures('zen_switcher.html'); 
    spyOnEvent($('.theme-picker'), 'click'); 
}); 

it("clicks the .theme-picker", function() { 
    $('.theme-picker').click(); 
    expect('click').toHaveBeenTriggeredOn($('.theme-picker')); 
}); 
});

Quelle

2012-06-01 21:24:08 coreballs

"Forschung hat gezeigt" => Zitat benötigt. –

Testing ein Click-Ereignis mit Jasmin, die ein Stylesheet auf den Kopf

Antwort

Verwandte Themen