[FIX] test_website, web_editor: adapt tests to new dialog

See merge commit for more information.

task-2687506
This commit is contained in:
Younn Olivier
2022-06-24 10:28:06 +02:00
committed by qsm-odoo
parent 8599076859
commit 9df44ecade
6 changed files with 71 additions and 82 deletions
@@ -122,9 +122,6 @@
<field name="key">test_website.test_image_progress</field>
<field name="arch" type="xml">
<t t-call="website.layout">
<t t-set="head">
<script defer="defer" type="text/javascript" src="/test_website/static/src/js/mock_image_widget.js"></script>
</t>
<div id="wrap" class="oe_structure oe_empty"/>
</t>
</field>
@@ -1,41 +0,0 @@
odoo.define('test_website.mock_image_widgets', function (require) {
'use strict';
const widgetsMedia = require('wysiwyg.widgets.media');
widgetsMedia.FileWidget.include({
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
_onFileInputChange: function () {
function getFileFromB64(fileData) {
const binary = atob(fileData[2]);
let len = binary.length;
const arr = new Uint8Array(len);
while (len--) {
arr[len] = binary.charCodeAt(len);
}
return new File([arr], fileData[1], {type: fileData[0]});
}
let files = [
getFileFromB64(['image/png', 'image.png', "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAApElEQVR42u3RAQ0AAAjDMO5fNCCDkC5z0HTVrisFCBABASIgQAQEiIAAAQJEQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAQECBAgAgJEQIAIyPcGFY7HnV2aPXoAAAAASUVORK5CYII="]),
getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
getFileFromB64(['image/vnd.microsoft.icon', 'icon.ico', "AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAA=="]),
getFileFromB64(['image/webp', 'image.webp', "UklGRhwAAABXRUJQVlA4TBAAAAAvE8AEAAfQhuh//wMR0f8A"]),
];
if (!this.options.multiImages) {
if (this.media.classList.contains('o_mock_show_error')) {
files = [files[2]];
} else {
files = [files[0]];
}
}
this.$fileInput = [{'files': files}];
return this._super(...arguments);
}
});
});
@@ -3,34 +3,76 @@ odoo.define('test_website.image_upload_progress', function (require) {
const tour = require('web_tour.tour');
const { FileSelectorControlPanel } = require('@web_editor/components/media_dialog/file_selector');
const { patch, unpatch } = require('web.utils');
let patchWithError = false;
const patchMediaDialog = () => patch(FileSelectorControlPanel.prototype, 'test_website.mock_image_widgets', {
async onChangeFileInput() {
const getFileFromB64 = (fileData) => {
const binary = atob(fileData[2]);
let len = binary.length;
const arr = new Uint8Array(len);
while (len--) {
arr[len] = binary.charCodeAt(len);
}
return new File([arr], fileData[1], {type: fileData[0]});
};
let files = [
getFileFromB64(['image/vnd.microsoft.icon', 'icon.ico', "AAABAAEAAQEAAAEAIAAwAAAAFgAAACgAAAABAAAAAgAAAAEAIAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAA=="]),
getFileFromB64(['image/webp', 'image.webp', "UklGRhwAAABXRUJQVlA4TBAAAAAvE8AEAAfQhuh//wMR0f8A"]),
getFileFromB64(['image/png', 'image.png', "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAApElEQVR42u3RAQ0AAAjDMO5fNCCDkC5z0HTVrisFCBABASIgQAQEiIAAAQJEQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAREQIAICBABASIgQAQECBAgAgJEQIAIyPcGFY7HnV2aPXoAAAAASUVORK5CYII="]),
getFileFromB64(['image/jpeg', 'image.jpeg', "/9j/4AAQSkZJRgABAQAAAQABAAD//gAfQ29tcHJlc3NlZCBieSBqcGVnLXJlY29tcHJlc3P/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7STxsVUtLVWx9aWNpfZeHh5e+tb75+f8BDQ0NDQ4NDhAQDhQWExYUHhsZGRseLSAiICIgLUQqMioqMipEPEk7NztJPGxVS0tVbH1pY2l9l4eHl761vvn5///CABEIAEsASwMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABv/aAAgBAQAAAACHAAAAAAAAAAAAAAAAH//EABUBAQEAAAAAAAAAAAAAAAAAAAAH/9oACAECEAAAAKYAAAB//8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/2gAIAQMQAAAAngAAAf/EABQQAQAAAAAAAAAAAAAAAAAAAGD/2gAIAQEAAT8ASf/EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQIBAT8AT//EABQRAQAAAAAAAAAAAAAAAAAAAED/2gAIAQMBAT8AT//Z"]),
];
if (!this.props.multiImages) {
if (patchWithError) {
files = [files[0]];
} else {
files = [files[2]];
}
}
await this.props.uploadFiles(files);
}
});
const unpatchMediaDialog = () => unpatch(FileSelectorControlPanel.prototype, 'test_website.mock_image_widgets');
const setupSteps = [{
content: "reload to load patch",
trigger: ".o_website_preview",
run: () => {
patchMediaDialog();
},
}, {
content: "enter edit mode",
trigger: "a[data-action=edit]"
trigger: ".o_edit_website_container a"
}, {
content: "drop a snippet",
trigger: "#oe_snippets .oe_snippet[name='Text - Image'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
extra_trigger: "body.editor_enable.editor_has_snippets",
moveTrigger: ".oe_drop_zone",
run: "drag_and_drop #wrap",
extra_trigger: "body.editor_has_snippets",
moveTrigger: "iframe .oe_drop_zone",
run: "drag_and_drop iframe #wrap",
}, {
content: "drop a snippet",
trigger: "#oe_snippets .oe_snippet[name='Image Gallery'] .oe_snippet_thumbnail:not(.o_we_already_dragging)",
extra_trigger: "body.editor_enable.editor_has_snippets",
extra_trigger: "body.editor_has_snippets",
moveTrigger: ".oe_drop_zone",
run: "drag_and_drop #wrap",
run: "drag_and_drop iframe #wrap",
}];
const formatErrorMsg = "format is not supported. Try with: .gif, .jpe, .jpeg, .jpg, .png, .svg";
tour.register('test_image_upload_progress', {
url: '/test_image_progress',
url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
test: true
}, [
...setupSteps,
// 1. Check multi image upload
{
content: "click on dropped snippet",
trigger: "#wrap .s_image_gallery .img",
trigger: "iframe #wrap .s_image_gallery .img",
}, {
content: "click on add images to open image dialog (in multi mode)",
trigger: 'we-customizeblock-option [data-add-images]',
@@ -38,11 +80,9 @@ tour.register('test_image_upload_progress', {
content: "manually trigger input change",
trigger: ".o_select_media_dialog .o_upload_media_button",
run: () => {
const fileInput = $('.o_select_media_dialog .o_file_input').first();
// This will trigger upload of dummy files for test purpose, as a
// test can't select local files to upload into the input.
// See `mock_image_widgets`.
fileInput.change();
document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
},
}, {
content: "check upload progress bar is correctly shown (1)",
@@ -85,20 +125,17 @@ tour.register('test_image_upload_progress', {
// 2. Check success single image upload
{
content: "click on dropped snippet",
trigger: "#wrap .s_text_image .img",
trigger: "iframe #wrap .s_text_image .img",
}, {
content: "click on replace media to open image dialog",
trigger: 'we-customizeblock-option [data-replace-media]',
}, {
content: "manually trigger input change",
trigger: ".o_select_media_dialog .o_upload_media_button",
in_modal: false,
run: () => {
const fileInput = $('.o_select_media_dialog .o_file_input').first();
// This will trigger upload of dummy files for test purpose, as a
// test can't select local files to upload into the input.
// See `mock_image_widgets`.
fileInput.change();
document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
},
}, {
content: "check upload progress bar is correctly shown",
@@ -126,7 +163,7 @@ tour.register('test_image_upload_progress', {
// 3. Check error single image upload
{
content: "click on dropped snippet",
trigger: "#wrap .s_text_image .img",
trigger: "iframe #wrap .s_text_image .img",
}, {
content: "click on replace media to open image dialog",
trigger: 'we-customizeblock-option [data-replace-media]',
@@ -135,18 +172,19 @@ tour.register('test_image_upload_progress', {
trigger: ".o_select_media_dialog .o_upload_media_button",
in_modal: false,
run: () => {
$("#wrap .s_text_image .img").addClass('o_mock_show_error');
const fileInput = $('.o_select_media_dialog .o_file_input').first();
patchWithError = true;
// This will trigger upload of dummy files for test purpose, as a
// test can't select local files to upload into the input.
// See `mock_image_widgets`.
fileInput.change();
document.body.querySelector('.o_select_media_dialog .o_file_input').dispatchEvent(new Event('change'));
},
}, {
content: "check upload progress bar is correctly shown",
trigger: `.o_we_progressbar:contains('icon.ico'):contains('${formatErrorMsg}')`,
in_modal: false,
run: function () {}, // it's a check
run: function () {
patchWithError = false;
},
}, {
content: "there should only have one notification toaster",
trigger: ".o_notification",
@@ -156,20 +194,21 @@ tour.register('test_image_upload_progress', {
if (notificationCount !== 1) {
console.error("There should be one noficiation toaster opened, and only one.");
}
unpatchMediaDialog();
}
},
]);
tour.register('test_image_upload_progress_unsplash', {
url: '/test_image_progress',
url: `/web#action=website.website_preview&path=${encodeURI('/test_image_progress')}`,
test: true
}, [
...setupSteps,
// 1. Check multi image upload
{
content: "click on dropped snippet",
trigger: "#wrap .s_image_gallery .img",
trigger: "iframe #wrap .s_image_gallery .img",
}, {
content: "click on replace media to open image dialog",
trigger: 'we-customizeblock-option [data-replace-media]',
@@ -179,7 +218,7 @@ tour.register('test_image_upload_progress_unsplash', {
run: "text fox",
}, {
content: "click on unsplash result", // note that unsplash is mocked
trigger: ".o_unsplash_attachment_cell"
trigger: "img[alt~=fox]"
}, {
content: "check that the upload progress bar is correctly shown",
// ensure it is there so we are sure next step actually test something
@@ -193,7 +232,10 @@ tour.register('test_image_upload_progress_unsplash', {
in_modal: false,
}, {
content: "unsplash image (mocked to logo) should have been used",
trigger: "#wrap .s_image_gallery .img[data-original-src^='/unsplash/HQqIOc8oYro/fox']",
trigger: "iframe #wrap .s_image_gallery .img[data-original-src^='/unsplash/HQqIOc8oYro/fox']",
run: () => {
unpatchMediaDialog();
},
},
]);
@@ -13,7 +13,7 @@ from odoo import http
class TestImageUploadProgress(odoo.tests.HttpCase):
def test_01_image_upload_progress(self):
self.start_tour("/test_image_progress", 'test_image_upload_progress', login="admin")
self.start_tour("/web", 'test_image_upload_progress', login="admin")
def test_02_image_upload_progress_unsplash(self):
BASE_URL = self.base_url()
@@ -53,4 +53,4 @@ class TestImageUploadProgress(odoo.tests.HttpCase):
media_library_search.routing_type = 'json'
Web_Editor.media_library_search = http.route(['/web_editor/media_library_search'], type='json', auth="user", website=True)(media_library_search)
self.start_tour("/", 'test_image_upload_progress_unsplash', login="admin")
self.start_tour("/web", 'test_image_upload_progress_unsplash', login="admin")
@@ -79,6 +79,7 @@ export class MediaDialog extends Dialog {
resModel: this.props.resModel,
resId: this.props.resId,
media: this.props.media,
multiImages: this.props.multiImages,
selectedMedia: this.selectedMedia,
selectMedia: (...args) => this.selectMedia(...args, tab.id, additionalProps.multiSelect),
save: this.save.bind(this),
@@ -9,8 +9,6 @@ var ImageCropWidget = require('wysiwyg.widgets.ImageCropWidget');
const LinkPopoverWidget = require('@web_editor/js/wysiwyg/widgets/link_popover_widget')[Symbol.for("default")];
const {ColorpickerDialog} = require('web.Colorpicker');
var media = require('wysiwyg.widgets.media');
return {
Dialog: Dialog,
AltDialog: AltDialog,
@@ -19,13 +17,5 @@ return {
ImageCropWidget: ImageCropWidget,
LinkPopoverWidget: LinkPopoverWidget,
ColorpickerDialog: ColorpickerDialog,
MediaWidget: media.MediaWidget,
SearchableMediaWidget: media.SearchableMediaWidget,
FileWidget: media.FileWidget,
ImageWidget: media.ImageWidget,
DocumentWidget: media.DocumentWidget,
IconWidget: media.IconWidget,
VideoWidget: media.VideoWidget,
};
});