diff --git a/behat.yml b/behat.yml index 83ae0e65..61453cbd 100644 --- a/behat.yml +++ b/behat.yml @@ -15,7 +15,8 @@ default: - SilverStripe\Framework\Tests\Behaviour\CmsUiContext - SilverStripe\BehatExtension\Context\BasicContext - SilverStripe\BehatExtension\Context\LoginContext - - SilverStripe\BehatExtension\Context\FixtureContext: + - + SilverStripe\BehatExtension\Context\FixtureContext: - '%paths.modules.linkfield%/tests/behat/features/files/' extensions: diff --git a/tests/behat/features/accessibility-linkfield.feature b/tests/behat/features/accessibility-linkfield.feature new file mode 100644 index 00000000..ec2dcf7f --- /dev/null +++ b/tests/behat/features/accessibility-linkfield.feature @@ -0,0 +1,138 @@ +@retry +Feature: Accessibility Tests + As a content editor + I want to create and interact with LinkField using the keyboard + + Background: + Given I add an extension "SilverStripe\FrameworkTest\LinkField\Extensions\LinkPageExtension" to the "Page" class + And I go to "/dev/build?flush" + And there are the following Page records + """ + page-1: + Title: "Page 1" + URLSegment: 'page-1' + """ + And there are the following SilverStripe\LinkField\Models\SiteTreeLink records + """ + page-link-1: + OwnerID: 1 + LinkText: 'Page Link 1' + QueryString: 'param1=value1¶m2=option2' + Anchor: 'my-anchor' + Page: =>Page.page-1 + """ + And there are the following SilverStripe\LinkField\Models\EmailLink records + """ + email-link: + LinkText: 'Email Link' + Email: 'maxime@silverstripe.com' + """ + And there are the following SilverStripe\LinkField\Models\ExternalLink records + """ + external-link: + LinkText: 'External Link' + ExternalUrl: 'https://google.com' + """ + And there are the following Page records + """ + link-page-1: + Title: 'Link Page' + URLSegment: 'link-page-1' + HasManyLinks: + - =>SilverStripe\LinkField\Models\SiteTreeLink.page-link-1 + - =>SilverStripe\LinkField\Models\EmailLink.email-link + - =>SilverStripe\LinkField\Models\ExternalLink.external-link + """ + And I go to "/dev/build?flush" + 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 can create and edit a LinkField using the keyboard + Given I should see the "#Form_EditForm_HasManyLinks" element + And I should see the "#Form_EditForm_HasOneLink" element + + # Create SiteTreeLink in LinkField using keyboard + + When I focus on the "[data-field-id='Form_EditForm_HasOneLink'] button" element + And I press the "Enter" key globally + Then the active element should be "[data-field-id='Form_EditForm_HasOneLink'] .dropdown-item:nth-of-type(1)" + When I press the "Enter" key globally + And I wait for 2 seconds + Then I should see "Page on this site" in the ".modal-header" element + And I wait for 2 seconds + + # Test accessibility of the modal form + + Then I type "About Us" in the active element ".treedropdownfield__input" + And I press the "Enter" key globally + And I press the "Tab" key globally + + Then I type "newquery=1" in the active element "[name='QueryString']" + And I press the "Tab" key globally + + Then I type "new anchor" in the active element ".anchorselectorfield__input" + And I press the "Enter" key globally + And I press the "Tab" key globally + When I press the "Enter" key globally + Then I should see "Auto generated from Page title if left blank" + And I press the "Enter" key globally + And I press the "Tab" key globally + + Then I type "New Page Link" in the active element "[name='LinkText']" + And I press the "Tab" key globally + Then the active element should be "[name='OpenInNew']" + And I press the "Space" key globally + And I press the "Tab" key globally + Then I press the "Enter" key globally + And I wait for 2 seconds + + Then I should see "New Page Link" in the "[data-field-id='Form_EditForm_HasOneLink']" element + And I should see "about-us" in the "[data-field-id='Form_EditForm_HasOneLink'] .link-picker__url" element + + # Test accessibility of the LinkField menu + + Then I press the "Tab" key globally + And I press the "Tab" key globally + And I press the "Enter" key globally + And I should see "Page on this site" in the "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-menu.show" element + And I press the "Down" key globally + And I press the "Down" key globally + Then the active element should be "[data-field-id='Form_EditForm_HasManyLinks'] .dropdown-item:nth-of-type(3)" + And I press the "Enter" key globally + Then I should see "Link to external URL" in the ".modal-header" element + And I press the "Tab" key globally + Then I should see "External URL is required" in the ".modal-content" element + And I press the "Tab" key globally + And I press the "Tab" key globally + And I press the "Tab" key globally + And I press the "Tab" key globally + And the active element should be ".close" + And I press the "Enter" key globally + And I wait for 2 seconds + + # Test accessibility of the LinkField keyboard sorting + + Then I should see "Page Link 1" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + And I should see "External Link" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + When I press the "Tab" key globally + Then the active element should be "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__drag-handle" + Then I press the "Enter" key globally + And I press the "Down" key globally + And I press the "Down" key globally + And I press the "Enter" key globally + Then I should see "Email Link" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-first" element + And I should see "External Link" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link:nth-of-type(2)" element + And I should see "Page Link 1" in the "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link--is-last" element + + # Test user can delete the link + + Then I press the "Tab" key globally + And I press the "Tab" key globally + Then the active element should be "[data-field-id='Form_EditForm_HasManyLinks'] .link-picker__link:nth-of-type(3) .link-picker__delete" + And I press the "Enter" key and confirm the dialog + And I wait for 3 seconds + Then I should not see "Page Link 1" in the "[data-field-id='Form_EditForm_HasManyLinks']" element + And I press the "Enter" key globally