2017-04-20 1 views
0

Dans mon composant vue que j'ai le code qui rend une condition div:essai divs exister avec Jasmine, Webpack et vue.js

<div v-if="successCriteria()" id="success"> 
    <div class="row"> 
     <div class="col-md-12"> 
    <Commit-chart :data="chartOptions" ></Commit-chart> 
    </div> 
</div> 
</div> 
<div v-else> 
There has been an error with rendering. 
</div> 
</div> 

et je suis en train de tester cela en utilisant le jasmin. Par exemple, lorsque le critère de succès est rempli, le div de succès est présent. voici mon test:

describe('Graph Tests',() => { 
const getComponent = (prop1,prop2) =>{ 
    let vm = new Vue({ 
    template: '<div><graph ref="graph" :label=prop1 :data=prop2></graph></div>', 
    components: { 
     graph, 
    }, 

    }) 
    return vm; 
}  



it('Renders correctly with valid props',() => { 
      const label = ['j', 'a' ,'c', 'k']; 
      const data=[1,2,3,4] 
      var vm = getComponent(label,data).$mount(); 
      console.info(vm.$refs.graph.$el); 
      expect(vm.$refs.graph.$el.querySelector('success')).toBeTruthy(); 
     }); 

     }); 

    } 

Lorsque je me connecte vm refs.graph de $ $ el je reçois:..

INFO: <!----> 

dans la console que je suis très confus au sujet. Quelqu'un peut-il m'aider à obtenir la div avec id "succès"? Merci.

Répondre

0

Le selector pour l'ID de "succès" est '#success'. Ou vous pouvez utiliser getElementById. Cependant, la sortie de votre programme indique que le composant n'est pas rendu du tout.