Behat v3! Behavioral-Driven-Development, Functional Tests and Selenium

Testing our applications is something we all do. Ahem, rather, it’s something we all *wish* we did. In this chat, I’ll introduce you to Behat (version 3!!!!): a behavior-driven-development (BDD) library that allows you to write functional tests against your application just by writing human-readable sentences/scenarios.

To sweeten the deal these tests can be run in a real browser (via Selenium2) with just the flip of a switch. If you asked me to develop without Behat, I’d just retire. It’s that sweet. By the end, you’ll have everything you need to start functionally-testing with Behat in your new, or very old and ugly project.

Transcript

1. by your friend: ! Ryan Weaver @weaverryan Behavioral Driven Development with Behat
2. KnpUniversity.com github.com/weaverryan • Lead for the Symfony documentation ! • KnpLabs US - Symfony consulting, training, 
 Kumbaya ! • Writer for KnpUniversity.com screencasts Who is this Hipster? ! ! ! ! ! ! • Husband of the much more talented @leannapelham
3. KnpUniversity.com github.com/weaverryan • Lead for the Symfony documentation ! • KnpLabs US - Symfony consulting, training, 
 Kumbaya ! • Writer for KnpUniversity.com screencasts Who is this Hipster? ! ! ! ! ! ! • Husband of the much more talented @leannapelham My friend Konstantin (@everzet)… ! who actually wrote Behat ! (yay Konstantin!)
4. Plan, Work, Miscommunicate, Panic, Put out Fires, Repeat! Intro (aka Project Work)
5. The Typical Project
6. How the customer explained it http://www.projectcartoon.com
7. How the project leader understood it http://www.projectcartoon.com
8. How the programmer wrote it http://www.projectcartoon.com
9. What the customer really needed http://www.projectcartoon.com
10. What the beta testers received http://www.projectcartoon.com
11. http://AvoidingAGoatRodeo.com/
12. Computer Science? https://www.flickr.com/photos/diueine/3604050776
13. Where it breaks down... womp womp
14. Different roles, different languages, miscommunication @weaverryan One
15. @weaverryan Two Your code and business values may not align
16. I've just dreamt up this cool new feature that we should implement! ! Why? Because it's cool! “
17. @weaverryan Three Over-planning, under-planning, planning...?
18. https://www.flickr.com/photos/tambako/4175456498 Act 1 ! Getting down with BDD
19. Evolution of Test-Driven Development @weaverryan
20. “Behaviour” is a more useful word, than “test” © Dan North, 2003
21. @weaverryan Evolution of Test-Driven Development ≈ Unit Tests ≈ Functional Tests
22. @weaverryan Specification BDD http://www.phpspec.net
23. Scenario-oriented BDD (Story BDD)
24. @weaverryan Idea->planning…->deploy product owners business analysts project managers developers QA behavior
25. @weaverryan Solution 1. Define business value for the features
 2. Prioritize features by their business value
 3. Describe them with readable scenarios
 4. And only then - implement them
26. Act 2 ! Gherkin
27. A project consists of many features @weaverryan
28. @weaverryan Gherkin == a structured language to describe a feature
29. Feature: {custom_title} In order to {A} As a {B} I need to {C} • {A} - the benefit or value of the feature • {B} - the role (or person) who will benefit • {C} - short feature description | The person “writing” this feature - the “I”
30. @weaverryan Solution 1. Define ! 2. Prioritize ! 3. Describe ! 4. And only then - 1. Define business value for the features
31. Feature: I18n In order to read news in french As a french user I need to be able to switch locale read news in French @weaverryan
32. Feature: I18n In order to read news in french As a french user I need to be able to switch locale read news in French The business value @weaverryan
33. Feature: I18n In order to read news in french As a french user I need to be able to switch locale read news in French The person who benefits + The “author” of this feature @weaverryan
34. Feature: I18n In order to read news in french As a french user I need to be able to switch locale read news in French Description of the feature, the action the person will take @weaverryan
35. @weaverryan Solution 1. Define ! 2. Prioritize ! 3. Describe ! 4. And only then - 2. Prioritize features by their business value
36. Prioritize... 1) Feature: News admin panel ! 2) Feature: I18n ! 3) Feature: News list API
37. @weaverryan 1. Define ! 2. Prioritize ! 3. Describe ! 4. And only then - Solution 3. Describe them with readable scenarios
38. Feature: News admin panel In order to maintain a list of news As a site administrator I need to be able to edit news Scenario: Add new article Given I am on the "/admin/news" page When I click "New Article" And I fill in "Title" with "Learned BDD" And I press "Save" Then I should see "A new article was added"
39. Scenarios Given ! Defines the initial state of the system for the scenario Scenario: Add new article Given I am on the "/admin/news" page When I click "New Article" And I fill in "Title" with "Learned BDD" And I press "Save" Then I should see "A new article was added"
40. Scenarios When ! Describes the action taken by the person/role Scenario: Add new article Given I am on the "/admin/news" page When I click "New Article" And I fill in "Title" with "Learned BDD" And I press "Save" Then I should see "A new article was added"
41. Scenarios Then ! Describes the observable system state after the action has been performed Scenario: Add new article Given I am on the "/admin/news" page When I click "New Article" And I fill in "Title" with "Learned BDD" And I press "Save" Then I should see "A new article was added"
42. Scenarios And/But ! Can be added to create multiple Given/When/Then lines Scenario: Add new article Given I am on the "/admin/news" page When I click "New Article" And I fill in "Title" with "Learned BDD" And I press "Save" Then I should see "A new article was added"
43. Example #2 Scenario: List available articles Given there are 5 news articles And I am on the "/admin" page When I click "News Administration" Then I should see 5 news articles
44. Gherkin gives us a consistent language for describing features and their scenarios
45. http://bit.ly/behatch-t Act 3
46. Behat The Siri of Functional Tests
47. @weaverryan What is Behat? Behat does one simple thing: ** each line in a scenario is called a “step” Behat “executes” your scenarios, reading each step and calling the function associated with it It Maps Each step** to a PHP Callback
48. Installing Behat Behat is just a library that can be installed easily in any project via Composer Friends that are new to Composer? Free screencast: KnpUniversity.com/composer
49. In your project directory... 1) Download Composer $> curl -s http://getcomposer.org/installer | php 2) Let Composer do all the work composer require behat/behat!
50. Nice move! @rdohms
51. { "require": { "behat/behat": "~3.0" } } bit.ly/behat3-composer
53. @weaverryan To use Behat in a project you need: ! ! 1) Actual *.feature files to be executed
 2) A FeatureContext.php file that holds the PHP callbacks for each step
 3) (optional) A behat.yml configuration file
