WordCamp 2019

1. Test Unitarios y E2e en Front y Back -End
Eric Zeidan
@ericjanzei

2. Que es PHP-UNIT?
• PHPUnit es un entorno para realizar pruebas unitarias en
el lenguaje de programación PHP.
• PHPUnit es un framework de la familia xUnit originada
con SUnit y ha sido creado por Sebastian Bergman.

3. Para que sirven los Test
Desarrollador al
Comenzar un
Proyecto
VS
Desarrollador
Finalizando el
Proyecto

4. Para que sirven los Test
• Cuando desarrollamos software pueden aparecer errores en
cualquiera de las etapas del ciclo de programación, algunos
de ellos incluso permanecen sin ser descubiertos, de ahí la
importancia de las pruebas.
• Hay una gran probabilidad de que el código final tenga
errores tanto de requerimientos, como de diseño o de
funcionalidad. Para identificar estos problemas antes de que
ocurran en un entorno crítico, es necesario realizar pruebas
de software, una parte muy importante del proceso pero
también muy costosa; sin embargo, debemos en tener en
cuenta que el coste debido a un fallo mientras está el
software en funcionamiento puede llegar a ser mucho mayor.

5. Y para el Front?
• Para el front tenemos los llamados E2e testing, o testing
funcional o automated Testing, es un testing que se hace
gráficamente, con un robot imitando a un usuario
• Existen muchas herramientas pero aquí usaremos
Nightwacht, porque? Porque es Extensible, puede usarse
con Selenium Web-Server o con un Header-less Chrome,
ademas le podéis utilizar para escribir Test Unitarios para
Node.js.

7. Comenzamos…
• Primer paso
Instalamos un
WordPress para
crearnos un
Plugin donde
haremos un test
de PHP-Unit y
un Test E2e.
• El ejemplo será
el de agregar
una entrada
para que el
usuario se
pueda inscribir a
nuestro
Newsletter de
Desarrollo de
ese Plugin

8. Creamos el Plugin

11. Nuestra Clase Principal
<?php
namespace ezdevTestingPlugin;
use ezdevTestingPluginServicesMailCheck as MailCheck;
class MainController {
public function __construct() {
add_action('wp_dashboard_setup', [$this, 'add_dashboard_widgets']);
add_action('admin_post_newsletter_form', [$this, 'form_submit_processing']);
}
public function dashboard_widget_function() {
include_once PLUGINS_PATH . '/Templates/newsletter-form.php';
}
public function add_dashboard_widgets() {
wp_add_dashboard_widget('dashboard_widget', 'Testing WordCamp Madrid 2019', [$this, 'dashboard_widget_function']);
}
public function form_submit_processing() {
$return = "El Correo no puede estar vacio";
if (isset($_POST['email'])) {
$em = new MailCheck(($_POST['email']));
if($em) {
// Hacemos algo con el correo como Guardarlo o enviarlo por API
$return = "Gracias por subscribirte";
} else {
$return = "EL correo tiene un formato no valido";
}
}
wp_redirect(admin_url('?message=' . urlencode($return)));
die;
}
}

12. Nuestro Servicio y nuestro Test
<?php
namespace ezdevTestingPluginServices;
class MailCheck {
private $email;
public function __construct(string $email)
{
$this->ensureIsValidEmail($email);
$this->email = $email;
}
public static function fromString(string $email): self
{
return new self($email);
}
public function __toString(): string
{
return $this->email;
}
private function ensureIsValidEmail(string $email)
{
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
throw new InvalidArgumentException(
sprintf(
'"%s" is not a valid email address',
$email
)
);
}
}
}
<?php
use PHPUnitFrameworkTestCase;
use ezdevTestingPluginServicesMailCheck;
final class MailCheckTest extends TestCase
{
public function testCanBeCreatedFromValidEmailAddress()
{
$this->assertInstanceOf(
MailCheck::class,
MailCheck::fromString('user@example.com')
);
}
public function testCannotBeCreatedFromInvalidEmailAddress()
{
$this->expectException(InvalidArgumentException::class);
MailCheck::fromString('invalid');
}
public function testCanBeUsedAsString()
{
$this->assertEquals(
'user@example.com',
MailCheck::fromString('user@example.com')
);
}
}

13. Ejecutamos nuestro test

14. Esqueleto de Nuestro Plugin

15. Como utilizar nightwatch para
nuestro test de Front-End
• Primero: Instala Node.js.
• "Node.js es una plataforma basada en el tiempo de ejecución de JavaScript de Chrome para crear
fácilmente aplicaciones de red escalables y rápidas. Node.js utiliza un modelo de E / S sin bloqueo
controlado por eventos que lo hace ligero y eficiente, perfecto para datos intensivos. aplicaciones
de tiempo que se ejecutan en dispositivos distribuidos „.
• Hay paquetes de instalación e instrucciones para la mayoría de los principales sistemas operativos
en su sitio web nodejs.org. Recuerde instalar también la herramienta npm, que es el administrador
de paquetes del nodo y se distribuye con el instalador Node.js.
• Segundo: Instala Nightwatch global si se desea:
• Para instalar la última versión con la herramienta de línea de comandos npm, ejecute lo siguiente:
$ npm install nightwatch -g

16. • Tercero: creamos un archivo llamado package.json donde
incluiremos nightwatch, google chrome driver y
geckodriver y lo instalaremos usando npm
• Cuarto: una vez creado el package.json lo ejecutamos con
$ npm install
{
"devDependencies": {
"chromedriver": "^2.45.0",
"geckodriver": "^1.14.1",
"nightwatch": "^1.0.18"
}
}

17. Instalar requerimientos
del package.json

18. Seguimos…
• Quinto: Creamos nuestro nightwacht.json en la carpeta
root de nuestro plugin
{
"src_folders": [
"test"
],
"webdriver": {
"start_process": true,
"server_path": "node_modules/.bin/chromedriver",
"port": 9515
},
"test_settings": {
"default": {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}

19. Creamos nuestro primer test de Front-End
• Para ello debemos crear un archivo .js con las
especificaciones y aserciones que queremos conseguir
• Editamos un archivo que llamaremos
dashboardnewsletter.js
module.exports = {
'Prueba de Formulario en Dashboard Admin' : function (client) {
const url = "http://127.0.0.1/wordpress";
client
.url(url + '/wp-admin')
.waitForElementVisible('#user_login', 1000)
.assert.title('Log In ‹ WordCamp Madrid 2019 — WordPress')
.setValue('#user_login', 'test')
.setValue('#user_pass', 'test')
.click('#wp-submit')
.waitForElementVisible('#welcome-panel', 1000)
.assert.containsText('div.welcome-panel h2', 'Welcome to WordPress!', 'Mensaje de Bienvenida Correcto')
.setValue('#email', 'test@dominio.com')
.click('#newsletter-add')
.waitForElementVisible('#welcome-panel', 2000)
.assert.containsText('#ezdv-message', 'Gracias por subscribirte', 'Suscripción correcta')
.end();
}
};

20. Ejecutamos nuestro script

21. Veamos todo nuevamente
Vamos al Código
https://github.com/k2klettern/wp-test

22. Gracias

23. @ericjanzei