ILIAS  release_9 Revision v9.13-25-g2c18ec4c24f
LightboxTest.php
Go to the documentation of this file.
1 <?php
2 
19 declare(strict_types=1);
20 
21 require_once(__DIR__ . '/ModalBase.php');
22 
23 use ILIAS\UI\Component as C;
24 use ILIAS\UI\Implementation as I;
25 
31 class LightboxTest extends ModalBase
32 {
33  public function testGetSinglePage(): void
34  {
35  $page = $this->getLightboxPage();
36  $lightbox = $this->getModalFactory()->lightbox($page);
37  $this->assertEquals([$page], $lightbox->getPages());
38  }
39 
40  public function testGetMultiplePage(): void
41  {
42  $pages = [$this->getLightboxPage(), $this->getLightboxPage()];
43  $lightbox = $this->getModalFactory()->lightbox($pages);
44  $this->assertEquals($pages, $lightbox->getPages());
45  }
46 
50  public function testSimplePageRendering(string $method, array $args, string $expected_html): void
51  {
52  $lightbox = $this->getModalFactory()->lightbox($this->getModalFactory()->$method(...$args));
53  $expected = $this->normalizeHTML($expected_html);
54  $actual = $this->normalizeHTML($this->getDefaultRenderer()->render($lightbox));
55  $this->assertEquals($expected, $actual);
56  }
57 
58  public function getPageProvider(): array
59  {
60  $image = new I\Component\Image\Image("responsive", 'src/fake/image.jpg', 'description');
61  $card = new I\Component\Card\Card('foo');
62 
63  return [
64  'Render image page' => ['lightboxImagePage', [$image, 'title'], $this->getExpectedImagePageHTML()],
65  'Render text page' => ['lightboxTextPage', ['HelloWorld', 'title'], $this->getExpectedTextPageHTML()],
66  'Render card page' => ['lightboxCardPage', [$card], $this->getExpectedCardPageHTML()],
67  ];
68  }
69 
70  public function testDifferentPageTypeRendering(): void
71  {
72  $image1 = new I\Component\Image\Image("responsive", 'src/fake/image.jpg', 'description');
73 
74  $pages = [
75  $this->getModalFactory()->lightboxTextPage('HelloWorld', 'title'),
76  $this->getModalFactory()->lightboxImagePage($image1, 'title'),
77  ];
78 
79  $lightbox = $this->getModalFactory()->lightbox($pages);
80  $expected = $this->normalizeHTML($this->getExpectedMixedPagesHTML());
81  $actual = $this->normalizeHTML($this->getDefaultRenderer()->render($lightbox));
82  $this->assertEquals($expected, $actual);
83  }
84 
85  protected function getLightboxPage(): LightboxMockPage
86  {
87  return new LightboxMockPage();
88  }
89 
90  protected function getExpectedTextPageHTML(): string
91  {
92  return <<<EOT
93 <div class="modal fade il-modal-lightbox il-modal-lightbox-bright" tabindex="-1" role="dialog" id="id_1">
94  <div class="modal-dialog modal-lg" role="document">
95  <div class="modal-content il-modal-lightbox-page">
96  <div class="modal-header">
97  <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
98  <h1 class="modal-title">title</h1>
99  </div>
100  <div class="modal-body">
101  <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
102 
103 
104 
105  <div class="carousel-inner" role="listbox">
106 
107  <div class="item active text-only" data-title="title">
108  <div class="item-content ">
109  HelloWorld
110  </div>
111 
112  </div>
113 
114  </div>
115 
116 
117 
118  </div>
119  </div>
120  </div>
121  </div>
122 </div>
123 <script>
124  document.addEventListener('DOMContentLoaded', function() {
125  $('#id_1').on('shown.bs.modal', function() {
126  $('.modal-backdrop.in').css('opacity', '0.9');
127  });
128  $('#id_1').on('show.bs.modal', function (e) {
129  var elm = $(this).find('.carousel-inner .item.active').first();
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('slide.bs.carousel', function(e) {
138  var elm = $(e.relatedTarget);
139 
140  if (elm.hasClass('text-only')) {
141  elm.closest('.carousel').addClass('text-only');
142  } else {
143  elm.closest('.carousel').removeClass('text-only');
144  }
145  });
146  $('#id_1_carousel').on('slid.bs.carousel', function() {
147  var title = $(this).find('.carousel-inner .item.active').attr('data-title');
148  $('#id_1').find('.modal-title').text(title);
149  });
150  });
151 </script>
152 EOT;
153  }
154 
155  protected function getExpectedImagePageHTML(): string
156  {
157  return <<<EOT
158 <div class="modal fade il-modal-lightbox il-modal-lightbox-dark" tabindex="-1" role="dialog" id="id_1">
159  <div class="modal-dialog modal-lg" role="document">
160  <div class="modal-content il-modal-lightbox-page">
161  <div class="modal-header">
162  <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
163  <h1 class="modal-title">title</h1>
164  </div>
165  <div class="modal-body">
166  <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
167 
168 
169 
170  <div class="carousel-inner" role="listbox">
171 
172  <div class="item active" data-title="title">
173  <div class="item-content ">
174 
175 
176 
177 
178 
179 <img src="src/fake/image.jpg" class="img-responsive" alt="description" />
180 
181 
182 
183  </div>
184 
185  <div class="carousel-caption">
186  description
187  </div>
188  </div>
189 
190  </div>
191 
192 
193 
194  </div>
195  </div>
196  </div>
197  </div>
198 </div>
199 <script>
200  document.addEventListener('DOMContentLoaded', function() {
201  $('#id_1').on('shown.bs.modal', function() {
202  $('.modal-backdrop.in').css('opacity', '0.9');
203  });
204  $('#id_1').on('show.bs.modal', function (e) {
205  var elm = $(this).find('.carousel-inner .item.active').first();
206 
207  if (elm.hasClass('text-only')) {
208  elm.closest('.carousel').addClass('text-only');
209  } else {
210  elm.closest('.carousel').removeClass('text-only');
211  }
212  });
213  $('#id_1_carousel').on('slide.bs.carousel', function(e) {
214  var elm = $(e.relatedTarget);
215 
216  if (elm.hasClass('text-only')) {
217  elm.closest('.carousel').addClass('text-only');
218  } else {
219  elm.closest('.carousel').removeClass('text-only');
220  }
221  });
222  $('#id_1_carousel').on('slid.bs.carousel', function() {
223  var title = $(this).find('.carousel-inner .item.active').attr('data-title');
224  $('#id_1').find('.modal-title').text(title);
225  });
226  });
227 </script>
228 EOT;
229  }
230 
231  protected function getExpectedMixedPagesHTML(): string
232  {
233  return <<<EOT
234 <div class="modal fade il-modal-lightbox il-modal-lightbox-dark" tabindex="-1" role="dialog" id="id_1">
235  <div class="modal-dialog modal-lg" role="document">
236  <div class="modal-content il-modal-lightbox-page">
237  <div class="modal-header">
238  <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
239  <h1 class="modal-title">title</h1>
240  </div>
241  <div class="modal-body">
242  <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
243 
244 
245  <ol class="carousel-indicators">
246 
247  <li data-target="#id_1_carousel" data-slide-to="0" class="active"></li>
248 
249  <li data-target="#id_1_carousel" data-slide-to="1" class=""></li>
250 
251  </ol>
252 
253 
254  <div class="carousel-inner" role="listbox">
255 
256  <div class="item active text-only" data-title="title">
257  <div class="item-content ">
258  HelloWorld
259  </div>
260 
261  </div>
262 
263  <div class="item " data-title="title">
264  <div class="item-content ">
265 
266 
267 
268 
269 
270 <img src="src/fake/image.jpg" class="img-responsive" alt="description" />
271 
272 
273 
274  </div>
275 
276  <div class="carousel-caption">
277  description
278  </div>
279  </div>
280 
281  </div>
282 
283 
284  <a class="left carousel-control" href="#id_1_carousel" role="button" data-slide="prev">
285  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
286  <span class="sr-only">Previous</span>
287  </a>
288  <a class="right carousel-control" href="#id_1_carousel" role="button" data-slide="next">
289  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
290  <span class="sr-only">Next</span>
291  </a>
292 
293 
294  </div>
295  </div>
296  </div>
297  </div>
298 </div>
299 <script>
300  document.addEventListener('DOMContentLoaded', function() {
301  $('#id_1').on('shown.bs.modal', function() {
302  $('.modal-backdrop.in').css('opacity', '0.9');
303  });
304  $('#id_1').on('show.bs.modal', function (e) {
305  var elm = $(this).find('.carousel-inner .item.active').first();
306 
307  if (elm.hasClass('text-only')) {
308  elm.closest('.carousel').addClass('text-only');
309  } else {
310  elm.closest('.carousel').removeClass('text-only');
311  }
312  });
313  $('#id_1_carousel').on('slide.bs.carousel', function(e) {
314  var elm = $(e.relatedTarget);
315 
316  if (elm.hasClass('text-only')) {
317  elm.closest('.carousel').addClass('text-only');
318  } else {
319  elm.closest('.carousel').removeClass('text-only');
320  }
321  });
322  $('#id_1_carousel').on('slid.bs.carousel', function() {
323  var title = $(this).find('.carousel-inner .item.active').attr('data-title');
324  $('#id_1').find('.modal-title').text(title);
325  });
326  });
327 </script>
328 EOT;
329  }
330 
331  private function getExpectedCardPageHTML(): string
332  {
333  return <<<EOT
334 <div class="modal fade il-modal-lightbox il-modal-lightbox-bright" tabindex="-1" role="dialog" id="id_1">
335  <div class="modal-dialog modal-lg" role="document">
336  <div class="modal-content il-modal-lightbox-page">
337  <div class="modal-header">
338  <button type="button" class="close" data-dismiss="modal" aria-label="close">
339  <span aria-hidden="true"></span>
340  </button>
341  <h1 class="modal-title">
342  foo
343  </h1>
344  </div>
345  <div class="modal-body">
346  <div id="id_1_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
347  <div class="carousel-inner" role="listbox">
348  <div class="item active" data-title="foo">
349  <div class="item-content item-vertical"></div>
350  </div>
351  </div>
352  </div>
353  </div>
354  </div>
355  </div>
356 </div>
357 <script>
358 document.addEventListener('DOMContentLoaded', function() {
359  $('#id_1').on('shown.bs.modal', function() {
360  $('.modal-backdrop.in').css('opacity', '0.9');
361  });
362  $('#id_1').on('show.bs.modal', function (e) {
363  var elm = $(this).find('.carousel-inner .item.active').first();
364  if (elm.hasClass('text-only')) {
365  elm.closest('.carousel').addClass('text-only');
366  } else {
367  elm.closest('.carousel').removeClass('text-only');
368  }
369  });
370  $('#id_1_carousel').on('slide.bs.carousel', function(e) {
371  var elm = $(e.relatedTarget);
372  if (elm.hasClass('text-only')) {
373  elm.closest('.carousel').addClass('text-only');
374  } else {
375  elm.closest('.carousel').removeClass('text-only');
376  }
377  });
378  $('#id_1_carousel').on('slid.bs.carousel', function() {
379  var title = $(this).find('.carousel-inner .item.active').attr('data-title');
380  $('#id_1').find('.modal-title').text(title);
381  });
382 });
383 </script>
384 EOT;
385  }
386 }
387 
388 class LightboxMockPage implements C\Modal\LightboxPage
389 {
390  public function getTitle(): string
391  {
392  return 'title';
393  }
394 
395  public function getComponent(): C\Component
396  {
397  return new ComponentDummy();
398  }
399 }
ILIAS_UI_TestBase\getDefaultRenderer
getDefaultRenderer(JavaScriptBinding $js_binding=null, array $with_stub_renderings=[])
Definition: Base.php:377
ILIAS\Repository\button
button(string $caption, string $cmd)
Definition: trait.GlobalDICGUIServices.php:181
LightboxTest\getExpectedMixedPagesHTML
getExpectedMixedPagesHTML()
Definition: LightboxTest.php:231
ILIAS\UI\Implementation
This file is part of ILIAS, a powerful learning management system published by ILIAS open source e-Le...
LightboxTest\testSimplePageRendering
testSimplePageRendering(string $method, array $args, string $expected_html)
getPageProvider
Definition: LightboxTest.php:50
ILIAS\UI\Component
This file is part of ILIAS, a powerful learning management system published by ILIAS open source e-Le...
LightboxTest\getExpectedImagePageHTML
getExpectedImagePageHTML()
Definition: LightboxTest.php:155
ILIAS\UI\Component\Component
A component is the most general form of an entity in the UI.
Definition: Component.php:27
LightboxTest\getExpectedTextPageHTML
getExpectedTextPageHTML()
Definition: LightboxTest.php:90
ModalBase
Base class for modal tests.
Definition: ModalBase.php:34
ILIAS\ResourceStorage\Flavour\Machine\DefaultMachines\to
to(\GdImage $image, int $quality=null)
Currently this is the only way to make a FileStream from a GD image resource.
Definition: GdImageToStreamTrait.php:37
ModalBase\normalizeHTML
normalizeHTML(string $html)
Definition: ModalBase.php:76
ModalBase\getModalFactory
getModalFactory()
Definition: ModalBase.php:51
LightboxTest
Tests on implementation for the lightbox modal.
Definition: LightboxTest.php:31
LightboxTest\testDifferentPageTypeRendering
testDifferentPageTypeRendering()
Definition: LightboxTest.php:70
HelloWorld
Some very basic component implementation.
Definition: HelloWorld.php:26