Julien Mougenot
d3f0632f49
Before this commit, the format used by both date and datetime picker components depended on default props which are evaluated on module loading. This was an issue because the "time" module did not have time to load and fetch the correct database value, hence using the default ones. Now, the format is evaluated on component instantiation, giving enough time to the "time" module to load. Task 2307258 closes odoo/odoo#55113 X-original-commit: 792b565a65a8c9f65bf13e94f30b88913f2bfa7f Signed-off-by: Paul Morelle <madprog@users.noreply.github.com> Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>
257 lines
11 KiB
JavaScript
257 lines
11 KiB
JavaScript
odoo.define('web.datepicker_tests', function (require) {
|
|
"use strict";
|
|
|
|
const { DatePicker, DateTimePicker } = require('web.DatePickerOwl');
|
|
const testUtils = require('web.test_utils');
|
|
const time = require('web.time');
|
|
|
|
const { createComponent } = testUtils;
|
|
|
|
QUnit.module('Components', {}, function () {
|
|
|
|
QUnit.module('DatePicker');
|
|
|
|
QUnit.test("basic rendering", async function (assert) {
|
|
assert.expect(8);
|
|
|
|
const picker = await createComponent(DatePicker, {
|
|
props: { date: moment('01/09/1997') },
|
|
});
|
|
|
|
assert.containsOnce(picker, 'input.o_input.o_datepicker_input');
|
|
assert.containsOnce(picker, 'span.o_datepicker_button');
|
|
assert.containsNone(document.body, 'div.bootstrap-datetimepicker-widget');
|
|
|
|
const input = picker.el.querySelector('input.o_input.o_datepicker_input');
|
|
assert.strictEqual(input.value, '01/09/1997',
|
|
"Value should be the one given")
|
|
;
|
|
assert.strictEqual(input.dataset.target, `#${picker.el.id}`,
|
|
"DatePicker id should match its input target");
|
|
|
|
await testUtils.dom.click(input);
|
|
|
|
assert.containsOnce(document.body, 'div.bootstrap-datetimepicker-widget .datepicker');
|
|
assert.containsNone(document.body, 'div.bootstrap-datetimepicker-widget .timepicker');
|
|
assert.strictEqual(
|
|
document.querySelector('.datepicker .day.active').dataset.day,
|
|
'01/09/1997',
|
|
"Datepicker should have set the correct day"
|
|
);
|
|
|
|
picker.destroy();
|
|
});
|
|
|
|
QUnit.test("pick a date", async function (assert) {
|
|
assert.expect(5);
|
|
|
|
const picker = await createComponent(DatePicker, {
|
|
props: { date: moment('01/09/1997') },
|
|
intercepts: {
|
|
'datetime-changed': ev => {
|
|
assert.step('datetime-changed');
|
|
assert.strictEqual(ev.detail.date.format('MM/DD/YYYY'), '02/08/1997',
|
|
"Event should transmit the correct date");
|
|
},
|
|
}
|
|
});
|
|
const input = picker.el.querySelector('.o_datepicker_input');
|
|
|
|
await testUtils.dom.click(input);
|
|
await testUtils.dom.click(document.querySelector('.datepicker th.next')); // next month
|
|
|
|
assert.verifySteps([]);
|
|
|
|
await testUtils.dom.click(document.querySelectorAll('.datepicker table td')[15]); // previous day
|
|
|
|
assert.strictEqual(input.value, '02/08/1997');
|
|
assert.verifySteps(['datetime-changed']);
|
|
|
|
picker.destroy();
|
|
});
|
|
|
|
QUnit.test("enter a date value", async function (assert) {
|
|
assert.expect(5);
|
|
|
|
const picker = await createComponent(DatePicker, {
|
|
props: { date: moment('01/09/1997') },
|
|
intercepts: {
|
|
'datetime-changed': ev => {
|
|
assert.step('datetime-changed');
|
|
assert.strictEqual(ev.detail.date.format('MM/DD/YYYY'), '02/08/1997',
|
|
"Event should transmit the correct date");
|
|
},
|
|
}
|
|
});
|
|
const input = picker.el.querySelector('.o_datepicker_input');
|
|
|
|
assert.verifySteps([]);
|
|
|
|
await testUtils.fields.editAndTrigger(input, '02/08/1997', ['change']);
|
|
|
|
assert.verifySteps(['datetime-changed']);
|
|
|
|
await testUtils.dom.click(input);
|
|
|
|
assert.strictEqual(
|
|
document.querySelector('.datepicker .day.active').dataset.day,
|
|
'02/08/1997',
|
|
"Datepicker should have set the correct day"
|
|
);
|
|
|
|
picker.destroy();
|
|
});
|
|
|
|
QUnit.test("Date format is correctly set", async function (assert) {
|
|
assert.expect(2);
|
|
|
|
testUtils.patch(time, { getLangDateFormat: () => "YYYY/MM/DD" });
|
|
const picker = await createComponent(DatePicker, {
|
|
props: { date: moment('01/09/1997') },
|
|
});
|
|
const input = picker.el.querySelector('.o_datepicker_input');
|
|
|
|
assert.strictEqual(input.value, '1997/01/09');
|
|
|
|
// Forces an update to assert that the registered format is the correct one
|
|
await testUtils.dom.click(input);
|
|
|
|
assert.strictEqual(input.value, '1997/01/09');
|
|
|
|
picker.destroy();
|
|
testUtils.unpatch(time);
|
|
});
|
|
|
|
QUnit.module('DateTimePicker');
|
|
|
|
QUnit.test("basic rendering", async function (assert) {
|
|
assert.expect(11);
|
|
|
|
const picker = await createComponent(DateTimePicker, {
|
|
props: { date: moment('01/09/1997 12:30:01') },
|
|
});
|
|
|
|
assert.containsOnce(picker, 'input.o_input.o_datepicker_input');
|
|
assert.containsOnce(picker, 'span.o_datepicker_button');
|
|
assert.containsNone(document.body, 'div.bootstrap-datetimepicker-widget');
|
|
|
|
const input = picker.el.querySelector('input.o_input.o_datepicker_input');
|
|
assert.strictEqual(input.value, '01/09/1997 12:30:01', "Value should be the one given");
|
|
assert.strictEqual(input.dataset.target, `#${picker.el.id}`,
|
|
"DateTimePicker id should match its input target");
|
|
|
|
await testUtils.dom.click(input);
|
|
|
|
assert.containsOnce(document.body, 'div.bootstrap-datetimepicker-widget .datepicker');
|
|
assert.containsOnce(document.body, 'div.bootstrap-datetimepicker-widget .timepicker');
|
|
assert.strictEqual(
|
|
document.querySelector('.datepicker .day.active').dataset.day,
|
|
'01/09/1997',
|
|
"Datepicker should have set the correct day");
|
|
|
|
assert.strictEqual(document.querySelector('.timepicker .timepicker-hour').innerText.trim(), '12',
|
|
"Datepicker should have set the correct hour");
|
|
assert.strictEqual(document.querySelector('.timepicker .timepicker-minute').innerText.trim(), '30',
|
|
"Datepicker should have set the correct minute");
|
|
assert.strictEqual(document.querySelector('.timepicker .timepicker-second').innerText.trim(), '01',
|
|
"Datepicker should have set the correct second");
|
|
|
|
picker.destroy();
|
|
});
|
|
|
|
QUnit.test("pick a date and time", async function (assert) {
|
|
assert.expect(5);
|
|
|
|
const picker = await createComponent(DateTimePicker, {
|
|
props: { date: moment('01/09/1997 12:30:01') },
|
|
intercepts: {
|
|
'datetime-changed': ev => {
|
|
assert.step('datetime-changed');
|
|
assert.strictEqual(ev.detail.date.format('MM/DD/YYYY HH:mm:ss'), '02/08/1997 15:45:05',
|
|
"Event should transmit the correct date");
|
|
},
|
|
}
|
|
});
|
|
const input = picker.el.querySelector('input.o_input.o_datepicker_input');
|
|
|
|
await testUtils.dom.click(input);
|
|
await testUtils.dom.click(document.querySelector('.datepicker th.next')); // February
|
|
await testUtils.dom.click(document.querySelectorAll('.datepicker table td')[15]); // 08
|
|
await testUtils.dom.click(document.querySelector('a[title="Select Time"]'));
|
|
await testUtils.dom.click(document.querySelector('.timepicker .timepicker-hour'));
|
|
await testUtils.dom.click(document.querySelectorAll('.timepicker .hour')[15]); // 15h
|
|
await testUtils.dom.click(document.querySelector('.timepicker .timepicker-minute'));
|
|
await testUtils.dom.click(document.querySelectorAll('.timepicker .minute')[9]); // 45m
|
|
await testUtils.dom.click(document.querySelector('.timepicker .timepicker-second'));
|
|
|
|
assert.verifySteps([]);
|
|
|
|
await testUtils.dom.click(document.querySelectorAll('.timepicker .second')[1]); // 05s
|
|
|
|
assert.strictEqual(input.value, '02/08/1997 15:45:05');
|
|
assert.verifySteps(['datetime-changed']);
|
|
|
|
picker.destroy();
|
|
});
|
|
|
|
QUnit.test("enter a datetime value", async function (assert) {
|
|
assert.expect(9);
|
|
|
|
const picker = await createComponent(DateTimePicker, {
|
|
props: { date: moment('01/09/1997 12:30:01') },
|
|
intercepts: {
|
|
'datetime-changed': ev => {
|
|
assert.step('datetime-changed');
|
|
assert.strictEqual(ev.detail.date.format('MM/DD/YYYY HH:mm:ss'), '02/08/1997 15:45:05',
|
|
"Event should transmit the correct date");
|
|
},
|
|
}
|
|
});
|
|
const input = picker.el.querySelector('.o_datepicker_input');
|
|
|
|
assert.verifySteps([]);
|
|
|
|
await testUtils.fields.editAndTrigger(input, '02/08/1997 15:45:05', ['change']);
|
|
|
|
assert.verifySteps(['datetime-changed']);
|
|
|
|
await testUtils.dom.click(input);
|
|
|
|
assert.strictEqual(input.value, '02/08/1997 15:45:05');
|
|
assert.strictEqual(
|
|
document.querySelector('.datepicker .day.active').dataset.day,
|
|
'02/08/1997',
|
|
"Datepicker should have set the correct day"
|
|
);
|
|
assert.strictEqual(document.querySelector('.timepicker .timepicker-hour').innerText.trim(), '15',
|
|
"Datepicker should have set the correct hour");
|
|
assert.strictEqual(document.querySelector('.timepicker .timepicker-minute').innerText.trim(), '45',
|
|
"Datepicker should have set the correct minute");
|
|
assert.strictEqual(document.querySelector('.timepicker .timepicker-second').innerText.trim(), '05',
|
|
"Datepicker should have set the correct second");
|
|
|
|
picker.destroy();
|
|
});
|
|
|
|
QUnit.test("Date time format is correctly set", async function (assert) {
|
|
assert.expect(2);
|
|
|
|
testUtils.patch(time, { getLangDatetimeFormat: () => "hh:mm:ss YYYY/MM/DD" });
|
|
const picker = await createComponent(DateTimePicker, {
|
|
props: { date: moment('01/09/1997 12:30:01') },
|
|
});
|
|
const input = picker.el.querySelector('.o_datepicker_input');
|
|
|
|
assert.strictEqual(input.value, '12:30:01 1997/01/09');
|
|
|
|
// Forces an update to assert that the registered format is the correct one
|
|
await testUtils.dom.click(input);
|
|
|
|
assert.strictEqual(input.value, '12:30:01 1997/01/09');
|
|
|
|
picker.destroy();
|
|
testUtils.unpatch(time);
|
|
});
|
|
});
|
|
});
|