diff --git a/core/modules/responsive_image/src/FunctionalJavascript/ResponsiveImageFieldUiTest.php b/core/modules/responsive_image/src/FunctionalJavascript/ResponsiveImageFieldUiTest.php new file mode 100644 index 0000000000..a726b75b95 --- /dev/null +++ b/core/modules/responsive_image/src/FunctionalJavascript/ResponsiveImageFieldUiTest.php @@ -0,0 +1,164 @@ +drupalPlaceBlock('system_breadcrumb_block'); + // Create a test user. + $admin_user = $this->drupalCreateUser([ + 'access content', + 'administer content types', + 'administer node fields', + 'administer node form display', + 'administer node display', + 'bypass node access', + ]); + $this->drupalLogin($admin_user); + + // Create content type, with underscores. + $type_name = strtolower($this->randomMachineName(8)) . '_test'; + $type = $this->drupalCreateContentType([ + 'name' => $type_name, + 'type' => $type_name, + ]); + $this->type = $type->id(); + } + + /** + * Tests formatter settings. + */ + 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', + ]) + // 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', + ]) + ->save(); + \Drupal::entityManager()->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'); + } + +} diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php deleted file mode 100644 index 2069f61368..0000000000 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php +++ /dev/null @@ -1,131 +0,0 @@ -drupalPlaceBlock('system_breadcrumb_block'); - // Create a test user. - $admin_user = $this->drupalCreateUser(['access content', 'administer content types', 'administer node fields', 'administer node form display', 'administer node display', 'bypass node access']); - $this->drupalLogin($admin_user); - - // Create content type, with underscores. - $type_name = strtolower($this->randomMachineName(8)) . '_test'; - $type = $this->drupalCreateContentType(['name' => $type_name, 'type' => $type_name]); - $this->type = $type->id(); - } - - /** - * Tests formatter settings. - */ - public function testResponsiveImageFormatterUI() { - $manage_fields = 'admin/structure/types/manage/' . $this->type; - $manage_display = $manage_fields . '/display'; - - // Create a field, and a node with some data for the field. - $this->fieldUIAddNewField($manage_fields, 'image', 'Image field', 'image'); - // Display the "Manage display". - $this->drupalGet($manage_display); - - // Change the formatter and check that the summary is updated. - $edit = [ - 'fields[field_image][type]' => 'responsive_image', - 'fields[field_image][region]' => 'content', - 'refresh_rows' => 'field_image', - ]; - $this->drupalPostAjaxForm(NULL, $edit, ['op' => t('Refresh')]); - $this->assertText("Select a responsive image style.", 'The expected summary is displayed.'); - - // Submit the form. - $this->drupalPostForm(NULL, [], t('Save')); - $this->assertText("Select a responsive image style.", 'The expected summary is displayed.'); - - // 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', - ]) - // 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', - ]) - ->save(); - \Drupal::entityManager()->clearCachedFieldDefinitions(); - // Refresh the page. - $this->drupalGet($manage_display); - $this->assertText("Select a responsive image style.", 'The expected summary is displayed.'); - - // Click on the formatter settings button to open the formatter settings - // form. - $this->drupalPostAjaxForm(NULL, [], "field_image_settings_edit"); - - // 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) { - $this->assertField($fieldname); - } - $edit = [ - 'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one', - 'fields[field_image][settings_edit_form][settings][image_link]' => 'content', - ]; - $this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update"); - - // Save the form to save the settings. - $this->drupalPostForm(NULL, [], t('Save')); - $this->assertText('Responsive image style: Style One'); - $this->assertText('Linked to content'); - - // Click on the formatter settings button to open the formatter settings - // form. - $this->drupalPostAjaxForm(NULL, [], "field_image_settings_edit"); - $edit = [ - 'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one', - 'fields[field_image][settings_edit_form][settings][image_link]' => 'file', - ]; - $this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update"); - - // Save the form to save the third party settings. - $this->drupalPostForm(NULL, [], t('Save')); - $this->assertText('Responsive image style: Style One'); - $this->assertText('Linked to file'); - } - -}