Skip to content

Commit b6114f0

Browse files
bubasumabubasuma
committed
Merge remote-tracking branch 'mpi/MC-36214' into MPI-2020-09-14
2 parents cd85526 + e4c0a81 commit b6114f0

File tree

2 files changed

+140
-3
lines changed

2 files changed

+140
-3
lines changed

‎app/code/Magento/Catalog/view/adminhtml/web/js/product-gallery.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,12 +188,17 @@ define([
188188
_addItem: function (event, imageData) {
189189
var count = this.element.find(this.options.imageSelector).length,
190190
element,
191-
imgElement;
191+
imgElement,
192+
position = count + 1,
193+
lastElement = this.element.find(this.options.imageSelector + ':last');
192194

195+
if (lastElement.length === 1) {
196+
position = parseInt(lastElement.data('imageData').position || count, 10) + 1;
197+
}
193198
imageData = $.extend({
194199
'file_id': imageData['value_id'] ? imageData['value_id'] : Math.random().toString(33).substr(2, 18),
195200
'disabled': imageData.disabled ? imageData.disabled : 0,
196-
'position': count + 1,
201+
'position': position,
197202
sizeLabel: bytesToSize(imageData.size)
198203
}, imageData);
199204

@@ -206,7 +211,7 @@ define([
206211
if (count === 0) {
207212
element.prependTo(this.element);
208213
} else {
209-
element.insertAfter(this.element.find(this.options.imageSelector + ':last'));
214+
element.insertAfter(lastElement);
210215
}
211216

212217
if (!this.options.initialized &&

‎dev/tests/js/jasmine/tests/app/code/Magento/Catalog/adminhtml/js/product-gallery.test.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/*
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
/*eslint-disable max-nested-callbacks*/
6+
/*jscs:disable jsDoc*/
7+
define([
8+
'jquery',
9+
'Magento_Catalog/js/product-gallery'
10+
], function ($) {
11+
'use strict';
12+
13+
var galleryEl,
14+
defaultConfig = {
15+
images: [
16+
{
17+
disabled: 0,
18+
file: '/e/a/earth.jpg',
19+
position: 2,
20+
url: 'http://localhost/media/catalog/product/e/a/earth.jpg',
21+
size: 2048,
22+
'value_id': 2
23+
},
24+
{
25+
disabled: 0,
26+
file: '/m/a/mars.jpg',
27+
position: 3,
28+
url: 'http://localhost/media/catalog/product/m/a/mars.jpg',
29+
size: 3072,
30+
'value_id': 3
31+
},
32+
{
33+
disabled: 0,
34+
file: '/j/u/jupiter.jpg',
35+
position: 5,
36+
size: 5120,
37+
url: 'http://localhost/media/catalog/product/j/u/jupiter.jpg',
38+
'value_id': 5
39+
}
40+
],
41+
types: {
42+
'image': {
43+
code: 'image',
44+
label: 'Base',
45+
name: 'product[image]'
46+
},
47+
'small_image': {
48+
code: 'small_image',
49+
label: 'Small',
50+
name: 'product[image]'
51+
},
52+
'thumbnail': {
53+
code: 'thumbnail',
54+
label: 'Thumbnail',
55+
name: 'product[image]'
56+
}
57+
}
58+
};
59+
60+
function init(config) {
61+
$(galleryEl).productGallery($.extend({}, defaultConfig, config || {}));
62+
}
63+
64+
beforeEach(function () {
65+
$('<form>' +
66+
'<div id="media_gallery_content" class="gallery">' +
67+
'<script id="media_gallery_content-template" data-template="image" type="text/x-magento-template">' +
68+
'<div class="image item <% if(data.disabled == 1){ %>hidden-for-front<% } %>" data-role="image">' +
69+
'<input type="hidden" name="product[media_gallery][images][<%- data.file_id %>][position]"' +
70+
' value="<%- data.position %>" data-form-part="product_form" class="position"/>' +
71+
'<input type="hidden" name="product[media_gallery][images][<%- data.file_id %>][file]"' +
72+
' value="<%- data.file %>" data-form-part="product_form"/>' +
73+
'<input type="hidden" name="product[media_gallery][images][<%- data.file_id %>][label]"' +
74+
' value="<%- data.label %>" data-form-part="product_form"/>' +
75+
'<div class="product-image-wrapper">' +
76+
'<img class="product-image" data-role="image-element" src="<%- data.url %>" alt=""/>' +
77+
'<div class="actions"></div>' +
78+
'</div>' +
79+
'</div>' +
80+
'</script>' +
81+
'</div>' +
82+
'</form>'
83+
).appendTo(document.body);
84+
galleryEl = document.getElementById('media_gallery_content');
85+
});
86+
87+
afterEach(function () {
88+
$(galleryEl).remove();
89+
galleryEl = undefined;
90+
});
91+
92+
describe('Magento_Catalog/js/product-gallery', function () {
93+
describe('_create()', function () {
94+
it('check that existing images are rendered correctly', function () {
95+
init();
96+
expect($(galleryEl).find('[data-role=image]').length).toBe(3);
97+
expect($(galleryEl).find('[data-role=image]:nth-child(1) .position').val()).toBe('2');
98+
expect($(galleryEl).find('[data-role=image]:nth-child(2) .position').val()).toBe('3');
99+
expect($(galleryEl).find('[data-role=image]:nth-child(3) .position').val()).toBe('5');
100+
});
101+
});
102+
describe('_addItem()', function () {
103+
it('check that new image is inserted at the first position if there were no existing images', function () {
104+
init({
105+
images: []
106+
});
107+
$(galleryEl).trigger('addItem', {
108+
file: '/s/a/saturn.jpg.tmp',
109+
name: 'saturn.jpg',
110+
size: 1024,
111+
type: 'image/jpeg',
112+
url: 'http://localhost/media/tmp/catalog/product/s/a/saturn.jpg'
113+
});
114+
expect($(galleryEl).find('[data-role=image]').length).toBe(1);
115+
expect($(galleryEl).find('[data-role=image]:nth-child(1) .position').val()).toBe('1');
116+
});
117+
it('check that new image is inserted at the last position if there were existing images', function () {
118+
init();
119+
$(galleryEl).trigger('addItem', {
120+
file: '/s/a/saturn.jpg.tmp',
121+
name: 'saturn.jpg',
122+
size: 1024,
123+
type: 'image/jpeg',
124+
url: 'http://localhost/media/tmp/catalog/product/s/a/saturn.jpg'
125+
});
126+
expect($(galleryEl).find('[data-role=image]').length).toBe(4);
127+
// check that new image position is the position of previous image in the list plus one
128+
expect($(galleryEl).find('[data-role=image]:nth-child(4) .position').val()).toBe('6');
129+
});
130+
});
131+
});
132+
});

0 commit comments

Comments
 (0)