diff --git a/behat.yml b/behat.yml new file mode 100644 index 00000000..83ae0e65 --- /dev/null +++ b/behat.yml @@ -0,0 +1,31 @@ +# Run linkfield behat tests with this command +# Note that linkfield behat tests require CMS module +# ========================================================================= # +# chromedriver +# vendor/bin/behat @linkfield +# ========================================================================= # +default: + suites: + linkfield: + paths: + - '%paths.modules.linkfield%/tests/behat/features' + contexts: + - SilverStripe\Framework\Tests\Behaviour\FeatureContext + - SilverStripe\Framework\Tests\Behaviour\CmsFormsContext + - SilverStripe\Framework\Tests\Behaviour\CmsUiContext + - SilverStripe\BehatExtension\Context\BasicContext + - SilverStripe\BehatExtension\Context\LoginContext + - SilverStripe\BehatExtension\Context\FixtureContext: + - '%paths.modules.linkfield%/tests/behat/features/files/' + + extensions: + SilverStripe\BehatExtension\MinkExtension: + default_session: facebook_web_driver + javascript_session: facebook_web_driver + facebook_web_driver: + browser: chrome + wd_host: "http://127.0.0.1:9515" #chromedriver port + + SilverStripe\BehatExtension\Extension: + screenshot_path: '%paths.base%/artifacts/screenshots' + bootstrap_file: vendor/silverstripe/framework/tests/behat/serve-bootstrap.php diff --git a/tests/behat/features/create-edit-linkfield.feature b/tests/behat/features/create-edit-linkfield.feature new file mode 100644 index 00000000..a5fcca92 --- /dev/null +++ b/tests/behat/features/create-edit-linkfield.feature @@ -0,0 +1,131 @@ +Feature: Create Links in LinkField and MultiLinkField + As a content editor + I want to add links to pages, files, external URLs, email addresses and phone numbers + + Background: + Given I add an extension "SilverStripe\FrameworkTest\LinkField\Extensions\LinkPageExtension" to the "Page" class + And a "page" "Link Page" + And the "group" "EDITOR" has permissions "Access to 'Pages' section" + And I am logged in as a member of "EDITOR" group + And I go to "/admin/pages" + And I should see "Link Page" + And I click on "Link Page" in the tree + + Scenario: I click on the link fields and see the list of allowed link types with icons for LinkFields + Given I should see the "#Form_EditForm_HasManyLinks" element + And I should see the "#Form_EditForm_HasOneLink" element + + # Test limited list of link types are present in correct order in the dropdown + + When I click on the "[data-field-id='Form_EditForm_HasOneLink'] button" element + Then I should see the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-menu.show" element + + And I should see the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(1) .font-icon-page" element + And I should see "Page on this site" in the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(1)" element + + And I should see the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(2) .font-icon-p-mail" element + And I should see "Link to email address" in the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(2)" element + + And I should see the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(3) .font-icon-mobile" element + And I should see "Phone number" in the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(3)" element + + # Test full list of link types are present in correct order in the dropdown + + When I click on the "[data-field-id='Form_EditForm_HasManyLinks'] button" element + Then I should see the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-menu.show" element + + And I should see the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(1) .font-icon-page" element + And I should see "Page on this site" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(1)" element + + And I should see the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(2) .font-icon-image" element + And I should see "Link to a file" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(2)" element + + And I should see the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(3) .font-icon-external-link" element + And I should see "Link to external URL" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(3)" element + + And I should see the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(4) .font-icon-p-mail" element + And I should see "Link to email address" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(4)" element + + And I should see the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(5) .font-icon-mobile" element + And I should see "Phone number" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(5)" element + + # Test that user can create email link in LinkField + + When I click on the "[data-field-id='Form_EditForm_HasOneLink'] button" element + Then I should see "Link to email address" in the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(2)" element + When I click on the "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(2)" element + And I wait for 5 seconds + Then I should see "Link to email address" in the ".modal-header" element + Then I fill in "Form_LinkForm_0_Title" with "Email link" + And I fill in "Form_LinkForm_0_Email" with "email@example.com" + And I should not see "Open in new window" in the ".modal-content" element + And I press the "Create link" button + And I wait for 2 seconds + + # Create SiteTreeLink in MultiLinkField + + When I click on the "[data-field-id='Form_EditForm_HasManyLinks'] button" element + Then I should see "Page on this site" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-menu.show" element + When I click on the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(1)" element + Then I should see "Page on this site" in the ".modal-header" element + And I wait for 2 seconds + Then I fill in "Form_LinkForm_0_Title" with "About Us" + And I select "About Us" in the "#Form_LinkForm_0_PageID_Holder" tree dropdown + And I fill in "Form_LinkForm_0_QueryString" with "option=value" + And I check "Open in new window" + And I press the "Create link" button + And I wait for 2 seconds + + # Create ExternalLink in MultiLinkField + + When I click on the "[data-field-id='Form_EditForm_HasManyLinks'] button" element + Then I should see "Link to external URL" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(3)" element + When I click on the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(3)" element + And I wait for 5 seconds + Then I should see "Link to external URL" in the ".modal-header" element + Then I fill in "Form_LinkForm_0_Title" with "External URL" + Then I fill in "Form_LinkForm_0_ExternalUrl" with "https://www.silverstripe.org" + And I check "Open in new window" + And I press the "Create link" button + And I wait for 2 seconds + + # Test that all links are created + + # Link ID 1 + Then I should see "Email link" in the "[data-field-id='Form_EditForm_HasOneLink']" element + And I should see "email@example.com" in the "[data-field-id='Form_EditForm_HasOneLink'] .link-picker__link" element + And I should see "Draft" in the "[data-field-id='Form_EditForm_HasOneLink']" element + + # Link ID 2 + And I should see "About Us" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + And I should see "about-us" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + And I should see "Draft" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + + # Link ID 3 + And I should see "External URL" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + And I should see "https://www.silverstripe.org" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + And I should see "Draft" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + + # Test that user can publish the page with links + + When I press the "Publish" button + And I wait for 2 seconds + And I should not see "Draft" in the "[data-field-id='Form_EditForm_HasOneLink']" element + And I should not see "Draft" in the "[data-field-id='Form_EditForm_HasManyLinks']" element + + # Test that user can edit the links + + When I click on the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first button" element + Then I should see "Page on this site" in the ".modal-header" element + Then I fill in "Form_LinkForm_2_Title" with "All about us" + And I press the "Update link" button + And I wait for 2 seconds + And I should see "All about us" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + And I should see "Modified" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + + # Test that user can reorder the links + + And I drag the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element to the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + And I wait for 3 seconds + And I should see "All about us" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + And I should see "External URL" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element diff --git a/tests/behat/features/files/file1.jpg b/tests/behat/features/files/file1.jpg new file mode 100644 index 00000000..beb5a91b Binary files /dev/null and b/tests/behat/features/files/file1.jpg differ diff --git a/tests/behat/features/linkfield-in-elemental.feature b/tests/behat/features/linkfield-in-elemental.feature new file mode 100644 index 00000000..266cf442 --- /dev/null +++ b/tests/behat/features/linkfield-in-elemental.feature @@ -0,0 +1,108 @@ +Feature: Create Links in LinkField and MultiLinkField as part of Elemental Block + As a content editor + I want to be able to work with LinkField and MultiLinkField in Elemental Block + + Background: + Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class + And a "page" "Link Blocks Page" + And the "group" "EDITOR" has permissions "Access to 'Pages' section" + And I am logged in as a member of "EDITOR" group + And I go to "/admin/pages" + And I should see "Link Blocks Page" + And I click on "Link Blocks Page" in the tree + + Scenario: I can create link blocks page + Given I press the "Add block" button + Then I press the "Links List" button + Then I should see "Untitled Links List block" + And I click on the ".element-editor__element" element + + # Test that user can create link in LinkField + + When I click on the "#Form_ElementForm_1_PageElements_1_OneLink_Holder button" element + Then I should see the "#Form_ElementForm_1_PageElements_1_OneLink_Holder .dropdown-menu.show" element + And I should see "Link to email address" in the "#Form_ElementForm_1_PageElements_1_OneLink_Holder .dropdown-item:nth-of-type(2)" element + When I click on the "#Form_ElementForm_1_PageElements_1_OneLink_Holder .dropdown-item:nth-of-type(2)" element + And I wait for 5 seconds + Then I should see "Link to email address" in the ".modal-header" element + Then I fill in "Form_LinkForm_0_Title" with "Email link" + And I fill in "Form_LinkForm_0_Email" with "email@example.com" + And I should not see "Open in new window" in the ".modal-content" element + And I press the "Create link" button + And I wait for 2 seconds + + + # Test that user can create link in MultiLinkField + # Create SiteTreeLink in MultiLinkField + + When I click on the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder button" element + Then I should see the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .dropdown-menu.show" element + And I should see "Page on this site" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .dropdown-item:nth-of-type(1)" element + When I click on the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .dropdown-item:nth-of-type(1)" element + Then I should see "Page on this site" in the ".modal-header" element + And I wait for 2 seconds + Then I fill in "Form_LinkForm_0_Title" with "About Us" + And I select "About Us" in the "#Form_LinkForm_0_PageID_Holder" tree dropdown + And I fill in "Form_LinkForm_0_QueryString" with "option=value" + And I check "Open in new window" + And I press the "Create link" button + And I wait for 2 seconds + + # Create ExternalLink in MultiLinkField + + When I click on the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder button" element + Then I should see the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .dropdown-menu.show" element + And I should see "Phone number" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .dropdown-item:nth-of-type(5)" element + When I click on the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .dropdown-item:nth-of-type(5)" element + And I wait for 5 seconds + Then I should see "Phone number" in the ".modal-header" element + Then I fill in "Form_LinkForm_0_Title" with "Phone" + Then I fill in "Form_LinkForm_0_Phone" with "12345678" + And I should not see "Open in new window" in the ".modal-content" element + And I press the "Create link" button + And I wait for 2 seconds + + # Test that all links are created + + # Link ID 1 + Then I should see "Email link" in the "#Form_ElementForm_1_PageElements_1_OneLink_Holder" element + And I should see "email@example.com" in the "#Form_ElementForm_1_PageElements_1_OneLink_Holder .link-picker__link" element + And I should see "Draft" in the "#Form_ElementForm_1_PageElements_1_OneLink_Holder" element + + # Link ID 2 + And I should see "About Us" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element + And I should see "about-us" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element + And I should see "Draft" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element + + # Link ID 3 + And I should see "Phone" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-last" element + And I should see "12345678" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-last" element + And I should see "Draft" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-last" element + + # Test that user can publish the page with links + + When I press the "Publish" button + And I wait for 2 seconds + Then I click on the ".element-editor__element" element + And I should not see "Draft" in the "#Form_ElementForm_1_PageElements_1_OneLink_Holder" element + And I should not see "Draft" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder" element + + # Test that user can edit the links + + When I click on the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first button" element + Then I should see "Page on this site" in the ".modal-header" element + Then I fill in "Form_LinkForm_2_Title" with "All about us" + And I press the "Update link" button + And I wait for 2 seconds + And I should see "All about us" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element + And I should see "Modified" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element + + # Test that user can reorder the links + + ## These test steps give inconsistent results, not always passed + # And I drag the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element to the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-last" element + # And I wait for 5 seconds + # Then I press the "Publish" button + # Then I click on the ".element-editor__element" element + # And I should see "All about us" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-last" element + # And I should see "Phone" in the "#Form_ElementForm_1_PageElements_1_ManyLinks_Holder .link-picker__link--is-first" element