ILIAS  release_5-4 Revision v5.4.26-12-gabc799a52e6
LightboxTest.php
Go to the documentation of this file.
1 <?php
2 
3 require_once(__DIR__ . '/ModalBase.php');
4 
5 use \ILIAS\UI\Component as C;
6 use \ILIAS\UI\Implementation as I;
7 
13 class 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">
84 HelloWorld
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>
125 EOT;
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>
200 EOT;
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">
231 HelloWorld
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>
296 EOT;
297  return $expected;
298  }
299 }
300 
301 class 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 }
LightboxTest\test_get_multiple_page
test_get_multiple_page()
Definition: LightboxTest.php:22
LightboxTest\getExpectedMixedPagesHTML
getExpectedMixedPagesHTML()
Definition: LightboxTest.php:205
Sabre\Event\on
on($eventName, callable $callBack, $priority=100)
Subscribe to an event.
Definition: EventEmitterTrait.php:35
LightboxTest\getExpectedImagePageHTML
getExpectedImagePageHTML()
Definition: LightboxTest.php:130
ILIAS_UI_TestBase\getDefaultRenderer
getDefaultRenderer(JavaScriptBinding $js_binding=null)
Definition: Base.php:228
LightboxTest\getExpectedTextPageHTML
getExpectedTextPageHTML()
Definition: LightboxTest.php:66
ModalBase\normalizeHTML
normalizeHTML($html)
Definition: ModalBase.php:56
ModalBase
Base class for modal tests.
Definition: ModalBase.php:13
LightboxTest\test_different_page_type_rendering
test_different_page_type_rendering()
Definition: LightboxTest.php:46
ModalBase\getModalFactory
getModalFactory()
Definition: ModalBase.php:41
LightboxTest
Tests on implementation for the lightbox modal.
Definition: LightboxTest.php:13
LightboxTest\test_simple_image_page_rendering
test_simple_image_page_rendering()
Definition: LightboxTest.php:29
data
$this data['403_header']
Definition: authorize_403.php:13
LightboxTest\test_simple_text_page_rendering
test_simple_text_page_rendering()
Definition: LightboxTest.php:38