[FIX] mail: fix read more/less span insertion

task-2248307

closes odoo/odoo#55163

X-original-commit: a8ea9bc98d114eef056babc0d2639eaddbcf3778
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Xavier Dubuc
2020-07-29 15:39:31 +00:00
parent 42fc0f4910
commit 69d89218f9
3 changed files with 173 additions and 2 deletions
@@ -104,6 +104,12 @@ class Message extends Component {
_constructor() {}
mounted() {
// Remove all readmore before if any before reinsert them with _insertReadMoreLess.
// This is needed because _insertReadMoreLess is working with direct DOM mutations
// which are not sync with Owl.
for (const el of [...this._contentRef.el.querySelectorAll(':scope .o_Message_readMoreLess')]) {
el.remove();
}
this._insertReadMoreLess($(this._contentRef.el));
this._update();
}
@@ -309,6 +315,8 @@ class Message extends Component {
* Those text nodes need to be wrapped in a span (toggle functionality).
* All consecutive elements are joined in one 'read more/read less'.
*
* FIXME This method should be rewritten (task-2308951)
*
* @private
* @param {jQuery} $element
*/
@@ -362,7 +370,7 @@ class Message extends Component {
for (const group of groups) {
// Insert link just before the first node
const $readMoreLess = $('<a>', {
class: 'o_Message_readMore',
class: 'o_Message_readMoreLess',
href: '#',
text: READ_MORE,
}).insertBefore(group[0]);
@@ -122,7 +122,7 @@
justify-content: center;
}
.o_Message_readMore {
.o_Message_readMoreLess {
display: block;
}
@@ -426,6 +426,169 @@ QUnit.test('chatter should become enabled when creation done', async function (a
);
});
QUnit.test('read more/less links are not duplicated when switching from read to edit mode', async function (assert) {
assert.expect(5);
this.data['mail.message'].records = [{
author_id: [100, "Someone"],
// "data-o-mail-quote" added by server is intended to be compacted in read more/less blocks
body: `
<div>
Dear Joel Willis,<br>
Thank you for your enquiry.<br>
If you have any questions, please let us know.
<br><br>
Thank you,<br>
<span data-o-mail-quote="1">-- <br data-o-mail-quote="1">
System
</span>
</div>
`,
id: 1000,
model: 'res.partner',
res_id: 1,
}];
this.data['res.partner'].records = [{
display_name: "first partner",
id: 1,
}];
await this.createView({
data: this.data,
hasView: true,
// View params
View: FormView,
model: 'res.partner',
res_id: 1,
arch: `
<form string="Partners">
<sheet>
<field name="name"/>
</sheet>
<div class="oe_chatter">
<field name="message_ids"/>
</div>
</form>
`,
});
assert.containsOnce(
document.body,
'.o_Chatter',
"there should be a chatter"
);
assert.containsOnce(
document.body,
'.o_Message',
"there should be a message"
);
assert.containsOnce(
document.body,
'.o_Message_readMoreLess',
"there should be only one read more"
);
await afterNextRender(() => {
document.querySelector('.o_form_button_edit').click();
});
assert.containsOnce(
document.body,
'.o_Message_readMoreLess',
"there should still be only one read more after switching to edit mode"
);
await afterNextRender(() => {
document.querySelector('.o_form_button_cancel').click();
});
assert.containsOnce(
document.body,
'.o_Message_readMoreLess',
"there should still be only one read more after switching back to read mode"
);
});
QUnit.test('read more links becomes read less after being clicked', async function (assert) {
assert.expect(6);
this.data['mail.message'].records = [{
author_id: [100, "Someone"],
// "data-o-mail-quote" added by server is intended to be compacted in read more/less blocks
body: `
<div>
Dear Joel Willis,<br>
Thank you for your enquiry.<br>
If you have any questions, please let us know.
<br><br>
Thank you,<br>
<span data-o-mail-quote="1">-- <br data-o-mail-quote="1">
System
</span>
</div>
`,
id: 1000,
model: 'res.partner',
res_id: 1,
}];
this.data['res.partner'].records = [{
display_name: "first partner",
id: 1,
}];
await this.createView({
data: this.data,
hasView: true,
// View params
View: FormView,
model: 'res.partner',
res_id: 1,
arch: `
<form string="Partners">
<sheet>
<field name="name"/>
</sheet>
<div class="oe_chatter">
<field name="message_ids"/>
</div>
</form>
`,
});
assert.containsOnce(
document.body,
'.o_Chatter',
"there should be a chatter"
);
assert.containsOnce(
document.body,
'.o_Message',
"there should be a message"
);
assert.containsOnce(
document.body,
'.o_Message_readMoreLess',
"there should be a read more"
);
assert.strictEqual(
document.querySelector('.o_Message_readMoreLess').textContent,
'read more',
"read more/less link should contain 'read more' as text"
);
await afterNextRender(() => {
document.querySelector('.o_form_button_edit').click();
});
assert.strictEqual(
document.querySelector('.o_Message_readMoreLess').textContent,
'read more',
"read more/less link should contain 'read more' as text"
);
await afterNextRender(() => {
document.querySelector('.o_Message_readMoreLess').click();
});
assert.strictEqual(
document.querySelector('.o_Message_readMoreLess').textContent,
'read less',
"read more/less link should contain 'read less' as text after it has been clicked"
);
});
QUnit.test('Form view not scrolled when switching record', async function (assert) {
assert.expect(6);