Javascript 如何使用documet.getElementById和getElementsByClassName为DisplayNone css属性执行jasmine测试用例

我是jasmine测试用例的新手，在做了这个样式属性未定义之后，我尝试为选择模块做jasmine测试用例

 function Selection() {

    }
    Selection.prototype.expandFlightDetails = function() {

        document.getElementsByClassName("flight-details-container").style.display = 'none';
        document.getElementById("expandedFlightDetails").style.display = 'block';
    };
    Selection.prototype.hideFlightDetails = function() {
        document.getElementById("expandedFlightDetails").style.display = 'none';
        document.getElementsByClassName("flight-details-container").style.display = 'block';

    };

我的测试用例是

describe("selection module", function() {
    var selection;

    beforeEach(function () {
        selection= new Selection();

    });
    afterEach(function () {

    });
    it('expand the flight details part ' , function(){
        selection.expandFlightDetails();
        expect(document.body.getElementsByClassName('flight-details-container')[0].style.display).toEqual('none');

    });
    xit('hide the flight details part ', function(){
        selection.hideFlightDetails();
        expect(document.getElementById('expandedFlightDetails').style.display).toEqual('none');

    });
});

完成此操作后，我将获取并删除beforEach的代码

TypeError:无法读取未定义的属性“style”

 function Selection() {

    }
    Selection.prototype.expandFlightDetails = function() {

        document.getElementsByClassName("flight-details-container").style.display = 'none';
        document.getElementById("expandedFlightDetails").style.display = 'block';
    };
    Selection.prototype.hideFlightDetails = function() {
        document.getElementById("expandedFlightDetails").style.display = 'none';
        document.getElementsByClassName("flight-details-container").style.display = 'block';

    };

---

如果我做错了，请纠正我。

此代码中有一些错误

Selection.prototype.expandFlightDetails中的第一个

确保获得数组的第一个结果（您忘记了

[0]

）：

对于

Selection.prototype.hideFlightDetails

然后在您的测试套件中创建一个名为

Selection

的选择实例，但在这两个测试中，您都使用了一个名为

flightselection

的变量，该变量没有声明。它不应该是

选择

---

最后，您的问题似乎是您试图在测试中操纵

'flight-details-container'

，尽管此元素是在每次

回调后的
上创建的
afterEach
意味着这将在每次测试后执行，因此它在测试期间不存在。
style
属性您使用了这么多次？此错误实际发生在何处？@VikrantKashyap it（'展开航班详细信息部分'，函数（）{flightselection.expandFlightDetails（）；expect（document.body.getElementsByClassName（'fligh-details-container'）[0].style.display）.toEqual（'none'）；}）；对于这个测试用例，我得到了这个错误，你是否包括html文件，它包含类为“flight details container”的元素？我已经编辑了代码，但仍然收到了相同的错误。我还删除了aftereach到beforeach的代码，以便每个测试用例都会执行代码。如果我错了，请更正我。您还没有修复expandFlightDetails和hideFlightDetails
getElementsByClassName
返回一个数组，因此您需要选择第一项
[0]
他是否应该检查
getElementsByClassName
是否至少返回一个元素，然后选择第一个元素？@Pietro这不应该是自动操作。防御性编程有时会隐藏bug，如果此时没有理由不存在该元素，那么最好快速失败。但实际上，在生产设置中，最好是避免崩溃，而是向用户发送一些错误反馈。