Testing y Pruebas Funcionales en Laravel: Proyecto Intermedio

NOTA IMPORTANTE en windows deben ejecutar asi

php vendor/phpunit/phpunit/phpunit

Este proyecto me emociona mucho porque nunca he desarrollado un API, así que será la primera vez que lo haga, estoy listo!

• Laravel ya tiene su manejador de test por defecto y los puedes ver declarados en el archivo phpunix.xml en la etiqueta <textsuite>

• Podras ver que hay dos tipos de tests, los unit y los feature, los unit tests son pruebas que se realizan en un solo segmento de codigo, los feature tests son pruebas para un proceso o proyecto en general

• El manejo y pruebas de las api se hace desde la terminal, diferente a las pruebas de frontend que se hacen de manera visual en la ventana

• Para crear un test
  $ php artisan make:test UserTest #crea archivo de pruebas funcionales
$ php artisan make:test UserTest --unit #crea la prueba en unitarias

• Los tests creados los podemos vidualizar y editar en la ruta tests/Feature y tests/Unit

• Para correr todos los tests que tengamos tenemos que correr el archivo phpunit ubicado en la ruta vendor/bin/phpunit
  $ vendor/bin/phpunit

Introducción al testing

En windows deben ejecutar phpunit de la siguiente forma:

php vendor/phpunit/phpunit/phpunit

# También puedes utilizar el siguiente comando para que sea más visual
php vendor/phpunit/phpunit/phpunit --testdox

El testing nos garantiza de que podamos crear código de calidad. Ya Laravel viene preparado con PHPUnit con su archivo .xml ya configurado.

En la carpeta tests se encuentra las carpetas de las pruebas Unit o Feature, dentro de estas carpetas es que haremos nuestras modificaciones.

🙊 Y tenemos que recordar que vamos revisar nuestro sistema desde la terminal.

Para crear las pruebas utilizamos el siguiente comando de Artisan:

php artisan make:test UserTest

Si queremos que sea una prueba unitaria lo escribimos así;

php artisan make:test UserTest --unit

Que emocion 😃 !!
Conozco muy poco de testing!

Excelente, eso era justo lo que quería hacer un API con LARAVEL

en laravel 8 tambien existe el comando:

php artisan test

para ejecutar nuestros tests

@if($post->image)

                    <img src="{{ $post->get_image}}" class="card-img-top">

                    @if($post->iframe)
                        <div class="embed-responsive embed-responsive-16by9">
                            {!! $post->iframe !!}
                        </div>    
                    @endif

                @elseif($post->iframe)

                    <div class="embed-responsive embed-responsive-16by9">
                        {!! $post->iframe !!}
                    </div>                    

                @endif

Si usan la Terminal de Visual Studio Code pueden usar el código de Italo es decir

vendor/bin/phpunit

pero si usan el Simbolo del Sistema de Windows hay que escribir estando dentro de la carpeta del proyecto

php vendor/phpunit/phpunit/phpunit

Llevaba tiempo esperando el desarrollo de una api con Laravel en platzi. Y con TDD mejor! muy entusiasmado con este modulo

También se pueden ejecutar los test con:
php artisan test
la diferencia con vendor/bin/phpunit es que el anterior cuando encuentra un error lo reporta y aborta los test siguientes.

Me recordo mi tesis donde trabajo con testing ♥

Estoy muy interesado en esto del testing.

Esto lo aprendi en otra clase con el profesor italo, para ver en detalle el resultado de las pruebas.

php vendor/phpunit/phpunit/phpunit --testdox

Que bien, mi primera API con este framework, y con apoyo de TDD !! Esto pinta bastante bien !! ✔

Vamo a darle !!

Para cuando un post tiene ambos contenidos lo converti en un carrusel…

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    @if ($post->image)
                        @if ($post->iframe)
                            <div id="gallery" class="carousel slide carousel-fade" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="{{ $post->get_image }}" class="embed-responsive embed-responsive-16by9 pb-5">
                                    </div>
                                    <div class="carousel-item">
                                        <div class="embed-responsive embed-responsive-16by9 pb-5">
                                            {!! $post->iframe  !!}
                                        </div>  
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-target="#gallery" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-target="#gallery" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </button>
                            </div>
                        @else
                        <img src="{{ $post->get_image }}" class="embed-responsive embed-responsive-16by9 pb-5">
                        @endif
                    @elseif ($post->iframe)
                        <div class="embed-responsive embed-responsive-16by9 pb-5">
                            {!! $post->iframe  !!}
                        </div>    
                    @endif
                    <h5 class="card-title">{{ $post->title }}</h5>
                    <p class="card-text">
                        {{ $post->body }}
                    </p>
                    <p class="text-muted mb-0">
                        <em>
                            Creado por {{ $post->user->name }}
                        </em>
                        {{ $post->created_at->format('d M Y') }}
                    </p>
                    <a href="{{ url('/') }}" class="btn btn-sm btn-outline-secondary mt-3">Volver</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
 

Ruta en .env:

APP_URL= htt p://127.0.0.1/

por si alguno lo hace en laravel 7

esto lo crea en la carpeta unit

php artisan make:test UserTest --unit

y esto en la carpeta feature

php artisan make:test UserTest

Para no tener que escribir siempre php vendor/phpunit/phpunit/phpunit a la hora de realizar tests, podéis crear un “atajo” de la siguiente manera:

