Introducción a las pruebas unitarias en WordPress – AJAX Callbacks

¡Al final! Hoy compartimos la última publicación en nuestra serie de pruebas unitarias. Si has leído (y te gustó) publicaciones anteriores, ¡saludos! Ahora sabe qué son las pruebas unitarias y cómo usarlas, cómo probar su PHP con PHPUPIT y cómo probar el JavaScript con QUNIT. Aprendí bastante con solo tres publicaciones, ¿no? Pero creo que tenemos que dar un paso más allá y probar nuestras nuevas habilidades en el mundo real con un ejemplo “real”. Como ya he mencionado en la publicación anterior, hoy le enseñaré cómo probar los diferentes componentes de un complemento “verdadero”. En particular, le mostraré cómo probar los componentes PHP y JavaScript de un complemento que usa AJAX.
El complemento-una publicación de búsqueda de hoy, quiero probar sus nuevas habilidades de prueba con un ejemplo real. Entonces, lo primero que debemos hacer es el complemento que probaremos lo suficientemente simples como para implementar, lo suficientemente complejo como para crear pruebas interesantes. El complemento que crearemos es una búsqueda posterior. Consiste en una forma simple que incluiremos al final de todas nuestras publicaciones. Cuando el usuario ingresa una cadena en el formulario, nuestro complemento hará una solicitud AJAX y recuperará todas las publicaciones cuyo título contiene la cadena de consulta. Algo como eso:

Captura de pantalla de nuestro formulario de búsqueda posterior. ¡Una simple introducción de texto esperando que el usuario ingrese algo! Con una lista de todas las publicaciones que coinciden con los criterios de búsqueda:

Lista de publicaciones correspondientes al criterio de búsqueda. O un mensaje de advertencia cuando no se encontraron publicaciones:

