Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[BUGFIX] Assure page title editing when creating new pages
Using drag and drop, one can create new pages within the page tree. New pages can be created before, after or within existing pages. Currently, one could not provide a page title if the page was created within a page without subpages due to issues with unintended focus change after drag and drop. It is now ensured that a page title can be edited directly after dragging a page into the page tree. Some cases are also covered by acceptance tests now. Resolves: #92380 Releases: master, 10.4 Change-Id: I95391631f11552fc59e9252e904052d8288c5d91 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67473 Tested-by: TYPO3com <noreply@typo3.com> Tested-by: Richard Haeser <richard@richardhaeser.com> Reviewed-by: Richard Haeser <richard@richardhaeser.com>
- Loading branch information
1 parent
ce4fbab
commit 7415a3b
Showing
4 changed files
with
276 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
152 changes: 152 additions & 0 deletions
152
typo3/sysext/core/Tests/Acceptance/PageTree/DragAndDrop/PageCreationWithDragAndDropCest.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
<?php | ||
|
||
declare(strict_types=1); | ||
|
||
/* | ||
* This file is part of the TYPO3 CMS project. | ||
* | ||
* It is free software; you can redistribute it and/or modify it under | ||
* the terms of the GNU General Public License, either version 2 | ||
* of the License, or any later version. | ||
* | ||
* For the full copyright and license information, please read the | ||
* LICENSE.txt file that was distributed with this source code. | ||
* | ||
* The TYPO3 project - inspiring people to share! | ||
*/ | ||
|
||
namespace TYPO3\CMS\Core\Tests\Acceptance\PageTree\DragAndDrop; | ||
|
||
use Facebook\WebDriver\WebDriverKeys; | ||
use TYPO3\CMS\Core\Tests\Acceptance\Support\BackendTester; | ||
use TYPO3\CMS\Core\Tests\Acceptance\Support\Helper\Mouse; | ||
use TYPO3\CMS\Core\Tests\Acceptance\Support\Helper\PageTree; | ||
|
||
/** | ||
* Page tree related tests for page creation using drag and drop. | ||
*/ | ||
class PageCreationWithDragAndDropCest | ||
{ | ||
/** | ||
* @var string | ||
*/ | ||
protected static $treeNode = '#typo3-pagetree-tree .nodes .node'; | ||
|
||
/** | ||
* @var string | ||
*/ | ||
protected static $dragNode = '#svg-toolbar .svg-toolbar__drag-node'; | ||
|
||
/** | ||
* @var string | ||
*/ | ||
protected static $nodeEditInput = '.node-edit'; | ||
|
||
/** | ||
* Open list module of styleguide elements basic page | ||
* | ||
* @param BackendTester $I | ||
* @param PageTree $pageTree | ||
* @throws \Exception | ||
*/ | ||
public function _before(BackendTester $I, PageTree $pageTree): void | ||
{ | ||
$I->useExistingSession('admin'); | ||
$I->click('List'); | ||
$pageTree->openPath(['Root']); | ||
$I->waitForElement(static::$treeNode, 5); | ||
$I->waitForElement(static::$dragNode, 5); | ||
} | ||
|
||
/** | ||
* Check drag and drop for new pages into nodes without children. | ||
* | ||
* @param BackendTester $I | ||
* @param Mouse $mouse | ||
* @throws \Exception | ||
*/ | ||
public function dragAndDropNewPageInNodeWithoutChildren(BackendTester $I, Mouse $mouse): void | ||
{ | ||
$I->amGoingTo('create a new page below pid=21 (no child pages) using drag and drop'); | ||
$this->dragAndDropNewPage($I, $mouse, 21); | ||
} | ||
|
||
/** | ||
* Check drag and drop for new pages into nodes with children. | ||
* | ||
* @param BackendTester $I | ||
* @param Mouse $mouse | ||
* @throws \Exception | ||
*/ | ||
public function dragAndDropNewPageInNodeWithChildren(BackendTester $I, Mouse $mouse): void | ||
{ | ||
$I->amGoingTo('create a new page below pid=10 (has child pages) using drag and drop'); | ||
$this->dragAndDropNewPage($I, $mouse, 10); | ||
} | ||
|
||
/** | ||
* Check drag and drop for new pages and quit page creation using Escape key. | ||
* | ||
* @param BackendTester $I | ||
* @param Mouse $mouse | ||
* @throws \Exception | ||
*/ | ||
public function dragAndDropNewPageAndQuitPageCreation(BackendTester $I, Mouse $mouse): void | ||
{ | ||
$mouse->dragAndDrop(static::$dragNode, $this->getPageIdentifier(22)); | ||
|
||
$I->seeElement(static::$nodeEditInput); | ||
$I->pressKey(static::$nodeEditInput, WebDriverKeys::ESCAPE); | ||
$I->waitForElementNotVisible(static::$nodeEditInput, 5); | ||
} | ||
|
||
/** | ||
* Check drag and drop for new pages and quit page creation using empty page title. | ||
* | ||
* @param BackendTester $I | ||
* @param Mouse $mouse | ||
* @throws \Exception | ||
*/ | ||
public function dragAndDropNewPageAndLeavePageTitleEmpty(BackendTester $I, Mouse $mouse): void | ||
{ | ||
$mouse->dragAndDrop(static::$dragNode, $this->getPageIdentifier(22)); | ||
|
||
$I->seeElement(static::$nodeEditInput); | ||
$I->fillField(static::$nodeEditInput, ''); | ||
$I->pressKey(static::$nodeEditInput, WebDriverKeys::ENTER); | ||
$I->waitForElementNotVisible(static::$nodeEditInput, 5); | ||
} | ||
|
||
/** | ||
* Perform drag and drop for a new page into the given target page. | ||
* | ||
* @param BackendTester $I | ||
* @param Mouse $mouse | ||
* @param int $targetPageId | ||
* @throws \Exception | ||
*/ | ||
protected function dragAndDropNewPage(BackendTester $I, Mouse $mouse, int $targetPageId): void | ||
{ | ||
$target = $this->getPageIdentifier($targetPageId); | ||
$pageTitle = sprintf('Dummy 1-%d-new', $targetPageId); | ||
|
||
$mouse->dragAndDrop(static::$dragNode, $target); | ||
|
||
$I->seeElement(static::$nodeEditInput); | ||
$I->fillField(static::$nodeEditInput, $pageTitle); | ||
$I->pressKey(static::$nodeEditInput, WebDriverKeys::ENTER); | ||
$I->waitForElementNotVisible(static::$nodeEditInput); | ||
$I->see($pageTitle); | ||
} | ||
|
||
/** | ||
* Get node identifier of given page. | ||
* | ||
* @param int $pageId | ||
* @return string | ||
*/ | ||
protected function getPageIdentifier(int $pageId): string | ||
{ | ||
return '#identifier-0_' . $pageId; | ||
} | ||
} |
117 changes: 117 additions & 0 deletions
117
typo3/sysext/core/Tests/Acceptance/Support/Helper/Mouse.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
<?php | ||
|
||
declare(strict_types=1); | ||
|
||
/* | ||
* This file is part of the TYPO3 CMS project. | ||
* | ||
* It is free software; you can redistribute it and/or modify it under | ||
* the terms of the GNU General Public License, either version 2 | ||
* of the License, or any later version. | ||
* | ||
* For the full copyright and license information, please read the | ||
* LICENSE.txt file that was distributed with this source code. | ||
* | ||
* The TYPO3 project - inspiring people to share! | ||
*/ | ||
|
||
namespace TYPO3\CMS\Core\Tests\Acceptance\Support\Helper; | ||
|
||
use Facebook\WebDriver\Interactions\Internal\WebDriverButtonReleaseAction; | ||
use Facebook\WebDriver\Interactions\Internal\WebDriverClickAndHoldAction; | ||
use Facebook\WebDriver\Interactions\Internal\WebDriverMouseMoveAction; | ||
use Facebook\WebDriver\Interactions\WebDriverCompositeAction; | ||
use Facebook\WebDriver\Remote\RemoteWebDriver; | ||
use Facebook\WebDriver\Remote\RemoteWebElement; | ||
use Facebook\WebDriver\WebDriverBy; | ||
use Facebook\WebDriver\WebDriverMouse; | ||
use TYPO3\CMS\Core\Tests\Acceptance\Support\BackendTester; | ||
|
||
/** | ||
* Several mouse actions for Backend usage. | ||
*/ | ||
class Mouse | ||
{ | ||
/** | ||
* @var BackendTester | ||
*/ | ||
protected $tester; | ||
|
||
public function __construct(BackendTester $I) | ||
{ | ||
$this->tester = $I; | ||
} | ||
|
||
/** | ||
* Perform drag and drop from source to target destination. | ||
* | ||
* Performs a normal "drag nd drop" operation from the given source element to the | ||
* given target destination. Additionally, checks whether the current drag & drop | ||
* node is displayed on the page. | ||
* | ||
* [!] Note that only CSS selectors are valid for both $source and $target. | ||
* | ||
* @param string $source Drag source, must be a valid CSS selector | ||
* @param string $target Drop target, must be a valid CSS selector | ||
*/ | ||
public function dragAndDrop(string $source, string $target): void | ||
{ | ||
$I = $this->tester; | ||
$this->dragTo($source, $target, false); | ||
$I->canSeeElement('.node-dd'); | ||
$this->release(); | ||
} | ||
|
||
/** | ||
* Drag source element to target destination. | ||
* | ||
* Uses the mouse to drag the given source element to the given target destination. | ||
* If $release is set to `true`, the mouse is released afterwards. In this case, a | ||
* normal "drag and drop" action is performed. | ||
* | ||
* [!] Note that only CSS selectors are valid for both $source and $target. | ||
* | ||
* @param string $source Drag source, must be a valid CSS selector | ||
* @param string $target Drag target, must be a valid CSS selector | ||
* @param bool $release `true` if mouse should be released (default), `false` otherwise | ||
*/ | ||
public function dragTo(string $source, string $target, bool $release = true): void | ||
{ | ||
(new WebDriverCompositeAction()) | ||
->addAction( | ||
new WebDriverClickAndHoldAction($this->getMouse(), $this->findElement($source)) | ||
) | ||
->addAction( | ||
new WebDriverMouseMoveAction($this->getMouse(), $this->findElement($target)) | ||
) | ||
->perform(); | ||
if ($release) { | ||
$this->release(); | ||
} | ||
} | ||
|
||
/** | ||
* Release mouse at current position. | ||
*/ | ||
public function release(): void | ||
{ | ||
$action = new WebDriverButtonReleaseAction($this->getMouse()); | ||
$action->perform(); | ||
} | ||
|
||
protected function findElement(string $cssSelector): RemoteWebElement | ||
{ | ||
$I = $this->tester; | ||
return $I->executeInSelenium(function (RemoteWebDriver $webDriver) use ($cssSelector) { | ||
return $webDriver->findElement(WebDriverBy::cssSelector($cssSelector)); | ||
}); | ||
} | ||
|
||
protected function getMouse(): WebDriverMouse | ||
{ | ||
$I = $this->tester; | ||
return $I->executeInSelenium(function (RemoteWebDriver $webDriver) { | ||
return $webDriver->getMouse(); | ||
}); | ||
} | ||
} |