如何在 javascript 中使用 Jasmine 测试三元运算符

Question

我正在尝试使用 Jasmine 测试我的一段代码，但我对使用哪种方法以及如何测试这个特定功能感到困惑。这是我的代码：

const foodInfoToggle1 = () => {
    const foodInfo = document.querySelector('#first');
    foodInfo.style.display === "none" ? foodInfo.style.display = "block" :  foodInfo.style.display = "none";
}

此函数包含切换功能并分配给按钮。单击该按钮后，该函数将运行以查看该段落是否设置为 'none'。如果是，则切换到 'block'，反之亦然。如您所见，我的函数不接受任何参数，因此我发现很难使用测试用例。我将如何使用 Jasmine 测试此类代码。

Answer 1

describe('foodInfoToggle1', () => {
  let element;
  
  beforeEach(() => {
    element = document.createElement('span');
    
    spyOn(document, 'querySelector').and.callFake(selector => {
        if (selector === '#first') return element;
    });
  });
  
  it('Should change the display from none to block', () => {
      element.style.display = 'none';
      
      foodInfoToggle1();
      
      expect(element.style.display).toEqual('block');
  });
  
  it('Should change the display from block to none', () => {
      element.style.display = 'block';
      
      foodInfoToggle1();
      
      expect(element.style.display).toEqual('none');
  });
});

我没有找到在 post 中包含 jasmine 的快速方法，所以希望我的所有语法都是正确的。

这里的想法是针对每个测试，我们创建一个虚拟元素并模拟 querySelector 方法。如果使用预期的选择器调用它，return 虚拟元素。

然后对于我们的每个测试，我们将样式显示设置为我们预期的初始值。然后我们调用该方法，并验证样式显示是否已更改。

如何在 javascript 中使用 Jasmine 测试三元运算符

How to test a ternary operator with Jasmine in javascript

javascript

jasmine