1031 lines
40 KiB
JavaScript
1031 lines
40 KiB
JavaScript
/** @odoo-module **/
|
|
|
|
import {
|
|
click,
|
|
clickSave,
|
|
editInput,
|
|
getFixture,
|
|
patchDate,
|
|
patchTimeZone,
|
|
patchWithCleanup,
|
|
triggerEvent,
|
|
triggerScroll,
|
|
} from "@web/../tests/helpers/utils";
|
|
import { localization } from "@web/core/l10n/localization";
|
|
import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
|
|
import { registerCleanup } from "@web/../tests/helpers/cleanup";
|
|
import { pagerNext } from "@web/../tests/search/helpers";
|
|
|
|
let serverData;
|
|
let target;
|
|
|
|
QUnit.module("Fields", (hooks) => {
|
|
hooks.beforeEach(() => {
|
|
target = getFixture();
|
|
serverData = {
|
|
models: {
|
|
partner: {
|
|
fields: {
|
|
date: { string: "A date", type: "date", searchable: true },
|
|
datetime: { string: "A datetime", type: "datetime", searchable: true },
|
|
},
|
|
records: [
|
|
{
|
|
id: 1,
|
|
date: "2017-02-03",
|
|
datetime: "2017-02-08 10:00:00",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
setupViewRegistries();
|
|
|
|
// Date field should not have an offset as they are ignored.
|
|
// However, in the test environement, a UTC timezone is set to run all tests. And if any code does not use the safe timezone method
|
|
// provided by the framework (which happens in this case inside the date range picker lib), unexpected behavior kicks in as the timezone
|
|
// of the dev machine collides with the timezone set by the test env.
|
|
// To avoid failing test on dev's local machines, a hack is to apply an timezone offset greater than the difference between UTC and the dev's
|
|
// machine timezone. For belgium, > 60 is enough. For India, > 5h30 is required, hence 330.
|
|
patchTimeZone(330);
|
|
});
|
|
|
|
QUnit.module("DateRangeField");
|
|
|
|
QUnit.test(
|
|
"Datetime field - interaction with the datepicker [REQUIRE FOCUS]",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
// Check date range picker initialization
|
|
assert.containsN(
|
|
document.body,
|
|
".daterangepicker",
|
|
2,
|
|
"should initialize 2 date range picker"
|
|
);
|
|
const datepickers = document.querySelectorAll(`.daterangepicker`);
|
|
assert.isNotVisible(
|
|
datepickers[0],
|
|
"first date range picker should be closed initially"
|
|
);
|
|
assert.isNotVisible(
|
|
datepickers[datepickers.length - 1],
|
|
"second date range picker should be closed initially"
|
|
);
|
|
|
|
// open the first one
|
|
let fields = target.querySelectorAll(".o_field_daterange");
|
|
await click(fields[0].querySelector("input"));
|
|
|
|
let datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
|
|
);
|
|
assert.isVisible(datepicker, "first date range picker should be opened");
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .active.start-date").textContent,
|
|
"8",
|
|
"active start date should be '8' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .hourselect").value,
|
|
"15",
|
|
"active start date hour should be '15' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .minuteselect").value,
|
|
"30",
|
|
"active start date minute should be '30' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .active.end-date").textContent,
|
|
"13",
|
|
"active end date should be '13' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .hourselect").value,
|
|
"5",
|
|
"active end date hour should be '5' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .minuteselect").value,
|
|
"30",
|
|
"active end date minute should be '30' in date range picker"
|
|
);
|
|
assert.containsN(
|
|
datepicker.querySelector(".drp-calendar.left .minuteselect"),
|
|
"option",
|
|
12,
|
|
"minute selection should contain 12 options (1 for each 5 minutes)"
|
|
);
|
|
// Close picker
|
|
await click(datepicker.querySelector(".cancelBtn"));
|
|
assert.strictEqual(
|
|
datepicker.style.display,
|
|
"none",
|
|
"date range picker should be closed"
|
|
);
|
|
|
|
// Try to check with end date
|
|
await click(fields[fields.length - 1], "input");
|
|
datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[fields.length - 1].getAttribute("name")}"]`
|
|
);
|
|
|
|
assert.isVisible(datepicker, "date range picker should be opened");
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .active.start-date").textContent,
|
|
"8",
|
|
"active start date should be '8' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .hourselect").value,
|
|
"15",
|
|
"active start date hour should be '15' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .minuteselect").value,
|
|
"30",
|
|
"active start date minute should be '30' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .active.end-date").textContent,
|
|
"13",
|
|
"active end date should be '13' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .hourselect").value,
|
|
"5",
|
|
"active end date hour should be '5' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .minuteselect").value,
|
|
"30",
|
|
"active end date minute should be '30' in date range picker"
|
|
);
|
|
|
|
// Select a new range and check that inputs are updated
|
|
await triggerEvent(datepicker, ".start-date", "mousedown"); // 02/08/2017
|
|
await triggerEvent(datepicker, ".start-date + .available", "mousedown"); // 02/09/2017
|
|
await click(datepicker, ".applyBtn");
|
|
assert.equal(
|
|
target.querySelector("[name=datetime] input").value,
|
|
"02/08/2017 15:30:00"
|
|
);
|
|
assert.equal(
|
|
target.querySelector("[name=datetime_end] input").value,
|
|
"02/09/2017 05:30:00"
|
|
);
|
|
|
|
// Save
|
|
await clickSave(target);
|
|
fields = target.querySelectorAll(".o_field_daterange input");
|
|
|
|
// Check date after save
|
|
assert.strictEqual(fields[0].value, "02/08/2017 15:30:00");
|
|
assert.strictEqual(fields[fields.length - 1].value, "02/09/2017 05:30:00");
|
|
}
|
|
);
|
|
|
|
QUnit.test(
|
|
"Date field - interaction with the datepicker [REQUIRE FOCUS]",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
|
|
serverData.models.partner.records[0].date_end = "2017-02-08";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
|
|
<field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
let fields = target.querySelectorAll(".o_field_daterange");
|
|
const datepickers = document.querySelectorAll(`.daterangepicker`);
|
|
|
|
// Check date range picker initialization
|
|
assert.containsN(
|
|
document.body,
|
|
".daterangepicker",
|
|
2,
|
|
"should initialize 2 date range picker"
|
|
);
|
|
assert.isNotVisible(
|
|
datepickers[0],
|
|
"first date range picker should be closed initially"
|
|
);
|
|
assert.isNotVisible(
|
|
datepickers[datepickers.length - 1],
|
|
"second date range picker should be closed initially"
|
|
);
|
|
|
|
// open the first one
|
|
await click(fields[0].querySelector("input"));
|
|
let datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
|
|
);
|
|
|
|
assert.isVisible(datepicker, "first date range picker should be opened");
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.start-date").textContent,
|
|
"3",
|
|
"active start date should be '3' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.end-date").textContent,
|
|
"8",
|
|
"active end date should be '8' in date range picker"
|
|
);
|
|
|
|
// Change date
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.left .available[data-title='r2c4']",
|
|
"mousedown"
|
|
);
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.right .available[data-title='r2c0']",
|
|
"mousedown"
|
|
);
|
|
await click(datepicker.querySelector(".applyBtn"));
|
|
|
|
// Check date after change
|
|
assert.isNotVisible(datepicker, "date range picker should be closed");
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"02/16/2017",
|
|
"the date should be '02/16/2017'"
|
|
);
|
|
assert.strictEqual(
|
|
fields[1].querySelector("input").value,
|
|
"03/12/2017",
|
|
"'the date should be '03/12/2017'"
|
|
);
|
|
|
|
// Try to change range with end date
|
|
await click(fields[1].querySelector("input"));
|
|
datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[1].getAttribute("name")}"]`
|
|
);
|
|
|
|
assert.isVisible(datepicker, "date range picker should be opened");
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.start-date").textContent,
|
|
"16",
|
|
"start date should be a 16 in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.end-date").textContent,
|
|
"12",
|
|
"end date should be a 12 in date range picker"
|
|
);
|
|
|
|
// Change date
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.left .available[data-title='r2c1']",
|
|
"mousedown"
|
|
);
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.right .available[data-title='r2c6']",
|
|
"mousedown"
|
|
);
|
|
await click(datepicker, ".applyBtn");
|
|
|
|
// Check date after change
|
|
assert.isNotVisible(
|
|
datepickers[datepickers.length - 1],
|
|
"date range picker should be closed"
|
|
);
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"02/13/2017",
|
|
"the start date should be '02/13/2017'"
|
|
);
|
|
assert.strictEqual(
|
|
fields[1].querySelector("input").value,
|
|
"03/18/2017",
|
|
"the end date should be '03/18/2017'"
|
|
);
|
|
|
|
// Save
|
|
await clickSave(target);
|
|
fields = target.querySelectorAll(".o_field_daterange");
|
|
|
|
// Check date after save
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"02/13/2017",
|
|
"the start date should be '02/13/2017' after save"
|
|
);
|
|
assert.strictEqual(
|
|
fields[1].querySelector("input").value,
|
|
"03/18/2017",
|
|
"the end date should be '03/18/2017' after save"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test(
|
|
"daterangepicker should disappear on scrolling outside of it",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
await click(target.querySelector(".o_field_daterange[name='datetime'] input"));
|
|
assert.isVisible(
|
|
document.querySelector(".daterangepicker[data-name='datetime']"),
|
|
"date range picker should be opened"
|
|
);
|
|
|
|
await triggerScroll(target, { top: 50 });
|
|
assert.isNotVisible(
|
|
document.querySelector(".daterangepicker[data-name='datetime']"),
|
|
"date range picker should be closed"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test("DateRangeField with label opens datepicker on click", async function (assert) {
|
|
serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
|
|
serverData.models.partner.records[0].date_end = "2017-02-08";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<label for="date" string="Daterange" />
|
|
<field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
|
|
<field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
await click(target.querySelector("label.o_form_label"));
|
|
assert.isVisible(
|
|
document.querySelector(".daterangepicker[data-name='date']"),
|
|
"date range picker should be opened"
|
|
);
|
|
});
|
|
|
|
QUnit.test(
|
|
"Datetime field manually input value should send utc value to server",
|
|
async function (assert) {
|
|
assert.expect(4);
|
|
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
resId: 1,
|
|
mockRPC(route, args) {
|
|
if (args.method === "write") {
|
|
assert.deepEqual(args.args[1], { datetime: "2017-02-08 06:00:00" });
|
|
}
|
|
},
|
|
});
|
|
|
|
// check date display correctly in readonly
|
|
assert.strictEqual(
|
|
target.querySelector(".o_field_daterange input").value,
|
|
"02/08/2017 15:30:00",
|
|
"the start date should be correctly displayed in readonly"
|
|
);
|
|
assert.strictEqual(
|
|
target.querySelectorAll(".o_field_daterange input")[1].value,
|
|
"03/13/2017 05:30:00",
|
|
"the end date should be correctly displayed in readonly"
|
|
);
|
|
|
|
// update input for Datetime
|
|
await editInput(
|
|
target,
|
|
".o_field_daterange[name='datetime'] input",
|
|
"02/08/2017 11:30:00"
|
|
);
|
|
// save form
|
|
await clickSave(target);
|
|
|
|
assert.strictEqual(
|
|
target.querySelector(".o_field_daterange input").value,
|
|
"02/08/2017 11:30:00",
|
|
"the start date should be correctly displayed after manual update"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test(
|
|
"Daterange field keyup should not erase end date [REQUIRE FOCUS]",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
resId: 1,
|
|
});
|
|
|
|
// check date display correctly in readonly
|
|
assert.strictEqual(
|
|
target.querySelector(".o_field_daterange input").value,
|
|
"02/08/2017 15:30:00",
|
|
"the start date should be correctly displayed"
|
|
);
|
|
assert.strictEqual(
|
|
target.querySelectorAll(".o_field_daterange input")[1].value,
|
|
"03/13/2017 05:30:00",
|
|
"the end date should be correctly displayed"
|
|
);
|
|
|
|
// reveal the daterangepicker
|
|
await click(target.querySelector(".o_field_daterange[name='datetime'] input"));
|
|
|
|
// the keyup event should not be handled by daterangepicker
|
|
await triggerEvent(target, ".o_field_daterange[name='datetime'] input", "keyup", {
|
|
key: "ArrowLeft",
|
|
});
|
|
|
|
const datepickers = document.querySelectorAll(`.daterangepicker`);
|
|
// TODO: check if the range is correctly displayed in the picker
|
|
await click(datepickers[1].querySelector(".applyBtn"));
|
|
|
|
assert.strictEqual(
|
|
target.querySelector(".o_field_daterange input").value,
|
|
"02/08/2017 15:30:00",
|
|
"the start date should be correctly displayed after onkeyup"
|
|
);
|
|
|
|
assert.strictEqual(
|
|
target.querySelectorAll(".o_field_daterange input")[1].value,
|
|
"03/13/2017 05:30:00",
|
|
"the end date should be correctly displayed after onkeyup"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test(
|
|
"DateRangeField manually input wrong value should show toaster",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
|
|
serverData.models.partner.records[0].date_end = "2017-02-08";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
|
|
<field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
|
|
</form>`,
|
|
resId: 1,
|
|
});
|
|
|
|
await editInput(target, ".o_field_daterange[name='date'] input", "blabla");
|
|
// click outside daterange field
|
|
await click(target);
|
|
assert.hasClass(
|
|
target.querySelector(".o_field_daterange[name='date']"),
|
|
"o_field_invalid",
|
|
"date field should be displayed as invalid"
|
|
);
|
|
// update input date with right value
|
|
await editInput(target, ".o_field_daterange[name='date'] input", "02/08/2017");
|
|
assert.doesNotHaveClass(
|
|
target.querySelector(".o_field_daterange[name='date']"),
|
|
"o_field_invalid",
|
|
"date field should not be displayed as invalid now"
|
|
);
|
|
|
|
// again enter wrong value and try to save should raise invalid fields value
|
|
await editInput(target, ".o_field_daterange[name='date'] input", "blabla");
|
|
await clickSave(target);
|
|
assert.strictEqual(
|
|
target.querySelector(".o_notification_title").textContent,
|
|
"Invalid fields: "
|
|
);
|
|
assert.strictEqual(
|
|
target.querySelector(".o_notification_content").innerHTML,
|
|
"<ul><li>A date</li></ul>"
|
|
);
|
|
assert.hasClass(target.querySelector(".o_notification"), "border-danger");
|
|
}
|
|
);
|
|
|
|
QUnit.test("Render with initial empty value: date field", async function (assert) {
|
|
// 2014-08-14 12:34:56 -> the day E. Zuckerman, who invented pop-up ads, has apologised.
|
|
patchDate(2014, 7, 14, 12, 34, 56);
|
|
serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
|
|
<field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
await click(document.body, ".o_field_daterange[name=date] input");
|
|
assert.containsN(document.body, ".month", 2);
|
|
assert.equal(document.body.querySelectorAll(".month")[0].textContent, "Aug 2014");
|
|
assert.equal(document.body.querySelectorAll(".month")[1].textContent, "Sep 2014");
|
|
});
|
|
|
|
QUnit.test("Render with initial empty value: datetime field", async function (assert) {
|
|
// 2014-08-14 12:34:56 -> the day E. Zuckerman, who invented pop-up ads, has apologised.
|
|
patchDate(2014, 7, 14, 12, 34, 56);
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
await click(document.body, ".o_field_daterange[name=datetime] input");
|
|
assert.containsN(document.body, ".month", 2);
|
|
assert.equal(document.body.querySelectorAll(".month")[0].textContent, "Aug 2014");
|
|
assert.equal(document.body.querySelectorAll(".month")[1].textContent, "Sep 2014");
|
|
});
|
|
|
|
QUnit.test("Datetime field with option format type is 'date'", async function (assert) {
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end', 'format_type': 'date'}"/>'
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime', 'format_type': 'date'}"/>'
|
|
</form>`,
|
|
});
|
|
|
|
assert.strictEqual(
|
|
target.querySelector(".o_field_daterange[name='datetime'] input").value,
|
|
"02/08/2017",
|
|
"the start date should only show date when option formatType is Date"
|
|
);
|
|
assert.strictEqual(
|
|
target.querySelector(".o_field_daterange[name='datetime_end'] input").value,
|
|
"03/13/2017",
|
|
"the end date should only show date when option formatType is Date"
|
|
);
|
|
});
|
|
|
|
QUnit.test("when same locales have differences (moment vs luxon)", async function (assert) {
|
|
patchWithCleanup(localization, { dateTimeFormat: "dd MMM, yyyy HH:mm:ss" });
|
|
|
|
// Create a new pseudo locale that will get different from the luxon one
|
|
const originalLocal = moment.locale();
|
|
// Moment automatically assigns newly defined locales.
|
|
moment.defineLocale("nonsenseForTest", {
|
|
monthsShort: [
|
|
"JaBon",
|
|
"FeBob",
|
|
"MaBor",
|
|
"ApBor",
|
|
"MaBoy",
|
|
"JuBon",
|
|
"JuBol",
|
|
"AuBog",
|
|
"SeBop",
|
|
"OcBot",
|
|
"NoBov",
|
|
"DeBoc",
|
|
],
|
|
});
|
|
|
|
registerCleanup(() => {
|
|
//Delete the previously created local
|
|
moment.updateLocale("nonsenseForTest", null);
|
|
// Restore the original locale
|
|
moment.locale(originalLocal);
|
|
});
|
|
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
// open a datepicker field
|
|
await click(target, ".o_field_daterange[name=datetime] input");
|
|
|
|
const datepicker = document.querySelector(".daterangepicker[data-name=datetime]");
|
|
assert.isVisible(datepicker, "date range picker should be opened");
|
|
assert.deepEqual(
|
|
[...datepicker.querySelectorAll(".month")].map((el) => el.textContent),
|
|
["FeBob 2017", "MaBor 2017"]
|
|
);
|
|
|
|
// Select a new range and check that inputs are updated
|
|
await triggerEvent(datepicker, ".start-date", "mousedown"); // 02/08/2017
|
|
await triggerEvent(datepicker, ".start-date + .available", "mousedown"); // 02/09/2017
|
|
await click(datepicker, ".applyBtn");
|
|
assert.equal(target.querySelector("[name=datetime] input").value, "08 Feb, 2017 15:30:00");
|
|
assert.equal(
|
|
target.querySelector("[name=datetime_end] input").value,
|
|
"09 Feb, 2017 05:30:00"
|
|
);
|
|
});
|
|
|
|
QUnit.test(
|
|
"Datetime field - open datepicker and switch page [REQUIRE FOCUS]",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.datetime_end = {
|
|
string: "Datetime End",
|
|
type: "datetime",
|
|
};
|
|
serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
|
|
serverData.models.partner.records.push({
|
|
id: 2,
|
|
date: "2017-03-04",
|
|
datetime: "2017-03-10 11:00:00",
|
|
datetime_end: "2017-04-15 00:00:00",
|
|
});
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
resIds: [1, 2],
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
|
|
<field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
// Check date range picker initialization
|
|
let datepickers = document.querySelectorAll(`.daterangepicker`);
|
|
assert.isNotVisible(
|
|
datepickers[0],
|
|
"first date range picker should be closed initially"
|
|
);
|
|
assert.isNotVisible(
|
|
datepickers[datepickers.length - 1],
|
|
"second date range picker should be closed initially"
|
|
);
|
|
|
|
// open datepicker
|
|
let fields = target.querySelectorAll(".o_field_daterange");
|
|
await click(fields[0].querySelector("input"));
|
|
|
|
let datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
|
|
);
|
|
assert.isVisible(datepicker, "first date range picker should be opened");
|
|
|
|
// Start date: id=1
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .active.start-date").textContent,
|
|
"8",
|
|
"active start date should be '8' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .hourselect").value,
|
|
"15",
|
|
"active start date hour should be '15' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .minuteselect").value,
|
|
"30",
|
|
"active start date minute should be '30' in date range picker"
|
|
);
|
|
|
|
// End date: id=1
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .active.end-date").textContent,
|
|
"13",
|
|
"active end date should be '13' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .hourselect").value,
|
|
"5",
|
|
"active end date hour should be '5' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .minuteselect").value,
|
|
"30",
|
|
"active end date minute should be '30' in date range picker"
|
|
);
|
|
|
|
// Close picker
|
|
await click(datepicker.querySelector(".cancelBtn"));
|
|
assert.strictEqual(
|
|
datepicker.style.display,
|
|
"none",
|
|
"date range picker should be closed"
|
|
);
|
|
|
|
await pagerNext(target);
|
|
|
|
// Check date range picker initialization
|
|
assert.containsN(
|
|
document.body,
|
|
".daterangepicker",
|
|
2,
|
|
"should initialize 2 date range picker"
|
|
);
|
|
datepickers = document.querySelectorAll(`.daterangepicker`);
|
|
assert.isNotVisible(
|
|
datepickers[0],
|
|
"first date range picker should be closed initially"
|
|
);
|
|
assert.isNotVisible(
|
|
datepickers[datepickers.length - 1],
|
|
"second date range picker should be closed initially"
|
|
);
|
|
|
|
// open date range picker
|
|
fields = target.querySelectorAll(".o_field_daterange");
|
|
await click(fields[0].querySelector("input"));
|
|
|
|
datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
|
|
);
|
|
assert.isVisible(datepicker, "first date range picker should be opened");
|
|
|
|
// Start date: id=2
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .active.start-date").textContent,
|
|
"10",
|
|
"active start date should be '10' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .hourselect").value,
|
|
"16",
|
|
"active start date hour should be '16' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.left .minuteselect").value,
|
|
"30",
|
|
"active start date minute should be '30' in date range picker"
|
|
);
|
|
|
|
// End date id=2
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .active.end-date").textContent,
|
|
"15",
|
|
"active end date should be '15' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .hourselect").value,
|
|
"5",
|
|
"active end date hour should be '5' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".drp-calendar.right .minuteselect").value,
|
|
"30",
|
|
"active end date minute should be '30' in date range picker"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test(
|
|
"Render with one visible field: start date [REQUIRE FOCUS]",
|
|
async function (assert) {
|
|
serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
|
|
serverData.models.partner.records[0].date_end = "2017-02-08";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
|
|
<field name="date_end" widget="daterange" options="{'related_start_date': 'date'}" invisible="1"/>
|
|
</form>`,
|
|
});
|
|
|
|
let fields = target.querySelectorAll(".o_field_daterange");
|
|
// Check date range picker initialization
|
|
assert.containsOnce(
|
|
document.body,
|
|
".daterangepicker",
|
|
"should initialize 1 date range picker"
|
|
);
|
|
|
|
// open the start date
|
|
await click(fields[0].querySelector("input"));
|
|
const datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
|
|
);
|
|
|
|
assert.isVisible(datepicker, "date range picker should be opened");
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.start-date").textContent,
|
|
"3",
|
|
"active start date should be '3' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.end-date").textContent,
|
|
"8",
|
|
"active end date should be '8' in date range picker"
|
|
);
|
|
|
|
// Change date
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.left .available[data-title='r2c4']",
|
|
"mousedown"
|
|
);
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.right .available[data-title='r2c0']",
|
|
"mousedown"
|
|
);
|
|
await click(datepicker.querySelector(".applyBtn"));
|
|
|
|
// Check date after change
|
|
assert.isNotVisible(datepicker, "date range picker should be closed");
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"02/16/2017",
|
|
"the date should be '02/16/2017'"
|
|
);
|
|
|
|
// Save
|
|
await clickSave(target);
|
|
fields = target.querySelectorAll(".o_field_daterange");
|
|
|
|
// Check date after save
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"02/16/2017",
|
|
"the start date should be '02/16/2017' after save"
|
|
);
|
|
}
|
|
);
|
|
|
|
QUnit.test("Render with one visible field: end date [REQUIRE FOCUS]", async function (assert) {
|
|
serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
|
|
serverData.models.partner.records[0].date_end = "2017-02-08";
|
|
|
|
await makeView({
|
|
type: "form",
|
|
resModel: "partner",
|
|
resId: 1,
|
|
serverData,
|
|
arch: `
|
|
<form>
|
|
<field name="date" widget="daterange" options="{'related_end_date': 'date_end'}" invisible="1"/>
|
|
<field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
|
|
</form>`,
|
|
});
|
|
|
|
let fields = target.querySelectorAll(".o_field_daterange");
|
|
// Check date range picker initialization
|
|
assert.containsOnce(
|
|
document.body,
|
|
".daterangepicker",
|
|
"should initialize 1 date range picker"
|
|
);
|
|
|
|
// open the end date
|
|
await click(fields[0].querySelector("input"));
|
|
const datepicker = document.querySelector(
|
|
`.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
|
|
);
|
|
|
|
assert.isVisible(datepicker, "date range picker should be opened");
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.start-date").textContent,
|
|
"3",
|
|
"active start date should be '3' in date range picker"
|
|
);
|
|
assert.strictEqual(
|
|
datepicker.querySelector(".active.end-date").textContent,
|
|
"8",
|
|
"active end date should be '8' in date range picker"
|
|
);
|
|
|
|
// Change date
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.left .available[data-title='r2c4']",
|
|
"mousedown"
|
|
);
|
|
await triggerEvent(
|
|
datepicker,
|
|
".drp-calendar.right .available[data-title='r2c0']",
|
|
"mousedown"
|
|
);
|
|
await click(datepicker.querySelector(".applyBtn"));
|
|
|
|
// Check date after change
|
|
assert.isNotVisible(datepicker, "date range picker should be closed");
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"03/12/2017",
|
|
"the date should be '03/12/2017'"
|
|
);
|
|
|
|
// Save
|
|
await clickSave(target);
|
|
fields = target.querySelectorAll(".o_field_daterange");
|
|
|
|
// Check date after save
|
|
assert.strictEqual(
|
|
fields[0].querySelector("input").value,
|
|
"03/12/2017",
|
|
"the end date should be '02/13/2017' after save"
|
|
);
|
|
});
|
|
});
|