Within my Vue Quasar component, a badge is implemented as shown below:
<q-badge
:color="green"
text-color="white"
:label="`${value.toFixed(2)}%`"
/>
The corresponding script is structured like this:
<script setup>
const props = defineProps({
value: Number
})
</script>
To test the label for three different values, the testing approach looks like this:
let wrapper
const values_for_badge = [10, 50, 90]
const componentBadge = (props) =>{
wrapper = mount(Badge, {
props:{
...props
}
});
};
describe('Testing Badge with various injected values', () =>{
values_for_badge.forEach(value => {
beforeEach(() => {
componentBadge({value:value})
});
it(`Should display the correct text label for value ${value}`, () => {
expect(wrapper.text()).toBe(`${value.toFixed(2)}%`)
}
})
})
Upon execution, there are three individual tests conducted. One of them passes successfully while two fail due to incorrect expected results - consistently displaying "90.00%" regardless of the input value. Despite this discrepancy in the test output, the actual component within the application functions correctly by displaying the appropriate labels.
If you have any insights on how to adjust the testing process for this specific component, your guidance would be greatly appreciated.