Problems with fetching Firebase data in Karma-jasmine and Vue.js

Here I have a laravel project and currently using Karma and jasmine for JS testing.

But Firebase is not executed properly, because the test file cannot receive any data fetched from firebase; seems failed to executed db.ref().on() actions.

By checking the console log, the data in vue.js is always empty. But the real application works fine.

So I'm guessing it should be wrong with my spec.js or config.js and I added a few print statements to check my Vue file (short version):

<template>
<div>
    <div v-for="item in log">
        <div></div>
    </div>
</div>
</template>


<script>
    import firebase from 'firebase';
    import moment from 'moment';

    var config = ......................;
    firebase.initializeApp(config);

    const db = firebase.database();

    export default{
        data(){
            return {
                log: []
            }
        },

        props: ['id','teamId'],

        mounted() {
            console.log('start to load...');
            const vm = this;
            db.ref('/teams/' + teamId + '/messages/').on('value', function(snapshot) {
                console.log('loading...');
                vm.log = snapshot.val();
            });
            console.log('finish...');
    }
</script>

The loading... statement never printed out. And actually same situation as saving data into firebase (not shown here). Therefore vm.$el is showing empty state

Here is the Console result:

LOG: 'start to load...'
LOG: 'finish...'
LOG: '<div><div><div></div></div></div>'
LOG:Object{log:[]}

.....
Expected '' to contain 'something'.
    at __WEBPACK_IMPORTED_MODULE_0_vue__.a.nextTick (tests/Vuetests/SendMessage.spec.js:9:1769408)
    at Array.<anonymous> (tests/Vuetests/SendMessage.spec.js:9:1798753)
    at nextTickHandler (tests/Vuetests/SendMessage.spec.js:9:1796193)
    at <anonymous>
Chrome 61.0.3163 (Mac OS X 10.11.6): Executed 1 of 1 (1 FAILED) ERROR (0.807 secs / 0.129 secs)

And here is my karma testing file:

import Vue from 'vue';
import Chat from "../../resources/assets/components/message/Chat.vue";

describe('UI Test', () => {

    let vm;

    it('should test input form.', () => {
        const Constructor = Vue.extend(Chat);
        vm = new Constructor({ 
             propsData:{
                 receiverUuid: "123",
                 teamId: "456"
             }
         }).$mount();
         console.log(vm.$el);
         console.log(vm.$data);
         expect(vm.$el.textContent).toContain("something")
    });
});

here is my karma.config.js

module.exports = function(config) {
  config.set({

    basePath: '',
    frameworks: ['jasmine'],

    files: [
    'resources/assets/components/message/Chat.vue',
      'tests/Vuetests/*.spec.js'
    ],

    exclude: [],

    preprocessors: {
      'resources/assets/components/message/Chat.vue': ['webpack'],
      'tests/Vuetests/*.spec.js': ['webpack','coverage']
    },

    reporters: ['progress', 'coverage'],

    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity,

    webpack: {
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: ['resources','test'],
            exclude: /node_modules/,
            query: {
              presets: ['es2015'],
              plugins: ['istanbul']
            }
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      }
    }

  })
}

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2z1AjIu
via IFTTT