|
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