ILIAS  release_6 Revision v6.24-5-g0c8bfefb3b8
LightboxTest.php
Go to the documentation of this file.
1<?php
2
3require_once(__DIR__ . '/ModalBase.php');
4
5use \ILIAS\UI\Component as C;
6use \ILIAS\UI\Implementation as I;
7
13class LightboxTest extends ModalBase
14{
15 public function test_get_single_page()
16 {
17 $page = $this->getLightboxPage();
18 $lightbox = $this->getModalFactory()->lightbox($page);
19 $this->assertEquals([$page], $lightbox->getPages());
20 }
21
22 public function test_get_multiple_page()
23 {
24 $pages = [$this->getLightboxPage(), $this->getLightboxPage()];
25 $lightbox = $this->getModalFactory()->lightbox($pages);
26 $this->assertEquals($pages, $lightbox->getPages());
27 }
28
29 public function test_simple_image_page_rendering()
30 {
31 $image = new I\Component\Image\Image("responsive", 'src/fake/image.jpg', 'description');
32 $lightbox = $this->getModalFactory()->lightbox($this->getModalFactory()->lightboxImagePage($image, 'title'));
33 $expected = $this->normalizeHTML($this->getExpectedImagePageHTML());
34 $actual = $this->normalizeHTML($this->getDefaultRenderer()->render($lightbox));
35 $this->assertEquals($expected, $actual);
36 }
37
38 public function test_simple_text_page_rendering()
39 {
40 $lightbox = $this->getModalFactory()->lightbox($this->getModalFactory()->lightboxTextPage('HelloWorld', 'title'));
41 $expected = $this->normalizeHTML($this->getExpectedTextPageHTML());
42 $actual = $this->normalizeHTML($this->getDefaultRenderer()->render($lightbox));
43 $this->assertEquals($expected, $actual);
44 }
45
46 public function test_different_page_type_rendering()
47 {
48 $image1 = new I\Component\Image\Image("responsive", 'src/fake/image.jpg', 'description');
49
50 $pages = [
51 $this->getModalFactory()->lightboxTextPage('HelloWorld', 'title'),
52 $this->getModalFactory()->lightboxImagePage($image1, 'title'),
53 ];
54
55 $lightbox = $this->getModalFactory()->lightbox($pages);
56 $expected = $this->normalizeHTML($this->getExpectedMixedPagesHTML());
57 $actual = $this->normalizeHTML($this->getDefaultRenderer()->render($lightbox));
58 $this->assertEquals($expected, $actual);
59 }
60
61 protected function getLightboxPage()
62 {
63 return new LightboxMockPage();
64 }
65
66 protected function getExpectedTextPageHTML()
67 {
68 $expected = <<<EOT
69<div class="modal fade il-modal-lightbox" tabindex="-1" role="dialog" id="id_1">
70 <div class="modal-dialog modal-lg" role="document">
71 <div class="modal-content il-modal-lightbox-page">
72 <div class="modal-header">
73 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
74 <h4 class="modal-title">title</h4>
75 </div>
76 <div class="modal-body">
77 <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
78
79
80
81 <div class="carousel-inner" role="listbox">
82
83 <div class="item active text-only" data-title="title">
84HelloWorld
85 </div>
86
87 </div>
88
89
90
91 </div>
92 </div>
93 </div>
94 </div>
95</div>
96<script>
97 $(function() {
98 $('#id_1').on('shown.bs.modal', function() {
99 $('.modal-backdrop.in').css('opacity', '0.9');
100 });
101 $('#id_1').on('show.bs.modal', function (e) {
102 var elm = $(this).find('.carousel-inner .item.active').first();
103
104 if (elm.hasClass('text-only')) {
105 elm.closest('.carousel').addClass('text-only');
106 } else {
107 elm.closest('.carousel').removeClass('text-only');
108 }
109 });
110 $('#id_1_carousel').on('slide.bs.carousel', function(e) {
111 var elm = $(e.relatedTarget);
112
113 if (elm.hasClass('text-only')) {
114 elm.closest('.carousel').addClass('text-only');
115 } else {
116 elm.closest('.carousel').removeClass('text-only');
117 }
118 });
119 $('#id_1_carousel').on('slid.bs.carousel', function() {
120 var title = $(this).find('.carousel-inner .item.active').attr('data-title');
121 $('#id_1').find('.modal-title').text(title);
122 });
123 });
124</script>
125EOT;
126
127 return $expected;
128 }
129
130 protected function getExpectedImagePageHTML()
131 {
132 $expected = <<<EOT
133<div class="modal fade il-modal-lightbox" tabindex="-1" role="dialog" id="id_1">
134 <div class="modal-dialog modal-lg" role="document">
135 <div class="modal-content il-modal-lightbox-page">
136 <div class="modal-header">
137 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
138 <h4 class="modal-title">title</h4>
139 </div>
140 <div class="modal-body">
141 <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
142
143
144
145 <div class="carousel-inner" role="listbox">
146
147 <div class="item active" data-title="title">
148
149
150
151
152
153<img src="src/fake/image.jpg" class="img-responsive" alt="description" />
154
155
156
157 <div class="carousel-caption">
158 description
159 </div>
160 </div>
161
162 </div>
163
164
165
166 </div>
167 </div>
168 </div>
169 </div>
170</div>
171<script>
172 $(function() {
173 $('#id_1').on('shown.bs.modal', function() {
174 $('.modal-backdrop.in').css('opacity', '0.9');
175 });
176 $('#id_1').on('show.bs.modal', function (e) {
177 var elm = $(this).find('.carousel-inner .item.active').first();
178
179 if (elm.hasClass('text-only')) {
180 elm.closest('.carousel').addClass('text-only');
181 } else {
182 elm.closest('.carousel').removeClass('text-only');
183 }
184 });
185 $('#id_1_carousel').on('slide.bs.carousel', function(e) {
186 var elm = $(e.relatedTarget);
187
188 if (elm.hasClass('text-only')) {
189 elm.closest('.carousel').addClass('text-only');
190 } else {
191 elm.closest('.carousel').removeClass('text-only');
192 }
193 });
194 $('#id_1_carousel').on('slid.bs.carousel', function() {
195 var title = $(this).find('.carousel-inner .item.active').attr('data-title');
196 $('#id_1').find('.modal-title').text(title);
197 });
198 });
199</script>
200EOT;
201
202 return $expected;
203 }
204
205 protected function getExpectedMixedPagesHTML()
206 {
207 $expected = <<<EOT
208<div class="modal fade il-modal-lightbox" tabindex="-1" role="dialog" id="id_1">
209 <div class="modal-dialog modal-lg" role="document">
210 <div class="modal-content il-modal-lightbox-page">
211 <div class="modal-header">
212 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
213 <h4 class="modal-title">title</h4>
214 </div>
215 <div class="modal-body">
216 <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
217
218
219 <ol class="carousel-indicators">
220
221 <li data-target="#id_1_carousel" data-slide-to="0" class="active"></li>
222
223 <li data-target="#id_1_carousel" data-slide-to="1" class=""></li>
224
225 </ol>
226
227
228 <div class="carousel-inner" role="listbox">
229
230 <div class="item active text-only" data-title="title">
231HelloWorld
232 </div>
233
234 <div class="item" data-title="title">
235
236
237
238
239
240<img src="src/fake/image.jpg" class="img-responsive" alt="description" />
241
242
243
244 <div class="carousel-caption">
245 description
246 </div>
247 </div>
248
249 </div>
250
251
252 <a class="left carousel-control" href="#id_1_carousel" role="button" data-slide="prev">
253 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
254 <span class="sr-only">Previous</span>
255 </a>
256 <a class="right carousel-control" href="#id_1_carousel" role="button" data-slide="next">
257 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
258 <span class="sr-only">Next</span>
259 </a>
260
261
262 </div>
263 </div>
264 </div>
265 </div>
266</div>
267<script>
268 $(function() {
269 $('#id_1').on('shown.bs.modal', function() {
270 $('.modal-backdrop.in').css('opacity', '0.9');
271 });
272 $('#id_1').on('show.bs.modal', function (e) {
273 var elm = $(this).find('.carousel-inner .item.active').first();
274
275 if (elm.hasClass('text-only')) {
276 elm.closest('.carousel').addClass('text-only');
277 } else {
278 elm.closest('.carousel').removeClass('text-only');
279 }
280 });
281 $('#id_1_carousel').on('slide.bs.carousel', function(e) {
282 var elm = $(e.relatedTarget);
283
284 if (elm.hasClass('text-only')) {
285 elm.closest('.carousel').addClass('text-only');
286 } else {
287 elm.closest('.carousel').removeClass('text-only');
288 }
289 });
290 $('#id_1_carousel').on('slid.bs.carousel', function() {
291 var title = $(this).find('.carousel-inner .item.active').attr('data-title');
292 $('#id_1').find('.modal-title').text(title);
293 });
294 });
295</script>
296EOT;
297 return $expected;
298 }
299}
300
301class LightboxMockPage implements C\Modal\LightboxPage
302{
303 public function getTitle()
304 {
305 return 'title';
306 }
307
308 public function getComponent()
309 {
310 return new ComponentDummy();
311 }
312}
php
An exception for terminatinating execution or to throw for unit testing.
ILIAS_UI_TestBase\getDefaultRenderer
getDefaultRenderer(JavaScriptBinding $js_binding=null)
Definition: Base.php:268
LightboxTest
Tests on implementation for the lightbox modal.
Definition: LightboxTest.php:14
LightboxTest\getExpectedMixedPagesHTML
getExpectedMixedPagesHTML()
Definition: LightboxTest.php:205
LightboxTest\getExpectedTextPageHTML
getExpectedTextPageHTML()
Definition: LightboxTest.php:66
LightboxTest\test_get_multiple_page
test_get_multiple_page()
Definition: LightboxTest.php:22
LightboxTest\getExpectedImagePageHTML
getExpectedImagePageHTML()
Definition: LightboxTest.php:130
LightboxTest\test_simple_text_page_rendering
test_simple_text_page_rendering()
Definition: LightboxTest.php:38
LightboxTest\test_simple_image_page_rendering
test_simple_image_page_rendering()
Definition: LightboxTest.php:29
LightboxTest\test_different_page_type_rendering
test_different_page_type_rendering()
Definition: LightboxTest.php:46
ModalBase
Base class for modal tests.
Definition: ModalBase.php:14
ModalBase\normalizeHTML
normalizeHTML($html)
Definition: ModalBase.php:46
ModalBase\getModalFactory
getModalFactory()
Definition: ModalBase.php:31