function ResponsiveImageFieldUiTest::testResponsiveImageFormatterUi

Tests formatter settings.

File

core/modules/responsive_image/tests/src/FunctionalJavascript/ResponsiveImageFieldUiTest.php, line 70

Class

ResponsiveImageFieldUiTest

Tests the responsive image field UI.

Namespace

Code

public function testResponsiveImageFormatterUi() {
    $manage = 'admin/structure/types/manage/' . $this->type;
    $add_field = $manage . '/fields/add-field';
    $manage_display = $manage . '/display';
    $assert_session = $this->assertSession();
    // Create a field, and a node with some data for the field.
    // Create the field.
    $this->drupalGet($add_field);
    $page = $this->getSession()
        ->getPage();
    $storage_type = $page->findField('edit-new-storage-type');
    $storage_type->setValue('image');
    // Set the label.
    $label = $page->findField('edit-label');
    $label->setValue('Image');
    // Wait for the machine name.
    $assert_session->waitForElementVisible('css', '[name="label"] + * .machine-name-value');
    // Save the current page.
    $save_button = $page->findButton('Save and continue');
    $save_button->click();
    // Display the "Manage display" page.
    $this->drupalGet($manage_display);
    // Change the formatter and check that the summary is updated.
    $page = $this->getSession()
        ->getPage();
    $field_image_type = $page->findField('fields[field_image][type]');
    $field_image_type->setValue('responsive_image');
    $summary_text = $assert_session->waitForElement('xpath', $this->cssSelectToXpath('#field-image .ajax-new-content .field-plugin-summary'));
    $this->assertEquals('Select a responsive image style.', $summary_text->getText());
    $page->pressButton('Save');
    $assert_session->responseContains("Select a responsive image style.");
    // Create responsive image styles.
    $responsive_image_style = ResponsiveImageStyle::create([
        'id' => 'style_one',
        'label' => 'Style One',
        'breakpoint_group' => 'responsive_image_test_module',
        'fallback_image_style' => 'thumbnail',
    ]);
    $responsive_image_style->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
        'image_mapping_type' => 'image_style',
        'image_mapping' => 'thumbnail',
    ])
        ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
        'image_mapping_type' => 'image_style',
        'image_mapping' => 'medium',
    ])
        ->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
        'image_mapping_type' => 'image_style',
        'image_mapping' => 'large',
    ])
        ->save();
    \Drupal::service('entity_field.manager')->clearCachedFieldDefinitions();
    // Refresh the page.
    $this->drupalGet($manage_display);
    $assert_session->responseContains("Select a responsive image style.");
    // Click on the formatter settings button to open the formatter settings
    // form.
    $field_image_type = $page->findField('fields[field_image][type]');
    $field_image_type->setValue('responsive_image');
    $page->find('css', '#edit-fields-field-image-settings-edit')
        ->click();
    $assert_session->waitForField('fields[field_image][settings_edit_form][settings][responsive_image_style]');
    // Assert that the correct fields are present.
    $fieldnames = [
        'fields[field_image][settings_edit_form][settings][responsive_image_style]',
        'fields[field_image][settings_edit_form][settings][image_link]',
    ];
    foreach ($fieldnames as $fieldname) {
        $assert_session->fieldExists($fieldname);
    }
    $page->findField('fields[field_image][settings_edit_form][settings][responsive_image_style]')
        ->setValue('style_one');
    $page->findField('fields[field_image][settings_edit_form][settings][image_link]')
        ->setValue('content');
    // Save the form to save the settings.
    $page->pressButton('Save');
    $assert_session->responseContains('Responsive image style: Style One');
    $assert_session->responseContains('Linked to content');
    $page->find('css', '#edit-fields-field-image-settings-edit')
        ->click();
    $assert_session->waitForField('fields[field_image][settings_edit_form][settings][responsive_image_style]');
    $page->findField('fields[field_image][settings_edit_form][settings][image_link]')
        ->setValue('file');
    // Save the form to save the settings.
    $page->pressButton('Save');
    $assert_session->responseContains('Responsive image style: Style One');
    $assert_session->responseContains('Linked to file');
}