Redactar: Lista / Detalles-Prueba, parte 2
En una publicación reciente sobre el estilo de Android, analizamos SlidingPanelLayoutEsto puede simplificar la implementación de la IU de lista / detalle. Maneja la lógica de mostrar un diseño lado a lado o un diseño de dos páginas de acuerdo con el tamaño de la pantalla. Actualmente, no existe un método equivalente en Jetpack Compose. En este artículo, veremos cómo Compose hace que esto sea relativamente fácil.
Antes de estudiar cómo crear una prueba ListDetailLayout Se emite la interfaz de usuario correcta en función de las capacidades de visualización del dispositivo dadas. Sin embargo, aún no hemos creado una prueba para el comportamiento de los dos modos de IU diferentes.
crear SplitLayout con TwoPageLayout Al ser componentes discretos, podemos probarlos individualmente. Esto es más fácil porque los mantenemos apátridas. El estado está en los parámetros de cada función componible. Podemos. Por tanto, se crean diferentes estados.
Herramientas comunes
Lo primero que queremos hacer es agregar más funciones útiles TestUtils:
Diseño dividido
SplitLayout Emitir una lista de lado a lado / IU de información detallada.Podemos probar este comportamiento por separado sin tener que usar su padre ListDetailLayoutEsto demuestra el valor de los componentes pequeños y concentrados.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19 20 veintiuno Veintidós Veintitres veinticuatro 25 26 27 28 29 30 31 32 33 34 |
clase Prueba de diseño dividido @obtener:regla valor Escribir reglas de prueba = Crear AndroidComposeRule<actividades principales>() @prueba Placer givenASplitLayout_whenWeClickEachItem_thenOnlyThatItemDetailIsDisplayed() Escribir reglas de prueba.Establecer contenido Interfaz de prueba(ancho = 600)
valor Elementos en los que se puede hacer clic = Lista.Para proyectar mapeo(Acción de clic()) con el fin de ((nombre, acción) en Elementos en los que se puede hacer clic) acción.Ejecutar clic() valor detalles = Lista.Para proyectar mapeo(Sin acción de clic()) detalles.Es el único artículo(nombre)
privado Placer Lista<Cuerda>.Para proyectar mapeo(partidos: Emparejador semántico) = mapa eso a Escribir reglas de prueba.En el nodo(Con texto(eso) con partidos) .mapa() privado Placer mapa<Cuerda, Interacción de nodo semántico>.Es el único artículo(texto: Cuerda) con el fin de (artículo en Esto) en caso (artículo.clave == texto) artículo.valor.Afirmar existencia() Otro artículo.valor.La afirmación no existe()
|
Esto hará clic en cada elemento de la lista y afirmará que se muestran los detalles relevantes para cada elemento. Usamos nuevamente la función de utilidad que creamos anteriormente.
Los elementos de la lista y sus detalles tienen el mismo texto. Sin embargo, podemos determinar cuál es cuál comprobando su acción de clic. Si tiene una acción de clic, probablemente sea un elemento de lista. Si no es así, debe ser un elemento de información detallada.
Básicamente, se trata de ejecutar una prueba separada para cada elemento de la lista.
Existe un argumento válido de que esta prueba no está bien diseñada. Realmente realiza 10 operaciones de clic individuales y 100 afirmaciones en una sola función de prueba. Si ocurre una falla, será más difícil comprender las circunstancias exactas de la falla.Sin embargo, proporciona pruebas integrales SplitLayout.Dividirlo en pruebas individuales dará como resultado un conjunto de pruebas más grande. Dejaré que el lector decida si esta estrategia es beneficiosa para ellos.
Personalmente, puedo aceptar esta prueba porque siento que realmente verifica el comportamiento esperado de manera muy completa. Aunque le falta fluidez. Creo que la siguiente prueba es mucho más fluida.
Diseño de página dual
Finalmente, tenemos TwoPageLayout Tiene una pantalla separada para la lista y la interfaz de usuario de información detallada.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19 20 veintiuno Veintidós Veintitres veinticuatro 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 sesenta y cinco 66 67 68 69 70 |
clase Prueba de diseño de página dual privado valor ancho = 300 @obtener:regla valor Escribir reglas de prueba = Crear AndroidComposeRule<actividades principales>() @prueba Placer givenATwoPageLayout_whenItIsInitiallyDisplayed_thenItExists() Escribir reglas de prueba.Establecer contenido Interfaz de prueba(ancho)
Escribir reglas de prueba.En la lista().Afirmar existencia()
@prueba Placer givenATwoPageLayout_whenItIsInitiallyDisplayed_thenItContainsTenChildren() Escribir reglas de prueba.Establecer contenido Interfaz de prueba(ancho)
Escribir reglas de prueba.En la lista().Acerca de los niños().Afirmar que el recuento es igual a(Lista.Talla)
@prueba Placer givenATwoPageLayout_whenAnItemIsClicked_thenItNoLongerExists() Escribir reglas de prueba.Establecer contenido Interfaz de prueba(ancho)
Escribir reglas de prueba.onClickableTextItem(«Proyecto 1»).Ejecutar clic() Escribir reglas de prueba.En la lista().La afirmación no existe()
@prueba Placer givenATwoPageLayout_whenAnItemIsClicked_thenOnlyTheCorrectItemIsDisplayed() Escribir reglas de prueba.Establecer contenido Interfaz de prueba(ancho)
valor La lista de elementos = Lista[3] valor Otros elementos de la lista = Lista[] Escribir reglas de prueba.onClickableTextItem(La lista de elementos).Ejecutar clic() Escribir reglas de prueba.Elemento de texto estático(La lista de elementos).Afirmar existencia() Escribir reglas de prueba.Elemento de texto estático(Otros elementos de la lista).La afirmación no existe()
@API de prueba experimental @prueba Placer givenATwoPageLayout_whenAnItemIsClickedAndBackPressed_thenTheListExists() Escribir reglas de prueba.Establecer contenido Interfaz de prueba(ancho)
valor La lista de elementos = Lista[3] Escribir reglas de prueba.En la lista().Afirmar existencia() Escribir reglas de prueba.En la lista().Acerca de los niños().Afirma que el recuento es igual a(10) Escribir reglas de prueba.onClickableTextItem(La lista de elementos).Ejecutar clic() Café fuerte.Rechazar() Escribir reglas de prueba.En la lista().Afirmar existencia()
|
Aquí hay varias pruebas. Como antes, usamos funciones de utilidad para construir la interfaz de usuario bajo prueba. Cada prueba aborda un aspecto diferente del comportamiento esperado. Agregué algunos métodos simples de búsqueda de nodos para hacer que las pruebas individuales sean más legibles. Poder leer y comprender el código de prueba significa que el comportamiento esperado del componente bajo prueba es claro.
La primera lista de verificación se muestra inicialmente. La segunda verificación es que la lista ya no se muestra después de hacer clic en el elemento. La tercera verificación muestra que se muestran los detalles correctos. Finalmente, verificamos la IU de detalles de devolución para volver a la IU de la lista.
La prueba final es muy interesante porque muestra que podemos mezclar y combinar la prueba Compose con Espresso. Aquí usamos Espresso para activar el evento «retorno».
en conclusión
Es relativamente fácil probar la composición, pero aún necesitamos diseñarlos para lograr la capacidad de prueba. Mantenerlos apátridas a través de la promoción estatal ayuda enormemente a esto. Lo mismo ocurre con mantenerlos pequeños y enfocados.
La prueba de comportamiento de la espalda también se mencionó en el artículo anterior. ListDetalLayoutTest Verifique la lógica de navegación implementada en su interior.
Cuando podamos ejecutar las pruebas de Compose como pruebas unitarias, las pruebas se mejorarán aún más.En el pasado, tendía a omitir las pruebas de mis proyectos de código de muestra porque estaba hecho para Views lleva mucho tiempo. Hacer que se ejecuten en mi servidor CI también es un problema. Pero esto está cambiando, por lo que puede esperar ver mi código de muestra de Compose respaldado por pruebas de IU.
El código fuente de este artículo está disponible aquí.
© 2021, Mark Allison. reservados todos los derechos.
relacionados
Copyright © 2021 Estilo de Android. reservados todos los derechos.
Para obtener información sobre cómo reutilizar o volver a publicar este trabajo, visite http://blog.stylingandroid.com/license-information.
