sven/ulogger-server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move initialization out of constructor

Browse Source
This commit is contained in:
Bartek Fabiszewski 2019-12-18 08:24:38 +01:00
parent baf39cf818
commit c77ee300c7
6 changed files with 197 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/src/configviewmodel.js
View File

@ -32,7 +32,14 @@ export default class ConfigViewModel extends ViewModel {
super(config); super(config);
this.state = state; this.state = state;
this.model.onSetInterval = () => this.setAutoReloadInterval(); this.model.onSetInterval = () => this.setAutoReloadInterval();
}
init() {
this.setObservers();
this.bindAll(); this.bindAll();
}
setObservers() {
this.onChanged('mapApi', (api) => { this.onChanged('mapApi', (api) => {
uUtils.setCookie('api', api); uUtils.setCookie('api', api);
}); });

31
js/src/trackviewmodel.js
View File

@ -64,20 +64,11 @@ export default class TrackViewModel extends ViewModel {
this.select = new uSelect(listEl); this.select = new uSelect(listEl);
this.state = state; this.state = state;
this.timerId = 0; this.timerId = 0;
this.setObservers();
this.init();
} }
setClickHandlers() { init() {
this.model.onReload = () => this.onReload(); this.setObservers();
const exportCb = (type) => () => { this.bindAll();
if (this.state.currentTrack) {
this.state.currentTrack.export(type);
}
};
this.model.onExportGpx = exportCb('gpx');
this.model.onExportKml = exportCb('kml');
this.model.onImportGpx = () => this.importEl.click();
} }
setObservers() { setObservers() {
@ -124,6 +115,18 @@ export default class TrackViewModel extends ViewModel {
}); });
} }
setClickHandlers() {
this.model.onReload = () => this.onReload();
const exportCb = (type) => () => {
if (this.state.currentTrack) {
this.state.currentTrack.export(type);
}
};
this.model.onExportGpx = exportCb('gpx');
this.model.onExportKml = exportCb('kml');
this.model.onImportGpx = () => this.importEl.click();
}
/** /**
* Reload or update track view * Reload or update track view
* @param {boolean} clear Reload if true, update current track otherwise * @param {boolean} clear Reload if true, update current track otherwise
@ -253,10 +256,6 @@ export default class TrackViewModel extends ViewModel {
.catch((e) => { uUtils.error(e, `${lang.strings['actionfailure']}\n${e.message}`); }); .catch((e) => { uUtils.error(e, `${lang.strings['actionfailure']}\n${e.message}`); });
} }
init() {
this.bindAll();
}
/** /**
* @param {boolean} start * @param {boolean} start
*/ */

34
js/src/userviewmodel.js
View File

