unit-testingionic-frameworkvuejs3vue-test-utilsvitest

Testing disabled property on a Ionic component in Ionic VueJs


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: enter image description here

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 ?


Solution

  • 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()