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>/');
}