Skip to content

Commit

Permalink
FIX Cleanup and validate breadcrumb click event handling (#1265)
Browse files Browse the repository at this point in the history 
Remove workaround that is no longer needed.
Add behat tests for asset breadcrumbs.
  • Loading branch information
@GuySartorelli
GuySartorelli authored Apr 11, 2022
1 parent 8aedb2c commit a9a7a21
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 16 deletions.
2 changes: 1 addition & 1 deletion client/dist/js/TinyMCE_sslink-file.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/js/TinyMCE_ssmedia.js
View file

Large diffs are not rendered by default.

7 changes: 0 additions & 7 deletions client/src/entwine/TinyMCE_sslink-file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,6 @@ const modalId = 'insert-link__dialog-wrapper--file';
const InjectableInsertMediaModal = loadComponent(InsertMediaModal);

jQuery.entwine('ss', ($) => {
// this is required because the React version of e.preventDefault() doesn't work
// this is to stop React Tabs from navigating the page
$('.insert-link__dialog-wrapper--internal .nav-link, ' +
'.insert-media-react__dialog-wrapper .breadcrumb__container a').entwine({
onclick: (e) => e.preventDefault(),
});

$('textarea.htmleditor').entwine({
openLinkFileDialog() {
let dialog = $(`#${modalId}`);
Expand Down
7 changes: 0 additions & 7 deletions client/src/entwine/TinyMCE_ssmedia.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,6 @@ const filter = 'img[data-shortcode="image"]';
})();

jQuery.entwine('ss', ($) => {
// this is required because the React version of e.preventDefault() doesn't work
// this is to stop React Tabs from navigating the page
$('.insert-media-react__dialog-wrapper .nav-link, ' +
'.insert-media-react__dialog-wrapper .breadcrumb__container a').entwine({
onclick: (e) => e.preventDefault(),
});

$('.js-injector-boot #insert-media-react__dialog-wrapper').entwine({
Element: null,

Expand Down
19 changes: 19 additions & 0 deletions tests/behat/features/insert-an-image.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Feature: Insert an image into a page
Given a "page" "About Us" has the "Content" "<p>My awesome content</p>"
And a "image" "folder1/file1.jpg"
And a "image" "folder1/file2.jpg"
And a "folder" "folder1/folder1-1"
And I am logged in with "ADMIN" permissions
And I go to "/admin/pages"
And I click on "About Us" in the tree
Expand Down Expand Up @@ -36,6 +37,24 @@ Feature: Insert an image into a page
# Required to avoid "unsaved changed" browser dialog
And I press the "Save" button

Scenario: I can use modal breadcrumbs to navigate up levels
When I press the "Insert from Files" HTML field button
And I select the file named "folder1" in the gallery
And I select the file named "folder1-1" in the gallery
Then I should see the breadcrumb link "Files"
And I should see the breadcrumb link "folder1"
And I should not see the breadcrumb link "folder1-1"
When I click on the breadcrumb link "folder1"
Then I should see the file named "folder1-1" in the gallery
And I should not see the breadcrumb link "folder1"
# Validate that we haven't navigated away from the pages admin
And I can see the preview panel
When I click on the breadcrumb link "Files"
Then I should see the file named "folder1" in the gallery
And I should not see the breadcrumb link "Files"
# Validate that we haven't navigated away from the pages admin
And I can see the preview panel

Scenario: I can edit an image in the file modal
When I press the "Insert from Files" HTML field button
And I select the file named "folder1" in the gallery
Expand Down
19 changes: 19 additions & 0 deletions tests/behat/features/manage-files.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,25 @@ Feature: Manage files
And I should see the file named "folder1-1" in the gallery
And I should not see the file named "file2" in the gallery

Scenario: I can use breadcrumbs to navigate up levels
When I click on the file named "folder1" in the gallery
And I click on the file named "folder1-1" in the gallery
Then I should see the breadcrumb link "Files"
And I should see the breadcrumb link "folder1"
And I should not see the breadcrumb link "folder1-1"
When I click on the breadcrumb link "folder1"
Then I should see the file named "folder1-1" in the gallery
And I should not see the breadcrumb link "folder1"
# Validate that the ways we're confirming we're not navigated away in other tests are valid
And I should not see an ".uploadfield" element
And I should not see an ".cms-preview" element
When I click on the breadcrumb link "Files"
Then I should see the file named "folder1" in the gallery
And I should not see the breadcrumb link "Files"
# Validate that the ways we're confirming we're not navigated away in other tests are valid
And I should not see an ".uploadfield" element
And I should not see an ".cms-preview" element

Scenario: I can upload a file to a folder
When I click on the file named "folder1" in the gallery
And I attach the file "testfile.jpg" to dropzone "gallery-container"
Expand Down
20 changes: 20 additions & 0 deletions tests/behat/features/single-file-upload-field.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Feature: Single file Upload field
Given a "page" "About Us" has the "Content" "<p>My awesome content</p>"
And a "image" "folder1/file1.jpg"
And a "image" "folder1/file2.jpg"
And a "folder" "folder1/folder1-1"
And a "employee" "Allen"
And I am logged in with "ADMIN" permissions
And I go to "/admin/test/SilverStripe-FrameworkTest-Model-Employee"
Expand Down Expand Up @@ -57,3 +58,22 @@ Feature: Single file Upload field
Then I should see "file2" in the ".uploadfield-item__title" element
# Required to avoid "unsaved changed" browser dialog
Then I press the "Save" button

Scenario: I can use modal breadcrumbs to navigate up levels
When I click "Choose existing" in the ".uploadfield" element
And I press the "Back" HTML field button
And I select the file named "folder1" in the gallery
And I select the file named "folder1-1" in the gallery
Then I should see the breadcrumb link "Files"
And I should see the breadcrumb link "folder1"
And I should not see the breadcrumb link "folder1-1"
When I click on the breadcrumb link "folder1"
Then I should see the file named "folder1-1" in the gallery
And I should not see the breadcrumb link "folder1"
# Validate that we haven't navigated away from the pages admin
And I should see an ".uploadfield" element
When I click on the breadcrumb link "Files"
Then I should see the file named "folder1" in the gallery
And I should not see the breadcrumb link "Files"
# Validate that we haven't navigated away from the pages admin
And I should see an ".uploadfield" element
49 changes: 49 additions & 0 deletions tests/behat/src/FixtureContext.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,38 @@ public function iShouldNotSeeTheFileStatusIconWithTheClass($id)
Assert::assertNull($icon, "File status icon '$id' was found");
}


/**
* @Given /^I click on the breadcrumb link "([^"]+)"$/
* @param string $name
*/
public function stepIClickBreadcrumbLink($name)
{
$link = $this->getBreadcrumbLink($name);
Assert::assertNotNull($link, "Breadcrumb link named '$name' could not be found");
$link->click();
}

/**
* @Then /^I should see the breadcrumb link "([^"]*)"/
* @param string $name
*/
public function iShouldSeeTheBreadcrumbLink($name)
{
$link = $this->getBreadcrumbLink($name);
Assert::assertNotNull($link, "Breadcrumb link named '$name' could not be found");
}

/**
* @Then /^I should not see the breadcrumb link "([^"]*)"/
* @param string $name
*/
public function iShouldNotSeeTheBreadcrumbLink($name)
{
$link = $this->getBreadcrumbLink($name);
Assert::assertNull($link, "Breadcrumb link named '$name' was found when it should not be visible");
}

/**
* @Given /^I click on the latest history item$/
*/
Expand Down Expand Up @@ -249,6 +281,23 @@ protected function getGalleryItem($name, $timeout = 3)
return null;
}

/**
* Helper for finding breadcrumb links
*
* @param string $name Title of item
* @return NodeElement
*/
protected function getBreadcrumbLink(string $name): ?NodeElement
{
/** @var DocumentElement $page */
$page = $this->getMainContext()->getSession()->getPage();
$link = $page->find(
'xpath',
"//li[contains(@class, 'breadcrumb__item')]//a[contains(@class, 'breadcrumb__item-title')][text()='$name']"
);
return $link;
}

/**
* Helper for finding items in the visible table gallery view by its order
*
Expand Down

0 comments on commit a9a7a21

Please sign in to comment.