54. $> php vendor/bin/behat --init
55. <?php // features/bootstrap/FeatureContext.php
 
 use Behat\Behat\Context\SnippetAcceptingContext;
 use Behat\Gherkin\Node\PyStringNode;
 use Behat\Gherkin\Node\TableNode;
 
 /**
 * Behat context class.
 */
 class FeatureContext implements SnippetAcceptingContext
 {
 }
 Nothing Interesting here yet...
56. Pretend you’re testing the “ls” program
57. 1) Describe your Feature Feature: ls features/ls.feature In order to see the directory structure As a UNIX user I need to be able to list the current directory's contents
58. 2) Your First Scenario If you have two files in a directory, and you're running the command - you should see them listed. “
59. Scenario: List 2 files in a directory Write in the natural voice of “a UNIX user” Given I have a file named "foo" And I have a file named "bar" When I run "ls" Then I should see "foo" in the output And I should see "bar" in the output features/ls.feature
60. 3) Run Behat $> php vendor/bin/behat
61. Behat tries to find a method in FeatureContext for each step
62. Matching is done with simple wildcards For each step that doesn’t have a matching method, Behat prints code to copy into FeatureContext
63. class FeatureContext extends BehatContext { /** @Given I have a file named :file */
 public function iHaveAFileNamed($file)
 {
 throw new PendingException();
 }
 
 /** @When I run :command */
 public function iRun($command)
 {
 throw new PendingException();
 } // ... } 4) Copy in the new Definitions Quoted text maps to a method argument
64. 5) Make the definitions do what they need to
65. /** * @Given I have a file named :file */ public function iHaveAFileNamed($file) { touch($file); } ! /** * @Given I have a directory named :dir */ public function iHaveADirectoryNamed($dir) { mkdir($dir); }
66. /** * @When I run :command */ public function iRun($command) { exec($command, $output); $this->output = trim(implode("\n", $output)); } ! /** * @Then I should see :string in the output */ public function iShouldSeeInTheOutput($string) { if (strpos($this->output, $string) === false) { throw new \Exception(‘Did not see’.$string); ); }
69. See the full FeatureContext class: ! http://bit.ly/behat-ls-feature
70. Scenario Step Definition Given I have a file named “foo” pattern public function iHaveAFileNamed($file) { do work Pass/Fail: Each step is a “test”, which passes *unless* an exception is thrown touch($file); @Given I have a file named :file What Behat *does*
71. Creating files and directories in FeatureContext is nice...
72. but wouldn’t it be really cool to command a browser, fill out forms and check the output?
73. Act 4 ! Mink https://www.flickr.com/photos/15016964@N02/5696367600
74. Mink! http://mink.behat.org/ • A standalone library to use PHP to 
 command a “browser”
 • One easy API that can be used to 
 command Selenium, Goutte, ZombieJS, etc @weaverryan
75. use Behat\Mink\Driver\GoutteDriver; use Behat\Mink\Session; ! // change *only* this line to run // in Selenium, etc $driver = new GoutteDriver(); $session = new Session($driver);
76. // visit a page $session->visit('http://behat.org'); echo 'URL : '.$session->getCurrentUrl(); echo 'Status: '.$session->getStatusCode();
77. $page = $session->getPage(); // drill down into the page $ele = $page->find('css', 'li:nth-child(4) a'); echo 'Link text is: '.$ele->getText(); echo 'href is: '.$ele->getAttribute('href'); // click the link // (you can also fill out forms) $ele->click();
78. Mink inside FeatureContext => Dangerous Combo for Functional Testing
79. http://mink.behat.org/ @weaverryan Behat Mink Integration MinkExtension • An “Extension” is like a Behat plugin
 • The MinkExtension makes using Mink 
 inside Behat a matter of configuration
80. @weaverryan Install Mink & MinkExtension $> php composer.phar update • Update composer.json to include > Mink > MinkExtension > Goutte and Selenium2 Drivers for Mink http://bit.ly/behat-mink-composer
 • Update the vendor libraries
81. { "require": { "behat/behat": "~3.0", "behat/mink-extension": "~2.0@dev", "behat/mink-goutte-driver": "~1.0", "behat/mink-selenium2-driver": "~1.1" } } http://bit.ly/behat-mink-composer
82. Goal: ! To easily use Mink inside FeatureContext
83. @weaverryan Bootstrap MinkExtension behat.yml is the Behat configuration file and can contain much more than you see here # behat.yml
 default:
 extensions:
 Behat\MinkExtension:
 goutte: ~
 selenium2: ~
 # The base URL you're testing
 base_url: http://en.wikipedia.org/ http://bit.ly/behat-yml
84. @weaverryan Extend MinkContext use Behat\MinkExtension\Context\RawMinkContext;
 
 /**
 * Behat context class.
 */
 class FeatureContext extends RawMinkContext Extending RawMinkContext gives us...
85. Access to a Mink Session class FeatureContext extends RawMinkContext { public function doSomething() { $session = $this->getSession(); $session->visit('http://behat.org'); } ! // ... } OMG! Our custom definitions can now command a browser!
86. @weaverryan More! Add MinkContext # behat.yml
 default:
 extensions: # ... suites:
 default:
 contexts:
 - FeatureContext
 - Behat\MinkExtension\Context\MinkContext
 Behat now parses definitions from *our* class *and* this MinkContext class
87. We inherit a pile of great definitions the -dl option prints all current definitions Before adding MinkContext:
88. After adding MinkContext:
89. In other words: We can write some tests for our app without writing any PHP code
90. Suppose we’re testing Wikipedia.org
91. # features/wikipedia.feature Feature: Search In order to see a word definition As a website user I need to be able to search for a word These 4 definitions all come packaged with MinkContext Scenario: Searching for a page that does exist Given I am on "/wiki/Main_Page" When I fill in "search" with "Behavior Driven Development" And I press "searchButton" Then I should see "agile software development"
92. Celebration!
93. Act 5 ! JavaScript https://www.flickr.com/photos/yoanngd/10669976224
94. Let’s try another scenario ! Auto-Completion!
96. # features/wikipedia.feature Scenario: Searching for a page with autocompletion Given I am on "/wiki/Main_Page" When I fill in "search" with "Behavior Driv" Then I should see "Behavior Driven Development"
98. http://en.wikipedia.org/wiki/The_Scream JavaScript doesn’t work!
99. Add @javascript # ... ! @javascript Scenario: Searching for a page with autocompletion Given I am on "/wiki/Main_Page" When I fill in "search" with "Behavior Driv" Then I should see "Behavior Driven Development” ! ! !
100. Add @javascript # ... ! @javascript Scenario: Searching for a page with autocompletion Given I am on "/wiki/Main_Page" When I fill in "search" with "Behavior Driv" Then I should see "Behavior Driven Development” ! ! ! Yep, that’s all you do!
101. Download and start Selenium $> wget http://selenium- release.storage.googleapis.com/2.42/selenium- server-standalone-2.42.2.jar ! ! $> java -jar selenium-server-standalone-2.42.2.jar
102. Re-run the tests
103. Yes, add only 1 line of code to run a test in Selenium
104. (you can also use phantomjs)
105. Yes, thank you Ryan, your office smells of many leather bound books and rich mahogany. ! But, what aren’t you telling us?
106. Your Turn! https://www.flickr.com/photos/dtelegraph/5907116936
107. 1) Install Behat - Get the libraries with Composer ! - Configure the behat.yml file
108. ... and learn more about what you can do with Mink: http://mink.behat.org/ 2) Write features for your app!
109. 3) high-five your teammates https://www.flickr.com/photos/nickwebb/3904325807
110. Thanks!
     Ryan Weaver @weaverryan KnpUniversity.com/behat Thanks you Cal! https://joind.in/12804