3 namespace Drupal\KernelTests\Core\Asset;
5 use Drupal\Component\Serialization\Json;
6 use Drupal\Component\Utility\Unicode;
7 use Drupal\Core\Asset\AttachedAssets;
8 use Drupal\KernelTests\KernelTestBase;
11 * Tests #attached assets: attached asset libraries and JavaScript settings.
16 * $build['#attached']['library'] = …
17 * $build['#attached']['drupalSettings'] = …
23 class AttachedAssetsTest extends KernelTestBase {
26 * The asset resolver service.
28 * @var \Drupal\Core\Asset\AssetResolverInterface
30 protected $assetResolver;
33 * The renderer service.
35 * @var \Drupal\Core\Render\RendererInterface
42 public static $modules = ['language', 'simpletest', 'common_test', 'system'];
47 protected function setUp() {
49 $this->container->get('router.builder')->rebuild();
51 $this->assetResolver = $this->container->get('asset.resolver');
52 $this->renderer = $this->container->get('renderer');
56 * Tests that default CSS and JavaScript is empty.
58 public function testDefault() {
59 $assets = new AttachedAssets();
60 $this->assertEqual([], $this->assetResolver->getCssAssets($assets, FALSE), 'Default CSS is empty.');
61 list($js_assets_header, $js_assets_footer) = $this->assetResolver->getJsAssets($assets, FALSE);
62 $this->assertEqual([], $js_assets_header, 'Default header JavaScript is empty.');
63 $this->assertEqual([], $js_assets_footer, 'Default footer JavaScript is empty.');
67 * Tests non-existing libraries.
69 public function testLibraryUnknown() {
70 $build['#attached']['library'][] = 'core/unknown';
71 $assets = AttachedAssets::createFromRenderArray($build);
73 $this->assertIdentical([], $this->assetResolver->getJsAssets($assets, FALSE)[0], 'Unknown library was not added to the page.');
77 * Tests adding a CSS and a JavaScript file.
79 public function testAddFiles() {
80 $build['#attached']['library'][] = 'common_test/files';
81 $assets = AttachedAssets::createFromRenderArray($build);
83 $css = $this->assetResolver->getCssAssets($assets, FALSE);
84 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
85 $this->assertTrue(array_key_exists('core/modules/system/tests/modules/common_test/bar.css', $css), 'CSS files are correctly added.');
86 $this->assertTrue(array_key_exists('core/modules/system/tests/modules/common_test/foo.js', $js), 'JavaScript files are correctly added.');
88 $css_render_array = \Drupal::service('asset.css.collection_renderer')->render($css);
89 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
90 $rendered_css = $this->renderer->renderPlain($css_render_array);
91 $rendered_js = $this->renderer->renderPlain($js_render_array);
92 $query_string = $this->container->get('state')->get('system.css_js_query_string') ?: '0';
93 $this->assertNotIdentical(strpos($rendered_css, '<link rel="stylesheet" href="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/bar.css')) . '?' . $query_string . '" media="all" />'), FALSE, 'Rendering an external CSS file.');
94 $this->assertNotIdentical(strpos($rendered_js, '<script src="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/foo.js')) . '?' . $query_string . '"></script>'), FALSE, 'Rendering an external JavaScript file.');
98 * Tests adding JavaScript settings.
100 public function testAddJsSettings() {
101 // Add a file in order to test default settings.
102 $build['#attached']['library'][] = 'core/drupalSettings';
103 $assets = AttachedAssets::createFromRenderArray($build);
105 $this->assertEqual([], $assets->getSettings(), 'JavaScript settings on $assets are empty.');
106 $javascript = $this->assetResolver->getJsAssets($assets, FALSE)[1];
107 $this->assertTrue(array_key_exists('currentPath', $javascript['drupalSettings']['data']['path']), 'The current path JavaScript setting is set correctly.');
108 $this->assertTrue(array_key_exists('currentPath', $assets->getSettings()['path']), 'JavaScript settings on $assets are resolved after retrieving JavaScript assets, and are equal to the returned JavaScript settings.');
110 $assets->setSettings(['drupal' => 'rocks', 'dries' => 280342800]);
111 $javascript = $this->assetResolver->getJsAssets($assets, FALSE)[1];
112 $this->assertEqual(280342800, $javascript['drupalSettings']['data']['dries'], 'JavaScript setting is set correctly.');
113 $this->assertEqual('rocks', $javascript['drupalSettings']['data']['drupal'], 'The other JavaScript setting is set correctly.');
117 * Tests adding external CSS and JavaScript files.
119 public function testAddExternalFiles() {
120 $build['#attached']['library'][] = 'common_test/external';
121 $assets = AttachedAssets::createFromRenderArray($build);
123 $css = $this->assetResolver->getCssAssets($assets, FALSE);
124 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
125 $this->assertTrue(array_key_exists('http://example.com/stylesheet.css', $css), 'External CSS files are correctly added.');
126 $this->assertTrue(array_key_exists('http://example.com/script.js', $js), 'External JavaScript files are correctly added.');
128 $css_render_array = \Drupal::service('asset.css.collection_renderer')->render($css);
129 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
130 $rendered_css = $this->renderer->renderPlain($css_render_array);
131 $rendered_js = $this->renderer->renderPlain($js_render_array);
132 $this->assertNotIdentical(strpos($rendered_css, '<link rel="stylesheet" href="http://example.com/stylesheet.css" media="all" />'), FALSE, 'Rendering an external CSS file.');
133 $this->assertNotIdentical(strpos($rendered_js, '<script src="http://example.com/script.js"></script>'), FALSE, 'Rendering an external JavaScript file.');
137 * Tests adding JavaScript files with additional attributes.
139 public function testAttributes() {
140 $build['#attached']['library'][] = 'common_test/js-attributes';
141 $assets = AttachedAssets::createFromRenderArray($build);
143 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
144 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
145 $rendered_js = $this->renderer->renderPlain($js_render_array);
146 $expected_1 = '<script src="http://example.com/deferred-external.js" foo="bar" defer></script>';
147 $expected_2 = '<script src="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/deferred-internal.js')) . '?v=1" defer bar="foo"></script>';
148 $this->assertNotIdentical(strpos($rendered_js, $expected_1), FALSE, 'Rendered external JavaScript with correct defer and random attributes.');
149 $this->assertNotIdentical(strpos($rendered_js, $expected_2), FALSE, 'Rendered internal JavaScript with correct defer and random attributes.');
153 * Tests that attributes are maintained when JS aggregation is enabled.
155 public function testAggregatedAttributes() {
156 $build['#attached']['library'][] = 'common_test/js-attributes';
157 $assets = AttachedAssets::createFromRenderArray($build);
159 $js = $this->assetResolver->getJsAssets($assets, TRUE)[1];
160 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
161 $rendered_js = $this->renderer->renderPlain($js_render_array);
162 $expected_1 = '<script src="http://example.com/deferred-external.js" foo="bar" defer></script>';
163 $expected_2 = '<script src="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/deferred-internal.js')) . '?v=1" defer bar="foo"></script>';
164 $this->assertNotIdentical(strpos($rendered_js, $expected_1), FALSE, 'Rendered external JavaScript with correct defer and random attributes.');
165 $this->assertNotIdentical(strpos($rendered_js, $expected_2), FALSE, 'Rendered internal JavaScript with correct defer and random attributes.');
169 * Integration test for CSS/JS aggregation.
171 public function testAggregation() {
172 $build['#attached']['library'][] = 'core/drupal.timezone';
173 $build['#attached']['library'][] = 'core/drupal.vertical-tabs';
174 $assets = AttachedAssets::createFromRenderArray($build);
176 $this->assertEqual(1, count($this->assetResolver->getCssAssets($assets, TRUE)), 'There is a sole aggregated CSS asset.');
178 list($header_js, $footer_js) = $this->assetResolver->getJsAssets($assets, TRUE);
179 $this->assertEqual([], \Drupal::service('asset.js.collection_renderer')->render($header_js), 'There are 0 JavaScript assets in the header.');
180 $rendered_footer_js = \Drupal::service('asset.js.collection_renderer')->render($footer_js);
181 $this->assertEqual(2, count($rendered_footer_js), 'There are 2 JavaScript assets in the footer.');
182 $this->assertEqual('drupal-settings-json', $rendered_footer_js[0]['#attributes']['data-drupal-selector'], 'The first of the two JavaScript assets in the footer has drupal settings.');
183 $this->assertEqual(0, strpos($rendered_footer_js[1]['#attributes']['src'], base_path()), 'The second of the two JavaScript assets in the footer has the sole aggregated JavaScript asset.');
187 * Tests JavaScript settings.
189 public function testSettings() {
191 $build['#attached']['library'][] = 'core/drupalSettings';
192 // Nonsensical value to verify if it's possible to override path settings.
193 $build['#attached']['drupalSettings']['path']['pathPrefix'] = 'yarhar';
194 $assets = AttachedAssets::createFromRenderArray($build);
196 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
197 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
198 // Cast to string since this returns a \Drupal\Core\Render\Markup object.
199 $rendered_js = (string) $this->renderer->renderPlain($js_render_array);
201 // Parse the generated drupalSettings <script> back to a PHP representation.
204 $start = strpos($rendered_js, $startToken);
205 $end = strrpos($rendered_js, $endToken);
206 // Convert to a string, as $renderer_js is a \Drupal\Core\Render\Markup
208 $json = Unicode::substr($rendered_js, $start, $end - $start + 1);
209 $parsed_settings = Json::decode($json);
211 // Test whether the settings for core/drupalSettings are available.
212 $this->assertTrue(isset($parsed_settings['path']['baseUrl']), 'drupalSettings.path.baseUrl is present.');
213 $this->assertIdentical($parsed_settings['path']['pathPrefix'], 'yarhar', 'drupalSettings.path.pathPrefix is present and has the correct (overridden) value.');
214 $this->assertIdentical($parsed_settings['path']['currentPath'], '', 'drupalSettings.path.currentPath is present and has the correct value.');
215 $this->assertIdentical($parsed_settings['path']['currentPathIsAdmin'], FALSE, 'drupalSettings.path.currentPathIsAdmin is present and has the correct value.');
216 $this->assertIdentical($parsed_settings['path']['isFront'], FALSE, 'drupalSettings.path.isFront is present and has the correct value.');
217 $this->assertIdentical($parsed_settings['path']['currentLanguage'], 'en', 'drupalSettings.path.currentLanguage is present and has the correct value.');
219 // Tests whether altering JavaScript settings via hook_js_settings_alter()
220 // is working as expected.
221 // @see common_test_js_settings_alter()
222 $this->assertIdentical($parsed_settings['pluralDelimiter'], '☃');
223 $this->assertIdentical($parsed_settings['foo'], 'bar');
227 * Tests JS assets depending on the 'core/<head>' virtual library.
229 public function testHeaderHTML() {
230 $build['#attached']['library'][] = 'common_test/js-header';
231 $assets = AttachedAssets::createFromRenderArray($build);
233 $js = $this->assetResolver->getJsAssets($assets, FALSE)[0];
234 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
235 $rendered_js = $this->renderer->renderPlain($js_render_array);
236 $query_string = $this->container->get('state')->get('system.css_js_query_string') ?: '0';
237 $this->assertNotIdentical(strpos($rendered_js, '<script src="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/header.js')) . '?' . $query_string . '"></script>'), FALSE, 'The JS asset in common_test/js-header appears in the header.');
238 $this->assertNotIdentical(strpos($rendered_js, '<script src="' . file_url_transform_relative(file_create_url('core/misc/drupal.js'))), FALSE, 'The JS asset of the direct dependency (core/drupal) of common_test/js-header appears in the header.');
239 $this->assertNotIdentical(strpos($rendered_js, '<script src="' . file_url_transform_relative(file_create_url('core/assets/vendor/domready/ready.min.js'))), FALSE, 'The JS asset of the indirect dependency (core/domready) of common_test/js-header appears in the header.');
243 * Tests that for assets with cache = FALSE, Drupal sets preprocess = FALSE.
245 public function testNoCache() {
246 $build['#attached']['library'][] = 'common_test/no-cache';
247 $assets = AttachedAssets::createFromRenderArray($build);
249 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
250 $this->assertFalse($js['core/modules/system/tests/modules/common_test/nocache.js']['preprocess'], 'Setting cache to FALSE sets preprocess to FALSE when adding JavaScript.');
254 * Tests adding JavaScript within conditional comments.
256 * @see \Drupal\Core\Render\Element\HtmlTag::preRenderConditionalComments()
258 public function testBrowserConditionalComments() {
259 $default_query_string = $this->container->get('state')->get('system.css_js_query_string') ?: '0';
261 $build['#attached']['library'][] = 'common_test/browsers';
262 $assets = AttachedAssets::createFromRenderArray($build);
264 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
265 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
266 $rendered_js = $this->renderer->renderPlain($js_render_array);
267 $expected_1 = "<!--[if lte IE 8]>\n" . '<script src="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/old-ie.js')) . '?' . $default_query_string . '"></script>' . "\n<![endif]-->";
268 $expected_2 = "<!--[if !IE]><!-->\n" . '<script src="' . file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/no-ie.js')) . '?' . $default_query_string . '"></script>' . "\n<!--<![endif]-->";
270 $this->assertNotIdentical(strpos($rendered_js, $expected_1), FALSE, 'Rendered JavaScript within downlevel-hidden conditional comments.');
271 $this->assertNotIdentical(strpos($rendered_js, $expected_2), FALSE, 'Rendered JavaScript within downlevel-revealed conditional comments.');
275 * Tests JavaScript versioning.
277 public function testVersionQueryString() {
278 $build['#attached']['library'][] = 'core/backbone';
279 $build['#attached']['library'][] = 'core/domready';
280 $assets = AttachedAssets::createFromRenderArray($build);
282 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
283 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
285 $rendered_js = $this->renderer->renderPlain($js_render_array);
286 $this->assertTrue(strpos($rendered_js, 'core/assets/vendor/backbone/backbone-min.js?v=1.2.3') > 0 && strpos($rendered_js, 'core/assets/vendor/domready/ready.min.js?v=1.0.8') > 0, 'JavaScript version identifiers correctly appended to URLs');
290 * Tests JavaScript and CSS asset ordering.
292 public function testRenderOrder() {
293 $build['#attached']['library'][] = 'common_test/order';
294 $assets = AttachedAssets::createFromRenderArray($build);
296 // Construct the expected result from the regex.
297 $expected_order_js = [
302 "-5_1", // The external script.
310 // Retrieve the rendered JavaScript and test against the regex.
311 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
312 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
313 $rendered_js = $this->renderer->renderPlain($js_render_array);
315 if (preg_match_all('/weight_([-0-9]+_[0-9]+)/', $rendered_js, $matches)) {
316 $result = $matches[1];
321 $this->assertIdentical($result, $expected_order_js, 'JavaScript is added in the expected weight order.');
323 // Construct the expected result from the regex.
324 $expected_order_css = [
326 'base_weight_-101_1',
328 'layout_weight_-101_1',
332 'layout_weight_-8_1',
333 'component_weight_-101_1',
337 'component_weight_-8_1',
338 'state_weight_-101_1',
339 'component_weight_0_1',
340 'component_weight_0_2',
343 'theme_weight_-101_1',
352 // Retrieve the rendered CSS and test against the regex.
353 $css = $this->assetResolver->getCssAssets($assets, FALSE);
354 $css_render_array = \Drupal::service('asset.css.collection_renderer')->render($css);
355 $rendered_css = $this->renderer->renderPlain($css_render_array);
357 if (preg_match_all('/([a-z]+)_weight_([-0-9]+_[0-9]+)/', $rendered_css, $matches)) {
358 $result = $matches[0];
363 $this->assertIdentical($result, $expected_order_css, 'CSS is added in the expected weight order.');
367 * Tests rendering the JavaScript with a file's weight above jQuery's.
369 public function testRenderDifferentWeight() {
370 // If a library contains assets A and B, and A is listed first, then B can
371 // still make itself appear first by defining a lower weight.
372 $build['#attached']['library'][] = 'core/jquery';
373 $build['#attached']['library'][] = 'common_test/weight';
374 $assets = AttachedAssets::createFromRenderArray($build);
376 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
377 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
378 $rendered_js = $this->renderer->renderPlain($js_render_array);
379 $this->assertTrue(strpos($rendered_js, 'lighter.css') < strpos($rendered_js, 'first.js'), 'Lighter CSS assets are rendered first.');
380 $this->assertTrue(strpos($rendered_js, 'lighter.js') < strpos($rendered_js, 'first.js'), 'Lighter JavaScript assets are rendered first.');
381 $this->assertTrue(strpos($rendered_js, 'before-jquery.js') < strpos($rendered_js, 'core/assets/vendor/jquery/jquery.min.js'), 'Rendering a JavaScript file above jQuery.');
385 * Tests altering a JavaScript's weight via hook_js_alter().
387 * @see simpletest_js_alter()
389 public function testAlter() {
390 // Add both tableselect.js and simpletest.js.
391 $build['#attached']['library'][] = 'core/drupal.tableselect';
392 $build['#attached']['library'][] = 'simpletest/drupal.simpletest';
393 $assets = AttachedAssets::createFromRenderArray($build);
395 // Render the JavaScript, testing if simpletest.js was altered to be before
396 // tableselect.js. See simpletest_js_alter() to see where this alteration
398 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
399 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
400 $rendered_js = $this->renderer->renderPlain($js_render_array);
401 $this->assertTrue(strpos($rendered_js, 'simpletest.js') < strpos($rendered_js, 'core/misc/tableselect.js'), 'Altering JavaScript weight through the alter hook.');
405 * Adds a JavaScript library to the page and alters it.
407 * @see common_test_library_info_alter()
409 public function testLibraryAlter() {
410 // Verify that common_test altered the title of Farbtastic.
411 /** @var \Drupal\Core\Asset\LibraryDiscoveryInterface $library_discovery */
412 $library_discovery = \Drupal::service('library.discovery');
413 $library = $library_discovery->getLibraryByName('core', 'jquery.farbtastic');
414 $this->assertEqual($library['version'], '0.0', 'Registered libraries were altered.');
416 // common_test_library_info_alter() also added a dependency on jQuery Form.
417 $build['#attached']['library'][] = 'core/jquery.farbtastic';
418 $assets = AttachedAssets::createFromRenderArray($build);
419 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
420 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
421 $rendered_js = $this->renderer->renderPlain($js_render_array);
422 $this->assertTrue(strpos($rendered_js, 'core/assets/vendor/jquery-form/jquery.form.min.js'), 'Altered library dependencies are added to the page.');
426 * Dynamically defines an asset library and alters it.
428 public function testDynamicLibrary() {
429 /** @var \Drupal\Core\Asset\LibraryDiscoveryInterface $library_discovery */
430 $library_discovery = \Drupal::service('library.discovery');
431 // Retrieve a dynamic library definition.
432 // @see common_test_library_info_build()
433 \Drupal::state()->set('common_test.library_info_build_test', TRUE);
434 $library_discovery->clearCachedDefinitions();
435 $dynamic_library = $library_discovery->getLibraryByName('common_test', 'dynamic_library');
436 $this->assertTrue(is_array($dynamic_library));
437 if ($this->assertTrue(isset($dynamic_library['version']))) {
438 $this->assertIdentical('1.0', $dynamic_library['version']);
440 // Make sure the dynamic library definition could be altered.
441 // @see common_test_library_info_alter()
442 if ($this->assertTrue(isset($dynamic_library['dependencies']))) {
443 $this->assertIdentical(['core/jquery'], $dynamic_library['dependencies']);
448 * Tests that multiple modules can implement libraries with the same name.
450 * @see common_test.library.yml
452 public function testLibraryNameConflicts() {
453 /** @var \Drupal\Core\Asset\LibraryDiscoveryInterface $library_discovery */
454 $library_discovery = \Drupal::service('library.discovery');
455 $farbtastic = $library_discovery->getLibraryByName('common_test', 'jquery.farbtastic');
456 $this->assertEqual($farbtastic['version'], '0.1', 'Alternative libraries can be added to the page.');
460 * Tests JavaScript files that have querystrings attached get added right.
462 public function testAddJsFileWithQueryString() {
463 $build['#attached']['library'][] = 'common_test/querystring';
464 $assets = AttachedAssets::createFromRenderArray($build);
466 $css = $this->assetResolver->getCssAssets($assets, FALSE);
467 $js = $this->assetResolver->getJsAssets($assets, FALSE)[1];
468 $this->assertTrue(array_key_exists('core/modules/system/tests/modules/common_test/querystring.css?arg1=value1&arg2=value2', $css), 'CSS file with query string is correctly added.');
469 $this->assertTrue(array_key_exists('core/modules/system/tests/modules/common_test/querystring.js?arg1=value1&arg2=value2', $js), 'JavaScript file with query string is correctly added.');
471 $css_render_array = \Drupal::service('asset.css.collection_renderer')->render($css);
472 $rendered_css = $this->renderer->renderPlain($css_render_array);
473 $js_render_array = \Drupal::service('asset.js.collection_renderer')->render($js);
474 $rendered_js = $this->renderer->renderPlain($js_render_array);
475 $query_string = $this->container->get('state')->get('system.css_js_query_string') ?: '0';
476 $this->assertNotIdentical(strpos($rendered_css, '<link rel="stylesheet" href="' . str_replace('&', '&', file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/querystring.css?arg1=value1&arg2=value2'))) . '&' . $query_string . '" media="all" />'), FALSE, 'CSS file with query string gets version query string correctly appended..');
477 $this->assertNotIdentical(strpos($rendered_js, '<script src="' . str_replace('&', '&', file_url_transform_relative(file_create_url('core/modules/system/tests/modules/common_test/querystring.js?arg1=value1&arg2=value2'))) . '&' . $query_string . '"></script>'), FALSE, 'JavaScript file with query string gets version query string correctly appended.');