Chris@17: <?php
Chris@17: 
Chris@17: namespace Drupal\FunctionalJavascriptTests\TableDrag;
Chris@17: 
Chris@17: use Behat\Mink\Element\NodeElement;
Chris@17: use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
Chris@17: 
Chris@17: /**
Chris@17:  * Tests draggable table.
Chris@17:  *
Chris@17:  * @group javascript
Chris@17:  */
Chris@17: class TableDragTest extends WebDriverTestBase {
Chris@17: 
Chris@17:   /**
Chris@17:    * Class used to verify that dragging operations are in execution.
Chris@17:    */
Chris@17:   const DRAGGING_CSS_CLASS = 'tabledrag-test-dragging';
Chris@17: 
Chris@17:   /**
Chris@17:    * {@inheritdoc}
Chris@17:    */
Chris@17:   protected static $modules = ['tabledrag_test'];
Chris@17: 
Chris@17:   /**
Chris@17:    * The state service.
Chris@17:    *
Chris@17:    * @var \Drupal\Core\State\StateInterface
Chris@17:    */
Chris@17:   protected $state;
Chris@17: 
Chris@17:   /**
Chris@17:    * {@inheritdoc}
Chris@17:    */
Chris@17:   protected function setUp() {
Chris@17:     parent::setUp();
Chris@17: 
Chris@17:     $this->state = $this->container->get('state');
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Tests accessibility through keyboard of the tabledrag functionality.
Chris@17:    */
Chris@17:   public function testKeyboardAccessibility() {
Chris@17:     $this->state->set('tabledrag_test_table', array_flip(range(1, 5)));
Chris@17: 
Chris@17:     $expected_table = [
Chris@17:       ['id' => 1, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:       ['id' => 2, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:       ['id' => 3, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:       ['id' => 4, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:       ['id' => 5, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:     ];
Chris@17:     $this->drupalGet('tabledrag_test');
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Nest the row with id 2 as child of row 1.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(2), 'right');
Chris@17:     $expected_table[1] = ['id' => 2, 'weight' => -10, 'parent' => 1, 'indentation' => 1, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Nest the row with id 3 as child of row 1.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'right');
Chris@17:     $expected_table[2] = ['id' => 3, 'weight' => -9, 'parent' => 1, 'indentation' => 1, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Nest the row with id 3 as child of row 2.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'right');
Chris@17:     $expected_table[2] = ['id' => 3, 'weight' => -10, 'parent' => 2, 'indentation' => 2, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Nesting should be allowed to maximum level 2.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(4), 'right', 4);
Chris@17:     $expected_table[3] = ['id' => 4, 'weight' => -9, 'parent' => 2, 'indentation' => 2, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Re-order children of row 1.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(4), 'up');
Chris@17:     $expected_table[2] = ['id' => 4, 'weight' => -10, 'parent' => 2, 'indentation' => 2, 'changed' => TRUE];
Chris@17:     $expected_table[3] = ['id' => 3, 'weight' => -9, 'parent' => 2, 'indentation' => 2, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Move back the row 3 to the 1st level.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'left');
Chris@17:     $expected_table[3] = ['id' => 3, 'weight' => -9, 'parent' => 1, 'indentation' => 1, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'left');
Chris@17:     $expected_table[0] = ['id' => 1, 'weight' => -10, 'parent' => '', 'indentation' => 0, 'changed' => FALSE];
Chris@17:     $expected_table[3] = ['id' => 3, 'weight' => -9, 'parent' => '', 'indentation' => 0, 'changed' => TRUE];
Chris@17:     $expected_table[4] = ['id' => 5, 'weight' => -8, 'parent' => '', 'indentation' => 0, 'changed' => FALSE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Move row 3 to the last position.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'down');
Chris@17:     $expected_table[3] = ['id' => 5, 'weight' => -9, 'parent' => '', 'indentation' => 0, 'changed' => FALSE];
Chris@17:     $expected_table[4] = ['id' => 3, 'weight' => -8, 'parent' => '', 'indentation' => 0, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Nothing happens when trying to move the last row further down.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'down');
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Nest row 3 under 5. The max depth allowed should be 1.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'right', 3);
Chris@17:     $expected_table[4] = ['id' => 3, 'weight' => -10, 'parent' => 5, 'indentation' => 1, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // The first row of the table cannot be nested.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(1), 'right');
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Move a row which has nested children. The children should move with it,
Chris@17:     // with nesting preserved. Swap the order of the top-level rows by moving
Chris@17:     // row 1 to after row 3.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(1), 'down', 2);
Chris@17:     $expected_table[0] = ['id' => 5, 'weight' => -10, 'parent' => '', 'indentation' => 0, 'changed' => FALSE];
Chris@17:     $expected_table[3] = $expected_table[1];
Chris@17:     $expected_table[1] = $expected_table[4];
Chris@17:     $expected_table[4] = $expected_table[2];
Chris@17:     $expected_table[2] = ['id' => 1, 'weight' => -9, 'parent' => '', 'indentation' => 0, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Tests the root and leaf behaviors for rows.
Chris@17:    */
Chris@17:   public function testRootLeafDraggableRowsWithKeyboard() {
Chris@17:     $this->state->set('tabledrag_test_table', [
Chris@17:       1 => [],
Chris@17:       2 => ['parent' => 1, 'depth' => 1, 'classes' => ['tabledrag-leaf']],
Chris@17:       3 => ['parent' => 1, 'depth' => 1],
Chris@17:       4 => [],
Chris@17:       5 => ['classes' => ['tabledrag-root']],
Chris@17:     ]);
Chris@17: 
Chris@17:     $this->drupalGet('tabledrag_test');
Chris@17:     $expected_table = [
Chris@17:       ['id' => 1, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:       ['id' => 2, 'weight' => 0, 'parent' => 1, 'indentation' => 1, 'changed' => FALSE],
Chris@17:       ['id' => 3, 'weight' => 0, 'parent' => 1, 'indentation' => 1, 'changed' => FALSE],
Chris@17:       ['id' => 4, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:       ['id' => 5, 'weight' => 0, 'parent' => '', 'indentation' => 0, 'changed' => FALSE],
Chris@17:     ];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Rows marked as root cannot be moved as children of another row.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(5), 'right');
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Rows marked as leaf cannot have children. Trying to move the row #3
Chris@17:     // as child of #2 should have no results.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(3), 'right');
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Leaf can be still swapped and moved to first level.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(2), 'down');
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(2), 'left');
Chris@17:     $expected_table[0]['weight'] = -10;
Chris@17:     $expected_table[1]['id'] = 3;
Chris@17:     $expected_table[1]['weight'] = -10;
Chris@17:     $expected_table[2] = ['id' => 2, 'weight' => -9, 'parent' => '', 'indentation' => 0, 'changed' => TRUE];
Chris@17:     $expected_table[3]['weight'] = -8;
Chris@17:     $expected_table[4]['weight'] = -7;
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17: 
Chris@17:     // Root rows can have children.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(4), 'down');
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(4), 'right');
Chris@17:     $expected_table[3]['id'] = 5;
Chris@17:     $expected_table[4] = ['id' => 4, 'weight' => -10, 'parent' => 5, 'indentation' => 1, 'changed' => TRUE];
Chris@17:     $this->assertDraggableTable($expected_table);
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Tests the warning that appears upon making changes to a tabledrag table.
Chris@17:    */
Chris@17:   public function testTableDragChangedWarning() {
Chris@17:     $this->drupalGet('tabledrag_test');
Chris@17: 
Chris@17:     // By default no text is visible.
Chris@17:     $this->assertSession()->pageTextNotContains('You have unsaved changes.');
Chris@17:     // Try to make a non-allowed action, like moving further down the last row.
Chris@17:     // No changes happen, so no message should be shown.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(5), 'down');
Chris@17:     $this->assertSession()->pageTextNotContains('You have unsaved changes.');
Chris@17: 
Chris@17:     // Make a change. The message will appear.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(5), 'right');
Chris@17:     $this->assertSession()->pageTextContainsOnce('You have unsaved changes.');
Chris@17: 
Chris@17:     // Make another change, the text will stay visible and appear only once.
Chris@17:     $this->moveRowWithKeyboard($this->findRowById(2), 'up');
Chris@17:     $this->assertSession()->pageTextContainsOnce('You have unsaved changes.');
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Asserts the whole structure of the draggable test table.
Chris@17:    *
Chris@17:    * @param array $structure
Chris@17:    *   The table structure. Each entry represents a row and consists of:
Chris@17:    *   - id: the expected value for the ID hidden field.
Chris@17:    *   - weight: the expected row weight.
Chris@17:    *   - parent: the expected parent ID for the row.
Chris@17:    *   - indentation: how many indents the row should have.
Chris@17:    *   - changed: whether or not the row should have been marked as changed.
Chris@17:    */
Chris@17:   protected function assertDraggableTable(array $structure) {
Chris@17:     $rows = $this->getSession()->getPage()->findAll('xpath', '//table[@id="tabledrag-test-table"]/tbody/tr');
Chris@17:     $this->assertSession()->elementsCount('xpath', '//table[@id="tabledrag-test-table"]/tbody/tr', count($structure));
Chris@17: 
Chris@17:     foreach ($structure as $delta => $expected) {
Chris@17:       $this->assertTableRow($rows[$delta], $expected['id'], $expected['weight'], $expected['parent'], $expected['indentation'], $expected['changed']);
Chris@17:     }
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Asserts the values of a draggable row.
Chris@17:    *
Chris@17:    * @param \Behat\Mink\Element\NodeElement $row
Chris@17:    *   The row element to assert.
Chris@17:    * @param string $id
Chris@17:    *   The expected value for the ID hidden input of the row.
Chris@17:    * @param int $weight
Chris@17:    *   The expected weight of the row.
Chris@17:    * @param string $parent
Chris@17:    *   The expected parent ID.
Chris@17:    * @param int $indentation
Chris@17:    *   The expected indentation of the row.
Chris@17:    * @param bool $changed
Chris@17:    *   Whether or not the row should have been marked as changed.
Chris@17:    */
Chris@17:   protected function assertTableRow(NodeElement $row, $id, $weight, $parent = '', $indentation = 0, $changed = FALSE) {
Chris@17:     // Assert that the row position is correct by checking that the id
Chris@17:     // corresponds.
Chris@17:     $this->assertSession()->hiddenFieldValueEquals("table[$id][id]", $id, $row);
Chris@17:     $this->assertSession()->hiddenFieldValueEquals("table[$id][parent]", $parent, $row);
Chris@17:     $this->assertSession()->fieldValueEquals("table[$id][weight]", $weight, $row);
Chris@17:     $this->assertSession()->elementsCount('css', '.js-indentation.indentation', $indentation, $row);
Chris@17:     // A row is marked as changed when the related markup is present.
Chris@17:     $this->assertSession()->elementsCount('css', 'abbr.tabledrag-changed', (int) $changed, $row);
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Finds a row in the test table by the row ID.
Chris@17:    *
Chris@17:    * @param string $id
Chris@17:    *   The ID of the row.
Chris@17:    *
Chris@17:    * @return \Behat\Mink\Element\NodeElement
Chris@17:    *   The row element.
Chris@17:    */
Chris@17:   protected function findRowById($id) {
Chris@17:     $xpath = "//table[@id='tabledrag-test-table']/tbody/tr[.//input[@name='table[$id][id]']]";
Chris@17:     $row = $this->getSession()->getPage()->find('xpath', $xpath);
Chris@17:     $this->assertNotEmpty($row);
Chris@17:     return $row;
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Moves a row through the keyboard.
Chris@17:    *
Chris@17:    * @param \Behat\Mink\Element\NodeElement $row
Chris@17:    *   The row to move.
Chris@17:    * @param string $arrow
Chris@17:    *   The arrow button to use to move the row. Either one of 'left', 'right',
Chris@17:    *   'up' or 'down'.
Chris@17:    * @param int $repeat
Chris@17:    *   (optional) How many times to press the arrow button. Defaults to 1.
Chris@17:    */
Chris@17:   protected function moveRowWithKeyboard(NodeElement $row, $arrow, $repeat = 1) {
Chris@17:     $keys = [
Chris@17:       'left' => 37,
Chris@17:       'right' => 39,
Chris@17:       'up' => 38,
Chris@17:       'down' => 40,
Chris@17:     ];
Chris@17:     if (!isset($keys[$arrow])) {
Chris@17:       throw new \InvalidArgumentException('The arrow parameter must be one of "left", "right", "up" or "down".');
Chris@17:     }
Chris@17: 
Chris@17:     $key = $keys[$arrow];
Chris@17: 
Chris@17:     $handle = $row->find('css', 'a.tabledrag-handle');
Chris@17:     $handle->focus();
Chris@17: 
Chris@17:     for ($i = 0; $i < $repeat; $i++) {
Chris@17:       $this->markRowHandleForDragging($handle);
Chris@17:       $handle->keyDown($key);
Chris@17:       $handle->keyUp($key);
Chris@17:       $this->waitUntilDraggingCompleted($handle);
Chris@17:     }
Chris@17: 
Chris@17:     $handle->blur();
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Marks a row handle for dragging.
Chris@17:    *
Chris@17:    * The handle is marked by adding a css class that is removed by an helper
Chris@17:    * js library once the dragging is over.
Chris@17:    *
Chris@17:    * @param \Behat\Mink\Element\NodeElement $handle
Chris@17:    *   The draggable row handle element.
Chris@17:    *
Chris@17:    * @throws \Exception
Chris@17:    *   Thrown when the class is not added successfully to the handle.
Chris@17:    */
Chris@17:   protected function markRowHandleForDragging(NodeElement $handle) {
Chris@17:     $class = self::DRAGGING_CSS_CLASS;
Chris@17:     $script = <<<JS
Chris@17: document.evaluate("{$handle->getXpath()}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
Chris@17:   .singleNodeValue.classList.add('{$class}');
Chris@17: JS;
Chris@17: 
Chris@17:     $this->getSession()->executeScript($script);
Chris@17:     $has_class = $this->getSession()->getPage()->waitFor(1, function () use ($handle, $class) {
Chris@17:       return $handle->hasClass($class);
Chris@17:     });
Chris@17: 
Chris@17:     if (!$has_class) {
Chris@17:       throw new \Exception(sprintf('Dragging css class was not added on handle "%s".', $handle->getXpath()));
Chris@17:     }
Chris@17:   }
Chris@17: 
Chris@17:   /**
Chris@17:    * Waits until the dragging operations are finished on a row handle.
Chris@17:    *
Chris@17:    * @param \Behat\Mink\Element\NodeElement $handle
Chris@17:    *   The draggable row handle element.
Chris@17:    *
Chris@17:    * @throws \Exception
Chris@17:    *   Thrown when the dragging operations are not completed on time.
Chris@17:    */
Chris@17:   protected function waitUntilDraggingCompleted(NodeElement $handle) {
Chris@17:     $class_removed = $this->getSession()->getPage()->waitFor(1, function () use ($handle) {
Chris@17:       return !$handle->hasClass($this::DRAGGING_CSS_CLASS);
Chris@17:     });
Chris@17: 
Chris@17:     if (!$class_removed) {
Chris@17:       throw new \Exception(sprintf('Dragging operations did not complete on time on handle %s', $handle->getXpath()));
Chris@17:     }
Chris@17:   }
Chris@17: 
Chris@17: }