I have found plenty of similar questions but the solutions haven't worked.
I'm having trouble with Jasmine and Jasmine-Jquery detecting a class being added to a fixture. The test continually fails, stating that the class isn't present... However, when I log the fixture to console the class is there! I'm new to jasmine testing, so I'm sure there's some simple thing like detecting fixture changes that I'm missing, any help would be appreciated!
Relevant part of the fixture:
<button type="submit" class="card-image btn btn-link border border-white border-4 m-1 p-0" style="background-image: url(/media/portraits/thumbs/brianna-mills-2qoyI8Mewe0-unsplash_Cropped.jpeg);" data-image-full="/media/portraits/brianna-mills-2qoyI8Mewe0-unsplash_Cropped.jpg">
<img src="/media/portraits/thumbs/brianna-mills-2qoyI8Mewe0-unsplash_Cropped.jpeg" class="card-img-top img-fluid" alt="Seventh Person" />
</button>
the js
file:
function lazyLoad() {
const cardImages = document.querySelectorAll(".card-image");
// loop over each image
cardImages.forEach(function (cardImage) {
const imageUrl = cardImage.getAttribute("data-image-full");
const contentImage = cardImage.querySelector("img");
// change src to full res image
contentImage.src = imageUrl;
// fires the swap function on load
contentImage.addEventListener("load", function () {
// sets the background as the full res image
cardImage.style.backgroundImage = "url(" + imageUrl + ")";
// applies class for a smooth transition to the gallery images
cardImage.classList.add("is-loaded");
});
});
and the spec Test:
jasmine.getFixtures().fixturesPath = '/static/js/jasmine/spec/javascripts/fixtures'
beforeEach(function() {
loadFixtures('myfixture.html')
$.fx.off = true;
});
it("Should add the is-loaded class", function () {
lazyLoad()
$(".card-image > img").trigger( "load" )
console.log(($(`.card-image`))[0])
expect($(`.card-image`)[0]).toHaveAttr('class', 'is-loaded')
})
I have another test confirming the load
is triggered, I have tried using spies, different selectors, etc. but the test always fails with Expected <button type="submit" class="card-image btn btn-link border border-white border-4 m-1 p-0"... to have Class 'is-loaded'
.
I can't figure out what I'm missing. Any advice?
Aucun commentaire:
Enregistrer un commentaire