Introduction to Behat – Make your app behave – Behaviour driven development

View Github Repository Open presentation in a new window

rodrigoaguilera

See all presentation from rodrigoaguilera

Introduction to Behat – Make your app behave – Behaviour driven development

0 0

talk_behat

A talk a bout behat

On Github rodrigoaguilera / talk_behat

Introduction to Behat

Make your app behave

A talk by Rodrigo Aguilera / @marinero

Thank you to the organization. I'm excited about behat.

Hello There

https://www.drupal.org/u/rodrigoaguilera

I'm from Madrid, now I live in Barcelona. I'm 29. I work as a drupal developer at Ymbra, Citilab. I have a curiosity to improve process. Previously on: servers, multilingual, community tools, code review development quality...

Agenda

  • Behaviour driven development
  • Behat + Drupal
  • Quickstart your install
  • Speaking my language
  • Awesome tricks
I want you to get out of here with a broad idea of what can be achieved and how easy it is. Is a extensible framework Is relevant because there is plans to be integrated into D8.

Behaviour driven development

Aka BDD

It's a bit philosophical. Around the concept of behaviour.

What is BDD?

It's about expectations on the different parts of people involved. Beta testers are important. Altough we don't have them.

Get closer to the stakeholders

We all use different languages.

Clients don't care about scope or budget so better speak bussines language. A solution for miscomunication. Get everyone together.

Make development more conversational

Create a common vocabulary between programmers, project managers, product owners, QA... Semantic tests.

Make software that matters

It's not just a cool thing to have it really adds bussines value.

You can check your application continously.

Evolution

  • Unit tests: autotest your code.
  • TDD: Test goes first.
  • BDD: Design goes first.

Behat + Drupal

What is behat?

BDD framework written in PHP.

  • Uses gherkin as a business readable and domain specific language
  • Mink as a browser controller
  • Free software
  • Flexible (not only browsers)
  • Constitutes a challenge
No dependencies because of php. Gherkin is a kind of cucumber. Some browsers have js or different capabilities. A challenge for the good of the development.

Gherkin syntax

Feature: Banana Calculator In order to keep a stock of bananas As Bob the Banana merchant, I want a calculator that can add the amount of bananas so that I can know how many bananas I currently have Scenario: Add 2 banana amounts Given I have 3 Bananas When I add 5 Bananas Then I should have 8 Bananas

Structured language to describe features. keywords highlighted. .feature file multilingual.

Drawbacks

  • Slow.
  • Understanding of the domain.
  • Requires effort to make them robust.
Even if you get a way to compile the semi natural language to something fast, you are still at a higher level. If a new button with the same name eg. "Send". your text will break.

Quickstart your install

Behat is just a PHP library that can be installed with composer 
composer require behat/behat
composer require drupal/drupal-extension='~3.1'
Little demo with a D8 standard install. I'm not going into composer details.

Initialize the skeleton

vendor/bin/behat --init
Then we can write some features.

behat.yml

default:
  suites:
    default:
      contexts:
        - Drupal\DrupalExtension\Context\DrupalContext
  extensions:
    Behat\MinkExtension:
      goutte: ~
      base_url: http://example.org/  # Replace with your site's URL
    Drupal\DrupalExtension:
      blackbox: ~
Later you will add css selectors as regions to this file.

Steps available

vendor/bin/behat -di
  • Given I am logged in as a user with the :role role
  • Given I am viewing a/an :type (content )with the title :title
  • Then I should see the error message( containing) :message
  • Then drush output should contain :output
Then we can write some features. Just using natural phrases. There some steps that allow you to use css class. BAD

Execute the tests

vendor/bin/behat
Simple! You can introduce in your task runner and receive a nice report.

Speaking my language

I want you to get out of here with a broad idea of what can be achieved and how easy it is.

Behat and gherkin

Translates each step in a PHP callback

When I run the banana example I get the code that I should write in the FeatureContext.php

Speaking my language

 use Drupal\DrupalExtension\Context\RawDrupalContext;
 use Behat\Behat\Context\SnippetAcceptingContext;
/**
 * Defines application features from the specific context.
 */
class FeatureContext extends RawDrupalContext implements SnippetAcceptingContext {
  private $bananas
  /**
   * @Given /^I have (\d+) bananas$/
   */
   public function iHaveBananas($b) {
     $this->bananas = $b;
   }
   ...
}
Regular expresions. Don't create phrases that are not meaningful to the user role.

Speaking my language

  /**
   * @When /^I add (\d+) bananas$/
   */
   public function iAddBananas($b) {
     $this->bananas += $b;
   }

Speaking my language

  /**
   * @Then /^I should have (\d+) bananas$/
   */
   public function iShouldHaveBananas($b) {
     assertEquals($b, $this->bananas);
   }

Command a browser - Mink

Fill out forms, click on buttons, check the output. Is just a controller. we have to add a driver.

Command a browser

            $session = $this->getSession();
            $session->visit('http://drupal.org');
            $session->getStatusCode();
            $session->getCurrentUrl();

            $page = $session->getPage();
            $e = $page->find('css', li:nth-child(4) a);
            $e->getText();
            $e->getAttribute('href');
            $e->click();
Session: just a tab. Page: the DOM. e: element

Awesome tricks

  • Test in any browser.
  • Debug tests
  • Nice reports
We have the basics: A lot of steps meaningful for drupal The posibility of writting new steps.

Test with js enabled

  • Goutte driver is only doing curl request
  • Control when js is needed using @javascript tags in your scenarios
  • Cookies and headers
  • Manipulate the page
  • Selenium, phantomjs
Autocomplete

Test in any browser

  • Different js implementations
  • Screenshots
selenium web driver headless visual regressions. The definitions change: for example I cannot fill invisible form items.

Anything is possible

 /**
   * @Given /^I switch to the first iframe$/
   */
  public function iSwitchToTheFirstIframe() {
    $javascript = <<<JS
(function(){
var iframes = document.getElementsByTagName('iframe');
var f = iframes[0];
f.id = "no_name_iframe";
})()
JS;
    $this->getSession()->executeScript($javascript);
    $this->getSession()->switchToIFrame('no_name_iframe');
  }
Not only command the browser, execute js.

Debugging: Then I break.

Stops the test.

Debugging - screenshot

HTML reports

https://github.com/dutchiexl/BehatHtmlFormatterPlugin You can get the stakeholders involved. Maybe the product owner knows what changed.

Behat and drupal core.

[Meta] Use Behat for validation testing https://www.drupal.org/node/2232271 JS testing have been commited recently. A different phantomjs driver has been included.

It's so easy!

Very good documentation.

One download and one command. Don't go full BDD. The most important pages. Use only the steps available.

Interesting references

Questions

THE END

Thank you. - http://docs.behat.org

Introduction to Behat Make your app behave A talk by Rodrigo Aguilera / @marinero Thank you to the organization. I'm excited about behat.