Si no encontramos nada, debemos decirle al usuario. Bastante fácil, ¿no? ¡Es hora de codificar! 1. El esqueleto, como probablemente ya sepa, puede organizar el código de complemento como lo desee. Personalmente, me gusta comenzar mis (grandes) proyectos con un esqueleto sólido, como el que ofrece WordPress Plugin Boilerplate. Sin embargo, hoy quiero mantener las cosas simples, por lo que si no le importa, agregaré todas las funciones en un solo archivo php, no es la solución más elegante, pero funciona. Creemos el archivo principal de nuestro enchufar. Primero, cree un director llamado Interior WP-Contentent / Plugins / complementos de Interior No Post-Searcher y agregue un archivo llamado Non-Post-Sear.php con el siguiente contenido:
¡Y he terminado! No, estoy bromeando, acabas de crear un complemento que no hace nada. Su primer complemento Void Plugin. ¡Odio! Nuestro complemento implementará una llamada AJAX, así que preparemos los archivos que contendrán nuestro código JavaScript. Cree dos archivos vacíos: Searcher.js y Functions.js en el directorio raíz de nuestro complemento. ¿Y complete este primer paso activando el complemento en el tablero?
2. Agregue el formulario de búsqueda y coloque los archivos JavaScript en la cola para agregar el formulario al final de nuestras publicaciones. Si alguna vez ha trabajado con WordPress Hooks, en realidad es fácil: solo tiene que agregar el formulario con el filtro llamado The_ Contentant (lea su documentación). Agregue el siguiente fragmento a su archivo PHP:
Como puede ver, adjuntamos una entrada de texto y un resultado DIT al final de la publicación. Nuevamente, esta no es la mejor solución (combinamos “lógica” con “presentación”), pero funciona y es fácil. Si desea implementarlo mejor, es posible que desee crear un archivo separado en un directorio parcial e incluirlo en la oficina … ¡pero depende de usted, querido amigo! Recuerde que este formulario de búsqueda usará llamadas AJAX, así que nosotros tengo que agregar nuestros scripts. Pon los guiones en la cola de la siguiente manera:
Y nuestros nuevos scripts vacíos se adjuntarán a su frente. 3. Implemente la función de búsqueda … Ahora debemos implementar la función de búsqueda. Estamos interesados ​​en recuperar “todas las” publicaciones cuyo título contiene una determinada cadena de consulta, lo que significa que la próxima función será perfecta:
Porque toma la consulta de búsqueda como un parámetro de entrada y devuelve una matriz con los resultados. Si inspecciona la posición de cerca, se dará cuenta de que WP_QUEY usa un argumento llamado Post_title__ Like, que me temo no en WordPress de forma predeterminada. Vamos a crearlo con una función adicional:
Tal vez se pregunte por qué necesitamos esta función. Bueno, la función de búsqueda predeterminada de WordPress devuelve todas las publicaciones que contienen la cadena de consulta en su título o contenido. Debido a que solo estamos interesados ​​en encontrar publicaciones con una coincidencia para sus títulos, necesitamos este parámetro adicional. 4. … y cree la llamada AJAX que usa esta función, la función anterior es bastante hermosa. Realmente puede funcionar correctamente … ¡pero no tiene sentido si no lo usamos en alguna parte! Entonces, para exponerlo con una llamada AJAX inversa para que podamos usar desde JavaScript. Simplemente agregue el siguiente fragmento a su archivo: esta nueva característica simplemente verifique si hay un parámetro de consulta (llamado q) en la solicitud AJAX. Si no hay, devolvemos un error. Si sucede, usamos nuestra función de búsqueda y devolvemos los resultados. Es importante tener en cuenta que desinfectamos la entrada antes de usarla; esto es algo que siempre debe hacer antes de usar cualquier entrada proporcionada por el usuario. También vale la pena señalar que esta característica no tiene instrucciones de retorno: es una llamada inversa de AJAX y, como tal, su ejecución termina cuando usamos wp_send_json*. 5. ¡Escribamos algo JavaScript! ¡Nuestro código de servidor está listo! Escribamos algo JavaScript para usarlo, ¿verdad? Si ha visto un video de Rebeccai Murphey, ya sabe cómo escribir un código JavaScript comprobable. Si aún no lo ha visto, deje de leer esta publicación, vaya a verlo inmediatamente y continúe cuando regrese.
El código que debemos escribir ahora define la interacción entre el usuario y el formulario de búsqueda. Esencialmente esto es lo que queremos:
Cuando el usuario escribe algo en el campo de búsqueda, debemos decirle que “buscamos” sus publicaciones. Cuando terminan, debemos ejecutar la solicitud AJAX y recuperar los resultados correctos.
Una vez que obtenemos los resultados, los dibujamos en la pantalla.
Si no hay, le decimos al usuario que no hemos encontrado nada.

