Testing quasar q-carousel

Viewed 12

So i am testing my quasar component , i want to test if it does render the q-carousel-slide i am adding the class "image" withing the q-carousel-slide but jest doesn't see it , the test doesn't pass , but when i put the "image" in the q-carousel just above the test pass, it seems that it is too deep for jest that it doesn't see the class

Here is my component

<template>
    <q-card 
      class="my-card rounded" 
      @mouseover="hover = true" 
      @mouseleave="hover = false"
    >  
      <q-carousel
        class="rounded" 
        animated
        v-model="slide"
        ref="carousel"
        :navigation="hover"
        :arrows="hover"
        infinite
        style="width:270px; height:250px"
      >
        <template v-slot:navigation-icon="{ active, btnProps, onClick }">
            <q-btn v-if="active" size="0.3em" icon="circle" color="white" flat round dense @click="onClick" />
            <q-btn v-else size="0.3em" :icon="btnProps.icon" color="grey" flat round dense @click="onClick" />
        </template>
//Here is the slide which contains image that i want to check if it is rendered correctly
        <q-carousel-slide class="rounded image" v-for="img in imgArray" :key="img.id" :name="img.id" :img-src="img.source" />
//
      </q-carousel>
      <q-btn class="favorite" @click="favoris = !favoris" flat round color="white" text-color="red" :icon="favoris ? 'favorite_border' : 'favorite'" /> 
      <q-card-section>
        <div class="text-h6 title">{{title}}</div>
        <div class="text-subtitle2 description">{{description}}</div>
      </q-card-section>
    </q-card>
</template>

testing

import { describe, expect, it,beforeEach,afterEach } from '@jest/globals';
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { mount, shallowMount } from '@vue/test-utils';
import CardLogement from 'src/components/CardLogement.vue';

installQuasarPlugin();

let wrapper:any = null;

beforeEach(() => {
    wrapper = mount(CardLogement, {
        props: {
            maxImg : 5
        }
    });
})

afterEach(() => {
    wrapper = null;
})

describe("card for each logement", () => {

    it("has image", () => {
        const imgArray = wrapper.findAll(".image")
        expect(imgArray.length).toBe(1)
    })

    it("has favortie btn", () => {
        const favoriteBtn = wrapper.findAll(".favorite")
        expect(favoriteBtn.length).toBe(1)
    })

    it("has title & description", () => {
        const title = wrapper.findAll(".title");
        const description = wrapper.findAll(".description");

        expect(title.length).toBe(1);
        expect(description.length).toBe(1);
    })
})


0 Answers
Related