function CKEditor5Test::testActiveTabsMaintained

Confirms active tab status is intact after AJAX refresh.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5Test.php, line 333

Class

CKEditor5Test

Tests for CKEditor 5.

Namespace

Code

public function testActiveTabsMaintained() : void {
  $page = $this->getSession()
    ->getPage();
  $assert_session = $this->assertSession();
  $this->createNewTextFormat($page, $assert_session);
  // Initial vertical tabs: 3 for filters, 1 for CKE5 plugins.
  $this->assertSame([
    'Limit allowed HTML tags and correct faulty HTML',
    'Convert URLs into links',
    'Embed media',
  ], $this->getVerticalTabs('#filter-settings-wrapper', FALSE));
  $this->assertSame([
    'Headings',
  ], $this->getVerticalTabs('#plugin-settings-wrapper', FALSE));
  // Initial visible vertical tabs: 1 for filters, 1 for CKE5 plugins.
  $this->assertSame([
    '➡️Limit allowed HTML tags and correct faulty HTML',
  ], $this->getVerticalTabs('#filter-settings-wrapper'));
  $this->assertSame([
    '➡️Headings',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  // Enable media embed to make a second filter config vertical tab visible.
  $this->assertTrue($page->hasUncheckedField('filters[media_embed][status]'));
  $this->assertNull($assert_session->waitForElementVisible('css', '[data-drupal-selector=edit-filters-media-embed-settings]', 0));
  $page->checkField('filters[media_embed][status]');
  $this->assertNotNull($assert_session->waitForElementVisible('css', '[data-drupal-selector=edit-filters-media-embed-settings]', 0));
  $assert_session->assertWaitOnAjaxRequest();
  // Filter plugins vertical tabs behavior: the filter plugin settings
  // vertical tab with the heaviest filter weight is active by default.
  // Hence enabling the media_embed filter (weight 100) results in its
  // vertical tab being activated (filter_html's weight is -10).
  // @see core/modules/filter/filter.admin.js
  $this->assertSame([
    'Limit allowed HTML tags and correct faulty HTML',
    '➡️Embed media',
  ], $this->getVerticalTabs('#filter-settings-wrapper'));
  $this->assertSame([
    '➡️Headings',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  // Enable upload image to add a third (and fourth) CKE5 plugin vertical tab.
  $this->enableDisabledToolbarItem('drupalInsertImage');
  $assert_session->assertWaitOnAjaxRequest();
  // The active CKE5 plugin settings vertical tab is unchanged.
  $this->assertSame([
    '➡️Headings',
    'Image',
    'Image resize',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  // The active filter plugin settings vertical tab is unchanged.
  $this->assertSame([
    'Limit allowed HTML tags and correct faulty HTML',
    '➡️Embed media',
  ], $this->getVerticalTabs('#filter-settings-wrapper'));
  // Open the CKE5 "Image" plugin settings vertical tab, interact with the
  // subform and observe that the AJAX requests those interactions trigger do
  // not change the active vertical tabs.
  $page->clickLink('Image');
  $assert_session->waitForText('Enable image uploads');
  $this->assertSame([
    'Headings',
    '➡️Image',
    'Image resize',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  $this->assertTrue($page->hasUncheckedField('editor[settings][plugins][ckeditor5_image][status]'));
  $page->checkField('editor[settings][plugins][ckeditor5_image][status]');
  $assert_session->assertWaitOnAjaxRequest();
  $this->assertSame([
    'Headings',
    '➡️Image',
    'Image resize',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  $this->assertSame([
    'Limit allowed HTML tags and correct faulty HTML',
    '➡️Embed media',
  ], $this->getVerticalTabs('#filter-settings-wrapper'));
  $page->pressButton('Save configuration');
  $assert_session->pageTextContains('Added text format ckeditor5');
  // Leave and return to the config form, wait for initialized Vertical Tabs.
  $this->drupalGet('admin/config/content/formats/');
  $this->drupalGet('admin/config/content/formats/manage/ckeditor5');
  $assert_session->waitForElement('css', '.vertical-tabs__menu-item.is-selected');
  // The first CKE5 plugin settings vertical tab is active by default.
  $this->assertSame([
    '➡️Headings',
    'Image',
    'Image resize',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  // Filter plugins vertical tabs behavior: the filter plugin settings
  // vertical tab with the heaviest filter weight is active by default.
  // Hence enabling the media_embed filter (weight 100) results in its
  // vertical tab being activated (filter_html's weight is -10).
  // @see core/modules/filter/filter.admin.js
  $this->assertSame([
    'Limit allowed HTML tags and correct faulty HTML',
    '➡️Embed media',
  ], $this->getVerticalTabs('#filter-settings-wrapper'));
  // Click the 3rd CKE5 plugin vertical tab.
  $page->clickLink($this->getVerticalTabs('#plugin-settings-wrapper')[2]);
  $this->assertSame([
    'Headings',
    'Image',
    '➡️Image resize',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  // Add another CKEditor 5 toolbar item just to trigger an AJAX refresh.
  $this->enableDisabledToolbarItem('blockQuote');
  $assert_session->assertWaitOnAjaxRequest();
  // The active CKE5 plugin settings vertical tab is unchanged.
  $this->assertSame([
    'Headings',
    'Image',
    '➡️Image resize',
    'Media',
  ], $this->getVerticalTabs('#plugin-settings-wrapper'));
  // The active filter plugin settings vertical tab is unchanged.
  $this->assertSame([
    'Limit allowed HTML tags and correct faulty HTML',
    '➡️Embed media',
  ], $this->getVerticalTabs('#filter-settings-wrapper'));
}