View source  
  <?php
namespace Drupal\FunctionalJavascriptTests\TableDrag;
use Behat\Mink\Element\NodeElement;
use Behat\Mink\Exception\ExpectationException;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
class TableDragTest extends WebDriverTestBase {
  
  const DRAGGING_CSS_CLASS = 'tabledrag-test-dragging';
  
  protected static $modules = [
    'tabledrag_test',
  ];
  
  protected $defaultTheme = 'stark';
  
  protected $state;
  
  protected static $indentationXpathSelector = 'child::td[1]/*[contains(concat(" ", normalize-space(@class), " "), " js-indentation ")][contains(concat(" ", normalize-space(@class), " "), " indentation ")]';
  
  protected static $tabledragChangedXpathSelector = 'child::td[1]/abbr[contains(concat(" ", normalize-space(@class), " "), " tabledrag-changed ")]';
  
  protected function setUp() : void {
    parent::setUp();
    $this->state = $this->container
      ->get('state');
  }
  
  public function testRowWeightSwitch() {
    $this->state
      ->set('tabledrag_test_table', array_flip(range(1, 3)));
    $this
      ->drupalGet('tabledrag_test');
    $session = $this
      ->getSession();
    $page = $session
      ->getPage();
    $weight_select1 = $page
      ->findField("table[1][weight]");
    $weight_select2 = $page
      ->findField("table[2][weight]");
    $weight_select3 = $page
      ->findField("table[3][weight]");
    
    $this
      ->assertFalse($weight_select1
      ->isVisible());
    $this
      ->assertFalse($weight_select2
      ->isVisible());
    $this
      ->assertFalse($weight_select3
      ->isVisible());
    
    $this
      ->findWeightsToggle('Show row weights')
      ->click();
    
    $this
      ->assertTrue($weight_select1
      ->isVisible());
    $this
      ->assertTrue($weight_select2
      ->isVisible());
    $this
      ->assertTrue($weight_select3
      ->isVisible());
    
    $this
      ->findWeightsToggle('Hide row weights')
      ->click();
    
    $this
      ->assertFalse($weight_select1
      ->isVisible());
    $this
      ->assertFalse($weight_select2
      ->isVisible());
    $this
      ->assertFalse($weight_select3
      ->isVisible());
  }
  
  public function testDragAndDrop() {
    $this->state
      ->set('tabledrag_test_table', array_flip(range(1, 3)));
    $this
      ->drupalGet('tabledrag_test');
    $session = $this
      ->getSession();
    $page = $session
      ->getPage();
    
    $this
      ->assertNotNull($this
      ->assertSession()
      ->waitForElement('css', 'html.no-touchevents'));
    $weight_select1 = $page
      ->findField("table[1][weight]");
    $weight_select2 = $page
      ->findField("table[2][weight]");
    $weight_select3 = $page
      ->findField("table[3][weight]");
    
    $this
      ->assertOrder([
      'Row with id 1',
      'Row with id 2',
      'Row with id 3',
    ]);
    
    $this
      ->assertSession()
      ->pageTextNotContains('You have unsaved changes.');
    $row1 = $this
      ->findRowById(1)
      ->find('css', 'a.tabledrag-handle');
    $row2 = $this
      ->findRowById(2)
      ->find('css', 'a.tabledrag-handle');
    $row3 = $this
      ->findRowById(3)
      ->find('css', 'a.tabledrag-handle');
    
    $row1
      ->dragTo($row2);
    
    $this
      ->assertSession()
      ->waitForText('You have unsaved changes.');
    
    $this
      ->assertOrder([
      'Row with id 2',
      'Row with id 1',
      'Row with id 3',
    ]);
    
    $this
      ->assertGreaterThan($weight_select2
      ->getValue(), $weight_select1
      ->getValue());
    $this
      ->assertGreaterThan($weight_select2
      ->getValue(), $weight_select3
      ->getValue());
    $this
      ->assertGreaterThan($weight_select1
      ->getValue(), $weight_select3
      ->getValue());
    
    $row3
      ->dragTo($row1);
    
    $this
      ->assertOrder([
      'Row with id 2',
      'Row with id 3',
      'Row with id 1',
    ]);
  }
  
  public function testKeyboardAccessibility() {
    $this
      ->assertKeyboardAccessibility();
  }
  
