Изменение атрибута тестирования с помощью vue с использованием v-bind и vue-test-utils - PullRequest
Новая
       34

Изменение атрибута тестирования с помощью vue с использованием v-bind и vue-test-utils

0 голосов
/ 24 сентября 2018

Привет всем и спасибо за то, что прочитали меня!

У меня возникли сложности при тестировании одного из моих компонентов.Этот компонент является просто входом и кнопкой, а кнопка активируется при определенных условиях.Он хорошо работает на стороне приложения, но я не могу найти способ его модульного тестирования.Чтобы добавить немного сложности, я использую машинописный текст и vue-property-decorator. 

<template>
  <v-layout
    column
    align-center>
    <v-form class="layout column mt-3"  v-model="isFormValid">
      <v-text-field
        id="maximumPercentageDiscount"
        type="number"
        v-model="maximumPercentageDiscount"
        required
      ></v-text-field>
    </v-form>
    <v-btn
      :disabled="isSaveButtonDisabled"
      @click="saveMaximumRefundAndDiscountAmount"
    >
     Save
    </v-btn>
  </v-layout>
</template>

<script lang="ts" src="./MaxRefundAndDiscount.ts"></script>

@Component
export default class MaxRefundAndDiscount extends Vue {
  isFormValid = false

  maximumPercentageDiscount = '0'
  initialMaximumPercentageDiscount = '0'

  get isSaveButtonDisabled() {
    return !this.isFormValid
      || this.initialMaximumPercentageDiscount === this.maximumPercentageDiscount
  }
}

И тест: 

  describe('MaxRefundAndDiscount.vue', () => {
  let store: any
  let componentWrapper: Wrapper<Vue>
  let component: any
  let i18n = new VueI18n({silentTranslationWarn: true})
  let saveButton: HTMLButtonElement

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        global: {
          state: {
            selectedStore: {id: 1}
          },
          mutations: {setMessageBox: jest.fn()}
        }
      }
    })
    componentWrapper = mount(RefundAndDiscount, {
      store,
      i18n
    })
    component = componentWrapper.vm

    saveButton = <HTMLButtonElement>(
      componentWrapper.find('button').element
    )
  })

  it('should activate save button when maximumPercentageDiscount input is changed with correct value', () => {
    componentWrapper.find('#maximumPercentageDiscount').setValue(50)
    console.log(component.isFormValid, component.initialMaximumPercentageDiscount, component.maximumPercentageDiscount)
    expect(component.isSaveButtonDisabled).toBeFalsy() //this one pass and everything is good
    expect(saveButton.disabled).toBeFalsy() //this one fail and if I want to test further I cannot click on the button
  })

})

Я явно вырезал частьмоего кода, чтобы показать простой пример.Делая вырезку, я понял, что проверка формы кажется виновной, поскольку, когда я удаляю ее, тест работает нормально.

Я также могу предоставить след модульных тестов: 

   FAIL test\unit\specs\MaxRefundAndDiscount.spec.ts
  MaxRefundAndDiscount.vue
    × should activate save button when maximumPercentageDiscount input is changed with correct value (76ms)

  ● MaxRefundAndDiscount.vue › should activate save button when maximumPercentageDiscount input is changed with correct value

    expect(received).toBeFalsy()

    Expected value to be falsy, instead received
      true

      40 |     console.log(component.isFormValid, component.isMaximumPercentageDiscountInputDisabled, component.initialMaximumPercentageDiscount, component.maximumPercentageDiscount)
      41 |     expect(component.isSaveButtonDisabled).toBeFalsy() //this one pass and everything is good
    > 42 |     expect(saveButton.disabled).toBeFalsy() //this one fail and if I want to test further I cannot click on the button
      43 |   })
      44 |
      45 | })

      at Object.it (test/unit/specs/MaxRefundAndDiscount.spec.ts:42:33)

  console.log test\unit\specs\MaxRefundAndDiscount.spec.ts:40
    true undefined '0' '50'

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.614s

Еслиты хоть представляешь, что я делаю не так, ударил меня;) Спасибо!

...