Pruebas de jquey con broma en el desarrollo de WordPress

Recientemente he escrito una serie de publicaciones sobre las aplicaciones reactas de prueba y una serie sobre el uso de Phupit para probar complementos de WordPress. Apuntaban a probar un nuevo código y escribir de una manera que se pueda probar. Una de las cosas difíciles de adoptar pruebas en una base de código hereditaria es que el código a menudo se escribe de una manera que realiza pruebas. En este artículo, analizaré dos formas en que JQuey es difícil de probar. En primer lugar, mostraré cómo usar imitaciones para aislar artificialmente su código jQuery en sí. Luego daré un ejemplo con un código que se ejecuta en un clic y código utilizado para hacer solicitudes AJAX.
Introducción rápida a las burlas Una de las cosas difíciles en las pruebas unitarias es que no todo el código puede escribirse perfectamente aislado de los sistemas globales, como los eventos DOM o WordPress. Burlarse de las bibliotecas lo ayudan a eliminar artificialmente sistemas que no son lo que cubre la prueba actual. Por ejemplo, se puede usar 10UP/WP_MOCK para reemplazar la API del complemento de WordPress con simulaciones de prueba. Este artículo trata sobre las pruebas de JQuey con Jest. Jest es desarrollado por Facebook y generalmente se usa para probar las aplicaciones React, pero se puede usar con otras bibliotecas de prueba. Una gran característica de Jest son sus capacidades de burla. El uso más simple de los simulacros de broma es contar cuántas veces se llama una función. Si su prueba es una función que llama a otra función, solo necesita saber que se llama a la función.
Veamos una prueba para una función que asuma varios elementos y luego apliquemos la misma devolución de llamada a cada uno de ellos. En este fragmento tengo UpdateItems, la función probada, y UpdatePosts () que usa esa función para transmitir una serie de publicaciones a updatePost (). Más tarde, en este artículo, miro cómo probar las llamadas jquey.rajax (). Por ahora, me preocupa asegurarme de que UpdateItems () mi llamada de regreso: Ahora, mire la prueba. Ni siquiera le daré publicaciones simuladas en este momento, solo una matriz con tres elementos y luego diré que me llamaron tres veces:
La línea clave aquí es la línea 4. En esa línea, creo una función llamada “devolución de llamada” usando jest.fn (). Como resultado, puedo contar cuando se llama usando Callback.mocks.calls.length. Esto prueba que mi función ha sido llamada por el número correcto. No me muestra que recibió los datos correctos. Para esto podemos usar la llamada de llamada útil con un jest.fn ()::
En primer lugar, las preocupaciones separadas uno de los mayores obstáculos para adoptar pruebas en una base de código hereditaria es que su código puede no ser fácil de probar. Las pruebas unitarias aisladas pueden ser imposibles. Todavía puede escribir pruebas DOM con un marco de automatización del navegador, como Cypress.io o similar. También puede usar algo como DOM-testing-bibrary para probar el DOM.
Pero los reflectores simples pueden aislar la lógica del negocio por el sistema de eventos DOM. Aquí hay un ejemplo en el que JQuey se usa para vincularse a un evento de clic y luego para agregar o eliminar clases de acuerdo con una condición:
Puede restaurar todo o parte del domo, simular acantilado y luego probar si los elementos DOM tienen las clases correctas. Es lento y prueba muchas cosas que son responsabilidad de JQuey, no su código. Su lógica comercial es su negocio, el sistema jquey para unir y enviar los eventos no lo es. El fragmento del código que mostré anteriormente hace muchas cosas, una violación del principio de responsabilidad única. Para dividirlo en dos funciones. Una función de jquey como adicción y luego realiza la lógica de negocios. La responsabilidad de las otras funciones es conectar la lógica aislada que está encapsulada en la primera función con el sistema de eventos JQuey. Ahora veamos cómo probar esta función con nuestra lógica comercial. Debido a que enviamos jQuery como dependencia de la función, podríamos pasar cualquier función allí. Como una broma. Debido a que no probaremos los efectos de estas funciones, agregando y eliminando clases de los elementos correctos, solo necesitamos saber que se llaman las funciones. El modelo básico que mostré antes no es suficiente para esta prueba. Digo esto por dos razones. En primer lugar, no tiene un constructor, por lo que la llamada del JQuey Builder, que en realidad no probamos, generaría un error. En segundo lugar, debemos poder contar las llamadas a métodos separados.
Aquí hay una prueba que resuelve el primer problema pero no el segundo:
Esto pasará con un constructor adecuado. Pero todo lo que sabemos es que se han llamado dos métodos de este objeto. ¿Cual? No lo sabemos y esto es importante, porque en nuestra prueba debemos asegurarnos de que se llame RemoveClass, pero AddClass no lo es. Esta es la lógica comercial que probamos.
La solución es poner esos métodos en sus propias variables, podemos verificar: ahora probamos que la lógica comercial conduce a la función correcta. No probamos los efectos, sino solo nuestra lógica. Misión hecha. ¿Qué tal vincular el evento? No hemos cubierto completamente los enlaces reales de los eventos. No me importa.
¿Por qué? En primer lugar, realmente dudo que tenga un problema allí. Si allí, este es un gran problema que se eliminará en la superficie mediante las pruebas de aceptación y las pruebas de integración construidas en un sitio web real y simula las interacciones del usuario fallarán si el jquey no funciona correctamente y eso me da más confianza mis enlaces de eventos que cualquier cosa. Evento simulado que crearé para las pruebas. Si se prueba la lógica comercial, estoy bien. Probar JQuey Ajax con Jest, prueba cualquier cosa que involucre una solicitud HTTP puede ser difícil. Es importante deshacerse de los efectos secundarios primero. La separación de la lógica de negocios del jquey.ajax () api () puede permitir una estrategia de prueba similar. Considere este uso de jQuery Ajax con tres llamadas inversas:

Esto es bastante común, lo copié de algo que escribí hace algún tiempo. Una forma de pensar en probar este código sería dejarlo como es, pero encontrar una manera de vencer al agua. Esto no tiene sentido para mí si la API está cubierta por sus propias pruebas y el JQuey Ajax tiene sus propias pruebas. En cambio, piénselo como tres funciones:
Aquí hay tres funciones que podríamos usar. Su aislamiento en las funciones significa que pueden reutilizarse, lo cual es genial. Además, podemos aprobar las dos adicciones globales: jquey y manillar. Estos tipos de funciones no son de diseño puro. El término “puro” en este contexto significa una función sin efectos secundarios. Estas funciones cambian el DOM usando API globalmente y esto está bien si podemos reemplazar fácilmente la API a nivel mundial con simulacros de broma. En un lugar, el argumento para la función de error. Estoy preocupado de que el valor correcto se transmitiera a ese método, por lo que verifíquelo con VestObecalledWith desde Jest. Desde las otras funciones que me gané, confío en que funcione, siempre y cuando se llamen. Llamar al orden correcto es mi preocupación, llamar con los datos correctos es mi preocupación, lo que hacen no es mi preocupación.
¿Pero la solicitud de la API? En su mayor parte, no me importan las mismas razones que di por los enlaces del evento. La API de puntos finales recibe sus propias pruebas aisladas. También tengo pruebas de aceptación. Si estaba construyendo un cliente de API, entonces debería probarlo con respuestas simuladas. Para hacer esto, usaría una biblioteca de burla para las solicitudes de AJAX.