javascript - 如何检查 JASMINE (JS) 框架中点击时显示特定 div

Question

我对 Jasmine JS 框架非常陌生。

我有两个 div' <div id="DIV_1"></div> and <div id="DIV_2"></div> 。我有两个链接图像，假设我单击链接图像1，我将显示 DIV_1。如果我单击链接图像 2，我将隐藏第一个 DIV_1 并显示 DIV_2。

我的问题是，如何知道当我点击链接图像 1 时，我正在使用 JASMINE JS Framework 显示 DIV_1？。

我在 Jasmine 规范中使用此脚本来单击链接图像 1:$('.link_image').trigger('click');

Answer 1

我将创建一个 Jasmine 装置，并调用该装置上的单击事件。之后，您可以对灯具的状态做出断言。

我通常使用一个名为 jasmine-jquery 的插件来实现此目的: https://github.com/velesin/jasmine-jquery

代码最终看起来像这样:

var fixture = setFixture("some_html");
fixture.find('.link_image').trigger('click'); //.find() accepts a JQuery selector
expect(fixture.find('#DIV_1').toBeHidden();
expect(fixture.find('#DIV_2').toBeVisible();

此外，如果您的模板是另一个文件(可能通过 AMD 加载)，请使用此函数:

var fixture = loadFixture('path/to/amd/template');

我强烈建议使用 AMD 方法来加载您在生产中使用的相同模板，否则您必须重新创建 HTML 作为测试的固定装置，然后此时您只是测试您的固定装置，而不是实际的代码。