@ -42,22 +42,10 @@ export default class UserViewModel extends ViewModel {
const listEl = document.querySelector('#user'); const listEl = document.querySelector('#user');
this.select = new uSelect(listEl, lang.strings['suser'], `- ${lang.strings['allusers']} -`); this.select = new uSelect(listEl, lang.strings['suser'], `- ${lang.strings['allusers']} -`);
this.state = state; this.state = state;
this.onChanged('userList', (list) => { this.select.setOptions(list); });
this.onChanged('currentUserId', (listValue) => {
this.state.showAllUsers = listValue === uSelect.allValue;
this.state.currentUser = this.model.userList.find((_user) => _user.listValue === listValue) || null;
});
state.onChanged('showLatest', (showLatest) => {
if (showLatest) {
this.select.showAllOption();
} else {
this.select.hideAllOption();
}
});
this.init();
} }
init() { init() {
this.setObservers(this.state);
this.bindAll(); this.bindAll();
uUser.fetchList() uUser.fetchList()
.then((_users) => { .then((_users) => {
@ -76,4 +64,24 @@ export default class UserViewModel extends ViewModel {
.catch((e) => { uUtils.error(e, `${lang.strings['actionfailure']}\n${e.message}`); }); .catch((e) => { uUtils.error(e, `${lang.strings['actionfailure']}\n${e.message}`); });
} }
/**
* @param {uState} state
*/
setObservers(state) {
this.onChanged('userList', (list) => {
this.select.setOptions(list);
});
this.onChanged('currentUserId', (listValue) => {
this.state.showAllUsers = listValue === uSelect.allValue;
this.state.currentUser = this.model.userList.find((_user) => _user.listValue === listValue) || null;
});
state.onChanged('showLatest', (showLatest) => {
if (showLatest) {
this.select.showAllOption();
} else {
this.select.hideAllOption();
}
});
}
} }

10
js/test/configviewmodel.test.js
View File

@ -20,7 +20,6 @@
import ConfigViewModel from '../src/configviewmodel.js'; import ConfigViewModel from '../src/configviewmodel.js';
import ViewModel from '../src/viewmodel.js'; import ViewModel from '../src/viewmodel.js';
import { config } from '../src/initializer.js'; import { config } from '../src/initializer.js';
import uObserve from '../src/observe.js';
import uState from '../src/state.js'; import uState from '../src/state.js';
import uUtils from '../src/utils.js'; import uUtils from '../src/utils.js';
@ -45,10 +44,10 @@ describe('ConfigViewModel tests', () => {
beforeEach(() => { beforeEach(() => {
config.reinitialize(); config.reinitialize();
uObserve.setSilently(config, 'interval', 10); config.interval = 10;
uObserve.setSilently(config, 'lang', 'en'); config.lang = 'en';
uObserve.setSilently(config, 'units', 'metric'); config.units = 'metric';
uObserve.setSilently(config, 'mapApi', 'gmaps'); config.mapApi = 'gmaps';
const fixture = `<div id="fixture"> const fixture = `<div id="fixture">
<div class="section"> <div class="section">
@ -85,6 +84,7 @@ describe('ConfigViewModel tests', () => {
setIntervalEl = document.querySelector('#set-interval'); setIntervalEl = document.querySelector('#set-interval');
state = new uState(); state = new uState();
vm = new ConfigViewModel(state); vm = new ConfigViewModel(state);
vm.init();
spyOn(uUtils, 'setCookie').and.returnValue(newInterval); spyOn(uUtils, 'setCookie').and.returnValue(newInterval);
spyOn(ConfigViewModel, 'reload'); spyOn(ConfigViewModel, 'reload');
}); });

198
js/test/trackviewmodel.test.js
View File

@ -109,19 +109,17 @@ describe('TrackViewModel tests', () => {
}); });
it('should create instance with state as parameter', () => { it('should create instance with state as parameter', () => {
// when expect(vm).toBeInstanceOf(ViewModel);
const trackViewModel = new TrackViewModel(state); expect(vm.importEl).toBeInstanceOf(HTMLInputElement);
// then expect(vm.select.element).toBeInstanceOf(HTMLSelectElement);
expect(trackViewModel).toBeInstanceOf(ViewModel); expect(vm.state).toBe(state);
expect(trackViewModel.importEl).toBeInstanceOf(HTMLInputElement);
expect(trackViewModel.select.element).toBeInstanceOf(HTMLSelectElement);
expect(trackViewModel.state).toBe(state);
}); });
it('should load track list and fetch first track on current user change', (done) => { it('should load track list and fetch first track on current user change', (done) => {
// given // given
spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve(tracks)); spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve(tracks));
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
vm.init();
// when // when
state.currentUser = user; state.currentUser = user;
// then // then
@ -144,6 +142,7 @@ describe('TrackViewModel tests', () => {
// given // given
spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve([])); spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve([]));
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
vm.init();
// when // when
state.currentUser = user; state.currentUser = user;
// then // then
@ -164,8 +163,9 @@ describe('TrackViewModel tests', () => {
positions[0].trackname = track2.name; positions[0].trackname = track2.name;
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve(tracks)); spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve(tracks));
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
vm.init();
// when // when
state.currentUser = user; state.currentUser = user;
// then // then
@ -188,10 +188,11 @@ describe('TrackViewModel tests', () => {
// given // given
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
vm.init();
// when // when
state.currentUser = null; state.currentUser = null;
// then // then
@ -209,10 +210,11 @@ describe('TrackViewModel tests', () => {
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
vm.init();
// when // when
trackEl.value = track2.listValue; trackEl.value = track2.listValue;
trackEl.dispatchEvent(new Event('change')); trackEl.dispatchEvent(new Event('change'));
@ -239,10 +241,11 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
vm.init();
// when // when
latestEl.checked = true; latestEl.checked = true;
latestEl.dispatchEvent(new Event('change')); latestEl.dispatchEvent(new Event('change'));
@ -273,10 +276,11 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
vm.init();
// when // when
latestEl.checked = true; latestEl.checked = true;
latestEl.dispatchEvent(new Event('change')); latestEl.dispatchEvent(new Event('change'));
@ -306,11 +310,12 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
vm.init();
state.currentTrack = track1; state.currentTrack = track1;
latestEl.checked = true; latestEl.checked = true;
// when // when
@ -339,12 +344,13 @@ describe('TrackViewModel tests', () => {
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
latestEl.checked = true; latestEl.checked = true;
vm.init();
// when // when
state.showAllUsers = true; state.showAllUsers = true;
// then // then
@ -366,14 +372,15 @@ describe('TrackViewModel tests', () => {
it('should clear current track if "show latest" is unchecked when "all users" is set', (done) => { it('should clear current track if "show latest" is unchecked when "all users" is set', (done) => {
// given // given
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
uObserve.setSilently(vm.model, 'trackList', []); vm.model.trackList = [];
uObserve.setSilently(vm.model, 'currentTrackId', ''); vm.model.currentTrackId = '';
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'currentUser', null); state.currentUser = null;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
uObserve.setSilently(state, 'showAllUsers', true); state.showAllUsers = true;
state.currentTrack = TrackFactory.getPositionSet(1); state.currentTrack = TrackFactory.getPositionSet(1);
latestEl.checked = true; latestEl.checked = true;
vm.init();
// when // when
latestEl.checked = false; latestEl.checked = false;
latestEl.dispatchEvent(new Event('change')); latestEl.dispatchEvent(new Event('change'));
@ -394,13 +401,14 @@ describe('TrackViewModel tests', () => {
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(positions));
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
latestEl.checked = true; latestEl.checked = true;
vm.init();
// when // when
trackEl.value = track2.listValue; trackEl.value = track2.listValue;
trackEl.dispatchEvent(new Event('change')); trackEl.dispatchEvent(new Event('change'));
@ -416,7 +424,8 @@ describe('TrackViewModel tests', () => {
it('should export track to KML on link click', (done) => { it('should export track to KML on link click', (done) => {
// given // given
spyOn(track1, 'export'); spyOn(track1, 'export');
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
vm.init();
// when // when
exportKmlEl.click(); exportKmlEl.click();
// then // then
@ -429,7 +438,8 @@ describe('TrackViewModel tests', () => {
it('should export track to GPX on link click', (done) => { it('should export track to GPX on link click', (done) => {
// given // given
spyOn(track1, 'export'); spyOn(track1, 'export');
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
vm.init();
// when // when
exportGpxEl.click(); exportGpxEl.click();
// then // then
@ -455,16 +465,17 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
inputFileEl.onclick = () => { inputFileEl.onclick = () => {
const dt = new DataTransfer(); const dt = new DataTransfer();
dt.items.add(file); dt.items.add(file);
inputFileEl.files = dt.files; inputFileEl.files = dt.files;
inputFileEl.dispatchEvent(new Event('change')); inputFileEl.dispatchEvent(new Event('change'));
}; };
vm.init();
// when // when
importGpxEl.click(); importGpxEl.click();
// then // then
@ -496,16 +507,17 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', tracks); vm.model.trackList = tracks;
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
inputFileEl.onclick = () => { inputFileEl.onclick = () => {
const dt = new DataTransfer(); const dt = new DataTransfer();
dt.items.add(new File([ '12345678901' ], 'filepath.gpx')); dt.items.add(new File([ '12345678901' ], 'filepath.gpx'));
inputFileEl.files = dt.files; inputFileEl.files = dt.files;
inputFileEl.dispatchEvent(new Event('change')); inputFileEl.dispatchEvent(new Event('change'));
}; };
vm.init();
// when // when
importGpxEl.click(); importGpxEl.click();
// then // then
@ -527,6 +539,7 @@ describe('TrackViewModel tests', () => {
spyOn(vm, 'stopAutoReload'); spyOn(vm, 'stopAutoReload');
spyOn(vm, 'startAutoReload'); spyOn(vm, 'startAutoReload');
vm.timerId = 1; vm.timerId = 1;
vm.init();
// when // when
config.interval = newInterval; config.interval = newInterval;
// then // then
@ -546,8 +559,9 @@ describe('TrackViewModel tests', () => {
autoReloadEl.dispatchEvent(new Event('change')); autoReloadEl.dispatchEvent(new Event('change'));
}); });
autoReloadEl.checked = false; autoReloadEl.checked = false;
uObserve.setSilently(config, 'interval', 0.001); config.interval = 0.001;
vm.timerId = 0; vm.timerId = 0;
vm.init();
// when // when
autoReloadEl.checked = true; autoReloadEl.checked = true;
autoReloadEl.dispatchEvent(new Event('change')); autoReloadEl.dispatchEvent(new Event('change'));
@ -570,10 +584,11 @@ describe('TrackViewModel tests', () => {
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
const posLength = track1.length; const posLength = track1.length;
uObserve.setSilently(vm.model, 'trackList', [ track1, track2 ]); vm.model.trackList = [ track1, track2 ];
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
vm.init();
// when // when
forceReloadEl.click(); forceReloadEl.click();
// then // then
@ -595,13 +610,14 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', [ track1, track2 ]); vm.model.trackList = [ track1, track2 ];
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
latestEl.checked = true; latestEl.checked = true;
vm.init();
// when // when
forceReloadEl.click(); forceReloadEl.click();
// then // then
@ -625,13 +641,14 @@ describe('TrackViewModel tests', () => {
const options = '<option selected value="1">track1</option><option value="2">track2</option>'; const options = '<option selected value="1">track1</option><option value="2">track2</option>';
trackEl.insertAdjacentHTML('afterbegin', options); trackEl.insertAdjacentHTML('afterbegin', options);
const optLength = trackEl.options.length; const optLength = trackEl.options.length;
uObserve.setSilently(vm.model, 'trackList', [ track1, track2 ]); vm.model.trackList = [ track1, track2 ];
uObserve.setSilently(vm.model, 'currentTrackId', track1.listValue); vm.model.currentTrackId = track1.listValue;
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'currentTrack', track1); state.currentTrack = track1;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
latestEl.checked = true; latestEl.checked = true;
vm.init();
// when // when
forceReloadEl.click(); forceReloadEl.click();
// then // then
@ -654,14 +671,15 @@ describe('TrackViewModel tests', () => {
set.positions[1].trackid = track2.id; set.positions[1].trackid = track2.id;
set.positions[1].trackname = track2.name; set.positions[1].trackname = track2.name;
spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(set.positions)); spyOn(uPositionSet, 'fetch').and.returnValue(Promise.resolve(set.positions));
uObserve.setSilently(vm.model, 'trackList', []); vm.model.trackList = [];
uObserve.setSilently(vm.model, 'currentTrackId', ''); vm.model.currentTrackId = '';
uObserve.setSilently(vm.model, 'showLatest', true); vm.model.showLatest = true;
uObserve.setSilently(state, 'currentTrack', null); state.currentTrack = null;
uObserve.setSilently(state, 'currentUser', null); state.currentUser = null;
uObserve.setSilently(state, 'showLatest', true); state.showLatest = true;
uObserve.setSilently(state, 'showAllUsers', true); state.showAllUsers = true;
latestEl.checked = true; latestEl.checked = true;
vm.init();
// when // when
forceReloadEl.click(); forceReloadEl.click();
// then // then
@ -679,10 +697,11 @@ describe('TrackViewModel tests', () => {
it('should fetch track list if user is selected and no track is selected', (done) => { it('should fetch track list if user is selected and no track is selected', (done) => {
// given // given
spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve([])); spyOn(uTrack, 'fetchList').and.returnValue(Promise.resolve([]));
uObserve.setSilently(vm.model, 'trackList', []); vm.model.trackList = [];
uObserve.setSilently(vm.model, 'currentTrackId', ''); vm.model.currentTrackId = '';
uObserve.setSilently(state, 'currentTrack', null); state.currentTrack = null;
uObserve.setSilently(state, 'currentUser', user); state.currentUser = user;
vm.init();
// when // when
forceReloadEl.click(); forceReloadEl.click();
// then // then
@ -699,10 +718,11 @@ describe('TrackViewModel tests', () => {
// given // given
spyOn(uTrack, 'fetchList'); spyOn(uTrack, 'fetchList');
spyOn(uPositionSet, 'fetch'); spyOn(uPositionSet, 'fetch');
uObserve.setSilently(vm.model, 'trackList', []); vm.model.trackList = [];
uObserve.setSilently(vm.model, 'currentTrackId', ''); vm.model.currentTrackId = '';
uObserve.setSilently(state, 'currentTrack', null); state.currentTrack = null;
uObserve.setSilently(state, 'currentUser', null); state.currentUser = null;
vm.init();
// when // when
forceReloadEl.click(); forceReloadEl.click();
// then // then

75
js/test/userviewmodel.test.js
View File

@ -20,7 +20,6 @@
import { auth, config, lang } from '../src/initializer.js'; import { auth, config, lang } from '../src/initializer.js';
import UserViewModel from '../src/userviewmodel.js'; import UserViewModel from '../src/userviewmodel.js';
import ViewModel from '../src/viewmodel.js'; import ViewModel from '../src/viewmodel.js';
import uObserve from '../src/observe.js';
import uSelect from '../src/select.js'; import uSelect from '../src/select.js';
import uState from '../src/state.js'; import uState from '../src/state.js';
import uUser from '../src/user.js'; import uUser from '../src/user.js';
@ -33,6 +32,7 @@ describe('UserViewModel tests', () => {
let users; let users;
/** @type {HTMLSelectElement} */ /** @type {HTMLSelectElement} */
let userEl; let userEl;
let vm;
beforeEach(() => { beforeEach(() => {
const fixture = `<div id="fixture"> const fixture = `<div id="fixture">
@ -51,6 +51,7 @@ describe('UserViewModel tests', () => {
user1 = new uUser(1, 'user1'); user1 = new uUser(1, 'user1');
user2 = new uUser(2, 'user2'); user2 = new uUser(2, 'user2');
users = [ user1, user2 ]; users = [ user1, user2 ];
vm = new UserViewModel(state);
}); });
afterEach(() => { afterEach(() => {
@ -58,16 +59,27 @@ describe('UserViewModel tests', () => {
auth.user = null; auth.user = null;
}); });
it('should create instance with state as parameter and load user list and select first user on list', (done) => { it('should create instance with state as parameter', () => {
// given // given
spyOn(uUser, 'fetchList').and.returnValue(Promise.resolve(users)); spyOn(uUser, 'fetchList').and.returnValue(Promise.resolve(users));
// when // when
const vm = new UserViewModel(state); // then
expect(vm).toBeInstanceOf(ViewModel);
expect(vm.select.element).toBeInstanceOf(HTMLSelectElement);
expect(vm.state).toBe(state);
expect(userEl.value).toBe('0');
expect(userEl.options.length).toBe(1);
expect(userEl.options[0].selected).toBe(true);
expect(userEl.options[0].value).toBe('0');
});
it('should load user list and select first user on list', (done) => {
// given
spyOn(uUser, 'fetchList').and.returnValue(Promise.resolve(users));
// when
vm.init();
// then // then
setTimeout(() => { setTimeout(() => {
expect(vm).toBeInstanceOf(ViewModel);
expect(vm.select.element).toBeInstanceOf(HTMLSelectElement);
expect(vm.state).toBe(state);
expect(vm.model.userList.length).toBe(users.length); expect(vm.model.userList.length).toBe(users.length);
expect(userEl.value).toBe(user1.listValue); expect(userEl.value).toBe(user1.listValue);
expect(userEl.options.length).toBe(users.length + 1); expect(userEl.options.length).toBe(users.length + 1);
@ -77,17 +89,14 @@ describe('UserViewModel tests', () => {
}, 100); }, 100);
}); });
it('should create instance with state as parameter and load user list and select authorized user on list', (done) => { it('should load user list and select authorized user on list', (done) => {
// given // given
spyOn(uUser, 'fetchList').and.returnValue(Promise.resolve(users)); spyOn(uUser, 'fetchList').and.returnValue(Promise.resolve(users));
// when // when
auth.user = user2; auth.user = user2;
const vm = new UserViewModel(state); vm.init();
// then // then
setTimeout(() => { setTimeout(() => {
expect(vm).toBeInstanceOf(ViewModel);
expect(vm.select.element).toBeInstanceOf(HTMLSelectElement);
expect(vm.state).toBe(state);
expect(vm.model.userList.length).toBe(users.length); expect(vm.model.userList.length).toBe(users.length);
expect(userEl.value).toBe(user2.listValue); expect(userEl.value).toBe(user2.listValue);
expect(userEl.options.length).toBe(users.length + 1); expect(userEl.options.length).toBe(users.length + 1);
@ -99,14 +108,13 @@ describe('UserViewModel tests', () => {
it('should change current user on user list option selected', (done) => { it('should change current user on user list option selected', (done) => {
// given // given
spyOn(UserViewModel.prototype, 'init'); state.currentUser = user1;
const vm = new UserViewModel(state); vm.model.userList = users;
uObserve.setSilently(state, 'currentUser', user1); vm.model.currentUserId = user1.listValue;
uObserve.setSilently(vm.model, 'userList', users);
uObserve.setSilently(vm.model, 'currentUserId', user1.listValue);
const options = '<option selected value="1">user1</option><option value="2">user2</option>'; const options = '<option selected value="1">user1</option><option value="2">user2</option>';
userEl.insertAdjacentHTML('beforeend', options); userEl.insertAdjacentHTML('beforeend', options);
const optLength = userEl.options.length; const optLength = userEl.options.length;
vm.setObservers(state);
vm.bindAll(); vm.bindAll();
// when // when
userEl.value = user2.listValue; userEl.value = user2.listValue;
@ -124,15 +132,14 @@ describe('UserViewModel tests', () => {
it('should set showAllUsers state on "all users" option selected', (done) => { it('should set showAllUsers state on "all users" option selected', (done) => {
// given // given
spyOn(UserViewModel.prototype, 'init'); state.currentUser = user1;
const vm = new UserViewModel(state); state.showAllUsers = false;
uObserve.setSilently(state, 'currentUser', user1); vm.model.userList = users;
uObserve.setSilently(state, 'showAllUsers', false); vm.model.currentUserId = user1.listValue;
uObserve.setSilently(vm.model, 'userList', users);
uObserve.setSilently(vm.model, 'currentUserId', user1.listValue);
const options = `<option value="${uSelect.allValue}">all users</option><option selected value="1">user1</option><option value="2">user2</option>`; const options = `<option value="${uSelect.allValue}">all users</option><option selected value="1">user1</option><option value="2">user2</option>`;
userEl.insertAdjacentHTML('beforeend', options); userEl.insertAdjacentHTML('beforeend', options);
const optLength = userEl.options.length; const optLength = userEl.options.length;
vm.setObservers(state);
vm.bindAll(); vm.bindAll();
// when // when
userEl.value = uSelect.allValue; userEl.value = uSelect.allValue;
@ -151,16 +158,15 @@ describe('UserViewModel tests', () => {
it('should add "all users" option when "showLatest" state is set', (done) => { it('should add "all users" option when "showLatest" state is set', (done) => {
// given // given
spyOn(UserViewModel.prototype, 'init'); state.currentUser = user1;
const vm = new UserViewModel(state); state.showAllUsers = false;
uObserve.setSilently(state, 'currentUser', user1); vm.model.userList = users;
uObserve.setSilently(state, 'showAllUsers', false); vm.model.currentUserId = user1.listValue;
uObserve.setSilently(vm.model, 'userList', users);
uObserve.setSilently(vm.model, 'currentUserId', user1.listValue);
const options = '<option selected value="1">user1</option><option value="2">user2</option>'; const options = '<option selected value="1">user1</option><option value="2">user2</option>';
userEl.insertAdjacentHTML('beforeend', options); userEl.insertAdjacentHTML('beforeend', options);
const optLength = userEl.options.length; const optLength = userEl.options.length;
const listLength = vm.model.userList.length; const listLength = vm.model.userList.length;
vm.setObservers(state);
vm.bindAll(); vm.bindAll();
// when // when
state.showLatest = true; state.showLatest = true;
@ -182,17 +188,16 @@ describe('UserViewModel tests', () => {
it('should remove "all users" option when "showLatest" state is unset', (done) => { it('should remove "all users" option when "showLatest" state is unset', (done) => {
// given // given
spyOn(UserViewModel.prototype, 'init'); state.currentUser = user1;
const vm = new UserViewModel(state); state.showAllUsers = false;
uObserve.setSilently(state, 'currentUser', user1); state.showLatest = true;
uObserve.setSilently(state, 'showAllUsers', false); vm.model.userList = users;
uObserve.setSilently(state, 'showLatest', true); vm.model.currentUserId = user1.listValue;
uObserve.setSilently(vm.model, 'userList', users);
uObserve.setSilently(vm.model, 'currentUserId', user1.listValue);
const options = `<option value="${uSelect.allValue}">all users</option><option selected value="1">user1</option><option value="2">user2</option>`; const options = `<option value="${uSelect.allValue}">all users</option><option selected value="1">user1</option><option value="2">user2</option>`;
userEl.insertAdjacentHTML('beforeend', options); userEl.insertAdjacentHTML('beforeend', options);
const optLength = userEl.options.length; const optLength = userEl.options.length;
const listLength = vm.model.userList.length; const listLength = vm.model.userList.length;
vm.setObservers(state);
vm.bindAll(); vm.bindAll();
// when // when
state.showLatest = false; state.showLatest = false;