Как выполнить модульное тестирование переменной в vue и vuetify с помощью jest? - PullRequest
Новая
       68

Как выполнить модульное тестирование переменной в vue и vuetify с помощью jest?

0 голосов
/ 23 февраля 2020

Это может быть довольно просто.

У меня есть компонент, который визуализирует получение сообщения через реквизит и отображает его в виде v-card-text. Это не делает это оптимальным способом, весь v-if грязный, но это работает. 

<template>

    <!-- Needed to be rendered big -->
    <div v-if="start == true" class="ma-0">
        <v-card class="text-xs-right" dark color="rgb(0,140,69)" height="50" width="1060" >

            <v-btn dark text icon @click= "isOpen = !isOpen;"  color="rgb(0,140,69)" > 
                <v-icon dark>fullscreen</v-icon>
            </v-btn>

            <v-btn class="mx-2" icon dark small color="rgb(0,140,69)">
                <v-icon dark>thumb_up</v-icon>
            </v-btn>

        </v-card>

        <v-card  v-model='text' color="" height="200" width="1060"> 
            <v-card-text ref="tcardbig" color="rgb(0,140,69)" style="color:rgb(0,140,69);display:flex;height:100%;justify-content:center;" class="display-2 font-weight-black align-center"> {{text}}</v-card-text>  
        </v-card>
    </div>

    <!-- Needed to be rendered small -->
    <div v-else class="ma-2">
        <v-card class="text-xs-right" dark color="rgb(0,140,69)" height="50" width="500" >

            <v-btn dark text icon @click= "isOpen = !isOpen;"  color="rgb(0,140,69)" > 
                <v-icon dark>fullscreen</v-icon>
            </v-btn>

            <v-btn class="mx-2" icon dark small color="rgb(0,140,69)">
                <v-icon dark>thumb_up</v-icon>
            </v-btn>

        </v-card>

        <v-card  v-model='text' color="" height="350" width="500"> 
            <v-card-text ref="tcardsmall" color="rgb(0,140,69)" style="color:rgb(0,140,69);display:flex;height:100%;justify-content:center;" class="display-2 font-weight-black align-center"> {{text}}</v-card-text>  
        </v-card>
    </div>


</template>

<script>
export default {
  data(){
      return {
          text: 'lorem ipsum',  
          start: true
      }
  },
  props: ['textProps', 'startProps'],
  mounted(){
      this.text = this.textProps
      this.start = this.startProps
  }
}
</script>

Я пытаюсь протестировать его с шуткой. Как проверить, правильно ли отображается текст? В другом случае, как я проверяю {{text}} в ИЛИ, как я проверяю, имеет ли текстовая переменная компонента значение, которое я отправил через prop. Что я делаю не так? 

import {createLocalVue, mount} from '@vue/test-utils'
import textCard from './textCard.vue'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
const localVue = createLocalVue()



describe('textCard.vue', () => {

    const wrapper = mount(textCard, 
        {
            localVue,
            vuetify,
            propsData: {
              text: 'Random Text',
              start: false
            },
        }
        )
    it('renders a vue instance', () => {
        expect(mount(textCard).isVueInstance()).toBe(true);
    });

    const content = wrapper.find({ ref: 'tcardsmall' })


    it('Checks the if the variable text is correct', () => {
        expect(content.selector).toMatch('Random Text')
      })

}

)
...