diff -u b/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css --- b/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -104,6 +104,10 @@ margin: 8px 0 0; } +.media-library-add-form-description { + margin-top: 0; +} + /* Style the media add oEmbed form. */ .media-library-add-form-oembed-wrapper { display: flex; @@ -129,10 +133,6 @@ align-self: center; } -.media-library-add-form-description { - margin-top: 0; -} - /* Media add form selection styles. */ .media-library-add-form-selection { margin-top: 1em; diff -u b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php --- b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -813,9 +813,11 @@ $assert_session = $this->assertSession(); $page = $this->getSession()->getPage(); - $video_title = "Everyday I'm Drupalin' Drupal Rap (Rick Ross - Hustlin)"; - $video_url = 'https://www.youtube.com/watch?v=PWjcqE3QKBg'; - ResourceController::setResourceUrl($video_url, $this->getFixturesDirectory() . '/video_youtube.json'); + $youtube_title = "Everyday I'm Drupalin' Drupal Rap (Rick Ross - Hustlin)"; + $youtube_url = 'https://www.youtube.com/watch?v=PWjcqE3QKBg'; + $vimeo_title = "Drupal Rap Video - Schipulcon09"; + $vimeo_url = 'https://vimeo.com/7073899'; + ResourceController::setResourceUrl($youtube_url, $this->getFixturesDirectory() . '/video_youtube.json'); // Visit a node create page. $this->drupalGet('node/add/basic_page'); @@ -836,13 +838,13 @@ // Assert we can add an oEmbed video to media type five. $page->clickLink('Type Five'); $assert_session->assertWaitOnAjaxRequest(); - $page->fillField('Add Type Five via URL', $video_url); + $page->fillField('Add Type Five via URL', $youtube_url); $assert_session->pageTextContains('Allowed providers: YouTube, Vimeo.'); $page->pressButton('Add'); $assert_session->assertWaitOnAjaxRequest(); // Assert the name field contains the remote video title. - $assert_session->fieldValueEquals('Name', $video_title); - $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save'); + $assert_session->fieldValueEquals('Name', $youtube_title); + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select'); $assert_session->assertWaitOnAjaxRequest(); // Load the created media item. @@ -854,15 +856,15 @@ // selected. The added media items should be in the first position of the // add form. $assert_session->pageTextContains('Media library'); - $assert_session->pageTextContains($video_title); + $assert_session->pageTextContains($youtube_title); $assert_session->fieldValueEquals('media_library_select_form[0]', $added_media->id()); $assert_session->checkboxChecked('media_library_select_form[0]'); // Assert the created oEmbed video is correctly added to the widget. - $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media'); + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected'); $assert_session->assertWaitOnAjaxRequest(); $assert_session->pageTextNotContains('Media library'); - $assert_session->pageTextContains($video_title); + $assert_session->pageTextContains($youtube_title); // Open the media library again for the unlimited field and go to the tab // for media type five. @@ -873,7 +875,7 @@ $assert_session->assertWaitOnAjaxRequest(); // Assert the video is available on the tab. - $assert_session->pageTextContains($video_title); + $assert_session->pageTextContains($youtube_title); // Assert we can only add supported URLs. $page->fillField('Add Type Five via URL', 'https://www.youtube.com/'); @@ -888,21 +890,101 @@ $assert_session->assertWaitOnAjaxRequest(); $assert_session->pageTextContains('Could not retrieve the oEmbed resource.'); + // Select a media item to check if the selection is persisted when adding + // new items. + $checkbox = $page->findField("Select $youtube_title"); + $selected_item_id = $checkbox->getAttribute('value'); + $checkbox->click(); + $assert_session->pageTextContains('1 item selected'); + $assert_session->hiddenFieldValueEquals('current_selection', $selected_item_id); + // Assert we can add a oEmbed video with a custom name. - $page->fillField('Add Type Five via URL', $video_url); + $page->fillField('Add Type Five via URL', $youtube_url); $page->pressButton('Add'); $assert_session->assertWaitOnAjaxRequest(); $page->fillField('Name', 'Custom video title'); - $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save'); + $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection'); + $assert_session->checkboxChecked("Select $youtube_title", $selection_area); + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select'); $assert_session->assertWaitOnAjaxRequest(); + + // Load the created media item. + $media_storage = $this->container->get('entity_type.manager')->getStorage('media'); + $media_items = $media_storage->loadMultiple(); + $added_media = array_pop($media_items); + // Ensure the media item was saved to the library and automatically + // selected. The added media items should be in the first position of the + // add form. $assert_session->pageTextContains('Media library'); $assert_session->pageTextContains('Custom video title'); - - // Assert the created oEmbed video is correctly added to the widget. - $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Select media'); + $assert_session->fieldValueEquals('media_library_select_form[0]', $added_media->id()); + $assert_session->checkboxChecked('media_library_select_form[0]'); + // Assert the item that was selected before uploading the file is still + // selected. + $assert_session->pageTextContains('2 items selected'); + $assert_session->checkboxChecked("Select Custom video title"); + $assert_session->checkboxChecked("Select $youtube_title"); + $assert_session->hiddenFieldValueEquals('current_selection', implode(',', [$selected_item_id, $added_media->id()])); + $checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input'); + $selected_checkboxes = []; + foreach ($checkboxes as $checkbox) { + if ($checkbox->isChecked()) { + $selected_checkboxes[] = $checkbox->getAttribute('value'); + } + } + $this->assertCount(2, $selected_checkboxes); + // Ensure the created item is added in the widget. + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected'); $assert_session->assertWaitOnAjaxRequest(); $assert_session->pageTextNotContains('Media library'); $assert_session->pageTextContains('Custom video title'); + + // Assert we can directly insert added oEmbed media in the widget. + $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click(); + $assert_session->assertWaitOnAjaxRequest(); + $assert_session->pageTextContains('Media library'); + $page->clickLink('Type Five'); + $assert_session->assertWaitOnAjaxRequest(); + $page->fillField('Add Type Five via URL', $vimeo_url); + $page->pressButton('Add'); + $assert_session->assertWaitOnAjaxRequest(); + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and insert'); + $assert_session->assertWaitOnAjaxRequest(); + $assert_session->pageTextNotContains('Media library'); + $assert_session->pageTextContains($vimeo_title); + + // Assert we can remove selected items from the selection area in the oEmbed + // form. + $assert_session->elementExists('css', '.media-library-open-button[href*="field_unlimited_media"]')->click(); + $assert_session->assertWaitOnAjaxRequest(); + $assert_session->pageTextContains('Media library'); + $page->clickLink('Type Five'); + $assert_session->assertWaitOnAjaxRequest(); + $checkbox = $page->findField("Select $vimeo_title"); + $selected_item_id = $checkbox->getAttribute('value'); + $checkbox->click(); + $assert_session->hiddenFieldValueEquals('current_selection', $selected_item_id); + $page->fillField('Add Type Five via URL', $youtube_url); + $page->pressButton('Add'); + $assert_session->assertWaitOnAjaxRequest(); + $page->fillField('Name', 'Another video'); + $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection'); + $assert_session->checkboxChecked("Select $vimeo_title", $selection_area); + $page->uncheckField("Select $vimeo_title"); + $assert_session->hiddenFieldValueEquals('current_selection', ''); + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Save and select'); + $assert_session->assertWaitOnAjaxRequest(); + $media_storage = $this->container->get('entity_type.manager')->getStorage('media'); + $media_items = $media_storage->loadMultiple(); + $added_media = array_pop($media_items); + $assert_session->pageTextContains('1 item selected'); + $assert_session->checkboxChecked('Select Another video'); + $assert_session->checkboxNotChecked("Select $vimeo_title"); + $assert_session->hiddenFieldValueEquals('current_selection', $added_media->id()); + $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected'); + $assert_session->assertWaitOnAjaxRequest(); + $assert_session->pageTextNotContains('Media library'); + $assert_session->pageTextContains('Another video'); } }