<template>
<p>{{ message }}</p>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
value: Number
});
const message = ref('');
watch(
() => props.value,
(newVal) => {
if (newVal > 10) {
message.value = 'Больше 10';
} else {
message.value = 'Меньше или равно 10';
}
},
{ immediate: true }
);
</script>
Задание:
Задание: Проверьте, что при value=5 отображается "Меньше или равно 10", а при value=15 — "Больше 10".
Решение:
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Watch from '@/components/Watch.vue';
describe('Watch.vue', () => {
it('при value=5 отображается "Меньше или равно 10"', () => {
const wrapper = mount(Watch, {
props: {
value: 5
}
});
expect(wrapper.find('p').text()).toBe('Меньше или равно 10')
});
it('при value=15 отображается "больше 10"', () => {
const wrapper = mount(Watch, {
props: {
value: 15
}
});
expect(wrapper.find('p').text()).toBe('Больше 10')
})
})
Можно еще вот так сделать:
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import WatchComponent from '@/components/WatchComponent.vue';
describe('WatchComponent.vue', () => {
it('отображает сообщение в зависимости от value', () => {
const wrapper = mount(WatchComponent, {
props: { value: 5 }
});
expect(wrapper.text()).toBe('Меньше или равно 10');
wrapper.setProps({ value: 15 });
expect(wrapper.text()).toBe('Больше 10');
});
});