jasmine + karma - Firefox не изчислява правилно element.height и element.width

Имам странен проблем с използването на рамки жасмин и карма. По принцип просто искам да направя преоразмеряване с помощта на обикновен javascript на някои img.

Имам следния тест:

    it('Should set both the height and width style for the one applicable as being the maximum allowed', function () {
    var images = '<img class="resizableImage" src="" alt="" style="height: 1200px; width: 1000px; visibility: hidden;">' +
        '<img class="resizableImage" src="" alt="" style="height: 1100px; width: 199px; visibility: visible;">' +
        '<img class="resizableImage" src="" alt="" style="height: 1990px; width: 200px; visibility: visible;">';
    setFixtures(images);

    var allResizableImages = $('img.resizableImage');
    resizeImagesWidthHeightIfBiggerThan(allResizableImages, 199, 199);

    $.each(allResizableImages, function () {
        expect($(this).css('width')).toBe('199px');
        expect($(this).css('height')).toBe('199px');
    });
});

и функцията:

function resizeImagesWidthHeightIfBiggerThan(imagesToBeResized, maxWidth, maxHeight) {
var UNIT = "px";
var VISIBILITY_SETTINGS = "visible";

for (var i = 0, len = imagesToBeResized.length; i < len; i++) {
    var imgCandidate = imagesToBeResized[i];

    if (imgCandidate && imgCandidate.tagName.toLowerCase() == 'img') {
        if (imgCandidate.width > maxWidth) {
            imgCandidate.style.width = maxWidth + UNIT;
        }
        if (imgCandidate.height > maxHeight) {
            imgCandidate.style.height = maxHeight + UNIT;
        }
    }

    imgCandidate.style.visibility = VISIBILITY_SETTINGS;
}

}

С Chrome всичко върви добре. При Firefox обаче тестът не преминава. Въпреки това, на живо (тествайки ръчно във Firefox), всичко върви добре.

Какво може да не е наред?

Използвам Firefox 29.0

Благодаря много.


person Ioan    schedule 07.05.2014    source източник
comment
Какво се случва, ако премахнете константата UNIT и използвате jquery и в тестовете?   -  person JimmyRare    schedule 07.05.2014
comment
Ако използвам jquery работи. Но целият смисъл е да не използвам jquery, тъй като имам някои проблеми с производителността при него.   -  person Ioan    schedule 07.05.2014
comment
Работата е там, че тестването на живо работи, но тестването чрез карма не.   -  person Ioan    schedule 07.05.2014
comment
Опитахте ли console.log стойностите в FF, за да видите дали низовете са равни?   -  person JimmyRare    schedule 07.05.2014


Отговори (1)


Имахме същия проблем. FF не отчита правилните размери на изображението, ако src е празно. Опитайте да зададете src на валидно изображение, за да видите дали работи.

В нашия проект използваме ng-src; не src. Създадохме макет на ng-src, който се включва във всички наши тестове. Макетът заменя стойността ng-src (празна или не) с едно фалшиво изображение, съхранено в /tests/image. Това е полезно, ако тествате директиви за модул, които включват изображения в своя html шаблон. Вижте също Как се подигравате с директиви, за да активирате модулно тестване на директива от по-високо ниво?

person Sylvain    schedule 07.05.2014
comment
Ако това реши проблема ви, можете да промените заглавието на въпроса си на нещо, свързано с размерите на изображенията на FF. Това ще помогне на други хора да намерят решението. - person Sylvain; 07.05.2014
comment
Между другото, друг проблем, с който се сблъскахме, е, че IE8 не изчислява правилно размерите на изображенията, ако използвате width и height CSS свойства. Трябваше да зададем min-width и min-height като заобиколно решение. - person Sylvain; 07.05.2014