Ahora, tenemos una comprensión rápida de las pruebas de extremo a extremo
y qué papel desempeñan las pruebas de extremo a extremo
en la estrategia general para la prueba de aplicaciones angulares.
Además, una breve introducción al transportador.
Procedamos con el próximo ejercicio donde podríamos emplear el transportador
y diseñar nuestras pruebas de extremo a extremo.
Es una suerte que angular CLI
establezca automáticamente todo lo que necesitamos para realizar pruebas de extremo a extremo,
como veremos cuando procedamos con el ejercicio.
Por lo tanto, se trata de implementar las diversas pruebas y
luego llevar a cabo la prueba usando transportador en este ejercicio.
Ir a nuestra aplicación angular en Visual Studio,
si nos fijamos en el paquete de nuestro archivo JSON,
veremos que ya encontramos
la CLI angular ha configurado todo lo que necesitamos para llevar a cabo las pruebas de extremo a extremo.
Así que, mientras te desplazas hacia abajo,
verías que el transportador ya ha sido instalado en
nuestro ordenador dentro del proyecto angular.
Además, notamos que aquí hay una carpeta separada
llamada e2e que contiene algunos archivos
que ya se han configurado para llevar a cabo una prueba de extremo a extremo.
Ahora, si necesita llevar a cabo extensas pruebas de extremo a extremo,
entonces es una buena idea crear
un archivo separado para cada conjunto de pruebas de extremo a extremo que desee llevar a cabo.
Ahora, en este ejercicio en particular,
sólo les estoy ilustrando cómo llevar a cabo pruebas de extremo a extremo.
Entonces, voy a seguir con lo que ya ha sido configurado por angular CLI.
Trabajaremos con los archivos que tenemos disponibles allí.
Entonces, echemos un vistazo rápido a estos dos archivos aquí, la app.e2e-spec.ts,
y verás que algún código ya ha sido andamiado en este archivo por angular.
Además, este otro archivo llamado app.po.ts,
esto no es más que una clase estándar de JavaScript
que se ha configurado con algunos métodos aquí.
Ahora, lo que vamos a hacer es agregar algunos métodos más a
esta clase de JavaScript y también actualizar algunos de estos métodos que se dan aquí.
Vamos a configurar nuestras pruebas en el archivo app.e2e-spec.ts.
Así que, para continuar,
vamos a la aplicación.
archivo PO.ts, y luego dentro de este archivo, vamos a actualizar esto.
Así que, aquí, ven que tenemos dos métodos que ya se han configurado aquí.
Voy a actualizar estos métodos para permitirles tomar un parámetro aquí.
Así que, voy a decir, NavigateTo con un enlace,
que se proporciona como una cadena,
y luego voy a actualizar este navegador llegar a
usar el enlace que es el parámetro para este método.
Entonces, ¿qué hace esto?
Así que, como pueden ver,
estamos haciendo uso de la sintaxis del transportador aquí.
Entonces, esto dice retorno navegador get link.
Por lo tanto, esta llamada en particular a este método de obtención del navegador habilitará
nuestra aplicación para navegar a este enlace en particular que se suministra como un parámetro aquí.
Entonces, antes de esta actualización,
vio que el enlace suministrado aquí era barra,
lo que significa que la raíz de nuestra aplicación angular.
Ahora, he actualizado esto para tomar un parámetro aquí.
Del mismo modo, el segundo método que ve se llama GetParagraphText.
Ahora, este método se utiliza para obtener el contenido interno de un elemento HTML aquí.
Entonces, para esto, también,
configuraré un parámetro llamado selector,
que es un selector CSS que suministraré aquí.
Entonces, ves que aquí,
voy a cambiar esto para tomar el selector como el parámetro.
Ahora, de la experiencia anterior con la prueba unitaria,
ves lo que significa y.css.
Esto es lo mismo que estamos usando aquí también.
Esto por método que se está utilizando ahora se importa desde la biblioteca de transportador aquí.
El método del elemento también se importa de la biblioteca del transportador.
Por lo tanto, este método de elemento le permite obtener acceso a un elemento HTML
proporcionando esa selección para el elemento HTML como un parámetro aquí.
Entonces, puedes decir por css, byId,
y muchos otros métodos de este tipo disponibles para la clase by aquí.
Entonces, el método getText,
obtiene a medida que vemos el texto interior visible de este elemento en particular.
Por lo tanto, esta es una forma de recuperar información de
el elemento HTML particular dentro de nuestra ventana del navegador,
y luego verificar si coincide con un patrón que estamos especificando aquí.
Entonces, con esta actualización a app.po.ts,
pasemos al archivo app.e2e-spec.ts.
Así que, dentro de este archivo,
notarás que estamos usando la sintaxis de Jasmine.
Así que, aquí, me ves usando describir y luego lo que dice dejar la página AppPage.
Así que, aquí, la página es donde estamos creando esta nueva clase llamada AppPage,
que hemos declarado en el archivo app.po.ts como una clase de JavaScript aquí.
Ahora, esta es solo una forma conveniente de configurar todas las cosas en una ubicación,
y luego poder hacer uso de ellas en mi código de prueba.
Entonces, aquí, estoy declarando la página para referirse a esta AppPage,
y eso me permitirá acceder
los métodos que he construido en esa clase aquí.
Entonces, la primera prueba que voy a hacer es navegar a
la raíz de mi aplicación angular
y luego verificar si hay un patrón específico en eso.
Notarás que en mi página principal,
tendrás la cadena
llamada Ristorante Con Fusion
dentro de un elemento H1 en mi página.
Entonces, lo que voy a hacer es navegar a la raíz de mi elemento HTML.
Luego, allí, iré buscando
la ruta de la aplicación y luego buscaré la etiqueta H1 dentro de la ruta de la aplicación.
Entonces, esto debería ser igual a esta cadena en particular aquí.
Entonces, solo voy a copiar
la cadena Ristorante Con Fusion allí y luego suministrar eso como un parámetro aquí.
Entonces, solo estoy actualizando la prueba para verificar
exactamente lo que tenemos dentro de nuestra aplicación angular actualizada.
Así que, con esta configuración,
ahora voy a llevar a cabo mi primera prueba de mi aplicación angular.
Así que, guardemos todos los cambios y luego regresemos a nuestra terminal.
Dentro de la terminal, en mi carpeta de proyecto,
en el símbolo del sistema, escribiré ng e2e.
Notará que esto iniciará un navegador.
En mi caso, iniciará una ventana de Chrome y luego realizará la prueba en esa ventana.
Entonces, vamos a llevar a cabo la primera prueba.
Verá que cuando la prueba se ejecuta después de compilar mi aplicación angular,
cuando se ejecuta la prueba,
se asegurará de que la prueba sea exitosa.
Ves que en la parte posterior,
mi navegador es abierto por ng e2e,
y luego la prueba se llevó a cabo en esa ventana del navegador.
Dice que la prueba se llevó a cabo con éxito aquí.
Entonces, nota que incluso en este caso,
necesita iniciar el navegador,
cargar en mi aplicación angular en el navegador,
toda la aplicación angular en el navegador.
Luego, lleve a cabo la prueba de mi aplicación angular.
En este punto, asegúrese de que su servidor,
el servidor JSON está en funcionamiento,
de lo contrario, su prueba fallará,
porque cuando la prueba se haya realizado,
intentará acceder al servidor JSON también.
Por lo tanto, eso es algo que debes asegurar.
continuar con nuestras pruebas.
En el segundo paso,
vamos a añadir un par de métodos más a esta AppPage.Clase
aquí. Entonces, usaría un nuevo método
llamado getElement y luego tomaría un parámetro de un selector.
Este método me permite obtener acceso al elemento,
que se selecciona utilizando el mismo mediante el selector CSS.
Entonces, solo voy a copiar esto.
Entonces, en este caso, en lugar de simplemente obtener el texto,
realmente devolverá la referencia al elemento en sí,
y luego para que pueda agregar de formas adicionales
de acceder a la información dentro de ese elemento como lo requiriéramos.
En este caso, el get-text se utiliza sólo para obtener el texto específico.
Podríamos usar otros métodos en
este elemento para obtener información adicional de esos elementos.
Entonces, esa es la razón por la que estoy creando este método aquí.
Del mismo modo, implementaré otro método llamado get all elements.
Ahora, esto también usa un parámetro llamado selector como antes.
Lo que hace el método getAll es seleccionar
todos los elementos y luego devolverlos al collar,
para que, por ejemplo,
si su página contiene muchos elementos h1 en
referencia a todos ellos se devuelva a mi collar.
Entonces, que allí, entonces puedo decidir hacer
una llamada a uno específico dentro de esta lista de elementos.
Entonces, para hacer esto,
usaremos el mismo retorno pero aquí,
en lugar de decir selector de elementos,
permítanme copiar eso y luego tenemos otro método llamado
element.all que nos permite
acceder a todos los elementos que coinciden con este selector en particular.
El primero devolverá el primer elemento que coincida con ese selector.
Después de estas actualizaciones, ahora cambiaremos a nuestro archivo de prueba y agregaremos una nueva prueba aquí.
Entonces, aquí nuevamente, estoy usando la sintaxis de Jasmine para agregar la nueva prueba aquí.
Por lo tanto, lo diré y luego dar una descripción para esta prueba.
Dirá que debe navegar a aproximadamente
nosotros página haciendo clic en el enlace.
Ahora, si miras hacia atrás en tu aplicación Angular,
notarías que dentro de tu aplicación Angular,
tienes los enlaces de navegación en la parte superior de la página.
Así que, lo que vamos a hacer en esta prueba es automáticamente
ir y acceder a uno de esos enlaces de navegación y hacer clic en ellos.
Ahora, por supuesto, como esperas, esto se va a hacer programáticamente,
en lugar de hacer clic manualmente en el enlace.
Entonces, para hacer eso,
lo que voy a hacer es navegar a la raíz de mi aplicación Angular y luego,
voy a acceder
los enlaces en mi barra de navegación en la parte superior.
Al decir page, getAllElements y
obtendré todos los elementos que tienen la etiqueta a allí.
Ahora, obviamente, tendrá muchas de esas etiquetas en nuestra página, pero los cuatro primeros,
son los cuatro enlaces en
la barra de navegación en la parte superior de nuestra página allí en el componente de encabezado.
Entonces, al obtener acceso a esos
, una nota ahora que estoy usando get todos los elementos, así que voy a obtener una serie de elementos.
En este caso particular,
resulta ser alrededor de 16 etiquetas diferentes que usarán en esa página allí.
Por lo tanto, voy a ir y seleccionar.
Entonces, aquí es donde uso este método llamado get y luego puedo especificar
un índice para el elemento específico que quiero.
Por lo tanto, he comprobado si miras el archivo de plantilla de componentes de encabezado,
notarás que en el segundo que una etiqueta en
la página HTML del componente de encabezado se refiere al enlace sobre nosotros allí.
Entonces, eso es a lo que estoy accediendo diciendo get one.
Zero, por supuesto, se refiere al enlace de inicio en
el componente de encabezado donde creamos nuestra barra de herramientas en la parte superior allí.
Entonces, obtengo acceso al segundo, así que este es el enlace sobre allí.
Ahora, una vez que se hace con este enlace,
hay un método que el transportador soporta
en un elemento con un enlace llamado el clic.
Entonces, esto, como puede ver programáticamente,
hace un clic en ese elemento en particular en la ventana de mi navegador allí.
Así que, programáticamente, estamos llevando a cabo lo que normalmente realizarías
manualmente yendo físicamente a ese enlace y haciendo clic en él usando el ratón.
Ahora, una vez que hacemos clic en el enlace, obviamente,
vas a navegar a la página Acerca de nosotros.
Ahora, dentro de la página Acerca de nosotros,
si vas a mirar la plantilla de la página Acerca de nosotros,
encontrarás que hay un elemento h3 que contiene el nombre de esa página.
Dentro de ese elemento h3,
verá un texto llamado Acerca del espacio Nosotros allí.
Entonces, eso es lo que voy a comprobar ahora.
La razón por la que voy a verificar eso es para asegurarme de haber navegado realmente a
la página Acerca de nosotros haciendo estos pasos en mi aplicación Angular.
Por lo tanto, aquí es donde usaré la espera.
Ya hemos visto el uso de esperar y esperar página.
getParagraphText y voy a obtener el texto del párrafo de
h3 y esto espero toBe.
Observe el uso de la sintaxis de Jasmine aquí y esto debería ser Acerca de nosotros.
Así que, introduciendo esta segunda prueba en nuestro archivo de prueba aquí,
vamos a guardar los cambios que hemos hecho y luego ir y ejecutar esta prueba.
Va a la terminal.
Una vez más, déjame ejecutar la prueba diciendo ng e2e
y notarás que esto volverá a pasar por el mismo conjunto de pasos,
y luego llevar a cabo ambas pruebas que ahora tengo en el archivo de prueba.
Es interesante ver la prueba que se está llevando a cabo en el navegador.
Por lo tanto, ves que estamos en la Página de inicio,
ahora navega a la Página Acerca de y luego el éxito.
Por lo tanto, hemos navegado con éxito desde
la Página de inicio a la página Acerca y luego hemos verificado que has
navegado a la página Acerca de realizando
la prueba específica donde verificamos para asegurarnos de que
el Acerca de nosotros está en una etiqueta h3 dentro de la página Acerca de nosotros allí.
Así que, esta es una prueba más de extremo a extremo que podemos llevar a cabo,
y realmente vieron que la prueba se estaba llevando a cabo justo delante
de sus ojos sin su intervención manual.
Espero que estés disfrutando llevando a cabo estas pruebas de extremo a extremo.
Vamos a ser un poco más ambiciosos.
Ahora, lo que vamos a hacer es navegar a un plato en particular,
y luego tratar de insertar un comentario en ese plato.
Ahora, aquí es donde voy a tomar la ayuda del soporte de Transportador,
y me verán usando algunos métodos más de
Transportador con el fin de navegar a la página del plato,
vamos a navegar al primer plato en nuestro menú usando
el enlace a la página de detalles del plato con el parámetro de ese plato en particular,
la identificación del plato en particular.
A continuación, identificaremos los elementos de entrada del formulario,
y luego teclearemos automáticamente la información en
esos elementos de entrada y luego tratar de enviar el formulario y ver qué sucede.
Así que, para llevar a cabo esta prueba, de nuevo,
entra y usando la sintaxis de Jasmine,
voy a introducir una aquí y luego voy a identificar lo que esta prueba está tratando de hacer.
Yo diría, «Debería introducir un nuevo comentario para el primer plato
» y la función de flecha
y ves que dentro de esta función de flecha,
vamos a hacer nuestra primera página NavigateTo,
vamos a navegar hasta el dishdetail cero.
Por lo tanto, este es el primer plato en nuestro menú.
Ahora, una vez que navegemos a la página dishdetail, diremos,
«dejar que newAuthor sea igual a la página getElement».
Así que vamos a encontrar ese elemento que es
entrada y escriba texto aquí,
así que esto me ayudará a identificar ese elemento de entrada donde el nombre del autor es
escrito en la forma que hemos creado en nuestra página dishdetail.
Si tienes curiosidad,
ve y echa un vistazo a esa forma,
y entonces verás que hay de hecho
ese elemento de entrada en esa página de detalles.
Entonces, accediendo a eso, voy a escribir el nombre del autor
en ese campo de entrada allí.
Entonces, aquí es donde el método de SendKeys que es apoyado en nuestro elemento viene en nuestra ayuda,
el método de SendKeys apoyado por Transportador.
Así que aquí, voy a escribir el nombre del autor como autor de la prueba.
Entonces, al final de estos dos pasos,
el autor de la prueba debe escribirse en el elemento de entrada en mi formulario.
Ahora, además, también necesito escribir el comentario para ese formulario.
También podemos configurar el valor de calificación,
pero no voy a hacer eso en esta prueba en particular,
solo voy a escribir el valor del comentario usando un enfoque similar.
Entonces, diré, «let newComment»,
nuevamente, obtendrá la página,
getElement, y luego aquí es donde busco
el área de texto y newComment,
SendKeys y escriba «Test Comment».
Por lo tanto, esto rellenará las palabras Test Comment en el área de texto
que contiene los comentarios que
el autor debe enviar para ese plato en particular.
Después de esto, encontraremos el SubmitButton.
Así que para hacer eso, diremos
page.getElement tipo de botón submit,
y luego una vez que tengamos el botón simplemente decimos, newSubmitButton.click.
Así que, una vez que hacemos clic en el botón,
el comentario lo volverá a enviar.
Ahora, voy a usar otro método que admite Transportador.
Voy a pausar la prueba en ese momento.
Esto me permitirá pasar la prueba y luego llevar a cabo la prueba o la planta,
así que esto dice, el navegador no está definido,
así que necesito volver aquí y luego importar
navegador de la biblioteca de Transportador allí,
y luego ves que la línea roja Squiggly ha desaparecido,
así que mi prueba debería todos se configuran correctamente allí.
Así que, déjame guardar los cambios,
vamos a ir y ejecutar esta tercera prueba también,
junto con las dos pruebas restantes que ya hemos introducido.
Ir al navegador, déjame volver a ejecutar la prueba de extremo a extremo,
cuando se abre el navegador, ahí vamos,
la primera prueba se ha llevado a cabo y que debería tener éxito,
la segunda prueba se ha llevado a cabo y la tercera prueba donde navegamos detalle plato,
y ves que el comentario de la prueba fue enviado correctamente por nuestra prueba.
Así que, con esto, completamos este ejercicio.
En este ejercicio, usted ha llevado a cabo tres pruebas diferentes utilizando el soporte de
Transportador y ha descubierto que nuestra aplicación supera todas estas tres pruebas de extremo a extremo.
Este es un buen momento para que guarde los cambios en
su repositorio de Git usando la prueba de extremo a extremo del mensaje.