I have a Ionic 7 application made with VueJs 3. I'm writing tests using vue-test-utils and Vitest
I have this template:
<!-- language: html -->
<ion-segment>
<ion-segment-button ref="map-segment" class="map" value="/tabs/tab3" :disabled="isDisabled">
<ion-label>Map</ion-label>
</ion-segment-button>
</ion-segment>
with isDisabled
set to false by default.
And this test:
<!-- language: lang-js -->
import { mount } from '@vue/test-utils'
import TabsPage from '@/views/TabsPage.vue'
import { describe, expect, test } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import { IonicVue, IonSegmentButton } from '@ionic/vue';
describe('TabsPage.vue', () => {
test('renders TabsPage', () => {
const wrapper = mount(TabsPage, {
global: {
plugins: [createTestingPinia(), IonicVue]
},
})
const segments = wrapper.findAllComponents(IonSegmentButton)
expect(segments).toHaveLength(1) // assert is ok
const mapTab = wrapper.findComponent({ ref: 'map-segment' })
console.log(mapTab)
})
})
I want to test if my ion-segment
component is disabled.
The DOM looks like this:
So I tried to test the presence of the segment-button-disabled
class but the test only see the map
class I've added and not the Ionic ones.
I also wanted to access the shadow-root to directly test the disabled
attribute on the button but did not find anything in the documentation to do that.
Does someone know how to test Ionic components properties in VueJs ? Or have a great documentation/tutorial to share with me ?
Finally found how to do it !
We can access Ionic component property with the props()
method: myComponent.props().yourProperty
Example:
const mapTab = wrapper.findComponent({ ref: 'map-segment' })
expect(mapTab.props().disabled).toBeTruthy()