Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test using autocomplete / typeahead fields #22

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Test using autocomplete / typeahead fields #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions tests/Js/JavascriptTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,13 @@ public function testIssue225()

$this->assertContains('OH AIH!', $this->getSession()->getPage()->getText());
}

public function testAutocomplete()
{
$this->getSession()->visit($this->pathTo('/autocomplete.html'));
$this->getSession()->getPage()->fillField('autocomplete', 'arc');
$this->getSession()->wait(5000, '$("ul.ui-autocomplete li").is(":visible") === true');

$this->assertContains('Arctic fox', $this->getSession()->getPage()->getText());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you fill arc into the input, then auto-complete results will show, but current field value won't be set to 1st match. Or does work like that?

Copy link
Author

@pfrenssen pfrenssen Jul 22, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used the jQuery UI Autocomplete library which doesn't automatically fill up the field as you type. It shows the results in a dropdown, you can then use the arrow down / arrow up keys to select the right value, and then pressing enter will put the value in the field.

The test is now just checking that the autocomplete results show up in the dropdown. If you want I can also add coverage for selecting the results with the arrow keys, and then checking that the final value appears in the field.

}
}
21 changes: 21 additions & 0 deletions web-fixtures/autocomplete.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autocomplete</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="js/jquery-1.6.2-min.js"></script>
<script src="js/jquery-ui-1.11.4.autocomplete.min.js"></script>
</head>
<body>
<form>
<label for="autocomplete">Choose an animal</label>
<input type="text" id="autocomplete" />
</form>

<script type="text/javascript">
$( "#autocomplete" ).autocomplete({
source: [ "Alpaca", "Alphabeaver", "Arctic fox", "Arctic wolf", "Boomalope", "Boomrat", "Capybara" ]
});
</script>
</body>
</html>
Loading