diff --git a/src/components/GmaltResult.vue b/src/components/GmaltResult.vue index af10031..decdc39 100644 --- a/src/components/GmaltResult.vue +++ b/src/components/GmaltResult.vue @@ -23,7 +23,7 @@
Altitude : - + {{ alt }} m No value diff --git a/test/unit/specs/GmaltResult.spec.js b/test/unit/specs/GmaltResult.spec.js index b76cf3b..a5689b4 100644 --- a/test/unit/specs/GmaltResult.spec.js +++ b/test/unit/specs/GmaltResult.spec.js @@ -4,11 +4,16 @@ import * as helper from '../helper' const GmaltResultInjector = require('!!vue-loader?inject!@/components/GmaltResult.vue') -const GmaltResulMockGeocode = GmaltResultInjector({ +const GmaltResulMockServices = GmaltResultInjector({ '../services/GeocodeService': { get (lat, lng) { return Promise.resolve([{lat: lat, lng: lng}, '32 rue de rome, 75015 Paris']) } + }, + '../services/AltService': { + get (lat, lng) { + return Promise.resolve({alt: 5.1}) + } } }) @@ -20,7 +25,7 @@ describe('GmaltResult', () => { it('has a data function', () => { expect(typeof GmaltResult.data).to.equal('function') - const defaultData = {address: ''} + const defaultData = {address: '', alt: ''} expect(GmaltResult.data()).to.deep.equal(defaultData) }) @@ -66,27 +71,36 @@ describe('GmaltResult', () => { expect(cardItem.item(2).querySelector('.card-item-value strong')).to.equal(null) expect(cardItem.item(2).querySelector('.card-item-value span').textContent).to.equal('No value') - expect(cardItem.item(3).querySelector('.card-item-value strong').textContent).to.equal('5.1 m') - expect(cardItem.item(3).querySelector('.card-item-value span')).to.equal(null) + expect(cardItem.item(3).querySelector('.card-item-value strong')).to.equal(null) + expect(cardItem.item(3).querySelector('.card-item-value span').textContent).to.equal('No value') }) it('renders correctly with different props and with geocode service', done => { - let searchEl = helper.getMockedVm('gmalt-result', GmaltResulMockGeocode, {lat: 48.1, lng: 9.5, alt: 5.1}) + let searchEl = helper.getMockedVm('gmalt-result', GmaltResulMockServices, {lat: 48.1, lng: 9.5}) searchEl.lat = 5.4 const addressTag = searchEl.$children[0].$el.querySelector('.card-item-value-address') + const altTag = searchEl.$children[0].$el.querySelector('.card-item-value-altitude') - // Geocode service which is mocked resolve a promise which takes longer than Vue.nextTick + // Geocode/Alt services which is mocked resolve a promise which takes longer than Vue.nextTick Promise.resolve().then(() => { // First tick, check the attribute value Vue.nextTick(() => { expect(addressTag.querySelector('strong')).to.equal(null) expect(addressTag.querySelector('span').textContent).to.equal('No value') expect(searchEl.$children[0].address).to.equal('32 rue de rome, 75015 Paris') + + expect(altTag.querySelector('strong')).to.equal(null) + expect(altTag.querySelector('span').textContent).to.equal('No value') + // Second tick, check DOM update Vue.nextTick(() => { expect(addressTag.querySelector('strong').textContent).to.equal('32 rue de rome, 75015 Paris') expect(addressTag.querySelector('span')).to.equal(null) + + expect(altTag.querySelector('strong').textContent).to.equal('5.1 m') + expect(altTag.querySelector('span')).to.equal(null) + done() }) })