dimanche 27 septembre 2020

Jasmine-Jquery Doesn't detect the class being added

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')
})

The console: Console log

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