function ResponsiveImageFieldDisplayTest::testResponsiveImageFieldFormattersMultipleSources

Tests responsive image formatter on node display with one and two sources.

File

core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php, line 425

Class

ResponsiveImageFieldDisplayTest

Tests responsive image display formatter.

Namespace

Code

public function testResponsiveImageFieldFormattersMultipleSources() : void {
  // Setup known image style sizes so the test can assert on known sizes.
  $large_style = ImageStyle::load('large');
  assert($large_style instanceof ImageStyleInterface);
  $large_style->addImageEffect([
    'id' => 'image_resize',
    'data' => [
      'width' => '480',
      'height' => '480',
    ],
  ]);
  $large_style->save();
  $medium_style = ImageStyle::load('medium');
  assert($medium_style instanceof ImageStyleInterface);
  $medium_style->addImageEffect([
    'id' => 'image_resize',
    'data' => [
      'width' => '220',
      'height' => '220',
    ],
  ]);
  $medium_style->save();
  $this->responsiveImgStyle
    ->addImageStyleMapping('responsive_image_test_module.empty', '1x', [
    'image_mapping_type' => 'image_style',
    'image_mapping' => $medium_style->id(),
  ])
    ->addImageStyleMapping('responsive_image_test_module.empty', '1.5x', [
    'image_mapping_type' => 'image_style',
    'image_mapping' => $large_style->id(),
  ])
    ->addImageStyleMapping('responsive_image_test_module.empty', '2x', [
    'image_mapping_type' => 'image_style',
    'image_mapping' => $large_style->id(),
  ])
    ->save();
  $node_storage = $this->container
    ->get('entity_type.manager')
    ->getStorage('node');
  $field_name = $this->randomMachineName();
  $this->createImageField($field_name, 'node', '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',
      'image_loading' => [
        // Test the image loading default option can be overridden.
'attribute' => 'eager',
      ],
    ],
  ];
  $display = \Drupal::service('entity_display.repository')->getViewDisplay('node', 'article');
  $display->setComponent($field_name, $display_options)
    ->save();
  // View the node.
  $this->drupalGet('node/' . $nid);
  // Assert the img tag has medium and large images and fallback dimensions
  // from the large image style are used.
  $node = $node_storage->load($nid);
  $image_uri = File::load($node->{$field_name}->target_id)
    ->getFileUri();
  $medium_transform_url = $this->fileUrlGenerator
    ->transformRelative($medium_style->buildUrl($image_uri));
  $large_transform_url = $this->fileUrlGenerator
    ->transformRelative($large_style->buildUrl($image_uri));
  $this->assertSession()
    ->responseMatches('/<img loading="eager" srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" width="220" height="220" src="' . \preg_quote($large_transform_url, '/') . '" alt="\\w+" \\/>/');
  $this->responsiveImgStyle
    ->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
    'image_mapping_type' => 'image_style',
    'image_mapping' => $large_style->id(),
  ])
    ->save();
  // Assert the picture tag has source tags that include dimensions.
  $this->drupalGet('node/' . $nid);
  $this->assertSession()
    ->responseMatches('/<picture>\\s+<source srcset="' . \preg_quote($large_transform_url, '/') . ' 1x" media="\\(min-width: 851px\\)" type="image\\/webp" width="480" height="480"\\/>\\s+<source srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" type="image\\/webp" width="220" height="220"\\/>\\s+<img loading="eager" src="' . \preg_quote($large_transform_url, '/') . '" width="480" height="480" alt="\\w+" \\/>\\s+<\\/picture>/');
}