" +
'
' +
"
' +
"
" +
'' +
'" +
" " +
" " +
"",
async mockRPC(route, { method, args }) {
if (method === "write") {
assert.step(`write-color-${args[1].color}`);
}
},
});
await toggleRecordDropdown(0);
assert.containsNone(
target,
".o_kanban_record.oe_kanban_color_12",
"no record should have the color 12"
);
assert.containsOnce(
target,
".o_kanban_record:first-child .oe_kanban_colorpicker",
"there should be a color picker"
);
assert.containsN(
target,
".o_kanban_record:first-child .oe_kanban_colorpicker > *",
12,
"the color picker should have 12 children (the colors)"
);
await click(target, ".oe_kanban_colorpicker a.oe_kanban_color_9");
assert.verifySteps(["write-color-9"], "should write on the color field");
assert.hasClass(getCard(0), "oe_kanban_color_9");
});
QUnit.test("load more records in column", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
groupBy: ["bar"],
limit: 2,
async mockRPC(_route, { method, kwargs }) {
if (method === "web_search_read") {
assert.step(`${kwargs.limit} - ${kwargs.offset}`);
}
},
});
assert.containsN(
getColumn(1),
".o_kanban_record",
2,
"there should be 2 records in the column"
);
assert.deepEqual(getCardTexts(1), ["1", "2"]);
// load more
await loadMore(1);
assert.containsN(
getColumn(1),
".o_kanban_record",
3,
"there should now be 3 records in the column"
);
assert.verifySteps(["2 - 0", "2 - 0", "4 - 0"], "the records should be correctly fetched");
assert.deepEqual(getCardTexts(1), ["1", "2", "3"]);
// reload
await validateSearch(target);
assert.containsN(
getColumn(1),
".o_kanban_record",
3,
"there should still be 3 records in the column after reload"
);
assert.deepEqual(getCardTexts(1), ["1", "2", "3"]);
assert.verifySteps(["2 - 0", "4 - 0"]);
});
QUnit.test("load more records in column with x2many", async (assert) => {
serverData.models.partner.records[0].category_ids = [7];
serverData.models.partner.records[1].category_ids = [];
serverData.models.partner.records[2].category_ids = [6];
serverData.models.partner.records[3].category_ids = [];
// record [2] will be loaded after
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
limit: 2,
async mockRPC(_route, { args, kwargs, model, method }) {
if (model === "category" && method === "read") {
assert.step(`read ${String(args[0])}`);
} else if (method === "web_search_read") {
assert.step(`web_search_read ${kwargs.limit}-${kwargs.offset}`);
}
},
});
assert.containsN(getColumn(1), ".o_kanban_record", 2);
assert.verifySteps(["web_search_read 2-0", "web_search_read 2-0", "read 7"]);
// load more
await loadMore(1);
assert.containsN(getColumn(1), ".o_kanban_record", 3);
assert.verifySteps(["web_search_read 4-0", "read 7,6"]);
});
QUnit.test("update buttons after column creation", async (assert) => {
serverData.models.partner.records = [];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
groupBy: ["product_id"],
});
assert.containsNone(target, ".o-kanban-button-new");
await editColumnName("new column");
await validateColumn();
assert.containsOnce(target, ".o-kanban-button-new");
});
QUnit.test("group_by_tooltip option when grouping on a many2one", async (assert) => {
assert.expect(14);
delete serverData.models.partner.records[3].product_id;
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
async mockRPC(route, args) {
if (route === "/web/dataset/call_kw/product/read") {
assert.strictEqual(args.args[0].length, 2, "read on two groups");
assert.deepEqual(
args.args[1],
["display_name", "name"],
"should read on specified fields on the group by relation"
);
}
},
});
assert.hasClass(
target.querySelector(".o_kanban_renderer"),
"o_kanban_grouped",
"should have classname 'o_kanban_grouped'"
);
assert.containsN(target, ".o_kanban_group", 2, "should have 2 columns");
// simulate an update coming from the searchview, with another groupby given
await reload(kanban, { groupBy: ["product_id"] });
assert.containsN(target, ".o_kanban_group", 3, "should have 3 columns");
assert.strictEqual(
target.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_record").length,
1,
"column should contain 1 record(s)"
);
assert.strictEqual(
target.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_record").length,
2,
"column should contain 2 record(s)"
);
assert.strictEqual(
target.querySelectorAll(".o_kanban_group:nth-child(3) .o_kanban_record").length,
1,
"column should contain 1 record(s)"
);
assert.strictEqual(
target.querySelector(".o_kanban_group:first-child span.o_column_title").textContent,
"None",
"first column should have a default title for when no value is provided"
);
assert.ok(
!target.querySelector(
".o_kanban_group:first-child .o_kanban_header_title .o_column_title"
).dataset.tooltipInfo,
"tooltip of first column should not defined, since group_by_tooltip title and the many2one field has no value"
);
assert.ok(
!target.querySelector(
".o_kanban_group:first-child .o_kanban_header_title .o_column_title"
).dataset.tooltipTemplate,
"tooltip of first column should not defined, since group_by_tooltip title and the many2one field has no value"
);
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) span.o_column_title").textContent,
"hello",
"second column should have a title with a value from the many2one"
);
assert.strictEqual(
target.querySelector(
".o_kanban_group:nth-child(2) .o_kanban_header_title .o_column_title"
).dataset.tooltipInfo,
`{"entries":[{"title":"Kikou","value":"hello"}]}`,
"second column should have a tooltip with the group_by_tooltip title and many2one field value"
);
assert.strictEqual(
target.querySelector(
".o_kanban_group:nth-child(2) .o_kanban_header_title .o_column_title"
).dataset.tooltipTemplate,
"web.KanbanGroupTooltip",
"second column should have a tooltip with the group_by_tooltip title and many2one field value"
);
});
QUnit.test("asynchronous tooltips when grouped", async (assert) => {
assert.expect(10);
serviceRegistry.add("tooltip", tooltipService);
const prom = makeDeferred();
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
async mockRPC(route, args) {
if (route === "/web/dataset/call_kw/product/read") {
await prom;
}
},
});
assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
assert.containsN(target, ".o_column_title", 2);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[0]
.getAttribute("data-tooltip-template"),
null
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[0]
.getAttribute("data-tooltip-info"),
null
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[1]
.getAttribute("data-tooltip-template"),
null
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[1]
.getAttribute("data-tooltip-info"),
null
);
prom.resolve();
await nextTick();
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[0]
.getAttribute("data-tooltip-template"),
"web.KanbanGroupTooltip"
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[1]
.getAttribute("data-tooltip-template"),
"web.KanbanGroupTooltip"
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[0]
.getAttribute("data-tooltip-info"),
'{"entries":[{"title":"Name","value":"hello"}]}'
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[1]
.getAttribute("data-tooltip-info"),
'{"entries":[{"title":"Name","value":"xmo"}]}'
);
});
QUnit.test("concurrency asynchronous tooltips when grouped", async (assert) => {
assert.expect(2);
serviceRegistry.add("tooltip", tooltipService);
const prom = makeDeferred();
let rpcCount = 0;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
searchViewArch: `
`,
async mockRPC(route, args) {
if (route === "/web/dataset/call_kw/product/read") {
if (rpcCount++ == 0) {
await prom;
} else {
return [
{
id: 3,
display_name: "hello",
name: "hello",
},
{
id: 5,
display_name: "xmo",
name: "xm",
},
];
}
}
},
});
// The first tooltip rpc request is blocked and user changes the group by
await click(target, ".o_group_by_menu > .dropdown-toggle");
await click(target, ".o_group_by_menu > div > span");
// The first tooltip request arrives after the second request
prom.resolve();
await nextTick();
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[0]
.getAttribute("data-tooltip-info"),
'{"entries":[{"title":"Name","value":"hello"}]}'
);
assert.strictEqual(
target
.querySelectorAll(".o_kanban_header_title .o_column_title")[1]
.getAttribute("data-tooltip-info"),
'{"entries":[{"title":"Name","value":"xm"}]}'
);
});
QUnit.test("move a record then put it again in the same column", async (assert) => {
serverData.models.partner.records = [];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
groupBy: ["product_id"],
});
await editColumnName("column1");
await validateColumn();
await editColumnName("column2");
await validateColumn();
await quickCreateRecord(1);
await editQuickCreateInput("display_name", "new partner");
await validateRecord();
assert.containsNone(target, ".o_kanban_group:first-child .o_kanban_record");
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
await dragAndDrop(
".o_kanban_group:nth-child(2) .o_kanban_record",
".o_kanban_group:first-child"
);
assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
assert.containsNone(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.containsNone(target, ".o_kanban_group:first-child .o_kanban_record");
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
});
QUnit.test("resequence a record twice", async (assert) => {
serverData.models.partner.records = [];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
groupBy: ["product_id"],
async mockRPC(route) {
if (route === "/web/dataset/resequence") {
assert.step("resequence");
}
},
});
await editColumnName("column1");
await validateColumn();
await quickCreateRecord();
await editQuickCreateInput("display_name", "record1");
await validateRecord();
await quickCreateRecord();
await editQuickCreateInput("display_name", "record2");
await validateRecord();
await discardRecord(); // close quick create
assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
assert.deepEqual(
getCardTexts(),
["record2", "record1"],
"records should be correctly ordered"
);
await dragAndDrop(".o_kanban_record:nth-child(2)", ".o_kanban_record:nth-child(3)");
assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
assert.deepEqual(
getCardTexts(),
["record1", "record2"],
"records should be correctly ordered"
);
await dragAndDrop(".o_kanban_record:nth-child(3)", ".o_kanban_record:nth-child(2)");
assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
assert.deepEqual(
getCardTexts(),
["record2", "record1"],
"records should be correctly ordered"
);
assert.verifySteps(["resequence", "resequence"], "should have resequenced twice");
});
QUnit.test("basic support for widgets (being Owl Components)", async (assert) => {
class MyComponent extends Component {
get value() {
return JSON.stringify(this.props.record.data);
}
}
MyComponent.template = owl.xml`
`;
viewWidgetRegistry.add("test", MyComponent);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
assert.strictEqual(getCard(2).querySelector(".o_widget").innerText, '{"foo":"gnap"}');
});
QUnit.test("column progressbars properly work", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.containsN(
target,
".o_kanban_counter",
serverData.models.product.records.length,
"kanban counters should have been created"
);
assert.deepEqual(
getCounters(),
["-4", "36"],
"counter should display the sum of int_field values"
);
});
QUnit.test('column progressbars: "false" bar is clickable', async (assert) => {
serverData.models.partner.records.push({
id: 5,
bar: true,
foo: false,
product_id: 5,
state: "ghi",
});
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.containsN(target, ".o_kanban_group", 2);
assert.deepEqual(getCounters(), ["1", "4"]);
assert.containsN(
target,
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar",
4
);
assert.containsOnce(
target,
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-200",
"should have false kanban color"
);
assert.hasClass(
target.querySelector(
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-200"
),
"bg-200"
);
await click(
target,
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-200"
);
assert.hasClass(
target.querySelector(
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-200"
),
"progress-bar-animated"
);
assert.hasClass(
target.querySelector(".o_kanban_group:last-child"),
"o_kanban_group_show_200"
);
assert.deepEqual(getCounters(), ["1", "1"]);
});
QUnit.test('column progressbars: "false" bar with sum_field', async (assert) => {
serverData.models.partner.records.push({
id: 5,
bar: true,
foo: false,
int_field: 15,
product_id: 5,
state: "ghi",
});
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.containsN(target, ".o_kanban_group", 2);
assert.deepEqual(getCounters(), ["-4", "51"]);
await click(
target,
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-200"
);
assert.hasClass(
target.querySelector(
".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-200"
),
"progress-bar-animated"
);
assert.deepEqual(getCounters(), ["-4", "15"]);
});
QUnit.test("column progressbars should not crash in non grouped views", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
async mockRPC(route, { method }) {
assert.step(method);
},
});
assert.deepEqual(getCardTexts(), ["name", "name", "name", "name"]);
assert.verifySteps(
["get_views", "web_search_read"],
"no read on progress bar data is done"
);
});
QUnit.test(
"column progressbars: creating a new column should create a new progressbar",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["product_id"],
});
assert.containsN(target, ".o_kanban_counter", 2);
// Create a new column: this should create an empty progressbar
await createColumn();
await editColumnName("test");
await validateColumn();
assert.containsN(
target,
".o_kanban_counter",
3,
"a new column with a new column progressbar should have been created"
);
}
);
QUnit.test("column progressbars on quick create properly update counter", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.deepEqual(getCounters(), ["1", "3"]);
await quickCreateRecord();
await editQuickCreateInput("display_name", "Test");
assert.deepEqual(getCounters(), ["1", "3"]);
await validateRecord();
assert.deepEqual(
getCounters(),
["2", "3"],
"kanban counters should have updated on quick create"
);
});
QUnit.test("column progressbars are working with load more", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
domain: [["bar", "=", true]],
arch:
'
' +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.deepEqual(getCardTexts(0), ["1"]);
await loadMore(0);
await loadMore(0);
assert.deepEqual(getCardTexts(0), ["1", "2", "3"], "intended records are loaded");
});
QUnit.test(
"column progressbars with an active filter are working with load more",
async (assert) => {
serverData.models.partner.records.push(
{ id: 5, bar: true, foo: "blork" },
{ id: 6, bar: true, foo: "blork" },
{ id: 7, bar: true, foo: "blork" }
);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
domain: [["bar", "=", true]],
arch: `
`,
groupBy: ["bar"],
});
await click(target, ".o_kanban_counter_progress .progress-bar.bg-success");
assert.deepEqual(getCardTexts(), ["5"], "we should have 1 record shown");
await loadMore(0);
await loadMore(0);
assert.deepEqual(getCardTexts(), ["5", "6", "7"]);
}
);
QUnit.test("column progressbars on archiving records update counter", async (assert) => {
// add active field on partner model and make all records active
serverData.models.partner.fields.active = { string: "Active", type: "char", default: true };
patchDialog((_cls, props) => props.confirm());
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.deepEqual(getCounters(), ["-4", "36"], "counter should contain the correct value");
assert.deepEqual(
getTooltips(1),
["1 yop", "1 gnap", "1 blip"],
"the counter progressbars should be correctly displayed"
);
// archive all records of the second columns
const clickColumnAction = await toggleColumnActions(1);
await clickColumnAction("Archive All");
assert.deepEqual(getCounters(), ["-4", "0"], "counter should contain the correct value");
assert.containsNone(
getColumn(1),
".progress-bar",
"the counter progressbars should have been correctly updated"
);
});
QUnit.test(
"kanban with progressbars: correctly update env when archiving records",
async (assert) => {
// add active field on partner model and make all records active
serverData.models.partner.fields.active = {
string: "Active",
type: "char",
default: true,
};
patchDialog((_cls, props) => props.confirm());
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.deepEqual(getCardTexts(), ["4", "1", "2", "3"]);
// archive all records of the first column
const clickColumnAction = await toggleColumnActions(0);
await clickColumnAction("Archive All");
assert.deepEqual(getCardTexts(), ["1", "2", "3"]);
}
);
QUnit.test("RPCs when (re)loading kanban view progressbars", async (assert) => {
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
async mockRPC(route, args) {
assert.step(args.method || route);
},
});
await reload(kanban, { groupBy: ["bar"] });
assert.verifySteps([
// initial load
"get_views",
"web_read_group",
"read_progress_bar",
"web_search_read",
"web_search_read",
// reload
"web_read_group",
"read_progress_bar",
"web_search_read",
"web_search_read",
]);
});
QUnit.test("RPCs when (de)activating kanban view progressbar filters", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
async mockRPC(route, { method }) {
assert.step(method || route);
},
});
// Activate "yop" on second column
await click(getColumn(1), ".progress-bar.bg-success");
// Activate "gnap" on second column
await click(getColumn(1), ".progress-bar.bg-warning");
// Deactivate "gnap" on second column
await click(getColumn(1), ".progress-bar.bg-warning");
assert.verifySteps([
// initial load
"get_views",
"web_read_group",
"read_progress_bar",
"web_search_read",
"web_search_read",
"web_search_read",
// activate filter
"web_read_group", // recomputes aggregates
"web_search_read",
// activate another filter (switching)
"web_read_group", // recomputes aggregates
"web_search_read",
// deactivate active filter
"web_read_group", // recomputes aggregates
]);
});
QUnit.test("drag & drop records grouped by m2o with progressbar", async (assert) => {
serverData.models.partner.records[0].product_id = false;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
groupBy: ["product_id"],
});
// Unfold first column
await click(getColumn(0));
assert.deepEqual(getCounters(), ["1", "1", "2"]);
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.deepEqual(getCounters(), ["0", "2", "2"]);
await dragAndDrop(
".o_kanban_group:nth-child(2) .o_kanban_record",
".o_kanban_group:first-child"
);
assert.deepEqual(getCounters(), ["1", "1", "2"]);
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:nth-child(3)"
);
assert.deepEqual(getCounters(), ["0", "1", "3"]);
});
QUnit.test("progress bar subgroup count recompute", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
});
assert.deepEqual(getCounters(), ["1", "3"]);
await click(target, ".o_kanban_group:nth-child(2) .bg-success");
assert.deepEqual(getCounters(), ["1", "1"]);
});
QUnit.test(
"progress bar recompute after drag&drop to and from other column",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
});
assert.deepEqual(getTooltips(), ["1 blip", "1 yop", "1 gnap", "1 blip"]);
assert.deepEqual(getCounters(), ["1", "3"]);
// Drag the last kanban record to the first column
await dragAndDrop(
".o_kanban_group:last-child .o_kanban_record:nth-child(4)",
".o_kanban_group:first-child"
);
assert.deepEqual(getTooltips(), ["1 gnap", "1 blip", "1 yop", "1 blip"]);
assert.deepEqual(getCounters(), ["2", "2"]);
}
);
QUnit.test("load more should load correct records after drag&drop event", async (assert) => {
// Add a sequence number and initialize
serverData.models.partner.records.forEach((el, i) => (el.sequence = i));
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
});
assert.deepEqual(getCardTexts(0), ["4"], "first column's first record must be id 4");
assert.deepEqual(getCardTexts(1), ["1"], "second column's records should be only the id 1");
// Drag the first kanban record on top of the last
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:last-child .o_kanban_record"
);
// load more twice to load all records of second column
await loadMore(1);
await loadMore(1);
// Check records of the second column
assert.deepEqual(
getCardTexts(1),
["4", "1", "2", "3"],
"first column's first record must be id 4"
);
});
QUnit.test(
"column progressbars on quick create with quick_create_view are updated",
async (assert) => {
serverData.views[
"partner,some_view_ref,form"
] = `
`;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
'
' +
'' +
"" +
'
" +
" ",
groupBy: ["bar"],
});
assert.deepEqual(getCounters(), ["-4", "36"]);
await createRecord();
await editQuickCreateInput("int_field", 44);
await validateRecord();
assert.deepEqual(
getCounters(),
["40", "36"],
"kanban counters should have been updated on quick create"
);
}
);
QUnit.test(
"column progressbars and active filter on quick create with quick_create_view are updated",
async (assert) => {
serverData.views["partner,some_view_ref,form"] = `
`;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
});
await click(getColumn(0), ".progress-bar.bg-danger");
assert.containsOnce(getColumn(0), ".o_kanban_record");
assert.containsOnce(getColumn(0), ".oe_kanban_card_danger");
assert.deepEqual(getCounters(), ["-4", "36"]);
// open the quick create
await createRecord();
// fill it with a record that satisfies the active filter
await editQuickCreateInput("int_field", 44);
await editQuickCreateInput("foo", "blip");
await validateRecord();
// fill it again with another record that DOES NOT satisfy the active filter
await editQuickCreateInput("int_field", 1000);
await editQuickCreateInput("foo", "yop");
await validateRecord();
assert.containsN(getColumn(0), ".o_kanban_record", 3);
assert.containsN(getColumn(0), ".oe_kanban_card_danger", 2);
assert.containsOnce(getColumn(0), ".oe_kanban_card_success");
assert.deepEqual(
getCounters(),
["40", "36"],
"kanban counters should have been updated on quick create, respecting the active filter"
);
}
);
QUnit.test(
"keep adding quickcreate in first column after a record from this column was moved",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
'
' +
'' +
'
' +
" ",
groupBy: ["foo"],
async mockRPC(route, args) {
if (route === "/web/dataset/resequence") {
return true;
}
},
});
await createRecord();
assert.strictEqual(
target.querySelector(".o_kanban_quick_create").closest(".o_kanban_group"),
target.querySelector(".o_kanban_group"),
"quick create should have been added in the first column"
);
await dragAndDrop(".o_kanban_record", ".o_kanban_group:nth-child(2)");
await createRecord();
assert.strictEqual(
target.querySelector(".o_kanban_quick_create").closest(".o_kanban_group"),
target.querySelector(".o_kanban_group"),
"quick create should have been added in the first column"
);
}
);
QUnit.test("test displaying image (URL, image field not set)", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"
" +
"
",
});
// since the field image is not set, kanban_image will generate an URL
const imageOnRecord = target.querySelectorAll(
'img[data-src*="/web/image"][data-src*="&id=1"]'
);
assert.strictEqual(imageOnRecord.length, 1, "partner with image display image by url");
});
QUnit.test("test displaying image (__last_update field)", async (assert) => {
// the presence of __last_update field ensures that the image is reloaded when necessary
assert.expect(2);
const rec = serverData.models.partner.records.find((r) => r.id === 1);
rec.__last_update = "2022-08-05 08:37:00";
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
mockRPC(route, { method, kwargs }) {
if (method === "web_search_read") {
assert.deepEqual(kwargs.fields, ["id", "__last_update"]);
}
},
domain: [["id", "in", [1]]],
});
assert.ok(
target
.querySelector(".o_kanban_record:not(.o_kanban_ghost) img")
.dataset.src.endsWith(
"/web/image?model=partner&field=image&id=1&unique=1659688620000"
),
"image src is the preview image given in option"
);
});
QUnit.test("test displaying image (binary & placeholder)", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"
" +
"
",
});
const images = target.querySelectorAll("img");
const placeholders = [];
for (const [index, img] of images.entries()) {
if (img.dataset.src.indexOf(serverData.models.partner.records[index].image) === -1) {
// Then we display a placeholder
placeholders.push(img);
}
}
assert.strictEqual(
placeholders.length,
serverData.models.partner.records.length - 1,
"partner with no image should display the placeholder"
);
assert.strictEqual(
images[0].dataset.src,
"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==",
"The first partners non-placeholder image should be set"
);
});
QUnit.test("test displaying image (for another record)", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"
" +
"
",
});
// the field image is set, but we request the image for a specific id
// -> for the record matching the ID, the base64 should be returned
// -> for all the other records, the image should be displayed by url
const imageOnRecord = target.querySelectorAll(
'img[data-src*="/web/image"][data-src*="&id=1"]'
);
assert.strictEqual(
imageOnRecord.length,
serverData.models.partner.records.length - 1,
"display image by url when requested for another record"
);
assert.strictEqual(
target.querySelector("img").dataset.src,
"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==",
"display image as value when requested for the record itself"
);
});
QUnit.test("test displaying image from m2o field (m2o field not set)", async (assert) => {
serverData.models.foo_partner = {
fields: {
name: { string: "Foo Name", type: "char" },
partner_id: { string: "Partner", type: "many2one", relation: "partner" },
},
records: [
{ id: 1, name: "foo_with_partner_image", partner_id: 1 },
{ id: 2, name: "foo_no_partner" },
],
};
await makeView({
type: "kanban",
resModel: "foo_partner",
serverData,
arch: `
`,
});
assert.containsOnce(
target,
'img[data-src*="/web/image"][data-src$="&id=1&unique="]',
"image url should contain id of set partner_id"
);
assert.containsOnce(
target,
'img[data-src*="/web/image"][data-src$="&id=&unique="]',
"image url should contain an empty id if partner_id is not set"
);
});
QUnit.test(
"grouped kanban becomes ungrouped when clearing domain then clearing groupby",
async (assert) => {
// in this test, we simulate that clearing the domain is slow, so that
// clearing the groupby does not corrupt the data handled while
// reloading the kanban view.
const prom = makeDeferred();
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
domain: [["foo", "=", "norecord"]],
groupBy: ["bar"],
async mockRPC(route, args, performRpc) {
if (args.method === "web_read_group") {
const result = performRpc(route, args);
const isFirstUpdate =
args.kwargs.domain.length === 0 &&
args.kwargs.groupby &&
args.kwargs.groupby[0] === "bar";
if (isFirstUpdate) {
await prom;
}
return result;
}
},
});
assert.hasClass(
target.querySelector(".o_kanban_renderer"),
"o_kanban_grouped",
"the kanban view should be grouped"
);
assert.doesNotHaveClass(
target.querySelector(".o_kanban_renderer"),
"o_kanban_ungrouped",
"the kanban view should not be ungrouped"
);
reload(kanban, { domain: [] }); // 1st update on kanban view
reload(kanban, { groupBy: [] }); // 2nd update on kanban view
prom.resolve(); // simulate slow 1st update of kanban view
await nextTick();
assert.doesNotHaveClass(
target.querySelector(".o_kanban_renderer"),
"o_kanban_grouped",
"the kanban view should not longer be grouped"
);
assert.hasClass(
target.querySelector(".o_kanban_renderer"),
"o_kanban_ungrouped",
"the kanban view should have become ungrouped"
);
}
);
QUnit.test("quick_create on grouped kanban without column", async (assert) => {
serverData.models.partner.records = [];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
// force group_create to false, otherwise the CREATE button in control panel is hidden
arch:
'
' +
"" +
'
" +
" ",
groupBy: ["product_id"],
createRecord: () => {
assert.step("createRecord");
},
});
await createRecord();
assert.verifySteps(["createRecord"]);
});
QUnit.test("keyboard navigation on kanban basic rendering", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
'
' +
"" +
'
" +
" ",
});
getCard(0).focus();
assert.strictEqual(document.activeElement, getCard(0), "the kanban cards are focussable");
triggerHotkey("ArrowRight");
assert.strictEqual(
document.activeElement,
getCard(1),
"the second card should be focussed"
);
triggerHotkey("ArrowLeft");
assert.strictEqual(document.activeElement, getCard(0), "the first card should be focussed");
});
QUnit.test(
"keyboard navigation on kanban basic rendering does not crash when the focus is inside a card",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
'
' +
"" +
" ",
});
getCard(0).querySelector(".o-this-is-focussable").focus();
triggerHotkey("ArrowDown");
assert.strictEqual(
document.activeElement,
getCard(1),
"the second card should be focussed"
);
}
);
QUnit.test("keyboard navigation on kanban grouped rendering", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
groupBy: ["bar"],
});
const cardsByColumn = [...target.querySelectorAll(".o_kanban_group")].map((c) => [
...c.querySelectorAll(".o_kanban_record"),
]);
const firstColumnFirstCard = cardsByColumn[0][0];
const secondColumnFirstCard = cardsByColumn[1][0];
const secondColumnSecondCard = cardsByColumn[1][1];
firstColumnFirstCard.focus();
// RIGHT should select the next column
triggerHotkey("ArrowRight");
await nextTick();
assert.strictEqual(
document.activeElement,
secondColumnFirstCard,
"RIGHT should select the first card of the next column"
);
// DOWN should move up one card
triggerHotkey("ArrowDown");
await nextTick();
assert.strictEqual(
document.activeElement,
secondColumnSecondCard,
"DOWN should select the second card of the current column"
);
// LEFT should go back to the first column
triggerHotkey("ArrowLeft");
await nextTick();
assert.strictEqual(
document.activeElement,
firstColumnFirstCard,
"LEFT should select the first card of the first column"
);
});
QUnit.test(
"keyboard navigation on kanban grouped rendering with empty columns",
async (assert) => {
serverData.models.partner.records[1].state = "abc";
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'
' +
" ",
groupBy: ["state"],
async mockRPC(route, args, performRpc) {
if (args.method === "web_read_group") {
// override read_group to return empty groups, as this is
// the case for several models (e.g. project.task grouped
// by stage_id)
const result = await performRpc(route, args);
// add 2 empty columns in the middle
result.groups.splice(1, 0, {
state_count: 0,
state: "md1",
__domain: [["state", "=", "md1"]],
});
result.groups.splice(1, 0, {
state_count: 0,
state: "md2",
__domain: [["state", "=", "md2"]],
});
// add 1 empty column in the beginning and the end
result.groups.unshift({
state_count: 0,
state: "beg",
__domain: [["state", "=", "beg"]],
});
result.groups.push({
state_count: 0,
state: "end",
__domain: [["state", "=", "end"]],
});
return result;
}
},
});
/**
* Added columns in mockRPC are empty
*
* | BEG | ABC | MD1 | MD2 | GHI | END
* |-----|------|-----|-----|------|-----
* | | yop | | | gnap |
* | | blip | | | blip |
*/
const cardsByColumn = [...target.querySelectorAll(".o_kanban_group")].map((c) => [
...c.querySelectorAll(".o_kanban_record"),
]);
const yop = cardsByColumn[1][0];
const gnap = cardsByColumn[4][0];
yop.focus();
// RIGHT should select the next column that has a card
triggerHotkey("ArrowRight");
await nextTick();
assert.strictEqual(
document.activeElement,
gnap,
"RIGHT should select the first card of the next column that has a card"
);
// LEFT should go back to the first column that has a card
triggerHotkey("ArrowLeft");
await nextTick();
assert.strictEqual(
document.activeElement,
yop,
"LEFT should select the first card of the first column that has a card"
);
}
);
QUnit.test(
"keyboard navigation on kanban when the focus is on a link that " +
"has an action and the kanban has no oe_kanban_global_... class",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
'
' +
'' +
" ",
selectRecord: (resId) => {
assert.equal(
resId,
1,
"When selecting focusing a card and hitting ENTER, the first link or button is clicked"
);
},
});
const firstCard = getCard(0);
firstCard.focus();
await triggerEvent(firstCard, null, "keydown", { key: "Enter" });
}
);
QUnit.test(
"keyboard navigation on kanban when the kanban has a oe_kanban_global_click class",
async (assert) => {
assert.expect(1);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
selectRecord(recordId) {
assert.strictEqual(
recordId,
1,
"should call its selectRecord prop with the selected record"
);
},
});
const firstCard = getCard(0);
firstCard.focus();
await triggerEvent(firstCard, null, "keydown", { key: "Enter" });
}
);
QUnit.test("set cover image", async (assert) => {
assert.expect(11);
serviceRegistry.add("dialog", dialogService, { force: true });
serviceRegistry.add("http", {
start: () => ({}),
});
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
"" +
'' +
'' +
'
' +
'
" +
"
" +
'
" +
"
" +
" " +
" ",
async mockRPC(_route, { model, method, args }) {
if (model === "partner" && method === "write") {
assert.step(String(args[0][0]));
}
},
});
patchWithCleanup(kanban.env.services.action, {
switchView(_viewType, { mode, resModel, res_id, view_type }) {
assert.deepEqual(
{ mode, resModel, res_id, view_type },
{
mode: "readonly",
resModel: "partner",
res_id: 1,
view_type: "form",
},
"should trigger an event to open the clicked record in a form view"
);
},
});
await toggleRecordDropdown(0);
await click(getCard(0), ".oe_kanban_action");
assert.containsNone(getCard(0), "img", "Initially there is no image.");
await click(document.body, ".modal .o_kanban_cover_image img", true);
await click(document.querySelector(".modal .btn-primary:first-child"));
assert.containsOnce(target, 'img[data-src*="/web/image/1"]');
await toggleRecordDropdown(1);
const coverButton = getCard(1).querySelector("a");
assert.strictEqual(coverButton.innerText.trim(), "Set Cover Image");
await click(coverButton);
assert.containsOnce(document.body, ".modal .o_kanban_cover_image");
assert.containsOnce(document.body, ".modal .btn:contains(Select)");
assert.containsOnce(document.body, ".modal .btn:contains(Discard)");
assert.containsNone(document.body, ".modal .btn:contains(Remove Cover Image)");
await triggerEvent(
document.body,
".modal .o_kanban_cover_image img",
"dblclick",
{ bubbles: true },
{ skipVisibilityCheck: true }
);
assert.containsOnce(target, 'img[data-src*="/web/image/2"]');
await click(target, ".o_kanban_record:first-child .o_attachment_image");
assert.verifySteps(["1", "2"], "should writes on both kanban records");
});
QUnit.test("unset cover image", async (assert) => {
serverData.models.partner.records[0].displayed_image_id = 1;
serverData.models.partner.records[1].displayed_image_id = 2;
serviceRegistry.add("dialog", dialogService, { force: true });
serviceRegistry.add("http", {
start: () => ({}),
});
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
async mockRPC(_route, { model, method, args }) {
if (model === "partner" && method === "write") {
assert.step(String(args[0][0]));
assert.strictEqual(args[1].displayed_image_id, false);
}
},
});
await toggleRecordDropdown(0);
await click(getCard(0), ".oe_kanban_action");
assert.containsOnce(getCard(0), 'img[data-src*="/web/image/1"]');
assert.containsOnce(getCard(1), 'img[data-src*="/web/image/2"]');
assert.containsOnce(document.body, ".modal .o_kanban_cover_image");
assert.containsOnce(document.body, ".modal .btn:contains(Select)");
assert.containsOnce(document.body, ".modal .btn:contains(Discard)");
assert.containsOnce(document.body, ".modal .btn:contains(Remove Cover Image)");
await click(document.querySelector(".modal .modal-footer .btn-secondary")); // click on "Remove Cover Image" button
assert.containsNone(getCard(0), "img", "The cover image should be removed.");
await toggleRecordDropdown(1);
const coverButton = getCard(1).querySelector("a");
assert.strictEqual(coverButton.innerText.trim(), "Set Cover Image");
await click(coverButton);
await triggerEvent(
document.body,
".modal .o_kanban_cover_image img",
"dblclick",
{ bubbles: true },
{ skipVisibilityCheck: true }
);
assert.containsNone(getCard(1), "img", "The cover image should be removed.");
assert.verifySteps(["1", "2"], "should writes on both kanban records");
});
QUnit.test("ungrouped kanban with handle field", async (assert) => {
assert.expect(3);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
async mockRPC(route, args) {
if (route === "/web/dataset/resequence") {
assert.deepEqual(
args.ids,
[2, 1, 3, 4],
"should write the sequence in correct order"
);
}
},
});
assert.deepEqual(getCardTexts(), ["blip", "blip", "yop", "gnap"]);
await dragAndDrop(".o_kanban_record", ".o_kanban_record:nth-child(4)");
assert.deepEqual(getCardTexts(), ["blip", "yop", "gnap", "blip"]);
});
QUnit.test("ungrouped kanban without handle field", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
"" +
'
" +
" ",
async mockRPC(route, args) {
if (route === "/web/dataset/resequence") {
throw new Error("should not trigger a resequencing");
}
},
});
assert.deepEqual(getCardTexts(), ["yop", "blip", "gnap", "blip"]);
await dragAndDrop(".o_kanban_record", ".o_kanban_record:nth-child(4)");
assert.deepEqual(getCardTexts(), ["yop", "blip", "gnap", "blip"]);
});
QUnit.test("click on image field in kanban with oe_kanban_global_click", async (assert) => {
assert.expect(2);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch:
"
" +
'' +
'' +
'
" +
" ",
selectRecord(recordId) {
assert.equal(
recordId,
1,
"should call its selectRecord prop with the clicked record"
);
},
});
assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
await click(target.querySelector(".o_field_image"), null, { skipVisibilityCheck: true });
});
QUnit.test("kanban view with boolean field", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
assert.containsN(target, ".o_kanban_record input:disabled", 4);
assert.containsN(target, ".o_kanban_record input:checked", 3);
assert.containsOnce(target, ".o_kanban_record input:not(:checked)");
});
QUnit.test("kanban view with boolean widget", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
assert.containsOnce(getCard(0), "div.o_field_boolean .o-checkbox");
});
QUnit.test("kanban view with boolean toggle widget", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
assert.ok(getCard(0).querySelector("[name='bar'] input").checked);
assert.ok(getCard(1).querySelector("[name='bar'] input").checked);
await click(getCard(1), "[name='bar'] input");
assert.ok(getCard(0).querySelector("[name='bar'] input").checked);
assert.notOk(getCard(1).querySelector("[name='bar'] input").checked);
});
QUnit.test("kanban view with monetary and currency fields without widget", async (assert) => {
const currencies = {};
for (const record of serverData.models.currency.records) {
currencies[record.id] = record;
}
patchWithCleanup(session, { currencies });
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
assert.deepEqual(getCardTexts(), [
`$${nbsp}1750.00`,
`$${nbsp}1500.00`,
`2000.00${nbsp}€`,
`$${nbsp}2222.00`,
]);
});
QUnit.test("quick create: keyboard navigation to buttons", async (assert) => {
await makeView({
arch: `
`,
serverData,
groupBy: ["bar"],
resModel: "partner",
type: "kanban",
});
// Open quick create
await createRecord();
assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_quick_create");
// Fill in mandatory field
await editQuickCreateInput("display_name", "aaa");
// Tab -> goes to first primary button
const nameInput = target.querySelector(".o_field_widget[name=display_name] input");
nameInput.focus();
const addButton = target.querySelector(".o_kanban_add");
const event = triggerEvent(nameInput, null, "keydown", { key: "Tab" }, { fast: true });
assert.strictEqual(getNextTabableElement(target), addButton);
assert.ok(!event.defaultPrevented);
addButton.focus();
await nextTick();
assert.hasClass(document.activeElement, "btn btn-primary o_kanban_add");
});
QUnit.test("kanban with isHtmlEmpty method", async (assert) => {
serverData.models.product.fields.description = { string: "Description", type: "html" };
serverData.models.product.records.push(
{
id: 11,
display_name: "product 11",
description: "
hello",
},
{
id: 12,
display_name: "product 12",
description: "
",
}
);
await makeView({
type: "kanban",
resModel: "product",
serverData,
arch: `
`,
domain: [["id", "in", [11, 12]]],
});
assert.containsOnce(
target,
".o_kanban_record:first-child div.test",
"the container is displayed if description have actual content"
);
assert.strictEqual(
target
.querySelector(".o_kanban_record:first-child div.test span.text-info")
.innerText.trim(),
"hello",
"the inner html content is rendered properly"
);
assert.containsNone(
target,
".o_kanban_record:last-child div.test",
"the container is not displayed if description just have formatting tags and no actual content"
);
});
QUnit.test(
"progressbar filter state is kept unchanged when domain is updated (records still in group)",
async (assert) => {
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
// Check that we have 2 columns and check their progressbar's state
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
// Apply an active filter
await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.strictEqual(
target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title")
.innerText,
"Yes"
);
// Add searchdomain to something restricting progressbars' values (records still in filtered group)
await reload(kanban, { domain: [["foo", "=", "yop"]] });
// Check that we have now 1 column only and check its progressbar's state
assert.containsOnce(target, ".o_kanban_group");
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.strictEqual(target.querySelector(".o_column_title").innerText, "Yes");
assert.deepEqual(getTooltips(), ["1 yop"]);
// Undo searchdomain
await reload(kanban, { domain: [] });
// Check that we have 2 columns back and check their progressbar's state
assert.containsN(target, ".o_kanban_group", 2);
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
}
);
QUnit.test(
"progressbar filter state is kept unchanged when domain is updated (emptying group)",
async (assert) => {
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
// Check that we have 2 columns, check their progressbar's state and check records
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getCardTexts(0), ["4blip"]);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
// Apply an active filter
await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.strictEqual(
target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title")
.innerText,
"Yes"
);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["1yop"]);
// Add searchdomain to something restricting progressbars' values + emptying the filtered group
await reload(kanban, { domain: [["foo", "=", "blip"]] });
// Check that we still have 2 columns, check their progressbar's state and check records
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getCardTexts(0), ["4blip"]);
assert.deepEqual(getTooltips(1), ["1 blip"]);
assert.deepEqual(getCardTexts(1), ["2blip"]);
// Undo searchdomain
await reload(kanban, { domain: [] });
// Check that we still have 2 columns and check their progressbar's state
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getCardTexts(0), ["4blip"]);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
}
);
QUnit.test(
"filtered column keeps consistent counters when dropping in a non-matching record",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
// Check that we have 2 columns, check their progressbar's state, and check records
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getCardTexts(0), ["4blip"]);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
// Apply an active filter
await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
assert.hasClass(
target.querySelector(".o_kanban_group:nth-child(2)"),
"o_kanban_group_show"
);
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.strictEqual(
target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title")
.innerText,
"Yes"
);
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show .o_kanban_record");
assert.deepEqual(getCardTexts(1), ["1yop"]);
// Drop in the non-matching record from first column
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group.o_kanban_group_show"
);
// Check that we have 2 columns, check their progressbar's state, and check records
assert.containsN(target, ".o_kanban_group", 2);
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), []);
assert.deepEqual(getCardTexts(0), []);
assert.deepEqual(getTooltips(1), ["1 yop", "2 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["1yop", "4blip"]);
}
);
QUnit.test("filtered column is reloaded when dragging out its last record", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
async mockRPC(route, args) {
assert.step(args.method || route);
},
});
// Check that we have 2 columns, check their progressbar's state, and check records
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 blip"]);
assert.deepEqual(getCardTexts(0), ["4blip"]);
assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
assert.verifySteps([
"get_views",
"web_read_group",
"read_progress_bar",
"web_search_read",
"web_search_read",
]);
// Apply an active filter
await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
assert.hasClass(
target.querySelector(".o_kanban_group:nth-child(2)"),
"o_kanban_group_show"
);
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
assert.strictEqual(
target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title").innerText,
"Yes"
);
assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show .o_kanban_record");
assert.deepEqual(getCardTexts(1), ["1yop"]);
assert.verifySteps(["web_search_read"]);
// Drag out its only record onto the first column
await dragAndDrop(
".o_kanban_group.o_kanban_group_show .o_kanban_record",
".o_kanban_group:first-child"
);
// Check that we have 2 columns, check their progressbar's state, and check records
assert.containsN(target, ".o_kanban_group", 2);
assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
assert.deepEqual(
[...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
["No", "Yes"]
);
assert.deepEqual(getTooltips(0), ["1 yop", "1 blip"]);
assert.deepEqual(getCardTexts(0), ["4blip", "1yop"]);
assert.deepEqual(getTooltips(1), ["1 blip", "1 Other"]);
assert.deepEqual(getCardTexts(1), ["2blip", "3gnap"]);
assert.verifySteps([
"write",
"read_progress_bar",
"read", // read happens is delayed by the ORM batcher
"web_search_read",
"/web/dataset/resequence",
"read",
]);
});
QUnit.test("kanban widget can extract props from attrs", async (assert) => {
class TestWidget extends Component {}
TestWidget.template = xml`
`;
TestWidget.extractProps = ({ attrs }) => {
return {
title: attrs.title,
};
};
viewWidgetRegistry.add("widget_test_option", TestWidget);
await makeView({
arch: `
`,
serverData,
resModel: "partner",
type: "kanban",
});
assert.containsN(target, ".o-test-widget-option", 4);
assert.strictEqual(
target.querySelector(".o-test-widget-option").textContent,
"Widget with Option"
);
});
QUnit.test("action/type attributes on kanban arch, type='object'", async (assert) => {
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
mockRPC(route, args) {
assert.step(args.method);
},
});
patchWithCleanup(kanban.env.services.action, {
doActionButton(params) {
assert.step(`doActionButton type ${params.type} name ${params.name}`);
params.onClose();
},
});
assert.verifySteps(["get_views", "web_search_read"]);
await click(target.querySelector(".o_kanban_record p"));
assert.verifySteps(["doActionButton type object name a1", "web_search_read"]);
});
QUnit.test("action/type attributes on kanban arch, type='action'", async (assert) => {
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
mockRPC(route, args) {
assert.step(args.method);
},
});
patchWithCleanup(kanban.env.services.action, {
doActionButton(params) {
assert.step(`doActionButton type ${params.type} name ${params.name}`);
params.onClose();
},
});
assert.verifySteps(["get_views", "web_search_read"]);
await click(target.querySelector(".o_kanban_record p"));
assert.verifySteps(["doActionButton type action name a1", "web_search_read"]);
});
QUnit.test("Missing t-key is automatically filled with a warning", async (assert) => {
patchWithCleanup(console, { warn: () => assert.step("warning") });
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
assert.verifySteps(["warning"]);
assert.strictEqual(getCard(0).innerText, "123");
});
QUnit.test("Quick created record is rendered after load", async (assert) => {
let def;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["product_id"],
async mockRPC(_route, { method }) {
if (method === "read") {
await def;
}
if (["name_create", "read"].includes(method)) {
assert.step(method);
}
},
});
assert.deepEqual(getCardTexts(0), ["0", "1"]);
assert.verifySteps(["read"]);
def = makeDeferred();
await quickCreateRecord(0);
await editQuickCreateInput("display_name", "Test");
await validateRecord();
def.resolve();
await nextTick();
assert.deepEqual(getCardTexts(0), ["0", "0", "1"]);
assert.verifySteps(["name_create", "read"]);
});
QUnit.test("Allow use of 'editable'/'deletable' in ungrouped kanban", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
EDIT
DELETE
`,
});
assert.deepEqual(getCardTexts(), ["EDITDELETE", "EDITDELETE", "EDITDELETE", "EDITDELETE"]);
});
QUnit.test("folded groups are kept when leaving and coming back", async (assert) => {
serverData.views = {
"partner,false,kanban": `
`,
"partner,false,search": "
`,
"partner,false,search": "
`,
"partner,false,search": "
`,
"partner,false,search": "
`,
groupBy: ["bar", "product_id"],
async mockRPC(route, args) {
assert.step(args.method);
},
});
assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
assert.containsN(target, ".o_kanban_group", 2);
assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
});
QUnit.test("basic rendering with a date groupby with a granularity", async (assert) => {
serverData.models.partner.records[0].date = "2022-06-23";
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["date:day"],
async mockRPC(route, args) {
if (args.method === "web_read_group") {
assert.deepEqual(args.kwargs.fields, ["foo", "date"]);
assert.deepEqual(args.kwargs.groupby, ["date:day"]);
}
assert.step(args.method);
},
});
assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
assert.containsN(target, ".o_kanban_group", 2);
assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 3);
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
});
QUnit.test("quick create record and click outside (no dirty input)", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
createRecord: () => {
assert.step("create record");
},
});
assert.containsNone(target, ".o_kanban_quick_create");
await quickCreateRecord();
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
await click(target, ".o_control_panel");
assert.containsNone(target, ".o_kanban_quick_create");
await quickCreateRecord();
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
await quickCreateRecord(1);
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_quick_create");
await click(target, ".o_kanban_load_more button");
assert.containsNone(target, ".o_kanban_quick_create");
await quickCreateRecord();
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
assert.verifySteps([]);
await click(target, ".o-kanban-button-new");
assert.verifySteps(["create record"]);
assert.containsNone(target, ".o_kanban_quick_create");
});
QUnit.test("quick create record and click outside (with dirty input)", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
createRecord: () => {
assert.step("create record");
},
});
assert.containsNone(target, ".o_kanban_quick_create");
await quickCreateRecord();
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
await editInput(target, ".o_kanban_quick_create [name=display_name] input", "ABC");
assert.strictEqual(
target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
"ABC"
);
await click(target, ".o_control_panel");
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
assert.strictEqual(
target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
"ABC"
);
await quickCreateRecord(1);
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_quick_create");
assert.strictEqual(
target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
""
);
await editInput(target, ".o_kanban_quick_create [name=display_name] input", "ABC");
assert.strictEqual(
target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
"ABC"
);
await click(target, ".o_kanban_load_more button");
assert.containsNone(target, ".o_kanban_quick_create");
await quickCreateRecord();
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
await editInput(target, ".o_kanban_quick_create [name=display_name] input", "ABC");
assert.strictEqual(
target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
"ABC"
);
assert.verifySteps([]);
await click(target, ".o-kanban-button-new");
assert.verifySteps(["create record"]);
assert.containsNone(target, ".o_kanban_quick_create");
});
QUnit.test("quick create record and click on 'Load more'", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
});
assert.containsNone(target, ".o_kanban_quick_create");
await quickCreateRecord(1);
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_quick_create");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
await click(target, ".o_kanban_load_more button");
await nextTick();
assert.containsNone(target, ".o_kanban_quick_create");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
});
QUnit.test("classes on dropdown menu do not end on dropdown main div", async (assert) => {
serverData.models.partner.records.splice(1, 3); // keep one record only
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
assert.isVisible(dropdown);
assert.hasClass(dropdown, "o_dropdown_kanban");
assert.doesNotHaveClass(dropdown, "dropdown-menu");
assert.doesNotHaveClass(dropdown, "o_kanban_card_manage_pane");
await click(dropdown, "button.dropdown-toggle");
assert.containsOnce(dropdown, ".o_kanban_card_manage_pane.dropdown-menu");
});
QUnit.test("classes on toggler do not end on dropdown main div", async (assert) => {
serverData.models.partner.records.splice(1, 3); // keep one record only
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
assert.isVisible(dropdown);
assert.hasClass(dropdown, "o_dropdown_kanban");
assert.doesNotHaveClass(dropdown, "o_kanban_manage_toggle_button");
assert.doesNotHaveClass(dropdown, "o_left");
assert.containsOnce(dropdown, ".o_kanban_manage_toggle_button.o_left");
});
QUnit.test("dropdown is closed on item click", async (assert) => {
serverData.models.partner.records.splice(1, 3); // keep one record only
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
assert.containsNone(target, ".dropdown-menu");
await click(target, ".o_kanban_renderer .dropdown-toggle");
assert.containsOnce(target, ".dropdown-menu");
await click(target, ".o_kanban_renderer .dropdown-menu .dropdown-item");
assert.containsNone(target, ".dropdown-menu");
});
QUnit.test(
"classes on dropdown are on dropdown main div but not the other attributes",
async (assert) => {
serverData.models.partner.records.splice(1, 3); // keep one record only
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
assert.isVisible(dropdown);
assert.strictEqual(
dropdown.className,
"o-dropdown dropdown o_dropdown_kanban o_kanban_manage_button_section my_class o-dropdown--no-caret"
);
assert.notOk(dropdown.hasAttribute("placeholder"));
}
);
QUnit.test("declaring only the menu does not insert a dropdown", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
assert.containsNone(target, ".o_kanban_record .o-dropdown");
});
QUnit.test("support multiple dropdowns", async (assert) => {
assert.expect(4);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
});
assert.containsN(target, ".o_kanban_renderer .dropdown-true", 3);
assert.containsN(target, ".o_kanban_renderer .dropdown", 4);
await toggleRecordDropdown(2);
assert.strictEqual(getCardTexts()[2], "gnap\nTOGGLER TRUE\nMENU TRUE");
await toggleRecordDropdown(3);
assert.strictEqual(getCardTexts()[3], "blip\nTOGGLER FALSE\nMENU FALSE");
});
QUnit.test("can use JSON in kanban template", async (assert) => {
serverData.models.partner.records = [{ id: 1, foo: '["g", "e", "d"]' }];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
});
assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
assert.containsN(target, ".o_kanban_record span", 3);
assert.strictEqual(target.querySelector(".o_kanban_record").innerText, "ged");
});
QUnit.test("Dropdowns in subtemplates", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
TOGGLER
`,
});
assert.containsN(target, ".o_kanban_record .dropdown", 4);
await toggleRecordDropdown(0);
assert.strictEqual(getCardTexts()[0], "yop\nTOGGLER\nMENU");
});
QUnit.test(
"Color '200' (gray) can be used twice (for false value and another value) in progress bar",
async (assert) => {
serverData.models.partner.records.push({ id: 5, bar: true }, { id: 6, bar: false });
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
});
assert.containsN(target, ".o_kanban_group:nth-child(1) .progress-bar", 2);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:nth-child(1) .progress-bar")].map(
(el) => el.dataset.tooltip
),
["1 blip", "1 Other"]
);
assert.containsN(target, ".o_kanban_group:nth-child(2) .progress-bar", 4);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:nth-child(2) .progress-bar")].map(
(el) => el.dataset.tooltip
),
["1 yop", "1 gnap", "1 blip", "1 Other"]
);
assert.deepEqual(getCounters(), ["2", "4"]);
await click(target.querySelector(".o_kanban_group:nth-child(2) .progress-bar"));
assert.deepEqual(getCounters(), ["2", "1"]);
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_record").innerText,
"ABC"
);
assert.containsNone(target, ".o_kanban_group:nth-child(2) .o_kanban_load_more");
await click(
target.querySelector(".o_kanban_group:nth-child(2) .progress-bar:nth-child(2)")
);
assert.deepEqual(getCounters(), ["2", "1"]);
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_record").innerText,
"GHI"
);
assert.containsNone(target, ".o_kanban_group:nth-child(2) .o_kanban_load_more");
await click(
target.querySelector(".o_kanban_group:nth-child(2) .progress-bar:nth-child(4)")
);
assert.deepEqual(getCounters(), ["2", "1"]);
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_record").innerText,
""
);
assert.containsNone(target, ".o_kanban_group:nth-child(2) .o_kanban_load_more");
}
);
QUnit.test("update field on which progress bars are computed", async (assert) => {
serverData.models.partner.records.push({ id: 5, state: "abc", bar: true });
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["bar"],
});
// Initial state: 2 columns, the "Yes" column contains 2 records "abc", 1 "def" and 1 "ghi"
assert.deepEqual(getCounters(), ["1", "4"]);
assert.containsN(getColumn(1), ".o_kanban_record", 4);
assert.containsN(getColumn(1), ".o_kanban_counter_progress .progress-bar", 3);
assert.strictEqual(getProgressBars(1)[0].style.width, "50%"); // abc: 2
assert.strictEqual(getProgressBars(1)[1].style.width, "25%"); // def: 1
assert.strictEqual(getProgressBars(1)[2].style.width, "25%"); // ghi: 1
// Filter on state "abc" => matches 2 records
await click(getProgressBars(1)[0]);
assert.deepEqual(getCounters(), ["1", "2"]);
assert.containsN(getColumn(1), ".o_kanban_record", 2);
assert.containsN(getColumn(1), ".o_kanban_counter_progress .progress-bar", 3);
assert.strictEqual(getProgressBars(1)[0].style.width, "50%"); // abc: 2
assert.strictEqual(getProgressBars(1)[1].style.width, "25%"); // def: 1
assert.strictEqual(getProgressBars(1)[2].style.width, "25%"); // ghi: 1
// Changes the state of the first record of the "Yes" column to "def"
// The updated record should remain visible
await click(getCard(2), ".o_status");
await click(getCard(2), ".o_field_state_selection .dropdown-item:first-child");
assert.deepEqual(getCounters(), ["1", "1"]);
assert.containsN(getColumn(1), ".o_kanban_record", 2);
assert.containsN(getColumn(1), ".o_kanban_counter_progress .progress-bar", 3);
assert.strictEqual(getProgressBars(1)[0].style.width, "25%"); // abc: 1
assert.strictEqual(getProgressBars(1)[1].style.width, "50%"); // def: 2
assert.strictEqual(getProgressBars(1)[2].style.width, "25%"); // ghi: 1
// Filter on state "def" => matches 2 records (including the one we just changed)
await click(getProgressBars(1)[1]);
assert.deepEqual(getCounters(), ["1", "2"]);
assert.containsN(getColumn(1), ".o_kanban_record", 2);
assert.strictEqual(getProgressBars(1)[0].style.width, "25%"); // abc: 1
assert.strictEqual(getProgressBars(1)[1].style.width, "50%"); // def: 2
assert.strictEqual(getProgressBars(1)[2].style.width, "25%"); // ghi: 1
// Filter back on state "abc" => matches only 1 record
await click(getProgressBars(1)[0]);
assert.deepEqual(getCounters(), ["1", "1"]);
assert.containsN(getColumn(1), ".o_kanban_record", 1);
assert.strictEqual(getProgressBars(1)[0].style.width, "25%"); // abc: 1
assert.strictEqual(getProgressBars(1)[1].style.width, "50%"); // def: 2
assert.strictEqual(getProgressBars(1)[2].style.width, "25%"); // ghi: 1
});
QUnit.test("load more button shouldn't be visible when unfiltering column", async (assert) => {
serverData.models.partner.records.push({ id: 5, state: "abc", bar: true });
let def;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["bar"],
mockRPC: async (route, args) => {
const { method } = args;
if (method === "web_search_read") {
await def;
}
},
});
// Initial state: 2 columns, the "No" column contains 1 record, The "Yes" column contains 4 records
assert.deepEqual(getCounters(), ["1", "4"]);
// Filter on state "abc" => matches 2 records
await click(getProgressBars(1)[0]);
// Filtered state: 2 columns, the "No" column contains 1 record, The "Yes" column contains 2 records
assert.deepEqual(getCounters(), ["1", "2"]);
def = makeDeferred();
// UnFiltered the "Yes" column
await click(getProgressBars(1)[0]);
assert.containsNone(
target,
".o_kanban_load_more",
"The load more button should not be visible"
);
def.resolve();
await nextTick();
//Return to initial state
assert.deepEqual(getCounters(), ["1", "4"]);
assert.containsNone(
target,
".o_kanban_load_more",
"The load more button should not be visible"
);
});
QUnit.test("click on the progressBar of a new column", async (assert) => {
serverData.models.partner.records = [];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["product_id"],
domain: [["id", ">", 0]],
mockRPC: (route, args) => {
const { method, kwargs } = args;
if (args.method === "web_search_read") {
assert.step(method);
assert.deepEqual(kwargs.domain, [
"&",
"&",
["id", ">", 0],
["product_id", "=", 6],
"!",
["state", "in", ["abc", "def", "ghi"]],
]);
}
},
});
// Create a new column
await editColumnName("new column");
await validateColumn();
// Crete a record in the new column
await quickCreateRecord();
await editQuickCreateInput("display_name", "new product");
await validateRecord();
assert.containsOnce(target, ".o_kanban_record");
// Togggle the progressBar
await click(getProgressBars(0)[0]);
assert.containsOnce(target, ".o_kanban_record");
assert.verifySteps(["web_search_read"]);
});
QUnit.test(
"keep focus inside control panel when pressing arrowdown and no kanban card",
async (assert) => {
serverData.models.partner.records = [];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
groupBy: ["product_id"],
arch: /* xml */ `
`,
});
// Check that there is a column quick create
assert.containsOnce(target, ".o_column_quick_create");
await editColumnName("new col");
await validateColumn();
// Check that there is only one group and no kanban card
assert.containsOnce(target, ".o_kanban_group");
assert.containsOnce(target, ".o_kanban_group.o_kanban_no_records");
assert.containsNone(target, ".o_kanban_record");
// Check that the focus is on the searchview input
await quickCreateRecord();
assert.containsOnce(target, ".o_kanban_group.o_kanban_no_records");
assert.containsOnce(target, ".o_kanban_quick_create");
assert.containsNone(target, ".o_kanban_record");
// Somehow give the focus in the control panel, i.e. in the search view
// Note that a simple click in the control panel should normally close the quick
// create, so in order to give the focus in the search input, the user would
// normally have to right-click on it then press escape. These are behaviors
// handled through the browser, so we simply call focus directly here.
target.querySelector(".o_searchview_input").focus();
// Make sure no async code will have a side effect on the focused element
await nextTick();
assert.hasClass(document.activeElement, "o_searchview_input");
// Trigger the ArrowDown hotkey
triggerHotkey("ArrowDown");
await nextTick();
assert.hasClass(document.activeElement, "o_searchview_input");
}
);
QUnit.test("no leak of TransactionInProgress (grouped case)", async (assert) => {
let def;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["state"],
async mockRPC(route) {
if (route === "/web/dataset/resequence") {
assert.step("resequence");
await Promise.resolve(def);
}
},
});
def = makeDeferred();
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(1) .o_kanban_record").innerText,
"yop"
);
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_record").innerText,
"blip"
);
assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 2);
assert.verifySteps([]);
// move "yop" from first to second column
await dragAndDrop(
".o_kanban_group:nth-child(1) .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.containsNone(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_record")].map(
(el) => el.innerText
),
["blip", "yop"]
);
assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 2);
assert.verifySteps(["resequence"]);
// try to move "yop" from second to third column
await dragAndDrop(
".o_kanban_group:nth-child(2) .o_kanban_record:nth-child(3)", // move yop
".o_kanban_group:nth-child(3)"
);
assert.containsNone(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_record")].map(
(el) => el.innerText
),
["blip", "yop"]
);
assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 2);
assert.verifySteps([]);
def.resolve();
await nextTick();
// try again to move "yop" from second to third column
await dragAndDrop(
".o_kanban_group:nth-child(2) .o_kanban_record:nth-child(3)", // move yop
".o_kanban_group:nth-child(3)"
);
assert.containsNone(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 3);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:nth-child(3) .o_kanban_record")].map(
(el) => el.innerText
),
["gnap", "blip", "yop"]
);
assert.verifySteps(["resequence"]);
});
QUnit.test("no leak of TransactionInProgress (not grouped case)", async (assert) => {
let def;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
async mockRPC(route) {
if (route === "/web/dataset/resequence") {
assert.step("resequence");
await Promise.resolve(def);
}
},
});
def = makeDeferred();
assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
(el) => el.innerText
),
["blip", "blip", "yop", "gnap"]
);
assert.verifySteps([]);
// move second "blip" to third place
await dragAndDrop(".o_kanban_record:nth-child(2)", ".o_kanban_record:nth-child(3)");
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
(el) => el.innerText
),
["blip", "blip", "yop", "gnap"]
);
assert.verifySteps(["resequence"]);
// try again
await dragAndDrop(".o_kanban_record:nth-child(2)", ".o_kanban_record:nth-child(3)");
-assert.verifySteps([]);
def.resolve();
await nextTick();
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
(el) => el.innerText
),
["blip", "yop", "blip", "gnap"]
);
await dragAndDrop(".o_kanban_record:nth-child(3)", ".o_kanban_record:nth-child(4)");
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
(el) => el.innerText
),
["blip", "yop", "gnap", "blip"]
);
assert.verifySteps(["resequence"]);
});
QUnit.test("dragged record cannot be saved", async (assert) => {
let def;
serverData.models.partner.records = [
{ id: 1, bar: false, state: "abc" },
{ id: 2, bar: true, state: "def", foo: "blip" },
];
serverData.models.partner.onchanges = {
bar() {},
};
const kanban = await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
async mockRPC(route, args) {
if (args.method === "onchange") {
assert.step("onchange");
await Promise.resolve(def);
}
},
});
patchWithCleanup(kanban.env.services.notification, {
add(message, options) {
assert.step("notification");
assert.strictEqual(options.title, "Invalid fields: ");
assert.strictEqual(`${message}`, "");
},
});
def = makeDeferred();
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(1) .o_kanban_record").innerText,
"ABC"
);
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_record").innerText,
"blipDEF"
);
assert.verifySteps([]);
// move "yop" from first to second column
await dragAndDrop(
".o_kanban_group:nth-child(1) .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.containsNone(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_record")].map(
(el) => el.innerText
),
["blipDEF", "ABC"]
);
assert.verifySteps(["onchange"]);
def.resolve();
await nextTick();
assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_record");
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(1) .o_kanban_record").innerText,
"ABC"
);
assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
assert.strictEqual(
target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_record").innerText,
"blipDEF"
);
assert.verifySteps(["notification"]);
});
QUnit.test("renders banner_route", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
async mockRPC(route) {
if (route === "/mybody/isacage") {
assert.step(route);
return { html: `myBanner
` };
}
},
});
assert.verifySteps(["/mybody/isacage"]);
assert.containsOnce(target, ".setmybodyfree");
});
QUnit.test("fieldDependencies support for fields", async (assert) => {
class CustomField extends Component {}
CustomField.fieldDependencies = {
int_field: { type: "integer" },
};
CustomField.template = xml`
`,
serverData,
});
assert.strictEqual(target.querySelector("[name=foo] span").innerText, "10");
});
QUnit.test(
"fieldDependencies support for fields: dependence on a relational field",
async (assert) => {
class CustomField extends Component {}
CustomField.fieldDependencies = {
product_id: { type: "many2one", relation: "product" },
};
CustomField.template = xml`
`,
serverData,
mockRPC: (route, args) => {
assert.step(args.method);
},
});
assert.strictEqual(target.querySelector("[name=foo] span").innerText, "hello");
assert.verifySteps(["get_views", "web_search_read"]);
}
);
QUnit.test("column quick create - title and placeholder", async function (assert) {
assert.expect(2);
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["product_id"],
});
const productFieldName = serverData.models.partner.fields.product_id.string;
assert.strictEqual(
target.querySelector(".o_column_quick_create .o_quick_create_folded").innerText,
productFieldName
);
await click(target, "button.o_kanban_add_column");
assert.strictEqual(
target
.querySelector(
".o_column_quick_create .o_quick_create_unfolded .input-group .o_input"
)
.getAttribute("placeholder"),
productFieldName + "..."
);
});
QUnit.test("fold a column and drag record on it should not unfold it", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["product_id"],
});
assert.containsN(target, ".o_kanban_group", 2);
assert.containsN(getColumn(0), ".o_kanban_record", 2);
assert.containsN(getColumn(1), ".o_kanban_record", 2);
const clickColumnAction = await toggleColumnActions(1);
await clickColumnAction("Fold");
assert.containsN(getColumn(0), ".o_kanban_record", 2);
assert.hasClass(getColumn(1), "o_column_folded");
assert.strictEqual(getColumn(1).innerText, "xmo (2)");
await dragAndDrop(".o_kanban_group:first-child .o_kanban_record", ".o_column_folded");
assert.containsN(getColumn(0), ".o_kanban_record", 1);
assert.hasClass(getColumn(1), "o_column_folded");
assert.strictEqual(getColumn(1).innerText, "xmo (3)");
});
QUnit.test("drag record on initially folded column should not unfold it", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["product_id"],
async mockRPC(route, args, performRPC) {
if (args.method === "web_read_group") {
const result = await performRPC(route, args);
result.groups[1].__fold = true;
return result;
}
},
});
assert.containsN(getColumn(0), ".o_kanban_record", 2);
assert.hasClass(getColumn(1), "o_column_folded");
assert.strictEqual(getColumn(1).innerText, "xmo (2)");
await dragAndDrop(".o_kanban_group:first-child .o_kanban_record", ".o_column_folded");
assert.containsN(getColumn(0), ".o_kanban_record", 1);
assert.hasClass(getColumn(1), "o_column_folded");
assert.strictEqual(getColumn(1).innerText, "xmo (3)");
});
QUnit.test("drag record to folded column, with progressbars", async (assert) => {
serverData.models.partner.records[0].bar = false;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["bar"],
});
assert.containsN(target, ".o_kanban_group", 2);
assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
assert.deepEqual(
getProgressBars(0).map((pb) => pb.style.width),
["50%", "50%"]
);
assert.deepEqual(
getProgressBars(1).map((pb) => pb.style.width),
["50%", "50%"]
);
assert.deepEqual(getCounters(), ["6", "26"]);
const clickColumnAction = await toggleColumnActions(1);
await clickColumnAction("Fold");
assert.containsN(getColumn(0), ".o_kanban_record", 2);
assert.hasClass(getColumn(1), "o_column_folded");
assert.strictEqual(getColumn(1).innerText, "Yes (2)");
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.containsOnce(getColumn(0), ".o_kanban_record");
assert.strictEqual(getColumn(1).innerText, "Yes (3)");
assert.deepEqual(
getProgressBars(0).map((pb) => pb.style.width),
["100%"]
);
assert.deepEqual(getCounters(), ["-4"]);
});
QUnit.test("quick create record in grouped kanban in a form view dialog", async (assert) => {
serverData.models.partner.fields.foo.default = "ABC";
serverData.views = {
"partner,false,form": `
`,
};
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["product_id"],
async mockRPC(route, { method }) {
assert.step(method || route);
if (method === "name_create") {
throw new RPCError();
}
},
});
assert.containsN(
target,
".o_kanban_group:first-child .o_kanban_record",
2,
"first column should contain two records"
);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:first-child .o_kanban_record")].map(
(el) => el.innerText
),
["yop", "gnap"]
);
assert.containsNone(target, ".modal");
// click on 'Create', fill the quick create and validate
await createRecord();
await editQuickCreateInput("display_name", "new partner");
await validateRecord();
assert.containsOnce(target, ".modal");
await clickSave(target.querySelector(".modal"));
assert.containsN(
target,
".o_kanban_group:first-child .o_kanban_record",
3,
"first column should contain three records"
);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_group:first-child .o_kanban_record")].map(
(el) => el.innerText
),
["ABC", "yop", "gnap"]
);
assert.verifySteps([
"get_views",
"web_read_group", // initial read_group
"web_search_read", // initial search_read (first column)
"web_search_read", // initial search_read (second column)
"onchange", // quick create
"name_create", // should perform a name_create to create the record
"get_views", // load views for form view dialog
"onchange", // load of a virtual record in form view dialog
"create", // save virtual record
"read", // read the created record to get foo value
"onchange", // reopen the quick create automatically
]);
});
QUnit.test("Move new record with onchanges and different active fields", async (assert) => {
serverData.models.partner.fields.foo.default = "abc";
serverData.models.partner.onchanges = {
bar(obj) {
obj.foo = [...obj.foo].reverse().join("");
},
};
serverData.views["partner,some_view_ref,form"] = /* xml */ `
`;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["bar"],
});
assert.deepEqual(getCardTexts(0), ["blip-4"]);
assert.deepEqual(getCardTexts(1), ["yop10", "blip9", "gnap17"]);
await quickCreateRecord(0);
await editQuickCreateInput("int_field", "13");
await selectDropdownItem(target, "category_ids", "gold");
await validateRecord();
assert.deepEqual(getCardTexts(0), ["abc13", "blip-4"]);
assert.deepEqual(getCardTexts(1), ["yop10", "blip9", "gnap17"]);
await dragAndDrop(".o_kanban_record", ".o_kanban_group:nth-child(2)");
assert.deepEqual(getCardTexts(0), ["blip-4"]);
assert.deepEqual(getCardTexts(1), ["yop10", "blip9", "gnap17", "cba13"]);
});
QUnit.test("no sample data when all groups are folded then one is unfolded", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["product_id"],
async mockRPC(route, args, performRPC) {
if (args.method === "web_read_group") {
const result = await performRPC(route, args);
for (const group of result.groups) {
group.__fold = true;
}
return result;
}
},
});
assert.containsN(target, ".o_column_folded", 2);
const groupHandle = target.querySelector(".o_kanban_group");
await click(groupHandle);
assert.containsOnce(target, ".o_column_folded");
assert.containsN(target, ".o_kanban_record", 2);
assert.containsNone(target, "o_view_sample_data");
});
QUnit.test(
"no content helper when all groups are folded but there are (unloaded) records",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["product_id"],
async mockRPC(route, args, performRPC) {
if (args.method === "web_read_group") {
const result = await performRPC(route, args);
for (const group of result.groups) {
group.__fold = true;
}
return result;
}
},
});
assert.containsN(target, ".o_column_folded", 2);
assert.strictEqual(
getNodesTextContent(target.querySelectorAll("span.o_column_title")).join(" "),
"hello (2) xmo (2)"
);
assert.containsNone(target, ".o_nocontent_help");
}
);
QUnit.test("Move multiple records in different columns simultaneously", async (assert) => {
let def;
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["state"],
async mockRPC(_route, { method }) {
if (method === "read") {
await def;
}
},
});
def = makeDeferred();
assert.deepEqual(getCardTexts(), ["1", "2", "3", "4"]);
// Move 3 at end of 1st column
await dragAndDrop(".o_kanban_group:last-of-type .o_kanban_record", ".o_kanban_group");
assert.deepEqual(getCardTexts(), ["1", "3", "2", "4"]);
// Move 4 at end of 1st column
await dragAndDrop(".o_kanban_group:last-of-type .o_kanban_record", ".o_kanban_group");
assert.deepEqual(getCardTexts(), ["1", "3", "4", "2"]);
def.resolve();
await nextTick();
assert.deepEqual(getCardTexts(), ["1", "3", "4", "2"]);
});
QUnit.test("group key in foreach cannot be a duplicate", async function (assert) {
serverData.models.product.records = [
{
id: 1,
name: "Product with id 1",
},
];
serverData.models.partner.records = [
{
id: 1,
name: "Partner 1",
product_id: 1,
},
];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["product_id"],
async mockRPC(route, args, performRPC) {
if (args.method === "web_read_group") {
const result = await performRPC(route, args);
result.groups = [
...result.groups,
{
// Add an empty and valueless group, will result in foreach key group_key_0
__domain: [["product_id", "=", null]],
__fold: false,
},
{
// Add an empty and valueless group, will result in foreach key group_key_1
__domain: [["product_id", "=", null]],
__fold: false,
},
];
result.length = 2;
return result;
}
},
});
assert.strictEqual(target.querySelectorAll(".o_kanban_group").length, 3);
assert.strictEqual(target.querySelectorAll(".o_kanban_record").length, 1);
});
QUnit.test("drag & drop: content scrolls when reaching the edges", async (assert) => {
const nextAnimationFrame = async (timeDelta) => {
timeStamp += timeDelta;
animationFrameDef.resolve();
animationFrameDef = makeDeferred();
await Promise.resolve();
};
let animationFrameDef = makeDeferred();
let timeStamp = 0;
patchWithCleanup(browser, {
async requestAnimationFrame(handler) {
await animationFrameDef;
handler(timeStamp);
},
performance: { now: () => timeStamp },
});
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["state"],
});
const content = target.querySelector(".o_content");
content.setAttribute("style", "max-width:600px;overflow:auto;");
assert.strictEqual(content.scrollLeft, 0);
assert.strictEqual(content.getBoundingClientRect().width, 600);
assert.containsNone(target, ".o_kanban_record.o_dragged");
// Drag first record of first group to the right
await drag(".o_kanban_record", ".o_kanban_group:nth-child(3) .o_kanban_record");
assert.strictEqual(content.scrollLeft, 0);
// next frame (normal time delta)
await nextAnimationFrame(16);
// Default kanban speed is 20px per tick
assert.strictEqual(content.scrollLeft, 20);
assert.containsOnce(target, ".o_kanban_record.o_dragged");
// next frame (time delta x20)
await nextAnimationFrame(16 * 20);
// Should be at the end of the content
assert.strictEqual(content.clientWidth + content.scrollLeft, content.scrollWidth);
// Cancel drag: press "Escape"
triggerHotkey("Escape");
await nextTick();
assert.containsNone(target, ".o_kanban_record.o_dragged");
// Drag first record of last group to the left
await drag(".o_kanban_group:nth-child(3) .o_kanban_record", ".o_kanban_record");
// next frame (normal time delta)
await nextAnimationFrame(16);
assert.containsOnce(target, ".o_kanban_record.o_dragged");
// next frame (time delta x20)
await nextAnimationFrame(16 * 20);
assert.strictEqual(content.scrollLeft, 0);
// Cancel drag: click outside
await triggerEvent(content, ".o_kanban_renderer", "mousedown");
assert.containsNone(target, ".o_kanban_record.o_dragged");
});
QUnit.test("draggable area contains overflowing visible elements", async (assert) => {
const nextAnimationFrame = async (timeDelta) => {
timeStamp += timeDelta;
animationFrameDef.resolve();
animationFrameDef = makeDeferred();
await Promise.resolve();
};
let animationFrameDef = makeDeferred();
let timeStamp = 0;
patchWithCleanup(browser, {
async requestAnimationFrame(handler) {
await animationFrameDef;
handler(timeStamp);
},
performance: { now: () => timeStamp },
});
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: /* xml */ `
`,
groupBy: ["state"],
});
const controller = target.querySelector(".o_view_controller");
controller.setAttribute("style", "max-width:900px; min-width: 900px;");
const content = target.querySelector(".o_content");
content.setAttribute("style", "max-width:600px; min-width: 600px;");
const renderer = target.querySelector(".o_kanban_renderer");
renderer.setAttribute("style", "overflow: visible;");
for (const kanbanGroup of target.querySelectorAll(".o_kanban_group")) {
kanbanGroup.setAttribute("style", "max-width: 300px; min-width: 300px; padding: 0;");
}
assert.strictEqual(content.scrollLeft, 0);
assert.strictEqual(controller.getBoundingClientRect().width, 900);
assert.strictEqual(content.getBoundingClientRect().width, 600);
assert.strictEqual(renderer.getBoundingClientRect().width, 600);
assert.strictEqual(renderer.scrollWidth, 900);
assert.containsNone(target, ".o_kanban_record.o_dragged");
// Drag first record of first group to the right
await drag(".o_kanban_record", ".o_kanban_group:nth-child(3) .o_kanban_record");
assert.strictEqual(content.scrollLeft, 0);
// Next frame (normal time delta)
await nextAnimationFrame(16);
// Verify that there is no scrolling
assert.strictEqual(content.scrollLeft, 0);
assert.containsOnce(target, ".o_kanban_record.o_dragged");
const dragged = target.querySelector(".o_kanban_record.o_dragged");
const sibling = target.querySelector(".o_kanban_group:nth-child(3) .o_kanban_record");
// Ensure that no rotation is applied on the element
dragged.style.transform = "none";
// Verify that the dragged element is allowed to go inside the
// overflowing part of the draggable container.
assert.strictEqual(
dragged.getBoundingClientRect().right,
900 + target.getBoundingClientRect().x
);
assert.strictEqual(
sibling.getBoundingClientRect().right,
900 + target.getBoundingClientRect().x
);
// Cancel drag: press "Escape"
triggerHotkey("Escape");
await nextTick();
assert.containsNone(target, ".o_kanban_record.o_dragged");
});
QUnit.test("attribute default_order", async function (assert) {
serverData.models.custom_model = {
fields: {
int: { type: "integer", string: "Int" },
},
records: [
{ id: 1, int: 1 },
{ id: 2, int: 3 },
{ id: 3, int: 2 },
],
};
await makeView({
type: "kanban",
resModel: "custom_model",
serverData,
arch: `
`,
});
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
(el) => el.innerText
),
["1", "2", "3"]
);
});
QUnit.test(
"drag & drop records grouped by m2o with m2o displayed in records",
async (assert) => {
const prom = makeDeferred();
const readIds = [[2], [1, 3, 2]];
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["product_id"],
mockRPC: async (route, args) => {
assert.step(args.method || route);
if (args.method === "read") {
assert.deepEqual(args.args[0], readIds.shift());
await prom;
}
},
});
assert.verifySteps([
"get_views",
"web_read_group",
"web_search_read",
"web_search_read",
]);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record")].map((el) => el.innerText),
["hello", "hello", "xmo", "xmo"]
);
await dragAndDrop(
".o_kanban_group:nth-child(2) .o_kanban_record",
".o_kanban_group:first-child"
);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record")].map((el) => el.innerText),
["hello", "hello", "hello", "xmo"]
);
prom.resolve();
await nextTick();
assert.verifySteps(["write", "read", "/web/dataset/resequence", "read"]);
assert.deepEqual(
[...target.querySelectorAll(".o_kanban_record")].map((el) => el.innerText),
["hello", "hello", "hello", "xmo"]
);
}
);
QUnit.test("rerenders only once after resequencing records", async (assert) => {
// actually it's not once, but twice, because we must render directly after
// the drag&drop s.t. the dropped record remains where it has been dropped,
// and once again after the reload
class MyField extends Component {
setup() {
this.renderCount = 0;
owl.onWillRender(() => this.renderCount++);
}
}
MyField.template = xml`
`,
groupBy: ["product_id"],
});
assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_kanban_record")), [
"yop1",
"gnap1",
"blip1",
"blip1",
]);
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_kanban_record")), [
"gnap3",
"blip3",
"blip3",
"yop1", // new instance
]);
await dragAndDrop(
".o_kanban_group:first-child .o_kanban_record",
".o_kanban_group:nth-child(2)"
);
assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_kanban_record")), [
"blip5",
"blip5",
"yop3",
"gnap1", // new instance
]);
});
QUnit.test("sample server: _mockWebReadGroup API", async (assert) => {
serverData.models.partner.records = [];
patchWithCleanup(SampleServer.prototype, {
async _mockWebReadGroup() {
const result = await this._super(...arguments);
const { "date:month": dateValue } = result.groups[0];
assert.strictEqual(dateValue, "December 2022");
return result;
},
});
await makeView({
arch: `
`,
serverData,
groupBy: ["date:month"],
resModel: "partner",
type: "kanban",
noContentHelp: "No content helper",
mockRPC(_, args) {
if (args.method === "web_read_group") {
return {
groups: [
{
date_count: 0,
state: false,
"date:month": "December 2022",
__range: {
"date:month": {
from: "2022-12-01",
to: "2023-01-01",
},
},
__domain: [
["date", ">=", "2022-12-01"],
["date", "<", "2023-01-01"],
],
},
],
length: 1,
};
}
},
});
assert.containsOnce(target, ".o_kanban_view .o_view_sample_data");
assert.containsOnce(target, ".o_kanban_group");
assert.strictEqual(
target.querySelector(".o_kanban_group .o_column_title").textContent,
"December 2022"
);
assert.containsN(target, ".o_kanban_group .o_kanban_record", 16);
});
QUnit.test("Keep scrollTop when loading records with load more", async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["bar"],
limit: 1,
});
target.querySelector(".o_kanban_renderer").style.overflow = "scroll";
target.querySelector(".o_kanban_renderer").style.height = "500px";
const loadMoreButton = target.querySelector(".o_kanban_load_more button");
loadMoreButton.scrollIntoView();
const previousScrollTop = target.querySelector(".o_kanban_renderer").scrollTop;
await click(loadMoreButton);
assert.strictEqual(
previousScrollTop,
target.querySelector(".o_kanban_renderer").scrollTop,
"Should have the same scrollTop value"
);
assert.notEqual(previousScrollTop, 0, "Should not have the scrollTop value at 0");
});
QUnit.test(
"Kanban: no reset of the groupby when a non-empty column is deleted",
async (assert) => {
let dialogProps;
patchDialog((_cls, props) => {
dialogProps = props;
});
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
searchViewArch: `
`,
});
await toggleFilterMenu(target);
// select the groupby:category_ids filter
await click(target.querySelector(".o_group_by_menu .dropdown-toggle"));
await click(target.querySelector(".o_group_by_menu .o_menu_item"));
// check the initial rendering
assert.containsN(target, ".o_kanban_group", 3, "should have three columns");
// check availability of delete action in kanban header's config dropdown
await toggleColumnActions(2);
assert.containsOnce(
getColumn(2),
".o_column_delete",
"should be able to delete the column"
);
// delete second column (first cancel the confirm request, then confirm)
let clickColumnAction = await toggleColumnActions(1);
await clickColumnAction("Delete");
dialogProps.cancel();
await nextTick();
assert.strictEqual(
getColumn(1).querySelector(".o_column_title").innerText,
"gold",
'column [6, "gold"] should still be there'
);
dialogProps.confirm();
await nextTick();
clickColumnAction = await toggleColumnActions(1);
await clickColumnAction("Delete");
assert.strictEqual(
getColumn(1).querySelector(".o_column_title").innerText,
"silver",
'last column should now be [7, "silver"]'
);
assert.containsN(target, ".o_kanban_group", 2, "should now have two columns");
assert.strictEqual(
getColumn(0).querySelector(".o_column_title").innerText,
"None (3)",
"first column should have no id (Undefined column)"
);
}
);
QUnit.test("kanbans with basic and custom compiler, same arch", async (assert) => {
// In this test, the exact same arch will be rendered by 2 different kanban renderers:
// once with the basic one, and once with a custom renderer having a custom compiler. The
// purpose of the test is to ensure that the template is compiled twice, once by each
// compiler, even though the arch is the same.
class MyKanbanCompiler extends KanbanCompiler {
setup() {
super.setup();
this.compilers.push({ selector: "div", fn: this.compileDiv });
}
compileDiv(node, params) {
const compiledNode = this.compileGenericNode(node, params);
compiledNode.setAttribute("class", "my_kanban_compiler");
return compiledNode;
}
}
class MyKanbanRecord extends KanbanRecord {}
MyKanbanRecord.Compiler = MyKanbanCompiler;
class MyKanbanRenderer extends KanbanRenderer {}
MyKanbanRenderer.components = {
...KanbanRenderer.components,
KanbanRecord: MyKanbanRecord,
};
viewRegistry.add("my_kanban", {
...kanbanView,
Renderer: MyKanbanRenderer,
});
serverData.models.partner.fields.one2many = {
type: "one2many",
name: "o2m",
relation: "partner",
};
serverData.models.partner.records[0].one2many = [1];
serverData.views = {
"partner,false,form": ``,
"partner,false,search": `
`,
};
const webClient = await createWebClient({ serverData });
await doAction(webClient, {
res_model: "partner",
type: "ir.actions.act_window",
views: [
[false, "kanban"],
[false, "form"],
],
});
// main kanban, custom view
assert.containsOnce(target, ".o_kanban_view");
assert.containsN(target, ".my_kanban_compiler", 4);
// switch to form
await click(target.querySelector(".o_kanban_record"));
assert.containsOnce(target, ".o_form_view");
assert.containsOnce(target, ".o_form_view .o_field_widget[name=one2many]");
// x2many kanban, basic renderer
assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
assert.containsNone(target, ".my_kanban_compiler");
});
QUnit.test(
"can quick create a column when pressing enter when input is focused",
async (assert) => {
await makeView({
type: "kanban",
resModel: "partner",
serverData,
arch: `
`,
groupBy: ["product_id"],
});
assert.containsN(target, ".o_kanban_group", 2);
await createColumn();
// We don't use the editInput helper as it would trigger a change event automatically.
// We need to wait for the enter key to trigger the event.
const input = target.querySelector(".o_column_quick_create input");
input.value = "New Column";
await triggerEvent(input, null, "input");
await triggerEvent(target, ".o_quick_create_unfolded input", "keydown", {
key: "Enter",
});
assert.containsN(target, ".o_kanban_group", 3);
}
);
});