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/composer.json b/composer.json index 5bd4a59f..4ce070ac 100644 --- a/composer.json +++ b/composer.json @@ -37,7 +37,8 @@ "autoload": { "psr-4": { "SilverStripe\\LinkField\\": "src/", - "SilverStripe\\LinkField\\Tests\\": "tests/php/" + "SilverStripe\\LinkField\\Tests\\": "tests/php/", + "SilverStripe\\LinkField\\Tests\\Behat\\": "tests/behat/" } }, "config": { diff --git a/tests/behat/Extensions/LinkPageExtension.php b/tests/behat/Extensions/LinkPageExtension.php new file mode 100644 index 00000000..6a4fa2de --- /dev/null +++ b/tests/behat/Extensions/LinkPageExtension.php @@ -0,0 +1,57 @@ + Link::class, + ]; + + private static $has_many = [ + 'HasManyLinks' => Link::class . '.Owner', + ]; + + private static array $owns = [ + 'HasOneLink', + 'HasManyLinks', + ]; + + private static array $cascade_deletes = [ + 'HasOneLink', + 'HasManyLinks', + ]; + + private static array $cascade_duplicates = [ + 'HasOneLink', + 'HasManyLinks', + ]; + + public function updateCMSFields(FieldList $fields) + { + $fields->removeByName(['Content', 'HasOneLinkID', 'HasManyLinks']); + + $fields->addFieldsToTab( + 'Root.Main', + [ + LinkField::create('HasOneLink') + ->setAllowedTypes([ + SiteTreeLink::class, + EmailLink::class, + PhoneLink::class + ]), + MultiLinkField::create('HasManyLinks'), + ], + ); + } +} diff --git a/tests/behat/Extensions/LinksListBlockExtension.php b/tests/behat/Extensions/LinksListBlockExtension.php new file mode 100644 index 00000000..bca25bef --- /dev/null +++ b/tests/behat/Extensions/LinksListBlockExtension.php @@ -0,0 +1,75 @@ + Link::class, + ]; + + private static $has_many = [ + 'ManyLinks' => Link::class . '.Owner', + ]; + + private static array $owns = [ + 'OneLink', + 'ManyLinks', + ]; + + private static array $cascade_deletes = [ + 'OneLink', + 'ManyLinks', + ]; + + private static array $cascade_duplicates = [ + 'OneLink', + 'ManyLinks', + ]; + + public function getType(): string + { + return _t(self::class . '.BlockType', 'Links List'); + } + + public function updateCMSFields(FieldList $fields) + { + $fields->removeByName(['OneLinkID', 'ManyLinks']); + + $fields->addFieldsToTab( + 'Root.Main', + [ + LinkField::create('OneLink') + ->setAllowedTypes([ + SiteTreeLink::class, + EmailLink::class, + PhoneLink::class + ]), + MultiLinkField::create('ManyLinks'), + ], + ); + } +} diff --git a/tests/behat/features/create-edit-linkfield.feature b/tests/behat/features/create-edit-linkfield.feature new file mode 100644 index 00000000..a9463f82 --- /dev/null +++ b/tests/behat/features/create-edit-linkfield.feature @@ -0,0 +1,134 @@ +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\LinkField\Tests\Behat\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 2 seconds + Then I should see "Link to email address" in the ".modal-header" element + And I wait for 2 seconds + 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 2 seconds + Then I should see "Link to external URL" in the ".modal-header" element + And I wait for 2 seconds + 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..7c8db9fd --- /dev/null +++ b/tests/behat/features/linkfield-in-elemental.feature @@ -0,0 +1,110 @@ +Feature: Do something with pages + As an site owner + I want to manage pages + + Background: + Given I add an extension "DNADesign\Elemental\Extensions\ElementalPageExtension" to the "Page" class + And I add an extension "SilverStripe\LinkField\Tests\Behat\Extensions\LinksListBlockExtension" to the "DNADesign\Elemental\Models\BaseElement" 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 2 seconds + Then I should see "Link to email address" in the ".modal-header" element + And I wait for 2 seconds + 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 2 seconds + Then I should see "Phone number" in the ".modal-header" element + And I wait for 2 seconds + 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 + + 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 10 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