From fa64a23f1c83d2f5a96f63fcc4f9f1e4aa7630a4 Mon Sep 17 00:00:00 2001 From: "Didier (did)" Date: Thu, 28 Sep 2023 12:49:12 +0200 Subject: [PATCH] [FIX] mail: load gif category properly Before this PR the showFavorite status was not properly updated after clicking on "back". This cause the categories to use the favorite route when scrolling instead of the category route. Task-3504566 closes odoo/odoo#136932 Signed-off-by: Didier Debondt (did) --- .../discuss/gif_picker/common/gif_picker.js | 5 + .../discuss/gif_picker/common/gif_picker.xml | 1 + .../tests/gif_picker/gif_picker_tests.js | 110 +++++++++++------- 3 files changed, 73 insertions(+), 43 deletions(-) diff --git a/addons/mail/static/src/discuss/gif_picker/common/gif_picker.js b/addons/mail/static/src/discuss/gif_picker/common/gif_picker.js index 8ecac012240..005971add84 100644 --- a/addons/mail/static/src/discuss/gif_picker/common/gif_picker.js +++ b/addons/mail/static/src/discuss/gif_picker/common/gif_picker.js @@ -126,6 +126,10 @@ export class GifPicker extends Component { ); } + get style() { + return ""; + } + get searchTerm() { return this.props.state ? this.props.state.searchTerm : this.state.searchTerm; } @@ -157,6 +161,7 @@ export class GifPicker extends Component { } openCategories() { + this.showFavorite = false; this.state.showCategories = true; this.searchTerm = ""; this.clear(); diff --git a/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml b/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml index 7466e861dbc..6d86111d005 100644 --- a/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml +++ b/addons/mail/static/src/discuss/gif_picker/common/gif_picker.xml @@ -93,6 +93,7 @@ t-on-click="() => this.onClickGif(gif_value)" loading="lazy" alt="GIF" + t-att-style="style" /> diff --git a/addons/mail/static/tests/gif_picker/gif_picker_tests.js b/addons/mail/static/tests/gif_picker/gif_picker_tests.js index 5cd0078cb74..d358118c448 100644 --- a/addons/mail/static/tests/gif_picker/gif_picker_tests.js +++ b/addons/mail/static/tests/gif_picker/gif_picker_tests.js @@ -4,53 +4,43 @@ import { startServer } from "@bus/../tests/helpers/mock_python_environment"; import { patchUiSize, SIZES } from "@mail/../tests/helpers/patch_ui_size"; import { start } from "@mail/../tests/helpers/test_utils"; +import { GifPicker } from "@mail/discuss/gif_picker/common/gif_picker"; -import { click, contains, insertText } from "@web/../tests/utils"; +import { click, contains, insertText, scroll } from "@web/../tests/utils"; +import { patchWithCleanup } from "@web/../tests/helpers/utils"; + +let gifId = 0; +const gifFactory = (count = 1, options = {}) => { + const gifs = []; + for (let i = 0; i < count; i++) { + gifs.push({ + id: gifId, + title: "", + media_formats: { + tinygif: { + url: options.url || "https://media.tenor.com/np49Y1vrJO8AAAAM/crying-cry.gif", + duration: 0, + preview: "", + dims: [220, 190], + size: 1007885, + }, + }, + created: 1654414453.782169, + content_description: "Cry GIF", + itemurl: "https://tenor.com/view/cry-gif-25866484", + url: "https://tenor.com/bUHdw.gif", + tags: ["cry"], + flags: [], + hasaudio: false, + }); + gifId++; + } + return gifs; +}; const rpc = { search: { - results: [ - { - id: "16925131306449801434", - title: "", - media_formats: { - tinygif: { - url: "https://media.tenor.com/6uIlQAHIkNoAAAAM/cry.gif", - duration: 0, - preview: "", - dims: [220, 190], - size: 1007885, - }, - }, - created: 1654414453.782169, - content_description: "Cry GIF", - itemurl: "https://tenor.com/view/cry-gif-25866484", - url: "https://tenor.com/bUHdw.gif", - tags: ["cry"], - flags: [], - hasaudio: false, - }, - { - id: "11429640401266091247", - title: "", - media_formats: { - tinygif: { - url: "https://media.tenor.com/np49Y1vrJO8AAAAM/crying-cry.gif", - duration: 0, - preview: "", - dims: [220, 220], - size: 145353, - }, - }, - created: 1612455937.558013, - content_description: "Crying Crying Face GIF", - itemurl: "https://tenor.com/view/crying-cry-crying-face-gif-20235014", - url: "https://tenor.com/bw4dm.gif", - tags: ["crying", "cry", "Crying Face"], - flags: [], - hasaudio: false, - }, - ], + results: gifFactory(2), next: "CAgQpIGj_8WN_gIaHgoKAD-_xMQ20dMU_xIQ1MVHUnSAQxC98Y6VAAAAADAI", }, categories: { @@ -226,3 +216,37 @@ QUnit.test("Searching for a GIF with a failling RPC should display an error", as await insertText("input[placeholder='Search for a GIF']", "search"); await contains(".o-discuss-GifPicker-error"); }); + +QUnit.test( + "Scrolling at the bottom should trigger the search to load more gif, even after visiting the favorite.", + async () => { + patchWithCleanup(GifPicker.prototype, { + get style() { + return "width: 200px;height: 200px;background: #000"; + }, + }); + + const pyEnv = await startServer(); + const channelId = pyEnv["discuss.channel"].create({ name: "" }); + const { openDiscuss } = await start({ + mockRPC(route) { + if (route === "/discuss/gif/search") { + const _rpc = rpc.search; + _rpc.results = gifFactory(4); + return _rpc; + } + if (route === "/discuss/gif/categories") { + return rpc.categories; + } + }, + }); + await openDiscuss(channelId); + await click("button[aria-label='GIFs']"); + await click(".o-discuss-GifPicker div[aria-label='list-item']", { text: "Favorites" }); + await click("i[aria-label='back']"); + await click("img[data-src='https://media.tenor.com/6uIlQAHIkNoAAAAM/cry.gif']"); + await contains(".o-discuss-Gif", { count: 4 }); + await scroll(".o-discuss-GifPicker-content", "bottom"); + await contains(".o-discuss-Gif", { count: 8 }); + } +);