  protected function assertKeyboardAccessibility(string $drupal_path = 'tabledrag_test', ?array $structure = NULL) : void {
    $expected_table = $structure ?: [
      [
        'id' => 1,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 2,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 3,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 4,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 5,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
    ];
    if (!empty($drupal_path)) {
      $this->state
        ->set('tabledrag_test_table', array_flip(range(1, 5)));
      $this
        ->drupalGet($drupal_path);
    }
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(2), 'right');
    $expected_table[1] = [
      'id' => 2,
      'weight' => -10,
      'parent' => 1,
      'indentation' => 1,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'right');
    $expected_table[2] = [
      'id' => 3,
      'weight' => -9,
      'parent' => 1,
      'indentation' => 1,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'right');
    $expected_table[2] = [
      'id' => 3,
      'weight' => -10,
      'parent' => 2,
      'indentation' => 2,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(4), 'right', 4);
    $expected_table[3] = [
      'id' => 4,
      'weight' => -9,
      'parent' => 2,
      'indentation' => 2,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(4), 'up');
    $expected_table[2] = [
      'id' => 4,
      'weight' => -10,
      'parent' => 2,
      'indentation' => 2,
      'changed' => TRUE,
    ];
    $expected_table[3] = [
      'id' => 3,
      'weight' => -9,
      'parent' => 2,
      'indentation' => 2,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'left');
    $expected_table[3] = [
      'id' => 3,
      'weight' => -9,
      'parent' => 1,
      'indentation' => 1,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'left');
    $expected_table[0] = [
      'id' => 1,
      'weight' => -10,
      'parent' => '',
      'indentation' => 0,
      'changed' => FALSE,
    ];
    $expected_table[3] = [
      'id' => 3,
      'weight' => -9,
      'parent' => '',
      'indentation' => 0,
      'changed' => TRUE,
    ];
    $expected_table[4] = [
      'id' => 5,
      'weight' => -8,
      'parent' => '',
      'indentation' => 0,
      'changed' => FALSE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'down');
    $expected_table[3] = [
      'id' => 5,
      'weight' => -9,
      'parent' => '',
      'indentation' => 0,
      'changed' => FALSE,
    ];
    $expected_table[4] = [
      'id' => 3,
      'weight' => -8,
      'parent' => '',
      'indentation' => 0,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'down');
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'right', 3);
    $expected_table[4] = [
      'id' => 3,
      'weight' => -10,
      'parent' => 5,
      'indentation' => 1,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(1), 'right');
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(1), 'down', 2);
    $expected_table[0] = [
      'id' => 5,
      'weight' => -10,
      'parent' => '',
      'indentation' => 0,
      'changed' => FALSE,
    ];
    $expected_table[3] = $expected_table[1];
    $expected_table[1] = $expected_table[4];
    $expected_table[4] = $expected_table[2];
    $expected_table[2] = [
      'id' => 1,
      'weight' => -9,
      'parent' => '',
      'indentation' => 0,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
  }
  
  public function testRootLeafDraggableRowsWithKeyboard() {
    $this->state
      ->set('tabledrag_test_table', [
      1 => [],
      2 => [
        'parent' => 1,
        'depth' => 1,
        'classes' => [
          'tabledrag-leaf',
        ],
      ],
      3 => [
        'parent' => 1,
        'depth' => 1,
      ],
      4 => [],
      5 => [
        'classes' => [
          'tabledrag-root',
        ],
      ],
    ]);
    $this
      ->drupalGet('tabledrag_test');
    $expected_table = [
      [
        'id' => 1,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 2,
        'weight' => 0,
        'parent' => 1,
        'indentation' => 1,
        'changed' => FALSE,
      ],
      [
        'id' => 3,
        'weight' => 0,
        'parent' => 1,
        'indentation' => 1,
        'changed' => FALSE,
      ],
      [
        'id' => 4,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 5,
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
    ];
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(5), 'right');
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(3), 'right');
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(2), 'down');
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(2), 'left');
    $expected_table[0]['weight'] = -10;
    $expected_table[1]['id'] = 3;
    $expected_table[1]['weight'] = -10;
    $expected_table[2] = [
      'id' => 2,
      'weight' => -9,
      'parent' => '',
      'indentation' => 0,
      'changed' => TRUE,
    ];
    $expected_table[3]['weight'] = -8;
    $expected_table[4]['weight'] = -7;
    $this
      ->assertDraggableTable($expected_table);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(4), 'down');
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(4), 'right');
    $expected_table[3]['id'] = 5;
    $expected_table[4] = [
      'id' => 4,
      'weight' => -10,
      'parent' => 5,
      'indentation' => 1,
      'changed' => TRUE,
    ];
    $this
      ->assertDraggableTable($expected_table);
  }
  
  public function testTableDragChangedWarning() {
    $this
      ->drupalGet('tabledrag_test');
    
    $this
      ->assertSession()
      ->pageTextNotContains('You have unsaved changes.');
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(5), 'down');
    $this
      ->assertSession()
      ->pageTextNotContains('You have unsaved changes.');
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(5), 'right');
    $this
      ->assertSession()
      ->pageTextContainsOnce('You have unsaved changes.');
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById(2), 'up');
    $this
      ->assertSession()
      ->pageTextContainsOnce('You have unsaved changes.');
  }
  
  protected function assertOrder(array $items) : void {
    $session = $this
      ->getSession();
    $text = $session
      ->getPage()
      ->getHtml();
    $strings = [];
    foreach ($items as $item) {
      if (($pos = strpos($text, $item)) === FALSE) {
        throw new ExpectationException("Cannot find '{$item}' in the page", $session
          ->getDriver());
      }
      $strings[$pos] = $item;
    }
    ksort($strings);
    $this
      ->assertSame($items, array_values($strings), "Strings found on the page but incorrectly ordered.");
  }
  
  public function testNestedDraggableTables() {
    $this->state
      ->set('tabledrag_test_table', array_flip(range(1, 5)));
    $this
      ->drupalGet('tabledrag_test_nested');
    $this
      ->assertKeyboardAccessibility('');
    
    $expected_parent_table = [
      [
        'id' => 'parent_1',
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 'parent_2',
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 'parent_3',
        'weight' => 0,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
    ];
    $this
      ->assertDraggableTable($expected_parent_table, 'tabledrag-test-parent-table', TRUE);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById('parent_2', 'tabledrag-test-parent-table'), 'up');
    $expected_parent_table = [
      [
        'id' => 'parent_2',
        'weight' => -10,
        'parent' => '',
        'indentation' => 0,
        'changed' => TRUE,
      ],
      [
        'id' => 'parent_1',
        'weight' => -9,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 'parent_3',
        'weight' => -8,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
    ];
    $this
      ->assertDraggableTable($expected_parent_table, 'tabledrag-test-parent-table', TRUE);
    
    $this
      ->moveRowWithKeyboard($this
      ->findRowById('parent_1', 'tabledrag-test-parent-table'), 'down');
    $expected_parent_table = [
      [
        'id' => 'parent_2',
        'weight' => -10,
        'parent' => '',
        'indentation' => 0,
        'changed' => TRUE,
      ],
      [
        'id' => 'parent_3',
        'weight' => -9,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      
      [
        'id' => 'parent_1',
        'weight' => -8,
        'parent' => '',
        'indentation' => 0,
        'changed' => NULL,
      ],
    ];
    $this
      ->assertDraggableTable($expected_parent_table, 'tabledrag-test-parent-table', TRUE);
    
    $expected_child_table_structure = [
      [
        'id' => 5,
        'weight' => -10,
        'parent' => '',
        'indentation' => 0,
        'changed' => FALSE,
      ],
      [
        'id' => 3,
        'weight' => -10,
        'parent' => 5,
        'indentation' => 1,
        'changed' => TRUE,
      ],
      [
        'id' => 1,
        'weight' => -9,
        'parent' => '',
        'indentation' => 0,
        'changed' => TRUE,
      ],
      [
        'id' => 2,
        'weight' => -10,
        'parent' => 1,
        'indentation' => 1,
        'changed' => TRUE,
      ],
      [
        'id' => 4,
        'weight' => -10,
        'parent' => 2,
        'indentation' => 2,
        'changed' => TRUE,
      ],
    ];
    $this
      ->assertDraggableTable($expected_child_table_structure);
  }
  
  protected function assertDraggableTable(array $structure, string $table_id = 'tabledrag-test-table', bool $skip_missing = FALSE) : void {
    $rows = $this
      ->getSession()
      ->getPage()
      ->findAll('xpath', "//table[@id='{$table_id}']/tbody/tr");
    $this
      ->assertSession()
      ->elementsCount('xpath', "//table[@id='{$table_id}']/tbody/tr", count($structure));
    foreach ($structure as $delta => $expected) {
      $this
        ->assertTableRow($rows[$delta], $expected['id'], $expected['weight'], $expected['parent'], $expected['indentation'], $expected['changed'], $skip_missing);
    }
  }
  
  protected function assertTableRow(NodeElement $row, string $id, int $weight, string $parent = '', int $indentation = 0, ?bool $changed = FALSE, bool $skip_missing = FALSE) : void {
    
    $id_name = "table[{$id}][id]";
    if (!$skip_missing || $row
      ->find('hidden_field_selector', [
      'hidden_field',
      $id_name,
    ])) {
      $this
        ->assertSession()
        ->hiddenFieldValueEquals($id_name, $id, $row);
    }
    $parent_name = "table[{$id}][parent]";
    if (!$skip_missing || $row
      ->find('hidden_field_selector', [
      'hidden_field',
      $parent_name,
    ])) {
      $this
        ->assertSession()
        ->hiddenFieldValueEquals($parent_name, $parent, $row);
    }
    $this
      ->assertSession()
      ->fieldValueEquals("table[{$id}][weight]", $weight, $row);
    $this
      ->assertSession()
      ->elementsCount('xpath', static::$indentationXpathSelector, $indentation, $row);
    
    if ($changed !== NULL) {
      $this
        ->assertSession()
        ->elementsCount('xpath', static::$tabledragChangedXpathSelector, (int) $changed, $row);
    }
  }
  
  protected function findRowById($id, $table_id = 'tabledrag-test-table') {
    $xpath = "//table[@id='{$table_id}']/tbody/tr[.//input[@name='table[{$id}][id]']]";
    $row = $this
      ->getSession()
      ->getPage()
      ->find('xpath', $xpath);
    $this
      ->assertNotEmpty($row);
    return $row;
  }
  
  protected function findWeightsToggle($expected_text) {
    $toggle = $this
      ->getSession()
      ->getPage()
      ->findButton($expected_text);
    $this
      ->assertNotEmpty($toggle);
    return $toggle;
  }
  
  protected function moveRowWithKeyboard(NodeElement $row, $arrow, $repeat = 1) {
    $keys = [
      'left' => 37,
      'right' => 39,
      'up' => 38,
      'down' => 40,
    ];
    if (!isset($keys[$arrow])) {
      throw new \InvalidArgumentException('The arrow parameter must be one of "left", "right", "up" or "down".');
    }
    $key = $keys[$arrow];
    $handle = $row
      ->find('css', 'a.tabledrag-handle');
    $handle
      ->focus();
    for ($i = 0; $i < $repeat; $i++) {
      $this
        ->markRowHandleForDragging($handle);
      $handle
        ->keyDown($key);
      $handle
        ->keyUp($key);
      $this
        ->waitUntilDraggingCompleted($handle);
    }
    $handle
      ->blur();
  }
  
  protected function markRowHandleForDragging(NodeElement $handle) {
    $class = self::DRAGGING_CSS_CLASS;
    $script = <<<JS
document.evaluate("{<span class="php-variable">$handle</span>
  -><span class="php-function-or-constant function member-of-variable">getXpath</span>()}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
  .singleNodeValue.classList.add('{<span class="php-variable">$class</span>}');
JS;
    $this
      ->getSession()
      ->executeScript($script);
    $has_class = $this
      ->getSession()
      ->getPage()
      ->waitFor(1, function () use ($handle, $class) {
      return $handle
        ->hasClass($class);
    });
    if (!$has_class) {
      throw new \Exception(sprintf('Dragging css class was not added on handle "%s".', $handle
        ->getXpath()));
    }
  }
  
  protected function waitUntilDraggingCompleted(NodeElement $handle) {
    $class_removed = $this
      ->getSession()
      ->getPage()
      ->waitFor(1, function () use ($handle) {
      return !$handle
        ->hasClass($this::DRAGGING_CSS_CLASS);
    });
    if (!$class_removed) {
      throw new \Exception(sprintf('Dragging operations did not complete on time on handle %s', $handle
        ->getXpath()));
    }
  }
}