Algunas búsquedas rápidas descubrieron que obviamente soy not thefirst person para tener el pensamiento "¿Puedo probar mi CSS?".CSS Unit Testing
Me pregunto si alguien aquí ha llevado a cabo pruebas de unidad de CSS con éxito? 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.
Puede usar Selenium, que es un marco de prueba web. De esta manera se podría afirmar lo que son estilos que se aplicará a los elementos en el DOM, etc.
De lo contrario, no está seguro de lo que su objetivo es. La prueba unitaria es, como su nombre lo indica, la prueba de 'Unidades', y para mí, esto solo tiene sentido con código, no con CSS.
bueno, CSS es código, ... algo así como. De todos modos, cambiar la entrada (el archivo CSS) cambiará la salida (las imágenes), y me gustaría hacer afirmaciones sobre la salida, verificando que el tamaño de la fuente en los párrafos nunca sea diferente, verificando que el texto se alinee con una cuadrícula correctamente, etc. – nickf
Selenium es lo que necesita para eso. Y solo para que quede claro. CSS no es un código :-), no es un lenguaje de programación, y de ninguna manera es Turing Complete, es un lenguaje descriptivo para el estilo visual de documentos XML. – RekrowYnapmoc
No es un lenguaje de programación. Pero es código. Así como HTML es código. – slim
No tiene sentido hacerlo IMO. CSS es un lenguaje para controlar el diseño de la página; intentar hacer una prueba unitaria sería como probar la prueba unitaria de Postscript.
El único uso obvio para las pruebas unitarias que podría pensar es comparar capturas de pantalla para ver qué navegadores se vieron afectados por un cambio en el código. Sin embargo, más allá de eso, no puedes decir que el código es correcto a menos que compares manualmente todo en la salida representada con lo que la especificación dice que debería ser. Para mí, obtener CSS correcto siempre va a ser de prueba y error.
Esta no es una prueba de "unidad". No estoy diciendo que no se debe probar mediante inspección visual, pero no es el mismo tipo de prueba que las pruebas unitarias. La prueba unitaria tiene una connotación definida de probar unidades de ejecución. CSS es decoración, no ejecución. – tvanfosson
Bueno Postscript en realidad es un lenguaje de programación con funciones y todo. Así que ciertamente podrías probarlo en una unidad. – slim
CSS es un motor de reglas por lo que no es difícil prever pruebas unitarias donde alimentarlo con ciertos escenarios (por ejemplo, un elemento con un ID particular o una ENTRADA dentro de un div con una clase) y esperar ciertos resultados. Hasta dónde debo llegar con las pruebas está abierto para el debate, pero habrá casos en los que se detengan errores graves antes de que sucedan. – locka
Actualmente, saber si CSS está funcionando correctamente o no se determina 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 CSS hasta que se complete. :-)
Y una vez que haya instalado varios navegadores en su máquina de desarrollo, puede determinar _visualmente_ si el CSS funciona correctamente ... El selenio es una forma de automatizar esta determinación visual. – Greg
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.
No entiendo por qué no podríamos o no deberíamos probar la unidad de CSS. 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.
Imagínese que hago un cambio a base.css para aplicar un requisito de sitio # 1 solamente => me permite romper Sitio # 2 sin labrar.
La prueba de unidad de CSS sería aún más pertinente si mi estructura de CSS se basa en LESS o SASS: un cambio en una macro podría romper todo el diseño. .
Sí, también tengo algunas hojas de estilo CSS para muchos sitios. Pero también cada uno tiene archivos CSS personalizados para que sean únicos. Con los archivos CSS personalizados, puede anular el estilo predeterminado y también habilitarlos/deshabilitarlos. – Heroselohim
Creo que sería posible en el navegador (del lado del cliente) para CSS "prueba de unidad". Sería más como un verificador automático que una unidad de prueba:
Unidad:
selectores DOM:
.test1
.test2
#test3
Esto debería ser siempre los atributos finales:
CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3
una función para establecer las 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 para designar clases de CSS que usted sabe que deben conservar sus atributos enteros. Crea una lista de selectores de DOM. Use jQuery para obtener los atributos de la clase CSS (directamente de 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 comprobará CSS para los selectores de ID (por ejemplo, "# test3"), sólo las clases (por ejemplo," .test1")
Hay un enfoque interesante que nunca he intentado, pero puede trabajar:
Et voilà :)
hay una nueva css unit unit library called 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".
Hemos establecido pruebas unitarias en un gran proyecto de UI pesado y funcionó maravillosamente! También fue mucho más fácil de lo que parece.
Take herramientas simples como getBoundingClientRect o getComputedStyle, sincronizarlo con hyperscript para crear árboles DOM temporales rápidas y ya está bueno para ir. Hemos escrito tape-css para reducir la repetición al probar con tape, pero la pila será similar en cualquier configuración de prueba.
Ayer publiqué una publicación de blog detallada con un tutorial simple y ejemplos en vivo sobre nuestro nuevo flujo de trabajo y cómo se impulsó nuestra productividad: How CSS unit tests helped us move fast.
Unidad de prueba CSS, depende de su marco y su enfoque de CSS.
Preguntas que debe hacer:
Ensayos para una clase dada en su CSS por ejemplo, Assert.IsNotNull
obtención de propiedad CSS y verificar sus atributos.
En primer lugar, afirmaría que, si existe un archivo CSS, busque una clase específica y luego busque los atributos dentro de la clase especificada.
Experimenté una clase faltante durante mi prueba de regresión y logré solucionarlo inmediatamente a partir de hallazgos anteriores.
Los comentarios sobre el hecho de que no están completos, no son verificables por una unidad, etc. son simplemente cojos. Por ejemplo, la herencia (cascada) en css es algo que sería muy interesante probar. Los ajustes entre navegadores también son interesantes de verificar. Y el selenio, o cualquier otra solución en el navegador no suena como que podría funcionar. A menos que tal vez esté basado en algo como qunit/jquery y, de hecho, toque el DOM para ver si el CSS se aplica como lo pretendía el autor (y podría ejecutarse/probarse en diferentes navegadores para validar que funcione). – Evgeny
La inclusión de comprobaciones CSS en las pruebas podría ayudar a probar algunos requisitos comerciales en BDD (como el tamaño de algo que es NxN y azul). Este tipo de cosas son ciertamente comprobables, incluso si su apariencia en el usuario-agente X no cumple con dichos requisitos (que es donde algo como el selenio puede llenar los huecos) –