|
6 | 6 | /*eslint max-nested-callbacks: 0*/
|
7 | 7 | define([
|
8 | 8 | 'jquery',
|
9 |
| - 'ko', |
10 | 9 | 'Magento_Ui/js/grid/masonry'
|
11 |
| -], function ($, ko, Masonry) { |
| 10 | +], function ($, Masonry) { |
12 | 11 | 'use strict';
|
13 | 12 |
|
14 |
| - var Component, |
15 |
| - rows, |
16 |
| - container = '<div data-id="masonry_grid" id="masonry_grid"><div class="masonry-image-column"></div></div>'; |
| 13 | + describe('Magento_Ui/js/grid/masonry', function () { |
| 14 | + var Component, |
| 15 | + rows, |
| 16 | + container = '<div data-id="masonry_grid" id="masonry_grid"><div class="masonry-image-column"></div></div>'; |
17 | 17 |
|
18 |
| - beforeEach(function () { |
19 |
| - rows = [ |
20 |
| - { |
21 |
| - _rowIndex: 0, |
22 |
| - category: {}, |
23 |
| - 'category_id': 695, |
24 |
| - 'category_name': 'People', |
25 |
| - 'comp_url': 'https://stock.adobe.com/Rest/Libraries/Watermarked/Download/327515738/2', |
26 |
| - 'content_type': 'image/jpeg', |
27 |
| - 'country_name': 'Malaysia', |
28 |
| - 'creation_date': '2020-03-02 10:41:51', |
29 |
| - 'creator_id': 208217780, |
30 |
| - 'creator_name': 'NajmiArif', |
31 |
| - height: 3264, |
32 |
| - id: 327515738, |
33 |
| - 'id_field_name': 'id', |
34 |
| - 'is_downloaded': 0, |
35 |
| - 'is_licensed_locally': 0, |
36 |
| - keywords: [], |
37 |
| - 'media_type_id': 1, |
38 |
| - overlay: '', |
39 |
| - path: '', |
40 |
| - 'premium_level_id': 0, |
41 |
| - 'thumbnail_240_url': 'https://t4.ftcdn.net/jpg/03/27/51/57/240_F_327515738_n.jpg', |
42 |
| - 'thumbnail_500_ur': 'https://as2.ftcdn.net/jpg/03/27/51/57/500_F_327515738_n.jpg', |
43 |
| - title: 'Neon effect picture of man wearing medical mask for viral or pandemic disease', |
44 |
| - width: 4896 |
45 |
| - } |
| 18 | + beforeEach(function () { |
| 19 | + rows = [ |
| 20 | + { |
| 21 | + _rowIndex: 0, |
| 22 | + category: {}, |
| 23 | + 'category_id': 695, |
| 24 | + 'category_name': 'People', |
| 25 | + 'comp_url': 'url', |
| 26 | + 'content_type': 'image/jpeg', |
| 27 | + 'country_name': 'Malaysia', |
| 28 | + 'creation_date': '2020-03-02 10:41:51', |
| 29 | + 'creator_id': 208217780, |
| 30 | + 'creator_name': 'NajmiArif', |
| 31 | + height: 3264, |
| 32 | + id: 327515738, |
| 33 | + 'id_field_name': 'id', |
| 34 | + 'is_downloaded': 0, |
| 35 | + 'is_licensed_locally': 0, |
| 36 | + keywords: [], |
| 37 | + 'media_type_id': 1, |
| 38 | + overlay: '', |
| 39 | + path: '', |
| 40 | + 'premium_level_id': 0, |
| 41 | + 'thumbnail_240_url': 'url', |
| 42 | + 'thumbnail_500_ur': 'url', |
| 43 | + title: 'Neon effect picture of man wearing medical mask for viral or pandemic disease', |
| 44 | + width: 4896 |
| 45 | + } |
| 46 | + ]; |
46 | 47 |
|
47 |
| - ]; |
48 |
| - |
49 |
| - $(container).appendTo('body'); |
50 |
| - |
51 |
| - Component = new Masonry({ |
52 |
| - defaults: { |
53 |
| - rows: ko.observable() |
54 |
| - } |
| 48 | + $(document.body).append(container); |
| 49 | + Component = new Masonry({ |
| 50 | + defaults: { |
| 51 | + containerId: '#masonry_grid' |
| 52 | + } |
| 53 | + }); |
55 | 54 | });
|
56 | 55 |
|
57 |
| - }); |
58 |
| - |
59 |
| - afterEach(function () { |
60 |
| - $('#masonry_grid').remove(); |
61 |
| - }); |
| 56 | + afterEach(function () { |
| 57 | + Component.clear(); |
| 58 | + $('#masonry_grid').remove(); |
| 59 | + }); |
62 | 60 |
|
63 |
| - describe('check initComponent', function () { |
64 |
| - it('verify setLayoutstyles called and grid iniztilized', function () { |
65 |
| - var setlayoutStyles = spyOn(Component, 'setLayoutStyles'); |
| 61 | + describe('check initComponent', function () { |
| 62 | + it('verify setLayoutstyles called and grid iniztilized', function () { |
| 63 | + var setlayoutStyles = spyOn(Component, 'setLayoutStyles'); |
66 | 64 |
|
67 |
| - expect(Component).toBeDefined(); |
68 |
| - Component.containerId = 'masonry_grid'; |
69 |
| - Component.initComponent(rows); |
70 |
| - Component.rows().forEach(function (image) { |
71 |
| - expect(image.styles).toBeDefined(); |
72 |
| - expect(image.css).toBeDefined(); |
| 65 | + expect(Component).toBeDefined(); |
| 66 | + Component.containerId = 'masonry_grid'; |
| 67 | + Component.initComponent(rows); |
| 68 | + Component.rows().forEach(function (image) { |
| 69 | + expect(image.styles).toBeDefined(); |
| 70 | + expect(image.css).toBeDefined(); |
| 71 | + }); |
| 72 | + expect(setlayoutStyles).toHaveBeenCalled(); |
73 | 73 | });
|
74 |
| - expect(setlayoutStyles).toHaveBeenCalled(); |
75 |
| - }); |
76 |
| - it('verify events triggered', function () { |
77 |
| - var setLayoutStyles = spyOn(Component, 'setLayoutStyles'); |
| 74 | + it('verify events triggered', function () { |
| 75 | + var setLayoutStyles = spyOn(Component, 'setLayoutStyles'); |
78 | 76 |
|
79 |
| - Component.initComponent(rows); |
80 |
| - window.dispatchEvent(new Event('resize')); |
81 |
| - expect(setLayoutStyles).toHaveBeenCalled(); |
| 77 | + Component.initComponent(rows); |
| 78 | + window.dispatchEvent(new Event('resize')); |
| 79 | + expect(setLayoutStyles).toHaveBeenCalled(); |
| 80 | + }); |
82 | 81 | });
|
83 | 82 | });
|
84 | 83 | });
|
0 commit comments