function LayoutBuilderIntegrationTest::testArticleNode

Tests if an article node can be in-place edited with Quick Edit.

File

core/modules/quickedit/tests/src/FunctionalJavascript/LayoutBuilderIntegrationTest.php, line 122

Class

LayoutBuilderIntegrationTest
@group quickedit @group legacy

Namespace

Drupal\Tests\quickedit\FunctionalJavascript

Code

public function testArticleNode() {
    $term = Term::create([
        'name' => 'foo',
        'vid' => 'tags',
    ]);
    $term->save();
    $node = $this->drupalCreateNode([
        'type' => 'article',
        'title' => 'My Test Node',
        'body' => [
            'value' => '<p>Hello world!</p><p>I do not know what to say…</p><p>I wish I were eloquent.</p>',
            'format' => 'some_format',
        ],
        'field_tags' => [
            [
                'target_id' => $term->id(),
            ],
        ],
    ]);
    // Move "tags" field to the top of all fields, so its Quick Edit Toolbar
    // won't overlap any Quick Edit-able fields, which causes (semi-)random test
    // failures.
    \Drupal::entityTypeManager()->getStorage('entity_view_display')
        ->load('node.article.default')
        ->setComponent('field_tags', [
        'type' => 'entity_reference_label',
        'weight' => 0,
    ])
        ->save();
    $this->drupalGet('node/' . $node->id());
    // Initial state.
    $this->awaitQuickEditForEntity('node', 1);
    $this->assertEntityInstanceStates([
        'node/1[0]' => 'closed',
    ]);
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/title/en/full' => 'inactive',
        'node/1/body/en/full' => 'inactive',
        'node/1/field_tags/en/full' => 'inactive',
    ]);
    // Start in-place editing of the article node.
    $this->startQuickEditViaToolbar('node', 1, 0);
    $this->assertEntityInstanceStates([
        'node/1[0]' => 'opened',
    ]);
    $this->assertQuickEditEntityToolbar((string) $node->label(), NULL);
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/title/en/full' => 'candidate',
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'candidate',
    ]);
    $assert_session = $this->assertSession();
    // Click the title field.
    $this->click('[data-quickedit-field-id="node/1/title/en/full"].quickedit-candidate');
    $assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="title"]');
    $this->assertQuickEditEntityToolbar((string) $node->label(), 'Title');
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/title/en/full' => 'active',
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'candidate',
    ]);
    $this->assertEntityInstanceFieldMarkup([
        'node/1/title/en/full' => '[contenteditable="true"]',
    ]);
    // Append something to the title.
    $this->typeInPlainTextEditor('[data-quickedit-field-id="node/1/title/en/full"].quickedit-candidate', ' Llamas are awesome!');
    $this->awaitEntityInstanceFieldState('node', 1, 0, 'title', 'en', 'changed');
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/title/en/full' => 'changed',
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'candidate',
    ]);
    // Click the body field.
    hold_test_response(TRUE);
    $this->click('[data-quickedit-entity-id="node/1"] .field--name-body');
    $assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="body"]');
    $this->assertQuickEditEntityToolbar((string) $node->label(), 'Body');
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/title/en/full' => 'saving',
        'node/1/body/en/full' => 'active',
        'node/1/field_tags/en/full' => 'candidate',
    ]);
    hold_test_response(FALSE);
    $this->assertEntityInstanceFieldMarkup([
        'node/1/body/en/full' => '.cke_editable_inline',
        'node/1/field_tags/en/full' => ':not(.quickedit-editor-is-popup)',
    ]);
    $this->assertSession()
        ->elementExists('css', '#quickedit-entity-toolbar .quickedit-toolgroup.wysiwyg-main > .cke_chrome .cke_top[role="presentation"] .cke_toolbar[role="toolbar"] .cke_toolgroup[role="presentation"] > .cke_button[title~="Bold"][role="button"]');
    // Wait for the validating & saving of the title to complete.
    $this->awaitEntityInstanceFieldState('node', 1, 0, 'title', 'en', 'candidate');
    // Click the tags field.
    hold_test_response(TRUE);
    $this->click('[data-quickedit-field-id="node/1/field_tags/en/full"]');
    $assert_session->waitForElement('css', '.quickedit-toolbar-field div[id*="tags"]');
    $this->assertQuickEditEntityToolbar((string) $node->label(), 'Tags');
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'activating',
        'node/1/title/en/full' => 'candidate',
    ]);
    $this->assertEntityInstanceFieldMarkup([
        'node/1/title/en/full' => '.quickedit-changed',
        'node/1/field_tags/en/full' => '.quickedit-editor-is-popup',
    ]);
    // Assert the "Loading…" popup appears.
    $this->assertSession()
        ->elementExists('css', '.quickedit-form-container > .quickedit-form[role="dialog"] > .placeholder');
    hold_test_response(FALSE);
    // Wait for the form to load.
    $this->assertJsCondition('document.querySelector(\'.quickedit-form-container > .quickedit-form[role="dialog"] > .placeholder\') === null');
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'active',
        'node/1/title/en/full' => 'candidate',
    ]);
    // Enter an additional tag.
    $this->typeInFormEditorTextInputField('field_tags[target_id]', 'foo, bar');
    $this->awaitEntityInstanceFieldState('node', 1, 0, 'field_tags', 'en', 'changed');
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'changed',
        'node/1/title/en/full' => 'candidate',
    ]);
    // Click 'Save'.
    hold_test_response(TRUE);
    $this->saveQuickEdit();
    $this->assertEntityInstanceStates([
        'node/1[0]' => 'committing',
    ]);
    $this->assertEntityInstanceFieldStates('node', 1, 0, [
        'node/1/body/en/full' => 'candidate',
        'node/1/field_tags/en/full' => 'saving',
        'node/1/title/en/full' => 'candidate',
    ]);
    $this->assertEntityInstanceFieldMarkup([
        'node/1/title/en/full' => '.quickedit-changed',
        'node/1/field_tags/en/full' => '.quickedit-changed',
    ]);
    hold_test_response(FALSE);
    // Wait for the saving of the tags field to complete.
    $this->assertJsCondition("Drupal.quickedit.collections.entities.get('node/1[0]').get('state') === 'closed'");
    $this->assertEntityInstanceStates([
        'node/1[0]' => 'closed',
    ]);
    // Get the load again and ensure the values are the expected values.
    $this->drupalGet('node/' . $node->id());
    $this->assertSession()
        ->pageTextContains(' Llamas are awesome!');
    $this->assertSession()
        ->linkExists('foo');
    $this->assertSession()
        ->linkExists('bar');
}

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.