[英]Nuxt JS / Vue Jest check that class name element exists on page
我是 Vue JS 的 Jest 测试套件的新手,并将其集成到我的 Nuxt JS 应用程序中。 我已经设置了一些基本测试来检查组件是否是 Vue 实例并且这些测试成功通过。
我现在试图在我的页面上找到一个元素并检查它是否存在,以及可能的内容。
这是我的结构
页面/应用程序/begin.vue
<template>
<div>
<LoanTerm />
</div>
</template>
组件/表格/步骤/贷款/LoanTerm.vue
<template>
<article>
<article class="tw-px-7 tw-pb-7">
<StepHeader
title="About your loan"
subtitle="How long do you need the money for?" />
</article>
<hr class="tw-mt-7" />
<article class="tw-p-7 tw-space-y-7">
<section>
<validation-provider
vvid="loan.term"
name="Loan term"
rules="required"
v-slot="{ errors, classes }"
>
<div class="tw-grid tw-grid-cols-2 tw-gap-4">
<label
v-for="(term, index) in datasets.terms.slice(0, 12)"
v-if="index % 2 == 0"
:key="index"
:for="`term-${index}`"
class="tw-flex-1 tw-relative tw-bg-gray-50 tw-rounded-xl tw-p-7 tw-border-b-4 tw-border-gray-200 tw-text-center tw-cursor-pointer"
:class="$getClasses(classes, true, fields.loan.term === term.value)">
<input type="radio" name="term" :id="`term-${index}`" :value="term.value" v-model="fields.loan.term" class="tw-absolute tw-top-4 tw-right-4 tw-h-4 tw-w-4 focus:tw-ring-green-500 tw-text-green-600 tw-border-gray-300 jest__datasets-terms" />
<span class="tw-block">
{{ term.label }}
</span>
</label>
</div>
<ValidationMessage :message="errors[0]" />
</validation-provider>
</section>
<section class="tw-space-y-4">
<modal
title="Choose address"
:is-open="termSelectionModalIsOpen">
<template #action-close>
<button @click="termSelectionModalIsOpen = false" type="button" class="tw-p-3 tw-rounded-full tw-text-gray-800 tw-border tw-border-gray-300 tw-font-extrabold focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-200 focus:tw-ring-white">
<svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</template>
<template #iterable-data>
<section v-for="(term, index) in datasets.terms" :key="index">
<button @click="chooseTerm(term)" type="button" class="tw-w-full tw-block md:hover:tw-bg-gray-50 tw-p-6 tw-text-left">
<div class="tw-grid tw-grid-cols-3 tw-gap-6">
<div class="tw-col-span-2 tw-flex tw-items-center tw-text-gray-600">
{{ term.label }}
</div>
<div class="tw-text-right">
<button type="button" class="tw-p-3 tw-rounded-full tw-text-gray-800 tw-border tw-border-transparent tw-font-extrabold focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-200 focus:tw-ring-white">
<svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</button>
<hr />
</section>
</template>
</modal>
<button @click="termSelectionModalIsOpen = true" type="button" class="tw-py-5 tw-px-5 tw-rounded-xl tw-bg-gray-100 tw-flex tw-w-full tw-text-gray-600 tw-border tw-border-gray-200 tw-font-medium focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-100 focus:tw-ring-white">
<div class="tw-flex tw-mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5 tw-mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Choose another term
</div>
</button>
<div class="md:tw-shadow-lg">
<button type="submit" class="tw-py-5 tw-px-5 tw-rounded-xl tw-bg-green-500 md:hover:tw-bg-green-600 tw-block tw-w-full tw-text-white tw-border tw-border-gray-300 tw-font-medium focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-200 focus:tw-ring-white">
Continue
</button>
</div>
</section>
</article>
</article>
</template>
<script>
export default {
props: {
minTerm: {
type: Number,
default: 1
},
term: {
type: Number,
default: 7
},
maxTerm: {
type: Number,
default: 36
},
fields: {
type: Object,
default: () => ({ })
}
},
data () {
return {
termSelectionModalIsOpen: false,
datasets: {
terms: []
}
}
},
created () {
this.availableTerms()
},
methods: {
/*
** Generate available terms
*/
availableTerms () {
for (let term = this.minTerm; term < this.maxTerm; term++) {
this.datasets.terms.push({
label: `${term} month${term == 1 ? '' : 's'}`,
value: term
})
}
},
/*
** Choose term
*/
chooseTerm (term = null) {
this.fields.loan.term = term.value
this.termSelectionModalIsOpen = false
this.$store.commit('application/stepForwards')
}
}
}
</script>
我设置的测试提供了以下内容:
import { mount } from '@vue/test-utils'
import LoanTerm from '@/components/Form/Steps/Loan/LoanTerm'
describe('LoanTerm', () => {
test('is a Vue instance', () => {
const wrapper = mount(LoanTerm)
expect(wrapper.vm).toBeTruthy()
})
test('terms are available for selection', async () => {
const wrapper = mount(LoanTerm)
const terms = await wrapper.find('.jest__datasets-terms')
expect(terms.exists()).toBe(true)
})
})
我从运行这个测试中得到的结果是我的“条款可供选择”测试失败,因为它收到了false 。
我也试过使用findAll
,它什么都不返回
我错过了什么?
看起来modal
的内容(包括您的测试正在寻找的“datasets-terms”按钮)最初并未呈现,因为termSelectionModalIsOpen
已初始化为false
,并且没有任何内容将其设置为true
。 模态可能与此类似:
// Modal.vue
<template>
<div v-if="isOpen">
<slot name="iterable-data" />
<slot name="action-close" />
</div>
</template>
<script>
export default {
props: {
title: String,
isOpen: false,
}
}
</script>
使用data()
属性装载LoanTerm
,该属性将termSelectionModalIsOpen
初始化为true
以便呈现模式的内容:
const wrapper = mount(LoanTerm, {
data () {
return {
termSelectionModalIsOpen: true,
}
},
})
我注意到, jest__datasets-terms
类是在缺少LoanTerm.vue
,但我认为这只是一个复制粘贴错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.