123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473 |
- <?php
- namespace Drupal\FunctionalJavascriptTests\TableDrag;
- use Behat\Mink\Element\NodeElement;
- use Behat\Mink\Exception\ExpectationException;
- use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
- /**
- * Tests draggable table.
- *
- * @group javascript
- */
- class TableDragTest extends WebDriverTestBase {
- /**
- * Class used to verify that dragging operations are in execution.
- */
- const DRAGGING_CSS_CLASS = 'tabledrag-test-dragging';
- /**
- * {@inheritdoc}
- */
- protected static $modules = ['tabledrag_test'];
- /**
- * {@inheritdoc}
- */
- protected $defaultTheme = 'stark';
- /**
- * The state service.
- *
- * @var \Drupal\Core\State\StateInterface
- */
- protected $state;
- /**
- * {@inheritdoc}
- */
- protected function setUp() {
- parent::setUp();
- $this->state = $this->container->get('state');
- }
- /**
- * Tests row weight switch.
- */
- 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]");
- // Check that rows weight selects are hidden.
- $this->assertFalse($weight_select1->isVisible());
- $this->assertFalse($weight_select2->isVisible());
- $this->assertFalse($weight_select3->isVisible());
- // Toggle row weight selects as visible.
- $this->findWeightsToggle('Show row weights')->click();
- // Check that rows weight selects are visible.
- $this->assertTrue($weight_select1->isVisible());
- $this->assertTrue($weight_select2->isVisible());
- $this->assertTrue($weight_select3->isVisible());
- // Toggle row weight selects back to hidden.
- $this->findWeightsToggle('Hide row weights')->click();
- // Check that rows weight selects are hidden again.
- $this->assertFalse($weight_select1->isVisible());
- $this->assertFalse($weight_select2->isVisible());
- $this->assertFalse($weight_select3->isVisible());
- }
- /**
- * Tests draggable table drag'n'drop.
- */
- public function testDragAndDrop() {
- $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]");
- // Check that initially the rows are in the correct order.
- $this->assertOrder(['Row with id 1', 'Row with id 2', 'Row with id 3']);
- // Check that the 'unsaved changes' text is not present in the message area.
- $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');
- // Drag row1 over row2.
- $row1->dragTo($row2);
- // Check that the 'unsaved changes' text was added in the message area.
- $this->assertSession()->waitForText('You have unsaved changes.');
- // Check that row1 and row2 were swapped.
- $this->assertOrder(['Row with id 2', 'Row with id 1', 'Row with id 3']);
- // Check that weights were changed.
- $this->assertGreaterThan($weight_select2->getValue(), $weight_select1->getValue());
- $this->assertGreaterThan($weight_select2->getValue(), $weight_select3->getValue());
- $this->assertGreaterThan($weight_select1->getValue(), $weight_select3->getValue());
- // Now move the last row (row3) in the second position. row1 should go last.
- $row3->dragTo($row1);
- // Check that the order is: row2, row3 and row1.
- $this->assertOrder(['Row with id 2', 'Row with id 3', 'Row with id 1']);
- }
- /**
- * Tests accessibility through keyboard of the tabledrag functionality.
- */
- public function testKeyboardAccessibility() {
- $this->state->set('tabledrag_test_table', array_flip(range(1, 5)));
- $expected_table = [
- ['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],
- ];
- $this->drupalGet('tabledrag_test');
- $this->assertDraggableTable($expected_table);
- // Nest the row with id 2 as child of row 1.
- $this->moveRowWithKeyboard($this->findRowById(2), 'right');
- $expected_table[1] = ['id' => 2, 'weight' => -10, 'parent' => 1, 'indentation' => 1, 'changed' => TRUE];
- $this->assertDraggableTable($expected_table);
- // Nest the row with id 3 as child of row 1.
- $this->moveRowWithKeyboard($this->findRowById(3), 'right');
- $expected_table[2] = ['id' => 3, 'weight' => -9, 'parent' => 1, 'indentation' => 1, 'changed' => TRUE];
- $this->assertDraggableTable($expected_table);
- // Nest the row with id 3 as child of row 2.
- $this->moveRowWithKeyboard($this->findRowById(3), 'right');
- $expected_table[2] = ['id' => 3, 'weight' => -10, 'parent' => 2, 'indentation' => 2, 'changed' => TRUE];
- $this->assertDraggableTable($expected_table);
- // Nesting should be allowed to maximum level 2.
- $this->moveRowWithKeyboard($this->findRowById(4), 'right', 4);
- $expected_table[3] = ['id' => 4, 'weight' => -9, 'parent' => 2, 'indentation' => 2, 'changed' => TRUE];
- $this->assertDraggableTable($expected_table);
- // Re-order children of row 1.
- $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);
- // Move back the row 3 to the 1st level.
- $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);
- // Move row 3 to the last position.
- $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);
- // Nothing happens when trying to move the last row further down.
- $this->moveRowWithKeyboard($this->findRowById(3), 'down');
- $this->assertDraggableTable($expected_table);
- // Nest row 3 under 5. The max depth allowed should be 1.
- $this->moveRowWithKeyboard($this->findRowById(3), 'right', 3);
- $expected_table[4] = ['id' => 3, 'weight' => -10, 'parent' => 5, 'indentation' => 1, 'changed' => TRUE];
- $this->assertDraggableTable($expected_table);
- // The first row of the table cannot be nested.
- $this->moveRowWithKeyboard($this->findRowById(1), 'right');
- $this->assertDraggableTable($expected_table);
- // Move a row which has nested children. The children should move with it,
- // with nesting preserved. Swap the order of the top-level rows by moving
- // row 1 to after row 3.
- $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);
- }
- /**
- * Tests the root and leaf behaviors for rows.
- */
- 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);
- // Rows marked as root cannot be moved as children of another row.
- $this->moveRowWithKeyboard($this->findRowById(5), 'right');
- $this->assertDraggableTable($expected_table);
- // Rows marked as leaf cannot have children. Trying to move the row #3
- // as child of #2 should have no results.
- $this->moveRowWithKeyboard($this->findRowById(3), 'right');
- $this->assertDraggableTable($expected_table);
- // Leaf can be still swapped and moved to first level.
- $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);
- // Root rows can have children.
- $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);
- }
- /**
- * Tests the warning that appears upon making changes to a tabledrag table.
- */
- public function testTableDragChangedWarning() {
- $this->drupalGet('tabledrag_test');
- // By default no text is visible.
- $this->assertSession()->pageTextNotContains('You have unsaved changes.');
- // Try to make a non-allowed action, like moving further down the last row.
- // No changes happen, so no message should be shown.
- $this->moveRowWithKeyboard($this->findRowById(5), 'down');
- $this->assertSession()->pageTextNotContains('You have unsaved changes.');
- // Make a change. The message will appear.
- $this->moveRowWithKeyboard($this->findRowById(5), 'right');
- $this->assertSession()->pageTextContainsOnce('You have unsaved changes.');
- // Make another change, the text will stay visible and appear only once.
- $this->moveRowWithKeyboard($this->findRowById(2), 'up');
- $this->assertSession()->pageTextContainsOnce('You have unsaved changes.');
- }
- /**
- * Asserts that several pieces of markup are in a given order in the page.
- *
- * @param string[] $items
- * An ordered list of strings.
- *
- * @throws \Behat\Mink\Exception\ExpectationException
- * When any of the given string is not found.
- *
- * @todo Remove this and use the WebAssert method when #2817657 is done.
- */
- protected function assertOrder(array $items) {
- $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.");
- }
- /**
- * Asserts the whole structure of the draggable test table.
- *
- * @param array $structure
- * The table structure. Each entry represents a row and consists of:
- * - id: the expected value for the ID hidden field.
- * - weight: the expected row weight.
- * - parent: the expected parent ID for the row.
- * - indentation: how many indents the row should have.
- * - changed: whether or not the row should have been marked as changed.
- */
- protected function assertDraggableTable(array $structure) {
- $rows = $this->getSession()->getPage()->findAll('xpath', '//table[@id="tabledrag-test-table"]/tbody/tr');
- $this->assertSession()->elementsCount('xpath', '//table[@id="tabledrag-test-table"]/tbody/tr', count($structure));
- foreach ($structure as $delta => $expected) {
- $this->assertTableRow($rows[$delta], $expected['id'], $expected['weight'], $expected['parent'], $expected['indentation'], $expected['changed']);
- }
- }
- /**
- * Asserts the values of a draggable row.
- *
- * @param \Behat\Mink\Element\NodeElement $row
- * The row element to assert.
- * @param string $id
- * The expected value for the ID hidden input of the row.
- * @param int $weight
- * The expected weight of the row.
- * @param string $parent
- * The expected parent ID.
- * @param int $indentation
- * The expected indentation of the row.
- * @param bool $changed
- * Whether or not the row should have been marked as changed.
- */
- protected function assertTableRow(NodeElement $row, $id, $weight, $parent = '', $indentation = 0, $changed = FALSE) {
- // Assert that the row position is correct by checking that the id
- // corresponds.
- $this->assertSession()->hiddenFieldValueEquals("table[$id][id]", $id, $row);
- $this->assertSession()->hiddenFieldValueEquals("table[$id][parent]", $parent, $row);
- $this->assertSession()->fieldValueEquals("table[$id][weight]", $weight, $row);
- $this->assertSession()->elementsCount('css', '.js-indentation.indentation', $indentation, $row);
- // A row is marked as changed when the related markup is present.
- $this->assertSession()->elementsCount('css', 'abbr.tabledrag-changed', (int) $changed, $row);
- }
- /**
- * Finds a row in the test table by the row ID.
- *
- * @param string $id
- * The ID of the row.
- *
- * @return \Behat\Mink\Element\NodeElement
- * The row element.
- */
- protected function findRowById($id) {
- $xpath = "//table[@id='tabledrag-test-table']/tbody/tr[.//input[@name='table[$id][id]']]";
- $row = $this->getSession()->getPage()->find('xpath', $xpath);
- $this->assertNotEmpty($row);
- return $row;
- }
- /**
- * Finds the show/hide weight toggle element.
- *
- * @param string $expected_text
- * The expected text on the element.
- *
- * @return \Behat\Mink\Element\NodeElement
- * The toggle element.
- */
- protected function findWeightsToggle($expected_text) {
- $toggle = $this->getSession()->getPage()->findButton($expected_text);
- $this->assertNotEmpty($toggle);
- return $toggle;
- }
- /**
- * Moves a row through the keyboard.
- *
- * @param \Behat\Mink\Element\NodeElement $row
- * The row to move.
- * @param string $arrow
- * The arrow button to use to move the row. Either one of 'left', 'right',
- * 'up' or 'down'.
- * @param int $repeat
- * (optional) How many times to press the arrow button. Defaults to 1.
- */
- 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();
- }
- /**
- * Marks a row handle for dragging.
- *
- * The handle is marked by adding a css class that is removed by an helper
- * js library once the dragging is over.
- *
- * @param \Behat\Mink\Element\NodeElement $handle
- * The draggable row handle element.
- *
- * @throws \Exception
- * Thrown when the class is not added successfully to the handle.
- */
- protected function markRowHandleForDragging(NodeElement $handle) {
- $class = self::DRAGGING_CSS_CLASS;
- $script = <<<JS
- document.evaluate("{$handle->getXpath()}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
- .singleNodeValue.classList.add('{$class}');
- 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()));
- }
- }
- /**
- * Waits until the dragging operations are finished on a row handle.
- *
- * @param \Behat\Mink\Element\NodeElement $handle
- * The draggable row handle element.
- *
- * @throws \Exception
- * Thrown when the dragging operations are not completed on time.
- */
- 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()));
- }
- }
- }
|