traduccion - Prueba de unidades CSS

line-height que es

Question

Unas cuantas búsquedas rápidas descubrieron que obviamente no soy la primera persona en tener la idea "¿Puedo probar mi CSS de forma individual?" .

Me pregunto si alguien aquí ha tomado con éxito las Pruebas unitarias de CSS. Si ha intentado y ha fallado, o simplemente tiene sus propias teorías, por favor dígame por qué (al parecer) todavía no se ha hecho.

Answer 1

¡Hemos establecido pruebas unitarias en un proyecto grande con una UI pesada y funcionó maravillosamente! También fue mucho más fácil de lo que parece.

Tome herramientas simples como getBoundingClientRect o getComputedStyle , getComputedStyle con hyperscript para crear árboles DOM temporales y rápidos y listo. Hemos escrito tape-css para reducir la repetición cuando se prueba con tape , pero la pila será similar en cualquier configuración de prueba.

Ayer publiqué una publicación de blog detallada con un tutorial sencillo y ejemplos en vivo sobre nuestro nuevo flujo de trabajo y cómo aumentó nuestra productividad: cómo las pruebas de unidad de CSS nos ayudaron a avanzar rápidamente .

Answer 2

Actualmente, entender si CSS está funcionando correctamente o no está determinado visualmente. Hasta ahora, la mejor manera de probarlo es mediante la instalación de múltiples navegadores en su máquina de desarrollo. Comience a usar herramientas como Firebug y Web Developer en Firefox, y olvídese de probar las unidades de CSS hasta que se complete. :-)

Answer 3

Creo que sería posible en el navegador (del lado del cliente) para CSS de "prueba de unidad". Sería más como un comprobador automático que una unidad de prueba:

1. Evalúe las condiciones finales del atributo CSS que nos gustaría conservar para una clase o ID de CSS particular (el resultado).
2. Requerimos un documento de prueba HTML para representar el contenido estático y CSS. Todos los elementos deben incluirse en el contenido en contenedores separados.
3. Después del renderizado, verifique con javascript los atributos finales finales o resultantes de los objetivos seleccionados y los elementos de salida no coincidentes.

Caso de prueba unitaria:

Selectores de DOM:

.test1
.test2
#test3

Este debería ser siempre el atributo final:

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

Una función para establecer reglas de prueba en JS podría ser:

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

Luego verificamos si los elementos DOM tienen estos atributos finales.

Todo hecho en javascript después del renderizado. Pero de todos modos, esto no es práctico porque tendrás que construir muchos casos de prueba unitarios que aumentarán tu código de manera significativa.

También siempre debe tener un reset.css para la "compatibilidad" entre navegadores.

Una alternativa sería designar clases de CSS que sepa que deben preservar sus atributos completos. Crea una lista de selectores de DOM. Use jQuery para obtener los atributos de la clase CSS (directamente desde la clase CSS) y verifique si se conservan en los elementos DOM objetivo. Este último método podría estar casi completamente automatizado, pero requerirá un verificador de JavaScript más complejo. Este último no verificará el CSS para los selectores de ID (por ejemplo, "# test3"), solo las clases (por ejemplo, ".test1")

Answer 4

Hay un enfoque interesante que nunca he intentado, pero puede funcionar:

1. Crea páginas de muestra (a la https://getboostrap.com ) que proporcionan todos los componentes, etc.
2. Usted prueba con Huxley

Et voilà :)

Answer 5

Hay una nueva biblioteca de pruebas de unidades css llamada Quixote . En lugar de comparar imágenes visualmente, mira el código. A diferencia del Selenio, no es necesario que afirme estilos específicos, sino que puede decir algo como "debe estar centrado" o "el lado izquierdo debe estar 10px más hacia la derecha de este otro elemento".

Answer 6

No entiendo por qué no podríamos o no deberíamos probar la CSS unitariamente. Aquí está el escenario que tengo en mente:

Tengo un marco CSS que está hecho de múltiples archivos CSS modulares y que maneja 5 de mis sitios.

Ex : base.css / form.css / article.css etc.

Imagine que realizo un cambio en base.css por un requisito que se aplica al Sitio N. ° 1 solamente => Puedo romper el estilo del Sitio n. ° 2 sin.

La prueba de unidad de CSS sería aún más pertinente si mi estructura CSS está construida sobre LESS o SASS : un cambio en una macro podría romper todo el diseño. .

Answer 7

Puede usar PhantomCSS para la comparación visual automática. Y luego puede crear una página de prueba de unidad de módulo CSS que solo carga los estilos CSS básicos y muestra el componente en todos sus estados, pero no carga CSS desde otros componentes. Y luego puede compararlo con un archivo CSS completo con todos los módulos cargados.

Answer 8

Puede usar Selenium, que es un marco de prueba web. De esta forma, puede afirmar qué estilos se deben aplicar a los elementos en el DOM, etc.

Selenium

De lo contrario, no estoy seguro de cuál es tu objetivo. La prueba unitaria es, como su nombre indica, la prueba de ''Unidades'', y para mí, esto solo tiene sentido con el código, no con el CSS.

Answer 9

Unit Testing CSS, depende de su marco y su enfoque de CSS.

Preguntas que hacer :

Prueba de una clase determinada en su CSS, por ejemplo, Assert.IsNotNull

Obtenga propiedad CSS y verifique sus atributos.

En primer lugar, me aseguraré de que, si existe un archivo CSS, busque una clase específica y luego busque los atributos dentro de la clase especificada.

Experimenté una clase perdida durante mi prueba de regresión y logré solucionarla inmediatamente a partir de hallazgos previos.