Si el usuario elimina la entrada de búsqueda, también limpiamos el área de resultados.
Si desea implementar un comportamiento diferente o una forma diferente, no dude en hacerlo. ¿Esta publicación es solo un conjunto de pautas presentadas en un ejemplo que puede seguir? Al igual que PHP, puede escribir y organizar el código como desee. Pero si decide aplicar las ideas que Rebecca compartió en su video, puede llegar a un archivo Search.js de manera similar:
Sé que es mucho código, pero es más fácil de lo que parece. En primer lugar, tenemos una función llamada OnQueryChanged que escucha los cambios en el campo de entrada y, después de que el usuario ya no escriba (simulamos esto utilizando el _.debouce de subscorejs.org), active una solicitud de AJAX para cargar los resultados utilizando una función de recubrimiento llamada SearchPosts. Una vez que la solicitud AJAX tiene éxito, procesamos los resultados utilizando una función llamada ProcessResult, que verifica si la solicitud fue exitosa o no. Si lo era, usamos la función de dibujo para mostrar los resultados. Finalmente, si el usuario limpia el texto ingresado, claro y el área de resultados.
Si actualiza una publicación ahora y verifica si su código está funcionando, verá que no. Eso es porque simplemente creé las funciones de búsqueda, pero aún no las he configurado. Para hacer esto, necesitamos crear un “código de pegamento” en Functions.js.js: ¡Probar nuestro complemento Finalmente, es hora de probar nuestro código! Si eres como yo hace un tiempo, probablemente probarás el código manual. Quiero decir, abrirá su navegador y verificará si las cosas funcionan como esperan, escribiendo algunos datos y observando los resultados. Y, oye, probablemente deberías seguir haciendo esto, sin importar tu enfoque de prueba … ¡pero ahora sabes y tienes que crear algunas pruebas unitarias! El mayor error que cometí en los últimos minutos es que escribí mucho código sin probar nada. Claro, sé que somos muy buenos en esto, pero escribir pruebas a medida que agregamos un nuevo código garantizará que (a) las pruebas existan y (b) que prueben cosas importantes. Bueno, no te preocupes, ¡tenemos tiempo! Veamos algunos ejemplos de prueba que podríamos haber escrito. Las pruebas de PHP con PHPUnit desde que comenzamos con nuestro código PHP, PHP Testing First tiene sentido, ¿verdad? Comencemos con algo fácil de asegurarnos de que la forma que hemos agregado al final de nuestras publicaciones esté realmente allí:
La prueba anterior crea una publicación en nuestro entorno de prueba que podemos usar. Una vez que se crea la publicación, la recuperamos y observamos su contenido (después de aplicar el filtro decontent). Si nuestro formulario se ha agregado con éxito, el contenido debe incluir las ID de ingresar al texto y la división resultante, y esto es exactamente lo que decimos. ¡Fácil de caminar! También me gustaría verificar si nuestros scripts JavaScript se han incluido con éxito en el front-end. Pero, oye, ¡cuídalo! ? A continuación, debemos asegurarnos de que la función más importante en nuestro complemento, la función de búsqueda posterior, funcione de acuerdo con las expectativas. Depende de usted decidir cuál es este “comportamiento esperado”, y dependiendo de sus decisiones que tenga que probar una cosa u otra. Por ejemplo, ¿cómo debe responder la función en los siguientes escenarios? ¿Qué pasa si la cadena de consulta está vacía?
¿Qué sucede si no hay publicaciones en WordPress?
Si no hay publicaciones que corresponden a los criterios, ¿qué regresa la función?
¿Qué sucede si más publicaciones corresponden a los criterios?
Como dije, tú eres quien decide qué es bueno y qué es malo aquí. Pensé en todos estos escenarios y se les ocurrió los siguientes comportamientos esperados (que ya he codificado en una prueba):
Finalmente, debemos asegurarnos de que la llamada AJAX funcione como se esperaba. Debido a que ya hemos probado la función de búsqueda en la prueba anterior, no hay mucho que probar en esta función; simplemente debemos asegurarnos de que la llamada inversa trate correctamente los parámetros de entrada. Por ejemplo, dije que queremos que la función devuelva un error si no se proporciona una consulta y una lista de publicaciones si es: hay dos cosas interesantes para ver en esta prueba. En primer lugar, la prueba hereda de una clase llamada wp_ajax_unittestcase. Esta clase nos permite simular las solicitudes de AJAX, como puede ver en el bloque Try-Catch. En segundo lugar, no incluimos ninguna prueba para verificar si la lista de publicaciones devuelta es correcta; ya lo he probado cuando probamos la función neliops_search_posts, entonces, ¿por qué deberíamos repetir nuestro trabajo? Una vez que terminamos, lanzamos Phonit y …
Prueba de Ajax en PHP y … ¡Genial! Todo funciona !! ¡Auge! ¡Colores de vuelo! ¿Lo huele? ¡Cinco altos! Pruebas de JavaScript con Qunit Lo último que necesitamos probar es, como se puede imaginar, nuestro código JavaScript. Lo más importante para recordar es que no es su responsabilidad verificar si el punto final AJAX está funcionando como se esperaba: debe suponer que todas las llamadas de servidor funcionan de acuerdo con las expectativas (en este caso, ya las hemos probado). De hecho, ni siquiera debe usar llamadas reales de todos modos: debe fingir datos y probar el código con ellos. ¡Echemos un vistazo al ejemplo más simple! ¿Nuestro código dibuja correctamente la lista de publicaciones? Bueno, ciertamente sucede si pasan las siguientes pruebas: