Мне нужна помощь Исправление юнит-теста для одного из моих методов - PullRequest
Новая
       26

Мне нужна помощь Исправление юнит-теста для одного из моих методов

1 голос
/ 28 апреля 2019

Я сейчас прохожу курс, и одна из моих задач - создать любую простую программу с vue js, что я и сделал успешно.Это простой калькулятор с основными операторами. 

    <template>
  <div class="Calculator">
   <table cellspacing="10">
      <tr>
        <td colspan="4">
          <input type="text" v-model="result" disabled>
        </td>
      </tr>
      <tr>
        <td class="button" @click="addNumber(7)">7</td>
        <td class="button" @click="addNumber(8)">8</td>
        <td class="button" @click="addNumber(9)">9</td>
        <td class="operator" @click="setOperator('*')">x</td>
      </tr>
      <tr>
        <td class="button" @click="addNumber(4)">4</td>
        <td class="button" @click="addNumber(5)">5</td>
        <td class="button" @click="addNumber(6)">6</td>
        <td class="operator" @click="setOperator('-')">-</td>
      </tr>
      <tr>
        <td class="button" @click="addNumber(1)">1</td>
        <td class="button" @click="addNumber(2)">2</td>
        <td class="button" @click="addNumber(3)">3</td>
        <td class="operator" @click="setOperator('+')">+</td>
      </tr>
      <tr>
        <td class="button" @click="addNumber(0)" colspan='2'>0</td>
        <td class="button" @click="clear">C</td>
        <td class="operator" @click="equal">=</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        result: 0,
        tmp_value: 0,
        reset: false,
        operator: undefined
      }
    },
    methods: {

      clear() {
        this.result = 0;
        this.tmp_value = 0;
        this.operator = undefined;

        return result;
      },
      addNumber(number) {
        if(this.result == 0 || this.reset === true) {
          this.result = '';
          this.reset = false;
        }
        this.result += number.toString();
      },
      setOperator(operator) {
        if(this.tmp_value != 0)
        this.calculate();
        this.tmp_value = this.result;
        this.operator = operator;
        this.reset = true;
      },
      equal() {
        this.calculate();
        this.tmp_value = 0;
        this.operator = undefined;
      },
      calculate() {
        let value = 0;
        let firstNum = parseFloat(this.tmp_value);
        let secondNum = parseFloat(this.result);
        switch(this.operator) {
          case '+':
            value = firstNum + secondNum;
            break;
          case '-':
            value = firstNum - secondNum;
            break;
          case '*':
            value = firstNum * secondNum;
            break;
          case '/':
            value = firstNum / secondNum;
        }
        this.result = value.toString();
      }
    }
  }
</script>

<style>
.Calculator {
  display: flex;
  margin: 0 auto;
  height: 100vh;
  width: 200px;
  font-size: 25px;
}

table {
      width: 370px;
}

input {
      display: block;
      text-align: right;
      height: 30px;
}

.operator {
    background-color: orange;
    border: 1px solid gray;
}

.button {
    background-color:whitesmoke;
    border: 1px solid gray;
}
</style>

Так что я пытаюсь провести модульный тест одного из моих методов, называемых «очистить», который в основном меняет результат экрана на 0, и я хочучтобы проверить, что фактически он переключается на 0. Это мой модульный тест, но он говорит мне, что результат не определен. 

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import Calculator from '@/components/Calculator.vue'

describe('Calcualtor.vue', () => {
  const msg = 'new message'

  it('Test Method Add', () => {
    const wrapper = shallowMount(Calculator)
    expect(wrapper.vm.clear()).to.equal(0)
  })
})

Мой ожидаемый результат, если тест пройден, потому что методы переключаютрезультат обратно до 0.

1 Ответ

0 голосов
/ 01 мая 2019

Похоже, что вы только что получили небольшую опечатку:

В clear вы возвращаете result (что составляет undefined) вместо this.result: 

clear() {
  this.result = 0;
  this.tmp_value = 0;
  this.operator = undefined;

  return this.result;  // <= return "this.result" instead of "result"
},
...