Question

大家好，感谢您阅读我！

我很难测试我的组件之一。该组件只是一个输入和一个按钮，该按钮在某些条件下处于启用状态。它在应用程序方面运行良好，但我找不到对它进行单元测试的方法。为了增加一点难度，我使用打字稿和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

如果您对我在做错的事情有任何了解，请把我打起来；）谢谢！

使用v-bind和vue-test-utils使用vue测试属性更改

0 个答案: