diff --git a/test/unit/helper.js b/test/unit/helper.js new file mode 100644 index 0000000..55bc8dc --- /dev/null +++ b/test/unit/helper.js @@ -0,0 +1,11 @@ +import Vue from 'vue' + +export function getVm (Component, propsData) { + const Constructor = Vue.extend(Component) + return new Constructor({ propsData: propsData }).$mount() +} + +// helper function that mounts and returns the rendered element +export function getRenderedEl (Component, propsData) { + return getVm(Component, propsData).$el +} diff --git a/test/unit/specs/GmaltGeoloc.spec.js b/test/unit/specs/GmaltGeoloc.spec.js new file mode 100644 index 0000000..db730f1 --- /dev/null +++ b/test/unit/specs/GmaltGeoloc.spec.js @@ -0,0 +1,41 @@ +// import Vue from 'vue' +import GmaltGeoloc from '@/components/GmaltGeoloc.vue' +import * as helper from '../helper' + +let _backupNavigatorGeoloc + +describe('GmaltGeoloc', () => { + beforeEach(() => { + _backupNavigatorGeoloc = navigator.geolocation + }) + + afterEach(() => { + navigator.geolocation = _backupNavigatorGeoloc + }) + + // Inspect the raw component options + it('has a name', () => { + expect(GmaltGeoloc.name).to.equal('gmalt-geoloc') + }) + + it('has a data function', () => { + expect(typeof GmaltGeoloc.data).to.equal('function') + const defaultData = {allowedGeolocation: true} + expect(GmaltGeoloc.data()).to.deep.equal(defaultData) + }) + + it('has a geolocalize methods', () => { + expect(typeof GmaltGeoloc.methods.geolocalize).to.equal('function') + }) + + it('has a disabled computed property', () => { + expect(typeof GmaltGeoloc.computed.disabled).to.equal('function') + }) + + it('has a disabled button if geoloc is not available', () => { + navigator.geolocation = false + const geolocVm = helper.getVm(GmaltGeoloc, {}) + expect(geolocVm.disabled).to.equal(true) + expect(geolocVm.$el.disabled).to.equal(true) + }) +}) diff --git a/test/unit/specs/GmaltSearch.spec.js b/test/unit/specs/GmaltSearch.spec.js index 6b2500f..7481c5e 100644 --- a/test/unit/specs/GmaltSearch.spec.js +++ b/test/unit/specs/GmaltSearch.spec.js @@ -1,15 +1,6 @@ import Vue from 'vue' import GmaltSearch from '@/components/GmaltSearch.vue' - -function getVm (Component, propsData) { - const Constructor = Vue.extend(Component) - return new Constructor({ propsData: propsData }).$mount() -} - -// helper function that mounts and returns the rendered element -function getRenderedEl (Component, propsData) { - return getVm(Component, propsData).$el -} +import * as helper from '../helper' describe('GmaltSearch', () => { // Inspect the raw component options @@ -34,21 +25,21 @@ describe('GmaltSearch', () => { }) it('renders correctly with different props', () => { - let searchEl = getRenderedEl(GmaltSearch, {lat: 48.1, lng: 9.5}) + let searchEl = helper.getRenderedEl(GmaltSearch, {lat: 48.1, lng: 9.5}) expect(searchEl.querySelector('#form-latitude').value).to.equal('48.1') expect(searchEl.querySelector('#form-longitude').value).to.equal('9.5') - searchEl = getRenderedEl(GmaltSearch, {lat: -56.4, lng: -120.4}) + searchEl = helper.getRenderedEl(GmaltSearch, {lat: -56.4, lng: -120.4}) expect(searchEl.querySelector('#form-latitude').value).to.equal('-56.4') expect(searchEl.querySelector('#form-longitude').value).to.equal('-120.4') - searchEl = getRenderedEl(GmaltSearch, {lat: 'invalid', lng: 'invalid'}) + searchEl = helper.getRenderedEl(GmaltSearch, {lat: 'invalid', lng: 'invalid'}) expect(searchEl.querySelector('#form-latitude').value).to.equal('') expect(searchEl.querySelector('#form-longitude').value).to.equal('') }) it('should emit the props as position on form submit', () => { - const searchVm = getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) + const searchVm = helper.getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) searchVm.$on('search', (lat, lng) => { expect(lat).to.equal(48.1) expect(lng).to.equal(9.5) @@ -57,7 +48,7 @@ describe('GmaltSearch', () => { }) it('should emit the input as position on form submit', () => { - const searchVm = getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) + const searchVm = helper.getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) // Listen for seach event and check emitted values searchVm.$on('search', (lat, lng) => { @@ -85,7 +76,7 @@ describe('GmaltSearch', () => { }) it('should require a valid latitude', () => { - const searchVm = getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) + const searchVm = helper.getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) const latitudeForm = searchVm.$el.querySelector('#form-latitude') latitudeForm.value = -91 expect(latitudeForm.checkValidity()).to.equal(false) @@ -100,7 +91,7 @@ describe('GmaltSearch', () => { }) it('should require a valid longitude', () => { - const searchVm = getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) + const searchVm = helper.getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) const longitudeForm = searchVm.$el.querySelector('#form-longitude') longitudeForm.value = -181 expect(longitudeForm.checkValidity()).to.equal(false) @@ -115,7 +106,7 @@ describe('GmaltSearch', () => { }) it('should not emit on invalid form submit', done => { - const searchVm = getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) + const searchVm = helper.getVm(GmaltSearch, {lat: 48.1, lng: 9.5}) // Listen for emit event let searchEmitResult = {emitted: false}