ILIAS  release_8 Revision v8.19
•All Data Structures Namespaces Files Functions Variables Modules Pages
LightboxTest.php
Go to the documentation of this file.
1 <?php
2 
3 declare(strict_types=1);
4 
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 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">
102 HelloWorld
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>
143 EOT;
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>
216 EOT;
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">
245 HelloWorld
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>
310 EOT;
311  }
312 }
313 
314 class 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 }
ILIAS_UI_TestBase\getDefaultRenderer
getDefaultRenderer(JavaScriptBinding $js_binding=null, array $with_stub_renderings=[])
Definition: Base.php:355
LightboxTest\test_get_multiple_page
test_get_multiple_page()
Definition: LightboxTest.php:40
LightboxTest\getExpectedMixedPagesHTML
getExpectedMixedPagesHTML()
Definition: LightboxTest.php:219
ILIAS\UI\Implementation
This file is part of ILIAS, a powerful learning management system published by ILIAS open source e-Le...
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:146
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:84
ModalBase
Base class for modal tests.
Definition: ModalBase.php:34
LightboxTest\test_different_page_type_rendering
test_different_page_type_rendering()
Definition: LightboxTest.php:64
ModalBase\normalizeHTML
normalizeHTML(string $html)
Definition: ModalBase.php:72
ModalBase\getModalFactory
getModalFactory()
Definition: ModalBase.php:51
LightboxTest
This file is part of ILIAS, a powerful learning management system published by ILIAS open source e-Le...
Definition: LightboxTest.php:31
LightboxTest\test_simple_image_page_rendering
test_simple_image_page_rendering()
Definition: LightboxTest.php:47
HelloWorld
Some very basic component implementation.
Definition: HelloWorld.php:26
LightboxTest\test_simple_text_page_rendering
test_simple_text_page_rendering()
Definition: LightboxTest.php:56