function CKEditor5Test::testActiveTabsMaintained

Confirms active tab status is intact after AJAX refresh.

File

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

Class

CKEditor5Test

Tests for CKEditor 5.

Namespace

Code

public function testActiveTabsMaintained() {
    $page = $this->getSession()
        ->getPage();
    $assert_session = $this->assertSession();
    $this->createNewTextFormat($page, $assert_session);
    $assert_session->assertWaitOnAjaxRequest();
    // 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'));
}