Creación página web a medida, Behat con Mink, Selenium y para BDD en Symfony 3

Lo primero es añadir nuestra página web Symfony dependencias de Behat en el Composer. A la hora de escribir este Post llevamos apenas 2 meses con la versión 3 de Symfony. 

Esto significa que algunas librerías sólo recientemente han incorporado compatibilidad con Symfony 3, Por lo que para estas librerías usaremos la rama master de sus repositorios, 

composer.json

...
"require-dev": {
        ...
        "behat/behat":                          "dev-master",
        "behat/symfony2-extension":             "^2.1",
        "behat/mink":                           "dev-master",
        "behat/mink-extension":                 "dev-master",
        "behat/mink-browserkit-driver":         "^1.3",
        "behat/mink-goutte-driver":             "*",
        "behat/mink-selenium2-driver":          "*",
        "phpspec/phpspec":                      "~2.0"
    },
...

Actualizamos con composer:

$composer update

Según la propia documentación de Behat 

Primero construimos nuestro modelo de dominio:

En nuestro caso, el cliente quiere tener unas encuestas de control de calidad para sus clientes en una mini aplicación web independiente. Nuestro cliente tiene actualmente Vtiger un CRM para gestionar la relacion con sus clientes y proveedores y quisiera poder enviar a los clientes a una encuesta para luego analizar el grado de satisfacción son sus servicios. Por lo que para iniciar vamos a crear 2 Features, Una feature para contar la historia del usuario administrador, Y otra feature para contar la historia del usuario cliente.

Lo primero creamos archivo de configuración behat.yml para establecer algunas configuraciones iniciales:

default:
    autoload:
        - %paths.base%/features/bootstrap/ \\Ruta para carga de features
    formatters:
        pretty:
            verbose:  true
            paths:    false
            snippets: false
    suites:
        encuestas:
            contexts:
                - JoaoIm\Bundle\EncuestasBundle\Behat\EncuestasContext: //Nuestra clase context donde desarrollaremos los test
                    doctrine: '@doctrine' //Inyectamos el servicio doctrine para que esté disponible en nuestro context
    extensions:
        Behat\MinkExtension:
            sessions:
                default:
                    goutte: ~
            javascript_session: selenium2 //Utilizaremos el driver de Selenium2
            browser_name: firefox
            base_url: http://tuvirtualhost.com/app_test.php // Configuramos la url bas
            selenium2: ~
        Behat\Symfony2Extension: ~

javascript:
    extensions:
        Behat\MinkExtension:
            base_url: http://tuvirtualhost.com/app_test.php/
            sessions:
                javascript:
                    selenium2: ~
            browser_name: firefox

    gherkin:
        filters:
            tags: "@javascript"

Inicializamos behat

$ vendor/bin/behat --init

Este comando te va a mostrar

 features - place your *.feature files here
+d features/bootstrap - place your context classes here
+f features/bootstrap/FeatureContext.php - place your definitions, transformations and hooks here

Podemos organizar nuestras historias de usuario por backend y frontend, de tal forma que en en features/backend podemos organizar las historias del administrador, y en el frontend las historias de los clientes

En primer lugar vamos a centrarnos en las historias del administrador.

# language: es //Establecemos el lenguaje
@encuestas //el nombre de nuestra suite
Característica: Encuestas //El nombre de la característica | Esta linea no se ejecuta
    Para comprobar la calidad de nuestras traducciones //El Objetivo | Esta linea no se ejecuta
    Como usuario administrador //El quien | Esta linea no se ejecuta
    Quiero ser capaz de crear y recuperar encuestas en excel //El para que | Esta linea no se ejecuta

    Antecedentes: //Ponemos al sistema en un estado inicial
        Dado el siguiente excel existe //Datos con los que hacer test
             | pregunta                                        | tipo respuesta     |                  
             | ¿Como de satisfecho estas con la traducción?    | valor              |
             | ¿Que mejorarías de nuestros servicios?          | texto              |
           Y Que estoy en la pagina "de inicio"
           Y Estoy logueado como adminuser
           Y Sigo el "Encuestas" link en "barra de navegación"

    @javascript //Indicamos que este escenario se ejecuta con un contexto javascript        
    Escenario: Viendo indice vacio de todas las encuestas //Nombre de escenario
          Dado No hay proyectos //Establecemos la situación inicial del escenario
             Y Sigo el "Encuestas" link en "menú superior"
      Entonces Debería ver "No hay datos" //Establecemos lo que debería suceder
             Y Debería ver "Listado de Listado de encuestas" en el encabezado

