--- /dev/null
+<?php
+
+namespace Drupal\Tests\responsive_image\Functional;
+
+use Drupal\image\Entity\ImageStyle;
+use Drupal\node\Entity\Node;
+use Drupal\file\Entity\File;
+use Drupal\responsive_image\Plugin\Field\FieldFormatter\ResponsiveImageFormatter;
+use Drupal\responsive_image\Entity\ResponsiveImageStyle;
+use Drupal\Tests\image\Functional\ImageFieldTestBase;
+use Drupal\Tests\TestFileCreationTrait;
+use Drupal\user\RoleInterface;
+
+/**
+ * Tests responsive image display formatter.
+ *
+ * @group responsive_image
+ */
+class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
+
+ use TestFileCreationTrait;
+
+ protected $dumpHeaders = TRUE;
+
+ /**
+ * Responsive image style entity instance we test with.
+ *
+ * @var \Drupal\responsive_image\Entity\ResponsiveImageStyle
+ */
+ protected $responsiveImgStyle;
+
+ /**
+ * Modules to enable.
+ *
+ * @var array
+ */
+ public static $modules = ['field_ui', 'responsive_image', 'responsive_image_test_module'];
+
+ /**
+ * Drupal\simpletest\WebTestBase\setUp().
+ */
+ protected function setUp() {
+ parent::setUp();
+
+ // Create user.
+ $this->adminUser = $this->drupalCreateUser([
+ 'administer responsive images',
+ 'access content',
+ 'access administration pages',
+ 'administer site configuration',
+ 'administer content types',
+ 'administer node display',
+ 'administer nodes',
+ 'create article content',
+ 'edit any article content',
+ 'delete any article content',
+ 'administer image styles',
+ ]);
+ $this->drupalLogin($this->adminUser);
+ // Add responsive image style.
+ $this->responsiveImgStyle = ResponsiveImageStyle::create([
+ 'id' => 'style_one',
+ 'label' => 'Style One',
+ 'breakpoint_group' => 'responsive_image_test_module',
+ 'fallback_image_style' => 'large',
+ ]);
+ }
+
+ /**
+ * Tests responsive image formatters on node display for public files.
+ */
+ public function testResponsiveImageFieldFormattersPublic() {
+ $this->addTestImageStyleMappings();
+ $this->doTestResponsiveImageFieldFormatters('public');
+ }
+
+ /**
+ * Tests responsive image formatters on node display for private files.
+ */
+ public function testResponsiveImageFieldFormattersPrivate() {
+ $this->addTestImageStyleMappings();
+ // Remove access content permission from anonymous users.
+ user_role_change_permissions(RoleInterface::ANONYMOUS_ID, ['access content' => FALSE]);
+ $this->doTestResponsiveImageFieldFormatters('private');
+ }
+
+ /**
+ * Test responsive image formatters when image style is empty.
+ */
+ public function testResponsiveImageFieldFormattersEmptyStyle() {
+ $this->addTestImageStyleMappings(TRUE);
+ $this->doTestResponsiveImageFieldFormatters('public', TRUE);
+ }
+
+ /**
+ * Add image style mappings to the responsive image style entity.
+ *
+ * @param bool $empty_styles
+ * If true, the image style mappings will get empty image styles.
+ */
+ protected function addTestImageStyleMappings($empty_styles = FALSE) {
+ if ($empty_styles) {
+ $this->responsiveImgStyle
+ ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => '',
+ ])
+ ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
+ 'image_mapping_type' => 'sizes',
+ 'image_mapping' => [
+ 'sizes' => '(min-width: 700px) 700px, 100vw',
+ 'sizes_image_styles' => [],
+ ],
+ ])
+ ->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => '',
+ ])
+ ->save();
+ }
+ else {
+ $this->responsiveImgStyle
+ // Test the output of an empty image.
+ ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE,
+ ])
+ // Test the output with a 1.5x multiplier.
+ ->addImageStyleMapping('responsive_image_test_module.mobile', '1.5x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => 'thumbnail',
+ ])
+ // Test the output of the 'sizes' attribute.
+ ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
+ 'image_mapping_type' => 'sizes',
+ 'image_mapping' => [
+ 'sizes' => '(min-width: 700px) 700px, 100vw',
+ 'sizes_image_styles' => [
+ 'large',
+ 'medium',
+ ],
+ ],
+ ])
+ // Test the normal output of mapping to an image style.
+ ->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => 'large',
+ ])
+ // Test the output of the original image.
+ ->addImageStyleMapping('responsive_image_test_module.wide', '3x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => RESPONSIVE_IMAGE_ORIGINAL_IMAGE,
+ ])
+ ->save();
+ }
+ }
+
+ /**
+ * Test responsive image formatters on node display.
+ *
+ * If the empty styles param is set, then the function only tests for the
+ * fallback image style (large).
+ *
+ * @param string $scheme
+ * File scheme to use.
+ * @param bool $empty_styles
+ * If true, use an empty string for image style names.
+ * Defaults to false.
+ */
+ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles = FALSE) {
+ /** @var \Drupal\Core\Render\RendererInterface $renderer */
+ $renderer = $this->container->get('renderer');
+ $node_storage = $this->container->get('entity.manager')->getStorage('node');
+ $field_name = mb_strtolower($this->randomMachineName());
+ $this->createImageField($field_name, 'article', ['uri_scheme' => $scheme]);
+ // Create a new node with an image attached. Make sure we use a large image
+ // so the scale effects of the image styles always have an effect.
+ $test_image = current($this->getTestFiles('image', 39325));
+
+ // Create alt text for the image.
+ $alt = $this->randomMachineName();
+
+ $nid = $this->uploadNodeImage($test_image, $field_name, 'article', $alt);
+ $node_storage->resetCache([$nid]);
+ $node = $node_storage->load($nid);
+
+ // Test that the default formatter is being used.
+ $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
+ $image = [
+ '#theme' => 'image',
+ '#uri' => $image_uri,
+ '#width' => 360,
+ '#height' => 240,
+ '#alt' => $alt,
+ ];
+ $default_output = str_replace("\n", NULL, $renderer->renderRoot($image));
+ $this->assertRaw($default_output, 'Default formatter displaying correctly on full node view.');
+
+ // Test field not being configured. This should not cause a fatal error.
+ $display_options = [
+ 'type' => 'responsive_image_test',
+ 'settings' => ResponsiveImageFormatter::defaultSettings(),
+ ];
+ $display = $this->container->get('entity.manager')
+ ->getStorage('entity_view_display')
+ ->load('node.article.default');
+ if (!$display) {
+ $values = [
+ 'targetEntityType' => 'node',
+ 'bundle' => 'article',
+ 'mode' => 'default',
+ 'status' => TRUE,
+ ];
+ $display = $this->container->get('entity.manager')->getStorage('entity_view_display')->create($values);
+ }
+ $display->setComponent($field_name, $display_options)->save();
+
+ $this->drupalGet('node/' . $nid);
+
+ // Test theme function for responsive image, but using the test formatter.
+ $display_options = [
+ 'type' => 'responsive_image_test',
+ 'settings' => [
+ 'image_link' => 'file',
+ 'responsive_image_style' => 'style_one',
+ ],
+ ];
+ $display = entity_get_display('node', 'article', 'default');
+ $display->setComponent($field_name, $display_options)
+ ->save();
+
+ $this->drupalGet('node/' . $nid);
+
+ // Use the responsive image formatter linked to file formatter.
+ $display_options = [
+ 'type' => 'responsive_image',
+ 'settings' => [
+ 'image_link' => 'file',
+ 'responsive_image_style' => 'style_one',
+ ],
+ ];
+ $display = entity_get_display('node', 'article', 'default');
+ $display->setComponent($field_name, $display_options)
+ ->save();
+
+ $this->drupalGet('node/' . $nid);
+ $cache_tags_header = $this->drupalGetHeader('X-Drupal-Cache-Tags');
+ $this->assertTrue(!preg_match('/ image_style\:/', $cache_tags_header), 'No image style cache tag found.');
+
+ $this->assertPattern('/<a(.*?)href="' . preg_quote(file_url_transform_relative(file_create_url($image_uri)), '/') . '"(.*?)>\s*<picture/');
+ // Verify that the image can be downloaded.
+ $this->assertEqual(file_get_contents($test_image->uri), $this->drupalGet(file_create_url($image_uri)), 'File was downloaded successfully.');
+ if ($scheme == 'private') {
+ // Only verify HTTP headers when using private scheme and the headers are
+ // sent by Drupal.
+ $this->assertEqual($this->drupalGetHeader('Content-Type'), 'image/png', 'Content-Type header was sent.');
+ $this->assertTrue(strstr($this->drupalGetHeader('Cache-Control'), 'private') !== FALSE, 'Cache-Control header was sent.');
+
+ // Log out and try to access the file.
+ $this->drupalLogout();
+ $this->drupalGet(file_create_url($image_uri));
+ $this->assertResponse('403', 'Access denied to original image as anonymous user.');
+
+ // Log in again.
+ $this->drupalLogin($this->adminUser);
+ }
+
+ // Use the responsive image formatter with a responsive image style.
+ $display_options['settings']['responsive_image_style'] = 'style_one';
+ $display_options['settings']['image_link'] = '';
+ $display->setComponent($field_name, $display_options)
+ ->save();
+
+ // Create a derivative so at least one MIME type will be known.
+ $large_style = ImageStyle::load('large');
+ $large_style->createDerivative($image_uri, $large_style->buildUri($image_uri));
+
+ // Output should contain all image styles and all breakpoints.
+ $this->drupalGet('node/' . $nid);
+ if (!$empty_styles) {
+ $this->assertRaw('/styles/medium/');
+ // Make sure the IE9 workaround is present.
+ $this->assertRaw('<!--[if IE 9]><video style="display: none;"><![endif]-->');
+ $this->assertRaw('<!--[if IE 9]></video><![endif]-->');
+ // Assert the empty image is present.
+ $this->assertRaw('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
+ $thumbnail_style = ImageStyle::load('thumbnail');
+ // Assert the output of the 'srcset' attribute (small multipliers first).
+ $this->assertRaw('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 1x, ' . file_url_transform_relative($thumbnail_style->buildUrl($image_uri)) . ' 1.5x');
+ $this->assertRaw('/styles/medium/');
+ // Assert the output of the original image.
+ $this->assertRaw(file_url_transform_relative(file_create_url($image_uri)) . ' 3x');
+ // Assert the output of the breakpoints.
+ $this->assertRaw('media="(min-width: 0px)"');
+ $this->assertRaw('media="(min-width: 560px)"');
+ // Assert the output of the 'sizes' attribute.
+ $this->assertRaw('sizes="(min-width: 700px) 700px, 100vw"');
+ $this->assertPattern('/media="\(min-width: 560px\)".+?sizes="\(min-width: 700px\) 700px, 100vw"/');
+ // Assert the output of the 'srcset' attribute (small images first).
+ $medium_style = ImageStyle::load('medium');
+ $this->assertRaw(file_url_transform_relative($medium_style->buildUrl($image_uri)) . ' 220w, ' . file_url_transform_relative($large_style->buildUrl($image_uri)) . ' 360w');
+ $this->assertRaw('media="(min-width: 851px)"');
+ }
+ $this->assertRaw('/styles/large/');
+ $cache_tags = explode(' ', $this->drupalGetHeader('X-Drupal-Cache-Tags'));
+ $this->assertTrue(in_array('config:responsive_image.styles.style_one', $cache_tags));
+ if (!$empty_styles) {
+ $this->assertTrue(in_array('config:image.style.medium', $cache_tags));
+ $this->assertTrue(in_array('config:image.style.thumbnail', $cache_tags));
+ $this->assertRaw('type="image/png"');
+ }
+ $this->assertTrue(in_array('config:image.style.large', $cache_tags));
+
+ // Test the fallback image style.
+ $image = \Drupal::service('image.factory')->get($image_uri);
+ $fallback_image = [
+ '#theme' => 'image',
+ '#alt' => $alt,
+ '#uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
+ ];
+ // The image.html.twig template has a newline after the <img> tag but
+ // responsive-image.html.twig doesn't have one after the fallback image, so
+ // we remove it here.
+ $default_output = trim($renderer->renderRoot($fallback_image));
+ $this->assertRaw($default_output, 'Image style large formatter displaying correctly on full node view.');
+
+ if ($scheme == 'private') {
+ // Log out and try to access the file.
+ $this->drupalLogout();
+ $this->drupalGet($large_style->buildUrl($image_uri));
+ $this->assertResponse('403', 'Access denied to image style large as anonymous user.');
+ $cache_tags_header = $this->drupalGetHeader('X-Drupal-Cache-Tags');
+ $this->assertTrue(!preg_match('/ image_style\:/', $cache_tags_header), 'No image style cache tag found.');
+ }
+ }
+
+ /**
+ * Tests responsive image formatters on node display linked to the file.
+ */
+ public function testResponsiveImageFieldFormattersLinkToFile() {
+ $this->addTestImageStyleMappings();
+ $this->assertResponsiveImageFieldFormattersLink('file');
+ }
+
+ /**
+ * Tests responsive image formatters on node display linked to the node.
+ */
+ public function testResponsiveImageFieldFormattersLinkToNode() {
+ $this->addTestImageStyleMappings();
+ $this->assertResponsiveImageFieldFormattersLink('content');
+ }
+
+ /**
+ * Tests responsive image formatter on node display with an empty media query.
+ */
+ public function testResponsiveImageFieldFormattersEmptyMediaQuery() {
+ $this->responsiveImgStyle
+ // Test the output of an empty media query.
+ ->addImageStyleMapping('responsive_image_test_module.empty', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE,
+ ])
+ // Test the output with a 1.5x multiplier.
+ ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => 'thumbnail',
+ ])
+ ->save();
+ $node_storage = $this->container->get('entity.manager')->getStorage('node');
+ $field_name = mb_strtolower($this->randomMachineName());
+ $this->createImageField($field_name, 'article', ['uri_scheme' => 'public']);
+ // Create a new node with an image attached.
+ $test_image = current($this->getTestFiles('image'));
+ $nid = $this->uploadNodeImage($test_image, $field_name, 'article', $this->randomMachineName());
+ $node_storage->resetCache([$nid]);
+
+ // Use the responsive image formatter linked to file formatter.
+ $display_options = [
+ 'type' => 'responsive_image',
+ 'settings' => [
+ 'image_link' => '',
+ 'responsive_image_style' => 'style_one',
+ ],
+ ];
+ $display = entity_get_display('node', 'article', 'default');
+ $display->setComponent($field_name, $display_options)
+ ->save();
+
+ // View the node.
+ $this->drupalGet('node/' . $nid);
+
+ // Assert an empty media attribute is not output.
+ $this->assertSession()->responseNotMatches('@srcset="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 1x".+?media=".+?/><source@');
+
+ // Assert the media attribute is present if it has a value.
+ $thumbnail_style = ImageStyle::load('thumbnail');
+ $node = $node_storage->load($nid);
+ $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
+ $this->assertPattern('/srcset="' . preg_quote(file_url_transform_relative($thumbnail_style->buildUrl($image_uri)), '/') . ' 1x".+?media="\(min-width: 0px\)"/');
+ }
+
+ /**
+ * Tests responsive image formatter on node display with one source.
+ */
+ public function testResponsiveImageFieldFormattersOneSource() {
+ $this->responsiveImgStyle
+ // Test the output of an empty media query.
+ ->addImageStyleMapping('responsive_image_test_module.empty', '1x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => 'medium',
+ ])
+ ->addImageStyleMapping('responsive_image_test_module.empty', '2x', [
+ 'image_mapping_type' => 'image_style',
+ 'image_mapping' => 'large',
+ ])
+ ->save();
+ $node_storage = $this->container->get('entity.manager')->getStorage('node');
+ $field_name = mb_strtolower($this->randomMachineName());
+ $this->createImageField($field_name, 'article', ['uri_scheme' => 'public']);
+ // Create a new node with an image attached.
+ $test_image = current($this->getTestFiles('image'));
+ $nid = $this->uploadNodeImage($test_image, $field_name, 'article', $this->randomMachineName());
+ $node_storage->resetCache([$nid]);
+
+ // Use the responsive image formatter linked to file formatter.
+ $display_options = [
+ 'type' => 'responsive_image',
+ 'settings' => [
+ 'image_link' => '',
+ 'responsive_image_style' => 'style_one',
+ ],
+ ];
+ $display = entity_get_display('node', 'article', 'default');
+ $display->setComponent($field_name, $display_options)
+ ->save();
+
+ // View the node.
+ $this->drupalGet('node/' . $nid);
+
+ // Assert the media attribute is present if it has a value.
+ $large_style = ImageStyle::load('large');
+ $medium_style = ImageStyle::load('medium');
+ $node = $node_storage->load($nid);
+ $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
+ $this->assertRaw('<img srcset="' . file_url_transform_relative($medium_style->buildUrl($image_uri)) . ' 1x, ' . file_url_transform_relative($large_style->buildUrl($image_uri)) . ' 2x"');
+ }
+
+ /**
+ * Tests responsive image formatters linked to the file or node.
+ *
+ * @param string $link_type
+ * The link type to test. Either 'file' or 'content'.
+ */
+ private function assertResponsiveImageFieldFormattersLink($link_type) {
+ $field_name = mb_strtolower($this->randomMachineName());
+ $field_settings = ['alt_field_required' => 0];
+ $this->createImageField($field_name, 'article', ['uri_scheme' => 'public'], $field_settings);
+ // Create a new node with an image attached.
+ $test_image = current($this->getTestFiles('image'));
+
+ // Test the image linked to file formatter.
+ $display_options = [
+ 'type' => 'responsive_image',
+ 'settings' => [
+ 'image_link' => $link_type,
+ 'responsive_image_style' => 'style_one',
+ ],
+ ];
+ entity_get_display('node', 'article', 'default')
+ ->setComponent($field_name, $display_options)
+ ->save();
+ // Ensure that preview works.
+ $this->previewNodeImage($test_image, $field_name, 'article');
+
+ // Look for a picture tag in the preview output
+ $this->assertPattern('/picture/');
+
+ $nid = $this->uploadNodeImage($test_image, $field_name, 'article');
+ $this->container->get('entity.manager')->getStorage('node')->resetCache([$nid]);
+ $node = Node::load($nid);
+
+ // Use the responsive image formatter linked to file formatter.
+ $display_options = [
+ 'type' => 'responsive_image',
+ 'settings' => [
+ 'image_link' => $link_type,
+ 'responsive_image_style' => 'style_one',
+ ],
+ ];
+ entity_get_display('node', 'article', 'default')
+ ->setComponent($field_name, $display_options)
+ ->save();
+
+ // Create a derivative so at least one MIME type will be known.
+ $large_style = ImageStyle::load('large');
+ $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
+ $large_style->createDerivative($image_uri, $large_style->buildUri($image_uri));
+
+ // Output should contain all image styles and all breakpoints.
+ $this->drupalGet('node/' . $nid);
+ switch ($link_type) {
+ case 'file':
+ // Make sure the link to the file is present.
+ $this->assertPattern('/<a(.*?)href="' . preg_quote(file_url_transform_relative(file_create_url($image_uri)), '/') . '"(.*?)>\s*<picture/');
+ break;
+
+ case 'content':
+ // Make sure the link to the node is present.
+ $this->assertPattern('/<a(.*?)href="' . preg_quote($node->url(), '/') . '"(.*?)>\s*<picture/');
+ break;
+ }
+ }
+
+}
projects / yaffs-website / blobdiff