Vas a package.json y en scripts añadís la siguiente linea: "test": "php vendor/phpunit/phpunit/phpunit"

Quedando el archivo de la siguiente manera:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "test": "php vendor/phpunit/phpunit/phpunit"
    },
    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

Y ahora para realizar los tests solo debeis por consola escribir: npm run tests

Para que no estén escribiendo el comando una y otra vez para ejecutar los test les sugiero agregarlo al package.json como un comando de NPM de esta forma:

"scripts": {
	...
	"test": "php vendor/phpunit/phpunit/phpunit"
}

De esta manera solo tienen que ejecutar npm test para correr las suit de pruebas 😃

Un test funcional (feature) es que prueba un todo y un unitario (unite) es el que te ayuda a pribar un bloque de codigo

Muy bueno esto de los test, justo estoy creando apis para un aplicación en React Native

Este fue mi código para resolver el tema de bordes tanto para imagen como para video:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card mb-4">
                    @if ($post->image)
                            <img src="{{ $post->get_image }}" class="card-img-top">
                    @elseif ($post->iframe)
                        <div id="iframe" class="embed-responsive embed-responsive-16by9">
                            {!! $post->iframe !!}
                        </div>
                    @endif
                    <div class="card-body">
                        <h5 class="card-title">{{ $post->title }}</h5>
                        @if ($post->iframe && $post->image)
                            <div class="embed-responsive embed-responsive-16by9">
                                {!! $post->iframe !!}
                            </div>
                        @endif
                        <br>
                        <p class="card-text">
                            {{ $post->body }}
                        </p>
                        <p class="text-muted mb-0">
                            <em>
                                {{$post->user->name}}
                            </em>
                                | {{$post->created_at->format('d M Y')}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@if ($post->image)                
                    <img src="{{ $post->get_image}}" class="card-img-top">                 
                @endif                   
                @if($post->iframe)
                    <div class="embed-responsive embed-responsive-16by9">
                        {!! $post->iframe !!}
                    </div>                    
                @endif```

Testing

Laravel por defecto ya viene preparado para trabajar con las pruebas gracias al archivo phpunit.xml

phpunit.xml -> El cual tiene la configuración básica de pruebas el cual tiene un apartado interesante llamado testsuits en los cuales se encuentran las rutas para las pruebas unitarias (unit) y las funcionales (Feature)
los cuales se almacenan en la carpeta tests

**Prueba unitaria: **

• Esta enfocada la testeo de pequeñas partes de código.

• Para crear una prueba unitaria utilizo el comando

php artisan make:test UserTest --unit

• El --unit indica que la creación de la prueba es unitaria y se almacenará dentro de la carpeta unit.

Prueba funcional:

• Se utiliza en la creación de APIs debido a que pruban un todo

• Estándar de nombramiento de prubas en Laravel ( nombreDeLaClase + Test ) ejemplo UserTest

• Para crear una prueba funcional utilizo el comando

php artisan make:test UserTest

Nota: Cuando un sistema crece demasiado nunca lo vamos aprobar completamente.

<testsuites>
        <testsuite name="Unit">
            <directory suffix="Test.php">./tests/Unit</directory>
        </testsuite>
        <testsuite name="Feature">
            <directory suffix="Test.php">./tests/Feature</directory>
        </testsuite>
    </testsuites>

Super 😃

Muy interesante hacer pruebas de la calidad del software. Definitivamente Laravel si es un gran framework.

¡Qué interesante este tema! No se lo salten este tema jamás si quieren ser buenos programadores, por favor.
Yo empecé a trabajar sin saber aplicar pruebas y la verdad he pagado las consecuencias.

YO RESOLVÍ EL RETO DE ESTA MANERA

@if ($post->image && $post->iframe)
                    <img src="{{ $post->get_image }}" class="card-img-top">
                    <div class="embed-responsive embed-responsive-16by9">
                        <!-- SE COLOCA !! !! PORQUEE USAMOS UN BLADE Y SE USARA HTML -->
                        {!! $post->iframe !!}
                    </div>
                    @elseif ($post->image)
                    <img src="{{ $post->get_image }}" class="card-img-top">
                    @elseif($post->iframe)
                    <div class="embed-responsive embed-responsive-16by9">
                        <!-- SE COLOCA !! !! PORQUEE USAMOS UN BLADE Y SE USARA HTML -->
                        {!! $post->iframe !!}
                    </div>
                    @endif```

Gracias por la clase!

Que emoción. Estoy a punto de terminar un bootcamp donde nos inculcaron mucho el test driven development, y la verdad es que haciendo tests podemos estar seguros de que hace y sobre todo que NO hace nuestro código. ¡Lo que sin duda nos ayuda a ser mejores desarrolladores! 😄

                    @if ($post->image)
                        <img src="{{ $post->get_image }}" class="card-img-top mb-2">
                    @endif
                    @if ($post->iframe)
                        <div class="embed-responsive embed-responsive-16by9">
                        {!! $post->iframe !!}
                        </div>
                    @endif

En Windows se puede de estas dos formas:

vendor\bin\phpunit

php vendor/phpunit/phpunit/phpunit

Muy buena clase de testing

Las rutas al trabajar con peticiones HTTP, manejan códigos de estado de respuesta HTTP.

Dejo en el siguiente enlace más información.

Me encanta este concepto de hacer testing con PHP.

Una prueba unitaria es aquella que nos ayuda a probar pequeños bloques de codigo y una prueba funcional es la que prueba un todo