Ahora ejecutamos nuestros text que seguro van a fallar pues aun no escribimos ni una sola linea de código

$ vendor/bin/behat
@encuestas
Característica: Encuestas
    Para comprobar la calidad de nuestras traducciones
    Como usuario administrador
    Quiero ser capaz de crear y recuperar encuestas en excel

  Antecedentes:
    Dado el siguiente excel existe
      | pregunta                                     | tipo respuesta |
      | ¿Como de satisfecho estas con la traducción? | valor          |
      | ¿Que mejorarías de nuestros servicios?       | texto          |
      TODO: write pending definition
    Y Que estoy en la pagina "de inicio"
    Y Estoy logueado como adminuser
    Y Sigo el "Encuestas" link en "barra de navegación"

  @javascript
  Escenario: Viendo indice vacio de todas las encuestas
    Dado No hay proyectos
    Y Sigo el "Encuestas" link en "menú superior"
    Entonces Devería ver "No hay datos"
    Y Devería ver "Listado de Listado de encuestas" en el encabezado

@encuestas
Característica: Encuestas
    Para responder a la encuesta que me envíen
    Como usuario cliente
    Quiero ser capaz de responder a la encuesta

  Antecedentes:
    Dado el siguiente la siguiente encuesta existe
      | pregunta                                     | tipo respuesta |
      | ¿Como de satisfecho estas con la traducción? | valor          |
      | ¿Que mejorarías de nuestros servicios?       | texto          |
    Y el siguiente cliente existe
      | nombre | orden de venta |
      | Pepito | 345            |

  @javascript
  Escenario: responder a una encuesta
    Dado Sigo el enlace a la encuesta del cliente
    Entonces Debería estar en la página de responder encuestas
    Y Debería ver 2 preguntas
    Dado Respondo a las 2 preguntas
    Y Debería ver "Gracias por reponder a la encuesta."

2 escenarios (1 por definir, 1 pendientes)
15 pasos (7 por definir, 1 pendientes, 7 saltadas)
0m0.07s (22.10Mb)

--- A JoaoIm\Bundle\EncuestasBundle\Behat\EncuestasContext le faltan pasos. Defínelos con estos pasos:

    /**
     * @Given el siguiente la siguiente encuesta existe
     */
    public function elSiguienteLaSiguienteEncuestaExiste(TableNode $table)
    {
        throw new PendingException();
    }

    /**
     * @Given el siguiente cliente existe
     */
    public function elSiguienteClienteExiste(TableNode $table)
    {
        throw new PendingException();
    }

    /**
     * @Given Sigo el enlace a la encuesta del cliente
     */
    public function sigoElEnlaceALaEncuestaDelCliente()
    {
        throw new PendingException();
    }

    /**
     * @Then Debería estar en la página de responder encuestas
     */
    public function deberiaEstarEnLaPaginaDeResponderEncuestas()
    {
        throw new PendingException();
    }

    /**
     * @Then Debería ver :arg1 preguntas
     */
    public function deberiaVerPreguntas($arg1)
    {
        throw new PendingException();
    }

    /**
     * @Given Respondo a las :arg1 preguntas
     */
    public function respondoALasPreguntas($arg1)
    {
        throw new PendingException();
    }

    /**
     * @Given Debería ver :arg1
     */
    public function deberiaVer($arg1)
    {
        throw new PendingException();
    }

Vemos como el comando de behat detecta las features que hemos creado y ademas comprueba que nuestros test están sin escribir. Una gran ayuda que nos ofrece behat para escribir los test es cuando nos da las funciones que tenemos que escribir para iniciar empezar con las funciones encargadas de comprobar cada paso de los escenarios. De esta manera los escenarios deajrán de estar sin implementar para estar en estado pendiente.

Cada paso de nuestro archivo features va asociado a una función en nuestro context. Si esta función no lanza ninguna excepción , entonces el paso estará en verde y aceptado. Por lo que es prudente asegurarse que siempre de salir de la función al escribir el test del paso y comprobar que lo hace bien. Y lanzar algún tipo de excepción siempre que no se pueda comprobar el paso. SI tenemos cuidado con esto eL desarrollo de nuestra próxima página web a medida ira sobre railes, con la seguridad que se está desarrollando únicamente lo que el cliente necesita.  

Con la seguidad y confianza de contar desde el minuto 1 del desarrollo con una poderosa herramienta que nos permite comprobar que la aplicación hace lo que se espera de ella.

Con esto acabamos de iniciarnos el el proceso de desarrollo web a medida mediante BDD con el framework Symfony. En el próximo post seguire explicando y desarrollando el proceso de desarrollo