Unverified Commit ff9dbe9b authored by lauriii's avatar lauriii
Browse files

Issue #3088681 by phenaproxima, seanB, bnjmnm, lauriii: Make MediaLibraryTest...

Issue #3088681 by phenaproxima, seanB, bnjmnm, lauriii: Make MediaLibraryTest less dependent on representational CSS selectors

(cherry picked from commit 1aaa1d95)
parent aa9d5a31
......@@ -58,7 +58,7 @@
? strings.hide
: strings.show,
)
.parent()
.closest('.js-media-library-widget')
.find('.js-media-library-item-weight')
.parent()
.toggle();
......
......@@ -31,7 +31,7 @@
};
$('.js-media-library-widget-toggle-weight', context).once('media-library-toggle').on('click', function (e) {
e.preventDefault();
$(e.currentTarget).toggleClass('active').text($(e.currentTarget).hasClass('active') ? strings.hide : strings.show).parent().find('.js-media-library-item-weight').parent().toggle();
$(e.currentTarget).toggleClass('active').text($(e.currentTarget).hasClass('active') ? strings.hide : strings.show).closest('.js-media-library-widget').find('.js-media-library-item-weight').parent().toggle();
}).text(strings.show);
$('.js-media-library-item-weight', context).once('media-library-toggle').parent().hide();
}
......
......@@ -173,6 +173,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
'#type' => 'container',
'#attributes' => [
'class' => [
'js-media-library-add-form-added-media',
'media-library-add-form__added-media',
],
'aria-label' => $this->t('Added media items'),
......
......@@ -317,7 +317,7 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
'#target_bundles' => isset($settings['target_bundles']) ? $settings['target_bundles'] : FALSE,
'#attributes' => [
'id' => $wrapper_id,
'class' => ['media-library-widget'],
'class' => ['js-media-library-widget', 'media-library-widget'],
],
'#attached' => [
'library' => ['media_library/widget'],
......
......@@ -122,8 +122,8 @@ public function testAdministrationPage() {
// Verify that the media name does not contain a link.
$assert_session->elementNotExists('css', '.media-library-item__name a');
// Verify that there are links to edit and delete media items.
$assert_session->elementExists('css', '.media-library-item .media-library-item__edit');
$assert_session->elementExists('css', '.media-library-item .media-library-item__remove');
$assert_session->linkExists('Edit Dog');
$assert_session->linkExists('Delete Turtle');
// Test that users can filter by type.
$page->selectFieldOption('Media type', 'Type One');
......@@ -154,13 +154,13 @@ public function testAdministrationPage() {
$select_all = $assert_session->waitForField('Select all media');
$this->assertNotEmpty($select_all);
$select_all->check();
$this->assertNotEmpty($assert_session->waitForText('All 7 items selected'));
$this->waitForText('All 7 items selected');
$select_all->uncheck();
$this->assertNotEmpty($assert_session->waitForText('Zero items selected'));
$this->waitForText('Zero items selected');
$select_all->check();
$this->getSession()->getPage()->selectFieldOption('Action', 'media_delete_action');
$page->selectFieldOption('Action', 'media_delete_action');
$this->submitForm([], 'Apply to selected items');
$this->getSession()->getPage()->pressButton('Delete');
$page->pressButton('Delete');
$assert_session->pageTextNotContains('Cat');
$assert_session->pageTextNotContains('Turtle');
......@@ -191,16 +191,16 @@ public function testWidgetWithoutMediaTypes() {
// Assert a properly configured field does not show a message.
$assert_session->elementTextNotContains('css', '.field--name-field-twin-media', 'There are no allowed media types configured for this field.');
$assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]');
$assert_session->elementExists('css', '.js-media-library-open-button[name^="field_twin_media"]');
// Assert that the message is shown when the target_bundles setting for the
// entity reference field is an empty array. No types are allowed in this
// case.
$assert_session->elementTextContains('css', '.field--name-field-empty-types-media', $default_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_empty_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_empty_types_media"]');
// Assert that the message is not shown when the target_bundles setting for
// the entity reference field is null. All types are allowed in this case.
$assert_session->elementTextNotContains('css', '.field--name-field-null-types-media', 'There are no allowed media types configured for this field.');
$assert_session->elementExists('css', '.media-library-open-button[name^="field_null_types_media"]');
$assert_session->elementExists('css', '.js-media-library-open-button[name^="field_null_types_media"]');
// Delete all media and media types.
$entity_type_manager = \Drupal::entityTypeManager();
......@@ -214,15 +214,15 @@ public function testWidgetWithoutMediaTypes() {
// Assert a properly configured field now shows a message.
$assert_session->elementTextContains('css', '.field--name-field-twin-media', $default_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_twin_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_twin_media"]');
// Assert that the message is shown when the target_bundles setting for the
// entity reference field is an empty array.
$assert_session->elementTextContains('css', '.field--name-field-empty-types-media', $default_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_empty_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_empty_types_media"]');
// Assert that the message is shown when the target_bundles setting for
// the entity reference field is null.
$assert_session->elementTextContains('css', '.field--name-field-null-types-media', $default_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_null_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_null_types_media"]');
// Assert a different message is shown when the user is allowed to
// administer the fields.
......@@ -257,24 +257,24 @@ public function testWidgetWithoutMediaTypes() {
// Assert a properly configured field still shows a message.
$assert_session->elementContains('css', '.field--name-field-twin-media', $field_twin_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_twin_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_twin_media"]');
// Assert that the message is shown when the target_bundles setting for the
// entity reference field is an empty array.
$assert_session->elementContains('css', '.field--name-field-empty-types-media', $field_empty_types_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_empty_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_empty_types_media"]');
// Assert that the message is shown when the target_bundles setting for the
// entity reference field is null.
$assert_session->elementContains('css', '.field--name-field-null-types-media', $field_null_types_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_null_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_null_types_media"]');
// Assert the messages are also shown in the default value section of the
// field edit form.
$this->drupalGet($field_empty_types_url);
$assert_session->elementContains('css', '.field--name-field-empty-types-media', $field_empty_types_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_empty_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_empty_types_media"]');
$this->drupalGet($field_null_types_url);
$assert_session->elementContains('css', '.field--name-field-null-types-media', $field_null_types_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_null_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_null_types_media"]');
// Uninstall the Field UI and check if the link is removed from the message.
\Drupal::service('module_installer')->uninstall(['field_ui']);
......@@ -288,15 +288,15 @@ public function testWidgetWithoutMediaTypes() {
$assert_session->elementNotExists('named', ['link', 'Edit the field settings']);
// Assert a properly configured field still shows a message.
$assert_session->elementContains('css', '.field--name-field-twin-media', $field_ui_uninstalled_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_twin_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_twin_media"]');
// Assert that the message is shown when the target_bundles setting for the
// entity reference field is an empty array.
$assert_session->elementContains('css', '.field--name-field-empty-types-media', $field_ui_uninstalled_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_empty_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_empty_types_media"]');
// Assert that the message is shown when the target_bundles setting for the
// entity reference field is null.
$assert_session->elementContains('css', '.field--name-field-null-types-media', $field_ui_uninstalled_message);
$assert_session->elementNotExists('css', '.media-library-open-button[name^="field_null_types_media"]');
$assert_session->elementNotExists('css', '.js-media-library-open-button[name^="field_null_types_media"]');
}
/**
......@@ -307,21 +307,21 @@ public function testViewsAdmin() {
// Assert that the widget can be seen and that there are 8 items.
$this->drupalGet('/admin/structure/views/view/media_library/edit/widget');
$this->waitForElementsCount('css', '.media-library-item', 8);
$this->waitForElementsCount('css', '.js-media-library-item', 8);
// Assert that filtering works in live preview.
$page->find('css', '.media-library-view .view-filters')->fillField('name', 'snake');
$page->find('css', '.media-library-view .view-filters')->pressButton('Apply filters');
$this->waitForElementsCount('css', '.media-library-item', 1);
$page->find('css', '.js-media-library-view .view-filters')->fillField('name', 'snake');
$page->find('css', '.js-media-library-view .view-filters')->pressButton('Apply filters');
$this->waitForElementsCount('css', '.js-media-library-item', 1);
// Test the same routine but in the view for the table wiget.
$this->drupalGet('/admin/structure/views/view/media_library/edit/widget_table');
$this->waitForElementsCount('css', '.media-library-item', 8);
$this->waitForElementsCount('css', '.js-media-library-item', 8);
// Assert that filtering works in live preview.
$page->find('css', '.media-library-view .view-filters')->fillField('name', 'snake');
$page->find('css', '.media-library-view .view-filters')->pressButton('Apply filters');
$this->waitForElementsCount('css', '.media-library-item', 1);
$page->find('css', '.js-media-library-view .view-filters')->fillField('name', 'snake');
$page->find('css', '.js-media-library-view .view-filters')->pressButton('Apply filters');
$this->waitForElementsCount('css', '.js-media-library-item', 1);
// We cannot test clicking the 'Insert selected' button in either view
// because we expect an AJAX error, which would always throw an exception
......@@ -439,7 +439,6 @@ public function testWidget() {
// Assert generic media library elements.
$this->openMediaLibraryForField('field_unlimited_media');
$this->waitForText('Add or select media');
$this->assertFalse($assert_session->elementExists('css', '.media-library-select-all')->isVisible());
$assert_session->elementExists('css', '.ui-dialog-titlebar-close')->click();
......@@ -462,8 +461,8 @@ public function testWidget() {
// Assert that there are no links in the media library view.
$this->openMediaLibraryForField('field_unlimited_media');
$assert_session->elementNotExists('css', '.media-library-item__name a');
$assert_session->elementNotExists('css', '.media-library-view .media-library-item__edit');
$assert_session->elementNotExists('css', '.media-library-view .media-library-item__remove');
$assert_session->elementNotExists('css', '.view-media-library .media-library-item__edit');
$assert_session->elementNotExists('css', '.view-media-library .media-library-item__remove');
$assert_session->elementExists('css', '.ui-dialog-titlebar-close')->click();
// Assert that the media type menu is available when the target_bundles
......@@ -479,22 +478,20 @@ public function testWidget() {
// Assert that the media type menu is not available when only 1 type is
// configured for the field.
$this->openMediaLibraryForField('field_single_media_type', '.media-library-wrapper');
$this->openMediaLibraryForField('field_single_media_type', '#media-library-wrapper');
$this->waitForElementTextContains('.media-library-selected-count', '0 of 1 item selected');
// Select a media item, assert the hidden selection field contains the ID of
// the selected item.
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$this->assertGreaterThanOrEqual(1, count($checkboxes));
$checkboxes[0]->click();
$this->selectMediaItem(0);
$assert_session->hiddenFieldValueEquals('media-library-modal-selection', '4');
$assert_session->elementTextContains('css', '.media-library-selected-count', '1 of 1 item selected');
$assert_session->elementNotExists('css', '.media-library-menu');
$assert_session->elementNotExists('css', '.js-media-library-menu');
$assert_session->elementExists('css', '.ui-dialog-titlebar-close')->click();
// Assert the menu links can be sorted through the widget configuration.
$this->openMediaLibraryForField('field_twin_media');
$links = $page->findAll('css', '.media-library-menu a');
$links = $this->getTypesMenu()->findAll('css', 'a');
$link_titles = [];
foreach ($links as $link) {
$link_titles[] = $link->getText();
......@@ -514,7 +511,7 @@ public function testWidget() {
$this->openMediaLibraryForField('field_twin_media');
$link_titles = array_map(function ($link) {
return $link->getText();
}, $page->findAll('css', '.media-library-menu a'));
}, $links);
$this->assertSame($link_titles, ['Show Type One media (selected)', 'Show Type Three media', 'Show Type Four media', 'Show Type Two media']);
$assert_session->elementExists('css', '.ui-dialog-titlebar-close')->click();
......@@ -557,64 +554,65 @@ public function testWidget() {
// Assert adding a single media item and removing it.
$this->openMediaLibraryForField('field_twin_media');
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$this->assertGreaterThanOrEqual(1, count($checkboxes));
$checkboxes[0]->click();
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->assertNotEmpty($assert_session->waitForText('Added one media item.'));
$this->selectMediaItem(0);
$this->pressInsertSelected('Added one media item.');
// Assert the focus is set back on the open button of the media field.
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").is(":focus")');
// Assert the weight field can be focused via a mouse click.
$assert_session->elementExists('named', ['button', 'Show media item weights'])->click();
$assert_session->elementExists('css', '#field_twin_media-media-library-wrapper .media-library-item__weight')->click();
$assert_session->elementExists('css', '#field_twin_media-media-library-wrapper .js-media-library-widget-toggle-weight')->click();
// Assert that we can toggle the visibility of the weight inputs.
$wrapper = $assert_session->elementExists('css', '.field--name-field-twin-media');
$wrapper->pressButton('Show media item weights');
$assert_session->fieldExists('Weight', $wrapper)->click();
$wrapper->pressButton('Hide media item weights');
// Remove the selected item.
$assert_session->elementAttributeContains('css', '.media-library-item__remove', 'aria-label', 'Remove Dog');
$assert_session->elementExists('css', '.media-library-item__remove')->click();
$this->assertNotEmpty($assert_session->waitForText('Removed Dog.'));
$button = $assert_session->buttonExists('Remove', $wrapper);
$this->assertSame('Remove Dog', $button->getAttribute('aria-label'));
$button->press();
$this->waitForText('Removed Dog.');
// Assert the focus is set back on the open button of the media field.
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").is(":focus")');
// Assert we can select the same media item twice.
$this->openMediaLibraryForField('field_twin_media');
$page->checkField('Select Dog');
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->assertNotEmpty($assert_session->waitForText('Added one media item.'));
$this->pressInsertSelected('Added one media item.');
$this->openMediaLibraryForField('field_twin_media');
$page->checkField('Select Dog');
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->waitForText('Added one media item.');
$this->pressInsertSelected('Added one media item.');
// Assert the same has been added twice and remove the items again.
$this->waitForElementsCount('css', '.field--name-field-twin-media .media-library-item', 2);
$this->waitForElementsCount('css', '.field--name-field-twin-media [data-media-library-item-delta]', 2);
$assert_session->hiddenFieldValueEquals('field_twin_media[selection][0][target_id]', 4);
$assert_session->hiddenFieldValueEquals('field_twin_media[selection][1][target_id]', 4);
$assert_session->elementExists('css', '.media-library-item__remove')->click();
$this->assertNotEmpty($assert_session->waitForText('Removed Dog.'));
$this->assertElementExistsAfterWait('css', '.media-library-item__remove')->click();
$this->assertNotEmpty($assert_session->waitForText('Removed Dog.'));
$assert_session->assertNoElementAfterWait('css', '.media-library-item__remove');
$wrapper->pressButton('Remove');
$this->waitForText('Removed Dog.');
$wrapper->pressButton('Remove');
$this->waitForText('Removed Dog.');
$result = $wrapper->waitFor(10, function ($wrapper) {
/** @var \Behat\Mink\Element\NodeElement $wrapper */
return $wrapper->findButton('Remove') == NULL;
});
$this->assertTrue($result);
// Assert the selection is persistent in the media library modal, and
// the number of selected items is displayed correctly.
$this->openMediaLibraryForField('field_twin_media');
// Assert the number of selected items is displayed correctly.
$assert_session->elementExists('css', '.media-library-selected-count');
$assert_session->elementTextContains('css', '.media-library-selected-count', '0 of 2 items selected');
$assert_session->elementAttributeContains('css', '.media-library-selected-count', 'role', 'status');
$assert_session->elementAttributeContains('css', '.media-library-selected-count', 'aria-live', 'polite');
$assert_session->elementAttributeContains('css', '.media-library-selected-count', 'aria-atomic', 'true');
$this->assertSelectedMediaCount('0 of 2 items selected');
// Select a media item, assert the hidden selection field contains the ID of
// the selected item.
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$checkboxes = $this->getCheckboxes();
$this->assertCount(4, $checkboxes);
$checkboxes[0]->click();
$this->selectMediaItem(0, '1 of 2 items selected');
$assert_session->hiddenFieldValueEquals('media-library-modal-selection', '4');
// Assert the number of selected items is displayed correctly.
$assert_session->elementTextContains('css', '.media-library-selected-count', '1 of 2 items selected');
// Select another item and assert the number of selected items is updated.
$checkboxes[1]->click();
$assert_session->elementTextContains('css', '.media-library-selected-count', '2 of 2 items selected');
$this->selectMediaItem(1, '2 of 2 items selected');
$assert_session->hiddenFieldValueEquals('media-library-modal-selection', '4,3');
// Assert unselected items are disabled when the maximum allowed items are
// selected (cardinality for this field is 2).
......@@ -622,7 +620,7 @@ public function testWidget() {
$this->assertTrue($checkboxes[3]->hasAttribute('disabled'));
// Assert the selected items are updated when deselecting an item.
$checkboxes[0]->click();
$assert_session->elementTextContains('css', '.media-library-selected-count', '1 of 2 items selected');
$this->assertSelectedMediaCount('1 of 2 items selected');
$assert_session->hiddenFieldValueEquals('media-library-modal-selection', '3');
// Assert deselected items are available again.
$this->assertFalse($checkboxes[2]->hasAttribute('disabled'));
......@@ -631,23 +629,20 @@ public function testWidget() {
// the modal.
$this->switchToMediaType('Three');
$this->switchToMediaType('One');
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$selected_checkboxes = [];
foreach ($checkboxes as $checkbox) {
foreach ($this->getCheckboxes() as $checkbox) {
if ($checkbox->isChecked()) {
$selected_checkboxes[] = $checkbox->getValue();
}
}
$this->assertCount(1, $selected_checkboxes);
$assert_session->hiddenFieldValueEquals('media-library-modal-selection', implode(',', $selected_checkboxes));
$assert_session->elementTextContains('css', '.media-library-selected-count', '1 of 2 items selected');
$this->assertSelectedMediaCount('1 of 2 items selected');
// Add to selection from another type.
$this->switchToMediaType('Two');
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$checkboxes = $this->getCheckboxes();
$this->assertCount(4, $checkboxes);
$checkboxes[0]->click();
// Assert the selection is updated correctly.
$assert_session->elementTextContains('css', '.media-library-selected-count', '2 of 2 items selected');
$this->selectMediaItem(0, '2 of 2 items selected');
$assert_session->hiddenFieldValueEquals('media-library-modal-selection', '3,8');
// Assert unselected items are disabled when the maximum allowed items are
// selected (cardinality for this field is 2).
......@@ -662,13 +657,12 @@ public function testWidget() {
$this->assertTrue($checkboxes[2]->hasAttribute('disabled'));
$this->assertTrue($checkboxes[3]->hasAttribute('disabled'));
// Select the items.
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->assertNotEmpty($assert_session->waitForText('Added 2 media items.'));
$this->pressInsertSelected('Added 2 media items.');
// Assert the open button is disabled.
$open_button = $this->assertElementExistsAfterWait('css', '.media-library-open-button[name^="field_twin_media"]');
$open_button = $this->assertElementExistsAfterWait('css', '.js-media-library-open-button[name^="field_twin_media"]');
$this->assertTrue($open_button->hasAttribute('data-disabled-focus'));
$this->assertTrue($open_button->hasAttribute('disabled'));
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .media-library-open-button").is(":disabled")');
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").is(":disabled")');
// Ensure that the selection completed successfully.
$assert_session->pageTextNotContains('Add or select media');
......@@ -678,50 +672,48 @@ public function testWidget() {
$assert_session->elementTextNotContains('css', '#field_twin_media-media-library-wrapper', 'Snake');
// Remove "Cat" (happens to be the first remove button on the page).
$assert_session->elementAttributeContains('css', '.media-library-item__remove', 'aria-label', 'Remove Cat');
$assert_session->elementExists('css', '.media-library-item__remove')->click();
$this->assertNotEmpty($assert_session->waitForText('Removed Cat.'));
$button = $assert_session->buttonExists('Remove', $wrapper);
$this->assertSame('Remove Cat', $button->getAttribute('aria-label'));
$button->press();
$this->waitForText('Removed Cat.');
// Assert the focus is set to the wrapper of the other selected item.
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .media-library-item").is(":focus")');
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper [data-media-library-item-delta]").is(":focus")');
$assert_session->elementTextNotContains('css', '#field_twin_media-media-library-wrapper', 'Cat');
$assert_session->elementTextContains('css', '#field_twin_media-media-library-wrapper', 'Turtle');
// Assert the open button is no longer disabled.
$open_button = $assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]');
$open_button = $assert_session->elementExists('css', '.js-media-library-open-button[name^="field_twin_media"]');
$this->assertFalse($open_button->hasAttribute('data-disabled-focus'));
$this->assertFalse($open_button->hasAttribute('disabled'));
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .media-library-open-button").is(":not(:disabled)")');
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").is(":not(:disabled)")');
// Open the media library again and select another item.
$this->openMediaLibraryForField('field_twin_media');
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$this->assertGreaterThanOrEqual(1, count($checkboxes));
$checkboxes[0]->click();
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->waitForText('Added one media item.');
$this->selectMediaItem(0);
$this->pressInsertSelected('Added one media item.');
$this->waitForElementTextContains('#field_twin_media-media-library-wrapper', 'Dog');
$assert_session->elementTextNotContains('css', '#field_twin_media-media-library-wrapper', 'Cat');
$assert_session->elementTextContains('css', '#field_twin_media-media-library-wrapper', 'Turtle');
$assert_session->elementTextNotContains('css', '#field_twin_media-media-library-wrapper', 'Snake');
// Assert the open button is disabled.
$this->assertTrue($assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->hasAttribute('data-disabled-focus'));
$this->assertTrue($assert_session->elementExists('css', '.media-library-open-button[name^="field_twin_media"]')->hasAttribute('disabled'));
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .media-library-open-button").is(":disabled")');
$this->assertTrue($assert_session->elementExists('css', '.js-media-library-open-button[name^="field_twin_media"]')->hasAttribute('data-disabled-focus'));
$this->assertTrue($assert_session->elementExists('css', '.js-media-library-open-button[name^="field_twin_media"]')->hasAttribute('disabled'));
$this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").is(":disabled")');
// Assert the selection is cleared when the modal is closed.
$this->openMediaLibraryForField('field_unlimited_media');
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$checkboxes = $this->getCheckboxes();
$this->assertGreaterThanOrEqual(4, count($checkboxes));
// Nothing is selected yet.
$this->assertFalse($checkboxes[0]->isChecked());
$this->assertFalse($checkboxes[1]->isChecked());
$this->assertFalse($checkboxes[2]->isChecked());
$this->assertFalse($checkboxes[3]->isChecked());
$assert_session->elementTextContains('css', '.media-library-selected-count', '0 items selected');
$this->assertSelectedMediaCount('0 items selected');
// Select the first 2 items.
$checkboxes[0]->click();
$assert_session->elementTextContains('css', '.media-library-selected-count', '1 item selected');
$this->assertSelectedMediaCount('1 item selected');
$checkboxes[1]->click();
$assert_session->elementTextContains('css', '.media-library-selected-count', '2 items selected');
$this->assertSelectedMediaCount('2 items selected');
$this->assertTrue($checkboxes[0]->isChecked());
$this->assertTrue($checkboxes[1]->isChecked());
$this->assertFalse($checkboxes[2]->isChecked());
......@@ -729,7 +721,7 @@ public function testWidget() {
// Close the dialog, reopen it and assert not is selected again.
$assert_session->elementExists('css', '.ui-dialog-titlebar-close')->click();
$this->openMediaLibraryForField('field_unlimited_media');
$checkboxes = $page->findAll('css', '.media-library-view .js-click-to-select-checkbox input');
$checkboxes = $this->getCheckboxes();
$this->assertGreaterThanOrEqual(4, count($checkboxes));
$this->assertFalse($checkboxes[0]->isChecked());
$this->assertFalse($checkboxes[1]->isChecked());
......@@ -763,17 +755,12 @@ public function testWidget() {
$assert_session->pageTextContains('Turtle');
$assert_session->pageTextNotContains('Snake');
$this->openMediaLibraryForField('field_unlimited_media');
$assert_session->pageTextContains('Add or select media');
// Select all media items of type one (should also contain Dog, again).
$checkbox_selector = '.media-library-view .js-click-to-select-checkbox input';
$checkboxes = $page->findAll('css', $checkbox_selector);
$this->assertGreaterThanOrEqual(4, count($checkboxes));
$checkboxes[0]->click();
$checkboxes[1]->click();
$checkboxes[2]->click();
$checkboxes[3]->click();
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->waitForText('Added 4 media items.');
$this->selectMediaItem(0);
$this->selectMediaItem(1);
$this->selectMediaItem(2);
$this->selectMediaItem(3);
$this->pressInsertSelected('Added 4 media items.');
$this->waitForText('Dog');
$assert_session->pageTextContains('Cat');
$assert_session->pageTextContains('Bear');
......@@ -835,10 +822,6 @@ public function testWidgetViews() {
// Assert the media library contains header links to switch between the grid
// and table display.
$this->openMediaLibraryForField('field_unlimited_media');
$assert_session->elementExists('css', '.media-library-view .media-library-item--grid');
$assert_session->elementNotExists('css', '.media-library-view .media-library-item--table');
$assert_session->linkExists('Grid');
$assert_session->linkExists('Table');
// Assert the 'Apply filter' button is not moved to the button pane.
$button_pane = $assert_session->elementExists('css', '.ui-dialog-buttonpane');
......@@ -846,21 +829,16 @@ public function testWidgetViews() {
$assert_session->buttonNotExists('Apply filters', $button_pane);
// Assert the pager works as expected.
$assert_session->elementTextContains('css', '.media-library-view .pager__item.is-active', 'Page 1');
$assert_session->elementsCount('css', '.media-library-view .js-click-to-select-checkbox input', 24);
$assert_session->elementTextContains('css', '.view-media-library .pager__item.is-active', 'Page 1');
$this->assertCount(24, $this->getCheckboxes());
$page->clickLink('Next page');
$this->waitForElementTextContains('.media-library-view .pager__item.is-active', 'Page 2');
$assert_session->elementsCount('css', '.media-library-view .js-click-to-select-checkbox input', 1);
$this->waitForElementTextContains('.view-media-library .pager__item.is-active', 'Page 2');
$this->assertCount(1, $this->getCheckboxes());
$page->clickLink('Previous page');
$this->waitForElementTextContains('.media-library-view .pager__item.is-active', 'Page 1');
$assert_session->elementsCount('css', '.media-library-view .js-click-to-select-checkbox input', 24);
$this->waitForElementTextContains('.view-media-library .pager__item.is-active', 'Page 1');
$this->assertCount(24, $this->getCheckboxes());
// Assert the display change is correctly announced for screen readers.
$page->clickLink('Table');
$this->assertNotEmpty($assert_session->waitForText('Loading table view.'));
$this->assertNotEmpty($assert_session->waitForText('Changed to table view.'));
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.media-library-view .media-library-item--table'));
$assert_session->elementNotExists('css', '.media-library-view .media-library-item--grid');
$this->switchToMediaLibraryTable();
// Assert the 'Apply filter' button is not moved to the button pane.
$assert_session->buttonExists('Insert selected', $button_pane);
......@@ -877,12 +855,7 @@ public function testWidgetViews() {
$assert_session->pageTextNotContains('Turtle');
$page->checkField('Select Dog');
$assert_session->linkExists('Table');
$page->clickLink('Grid');
// Assert the display change is correctly announced for screen readers.
$this->assertNotEmpty($assert_session->waitForText('Loading grid view.'));
$this->assertNotEmpty($assert_session->waitForText('Changed to grid view.'));
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.media-library-view .media-library-item--grid'));
$assert_session->elementNotExists('css', '.media-library-view .media-library-item--table');
$this->switchToMediaLibraryGrid();
// Assert the exposed filters are persisted when changing display.
$this->assertSame('Dog', $page->findField('Name')->getValue());
......@@ -890,14 +863,11 @@ public function testWidgetViews() {
$assert_session->pageTextNotContains('Bear');
$assert_session->pageTextNotContains('Turtle');
$assert_session->linkExists('Grid');
$page->clickLink('Table');
$this->assertNotEmpty($assert_session->waitForElementVisible('css', '.media-library-view .media-library-item--table'));
$this->switchToMediaLibraryTable();
// Select the item.
$assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
$this->assertNotEmpty($assert_session->waitForText('Added one media item.'));
$this->pressInsertSelected('Added one media item.');
// Ensure that the selection completed successfully.
$this->waitForNoText('Add or select media');
$assert_session->pageTextContains('Dog');
$assert_session->pageTextNotContains('Bear');
$assert_session->pageTextNotContains('Turtle');
......@@ -927,12 +897,10 @@ public function testWidgetAnonymous() {
$this->openMediaLibraryForField('field_unlimited_media');
// Select the first media item (should be Dog).
$page->find('css', '.media-library-view .js-click-to-select-checkbox input')->click();