Попытка проверить JQuery с Жасмином

Question

Я создал очень простое приложение для разделения счетов на JavaScript и использую Jasmine для тестирования.

Я пытаюсь проверить эту calculate функцию:

    function Bill_Splitter(){
      this.amount = 0;
      this.cost = 0; 
      this.tip = 0;
      this.diners = 0;
    };

      Bill_Splitter.prototype.calculate = function(){

        this.cost = parseInt(document.getElementById("cost").value);
        this.tip = parseInt(document.getElementById("tip").value);
        this.diners = parseInt(document.getElementById("diners").value);

        var amount = (cost + tip) / diners

        return this.amount += amount
        document.getElementById("amount").innerHTML = amount

      }

Однако я не могу понять, как проверить числовые значения (стоимость, чаевые и стоимость), которые являются значениями из HTML-формы, которую вводит пользователь.

Мой тест на Жасмин до сих пор:

    describe('calculate', function() {
        const form = document.createElement('form');
        form.innerHTML= `<input type="text" id="cost" value=2 />
                         <input type="text" id="tip" value=2 />
                         <input type="text" id="diners" value =2 />
                          <span id="amount"></span>
                        `;
        document.body.appendChild(form)
      splitter.calculate()
      expect(splitter.amount).toEqual(30)
    });
  });

Кто-нибудь может помочь? Спасибо! :)

Answer 1

Вы можете сделать свойства, как вы сделали с this.amount в конструкторе вашей функции

 function Bill_Splitter(){
      this.amount = 0;
      this.cost = 0;
      this.diners = 0;
      this.tip = 0;
    };

 this.cost = parseInt(document.getElementById("cost").value);
 this.tip = parseInt(document.getElementById("tip").value);
 this.diners = parseInt(document.getElementById("diners").value);

describe('calculate', function() {
    it('calculates the amount due', function(){
        splitter.calculate()
        expect(splitter.amount).toEqual(30)
        expect(splitter.tip).toEqual(###)
     });
});

Если ваш тест не может найти эти HTML-элементы, вы можете добавить их в свой тест:

it('calculate', function(){
        const form = document.createElement('form');
        form.innerHTML= `<input type="text" id="cost" value="2" />
                         <input type="text" id="tip" value="2" />
                         <input type="text" id="dinners" value ="2" />
                          <span id="amount"></span>
                        `;
        document.body.appendChild(form)

        splitter.calculate()

        expect(splitter.amount).toEqual(30)
        expect(splitter.tip).toEqual(###)
      })

Финальный код:

function Bill_Splitter(){
  this.amount = 0;
  this.cost = 0; 
  this.tip = 0;
  this.diners = 0;
};

Bill_Splitter.prototype.calculate = function(){
  this.cost = parseInt(document.getElementById("cost").value);
  this.tip = parseInt(document.getElementById("tip").value);
  this.diners = parseInt(document.getElementById("diners").value);

  this.amount += (this.cost + this.tip) / this.diners;

  document.getElementById("amount").innerHTML = this.amount 

}