My tests seem to be in conflict. Whenever I run one test after the other, the data in the wrapper stills seems to hold the values which were put in during the previous test.
I've tried adding wrapper.destroy() in the afterEach but this does not seem to make a difference.
The current failure message which I get is:
Expected $.startDate = Date(Mon Jan 01 2018 01:00:00 GMT+0100 (Central European Standard Time)) to equal null. which occurs in the test validates valid dates
import SearchDate from '../search-date';
import VeeValidate from 'vee-validate';
import {createLocalVue, shallowMount} from '#vue/test-utils';
fdescribe('SearchDate', function() {
let wrapper;
const propsData = {
dates: {startDate: null, endDate: null},
};
beforeEach(function() {
this.localVue = createLocalVue();
this.localVue.use(VeeValidate);
wrapper = shallowMount(
SearchDate,
{
localVue: this.localVue,
propsData: propsData,
},
);
});
afterEach(function() {
wrapper.destroy();
});
it('invalidates invalid dates', function(done) {
// GIVEN an instantiated SearchDate
// WHEN startDateSelected and endDataSelected functions are called with unknown arguments
wrapper.vm.startDateSelected('foobar');
wrapper.vm.endDateSelected('foobar');
// THEN expect startDate and endDate of SearchDate to be null
const expectedData = {
datepickerStartDate: null,
datepickerEndDate: null,
inputStartDate: null,
inputEndDate: null,
};
wrapper.vm.$nextTick(() => {
expect(wrapper.vm._data).toEqual(expectedData);
done();
});
});
it('validates valid dates', function(done) {
// GIVEN an instantiated SearchDate
// WHEN valid startDate and endDate are validated
const validStartDate = new Date(2018, 0, 1, 0, 0, 0);
const validEndDate = new Date(2018, 0, 2, 0, 0, 0);
wrapper.vm.startDateSelected(validStartDate);
wrapper.vm.endDateSelected(validEndDate);
// THEN the expected startDate and endDate can be found in the component data
const expectedData = {
datepickerLanguage: nl,
datepickerStartDate: null,
datepickerEndDate: null,
inputStartDate: '01-01-2018',
inputEndDate: '02-01-2018',
};
wrapper.vm.$nextTick(() => {
expect(wrapper.vm._data).toEqual(expectedData);
done();
});
});
Related
I'm trying to store history of workout in realm, my addHistory function looks like this
export function addHistory(workout, exercise, sets, _id) {
console.log({
workout,
exercise,
sets,
_id,
});
if (
_id !== undefined &&
workout !== undefined &&
exercise !== undefined &&
sets !== undefined
) {
// return console.log("HISTORY ", { workout, exercise, sets, _id });
return realm.write(() => {
return realm.create("workoutData", {
_id: _id,
exercise,
workout,
sets,
workoutDate: new Date(Date.now()),
});
});
} else {
alert("History is incomplete");
}
}
Schema of the workoutData is as follows:
exports.workoutData = {
name: "workoutData",
primaryKey: "_id",
properties: {
_id: "int",
workout: "workouts",
exercise: "exercise",
workoutDate: "date",
sets: "sets[]",
},
};
Now when I add sets and click on finishWorkoutHandler the logic works fine before the addHistory function but when addHistory is executed it throws the error as stated in the question.
//finish workout handler
const finishWorkoutHandler = () => {
if (sets.length == 0) {
return;
}
let setsFromRealm = realm.objects("sets");
let workoutData = realm.objects("workoutData");
let setsArray = [];
exercises.forEach((exercise) => {
sets
.filter((items) => items.exercise._id == exercise._id)
.forEach((sets) => {
let _id = 0;
if (setsFromRealm.length > 0) {
_id = realm.objects("sets").max("_id") + 1;
}
addSet(
sets.name,
parseInt(sets.weight),
parseInt(sets.reps),
parseInt(sets.rmValue),
sets.isHeighest,
sets.exercise,
_id,
sets.profile,
sets.failedSet,
sets.warmupSet,
sets.notes
);
let indiSet = {
name: sets.name,
weight: parseInt(sets.weight),
reps: parseInt(sets.reps),
rmValue: parseInt(sets.rmValue),
isHeighest: sets.isHeighest,
_id: _id,
profile: sets.profile,
failedSet: sets.failedSet,
warmupSet: sets.warmupSet,
notes: sets.notes,
createdDate: new Date(Date.now()),
};
setsArray.push(indiSet);
});
let workoutDataId = 0;
let setsArrcopy = setsArray;
console.log("SETS ", realm.objects("sets"));
console.log("SETS ", setsArrcopy);
if (workoutData.length > 0) {
workoutDataId = realm.objects("workoutData").max("_id") + 1;
}
**WORKING AS EXPECTED TILL HERE**
// problem lies here
addHistory(params.workout, exercise, setsArrcopy, workoutDataId);
});
dispatch(setsEx([]));
goBack();
};
the structure of setsArrCopy containing sets is as follows
[
({
_id: 6,
createdDate: 2022-09-29T16:27:06.128Z,
failedSet: false,
isHeighest: false,
name: "Thai",
notes: "",
profile: [Object],
reps: 12,
rmValue: 64,
warmupSet: false,
weight: 56,
},
{
_id: 7,
createdDate: 2022-09-29T16:27:06.151Z,
failedSet: false,
isHeighest: false,
name: "Thsi 3",
notes: "",
profile: [Object],
reps: 10,
rmValue: 75,
warmupSet: false,
weight: 66,
})
];
the logic is also working fine in terms of assigning new ids to the sets being added in a loop. But somehow its throwing error when passing setArrCopy to addHistory function. Although its an array of sets not a single object?
I have two components: TodoList and TodoListsList. They get their data from states in todos.js and todoLists.js modules accordingly. When I choose some to-do list, i.e mark it as active, TodoListsList is updated, but TodoLists isn't, thought the data is updated. Here's how I do it.
todoListsState and markAsActive() (todoLists.js):
import todos from '#/modules/todos.js'
// ... some code ...
const todoListsState = reactive({
todoLists: [],
todoListsAreLoading: false,
removedTodoListId: null,
editedTodoListId: null,
editedTodoListName: '',
baseTodoListsApiUrl: process.env.VUE_APP_BASE_TODO_LISTS_API_URL,
todoListCreationFormModalId: 'todoListCreationFormModal',
todoListNameChangeFormModalId: 'todoListNameChangeFormModal'
});
// ... some code ...
function markAsActive(value) {
let { close } = infoToast();
if (value) {
axios.post((todoListsState.baseTodoListsApiUrl + 'mark-as-active'), {
activatedTodoListId: value
}).then(function () {
getTodoLists();
const { getTodos } = todos();
getTodos();
}).catch(function () {
dangerToast('Failed to mark to-do list as active.');
}).finally(() => {
close();
});
}
}
todosState and getTodos() (todos.js):
const todosState = reactive({
todos: [],
activeTodoListId: 0,
removedTodoId: null,
editedTodoId: null,
editedTodoText: '',
todosAreLoading: false,
baseTodosApiUrl: process.env.VUE_APP_BASE_TODOS_API_URL,
todoAdditionFormModalId: 'todoAdditionFormModal',
todoEditFormModalId: 'todoEditFormModal'
});
// ... some code ...
async function getTodos() {
try {
todosState.todosAreLoading = true;
const response = await axios.get(todosState.baseTodosApiUrl);
todosState.activeTodoListId = response.data[0];
todosState.todos = response.data[1];
} catch (e) {
dangerToast('To-dos loading failed.');
} finally {
todosState.todosAreLoading = false;
}
}
How does todosState.todos look in console:
todosState.todos when Todos.vue is mounted:
It doesn't look like the array looses it's reactivity.
If you need something else to understand my question, feel free to ask. Help appreciated.
The problem is solved! I have just moved todosState out of
export default function () {}
and it works! Finally! This thread helped me a lot.
Ihave datepicker using Vue2-Datepicker this is my component looks like
<date-picker
v-model="closingRange"
range
valueType="format"
:default-value="new Date()"
:disabled-date="disabledBefore"
></date-picker>
and called Methods disbaledBefore
disabledBefore(date) {
let dayBefore = this.$moment(this.firstDateIfNull).format(
"YYYY-MM-DD"
);
const beforeToday = new Date(dayBefore);
beforeToday.setHours(0, 0, 0, 0);
return date < beforeToday; // Assume < 25 May Not Selected
}
how to auto select 26 May on start date of data range and cannot change. so user just can change end date.
just like this:
<date-picker
v-model="closingRange"
range
valueType="format"
:default-value="new Date()"
:disabled-date="disabledBefore"
:min-date="minDate"
></date-picker>
<script>
import { formatDate } from "#/utils/date";
export default {
name: "index",
props: {
label: String,
value: [String, Object, Date, Number],
minDate: {
type: [String, Date, Number],
default: () => {
return new Date(1970, 1, 1);
},
},
},
data() {
return {};
},
methods: {},
};
</script>
I want to access the data() variables
data () {
return {
name: '',
manufacturerIds: null,
supplierIds: null,
categoryIds: null,
productIds: null,
minPrice: 100,
maxPrice: 0,
priority: 0,
enable: true,
active: true,
minMargin: 0,
position: 0,
isLoading: false,
suppliers: [],
categories: [],
manufacturers: []
}
},
in a method in the same component. I know we can call it individually as property this.someVariable but what I want is to loop over all the variables to reset its values. So instead of calling them all one by one, I was thinking to loop over the data() and then assign it a null value (to reset).
I already tried this.data and this.getData() and this.data() but neither of them works.
It's a bad idea to reset the properties one by one because you will need to check each one of them to determine what value you need to set it to (null, array, boolean, etc). Do you really want to have if checks for all the properties?
A better way is to just clone the object before you make any changes to it and then just reset all the properties at once:
Method 1: store reset data locally
data () {
return {
// Add a property for storing unchanged data
defaultData: {},
data: {}
name: '',
manufacturerIds: null,
supplierIds: null,
categoryIds: null,
productIds: null,
minPrice: 100,
maxPrice: 0,
priority: 0,
enable: true,
active: true,
minMargin: 0,
position: 0,
isLoading: false,
suppliers: [],
categories: [],
manufacturers: []
}
},
created: {
// Clone data before you make any changes
this.cloneData()
},
methods: {
cloneData () {
// Method 1 (better way, but requires lodash module)
const clonedData = lodash.cloneDeep(this.$data)
// Method 2 (bad choice for complex objects, google "deep clone JS" to learn why)
const clonedData = JSON.parse(JSON.stringify(this.$data))
// Store the cloned data
this.defaultData = clonedData
},
resetData () {
// Reset the values using cloned data
this.$data = this.defaultData
}
}
Method 2: store reset data in Vuex store
data () {
return {
name: '',
manufacturerIds: null,
supplierIds: null,
categoryIds: null,
productIds: null,
minPrice: 100,
maxPrice: 0,
priority: 0,
enable: true,
active: true,
minMargin: 0,
position: 0,
isLoading: false,
suppliers: [],
categories: [],
manufacturers: []
}
},
created: {
// Clone data before you make any changes
this.cloneData()
},
methods: {
cloneData () {
// Method 1 (better way, but requires lodash module)
const clonedData = lodash.cloneDeep(this.$data)
// Method 2 (bad choice for complex objects, google "deep clone JS" to learn why)
const clonedData = JSON.parse(JSON.stringify(this.$data))
// Set the cloned data object to Vuex store
this.$store.commit('SET_DEFAULT_DATA ', clonedData)
},
resetData () {
// Reset the values using cloned data
this.$data = this.$store.state.defaultData
}
}
store.js
state: {
defaultData: {}
},
mutations: {
SET_DEFAULT_DATA (state, value) {
state.defaultData = value
}
}
What if you made an array of all the proporties in the data-method?
Example:
data() {
name: '',
manufacturerIds: null,
supplierIds: null
dataArray: [name, manufacturerIds, supplierIds]
}
and then call a method which loops over dataArray?
While using Vue Rangedate Picker I hit a roadblock trying to configure the prop Initial Range (the initial range that the component spits before the user even select any other range).
Have managed to setup other props like "caption" and "preset ranges" but the initRange is complaining about it not being an Object and being a function.
On my template:
<date-picker v-bind="datePicker" initRange="datePicker.presetRanges.last7Days" #selected="onDateSelected" i18n="EN" ></date-picker>
On my data:
datePicker: {
initRange: {
start: '1505862000000',
end: '1505872000000'
},
captions: {
title: 'Choose Date/Period',
ok_button: 'Apply'
},
presetRanges: {
today: function () {
const n = new Date()
const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 23, 59)
return {
label: 'Today',
active: false,
dateRange: {
start: startToday,
end: endToday
}
}
},
last7Days: function () {
const n = new Date()
const weekAgo = new Date(n.getFullYear(), n.getMonth(), n.getDate() - 7, 24, 0)
const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
return {
label: 'Last 7 Days',
active: 'false',
dateRange: {start: weekAgo, end: endToday}
}
},
On my methods:
methods: {
onDateSelected: function (daterange) {
let that = this;
that.selectedDate = daterange;
let UnixStart = Math.round((Date.parse(that.selectedDate.start)));
let UnixEnd = Math.round((Date.parse(that.selectedDate.end)));
},
How can I solve this?
https://github.com/bliblidotcom/vue-rangedate-picker/issues/71
I leave the comments with this link. you will find it. should work for you.