jasmine + karma - Firefox 无法正确计算 element.height 和 element.width答案

【问题标题】：jasmine + karma - Firefox does not calculate element.height and element.width properlyjasmine + karma - Firefox 无法正确计算 element.height 和 element.width
【发布时间】：2014-06-24 12:54:35
【问题描述】：

我在使用 jasmine 和 karma 框架时遇到了一个奇怪的问题。基本上我只想使用一些 img 的纯 javascript 来调整大小。

我有以下测试：

    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

非常感谢。

【问题讨论】：

如果您删除 UNIT 常量并在测试中也使用 jquery 会发生什么？
如果我使用 jquery 作品。但重点是不要使用 jquery，因为我在使用它时会遇到一些性能问题。
问题是现场测试有效，但通过业力测试却不行。
你试过console.logFF中的值看字符串是否相等？

标签： javascript jasmine karma-runner karma-jasmine

【解决方案1】：

我们遇到了同样的问题。如果src 为空，FF 不会报告正确的图像尺寸。尝试将src 设置为有效图像，看看它是否有效。

在我们的项目中，我们使用ng-src；不是src。我们创建了一个模拟 ng-src，它会在我们所有的测试中发挥作用。模拟用存储在/tests/image 中的单个假图像替换ng-src 值（是否为空）。如果您对在其 html 模板中包含图像的指令进行单元测试，这将很有用。另见How do you mock directives to enable unit testing of higher level directive?

【讨论】：

如果这解决了您的问题，您可以将问题的标题更改为与 FF 上的图像大小相关的内容。这将帮助其他人找到解决方案。
顺便说一下，我们面临的另一个问题是，如果您使用width 和height CSS 属性，IE8 无法正确计算图像大小。我们不得不设置 min-width 和 min-height 作为解决方法。