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