[MUSIC]
La fragancia del jazmín de todas esas guirnaldas de flores
en la calle del templo flotando por el aire.
Qué sensación de asentamiento.
Debe ser el buen karma de mi vida pasada.
Lo siento, ¿dónde estaba?
Te estaba hablando de pruebas angulares, ¿verdad?
Y vamos a usar el ajuste del karma para hacer nuestras pruebas angulares.
Así que sigamos con ello.
Una buena cosa sobre el uso de la CLI angular es que configura todo el andamio para
para que incluya automáticamente el soporte para
probar su aplicación Angular.
Así que notará que cada vez que genere un componente o
un servicio junto con los archivos ts del componente,
también notará un archivo llamado component.spect.ts
ya incluido en sus carpetas del proyecto.
Y también, si va al archivo package.json,
verá que ya hay soporte para las pruebas angulares incluidas allí.
Entonces, si entra en las dependencias de desarrollo, verá que el núcleo de jazmín,
el reportero de especificación de jazmín, los módulos npm relacionados con karma y
karma ya están instalados dentro de su aplicación angular
que es andamio por Angular CLI.
Por lo tanto, tenemos todas las cosas y lugar para
nosotros para seguir haciendo nuestras pruebas para nuestra aplicación angular.
Entonces, si miras a tu alrededor verás que hay
un archivo llamado test.ts en tu carpeta fuente,
así que abramos el archivo test.ts.
También verá que hay otra carpeta aquí llamada a e2e.
Volveremos a eso en el próximo ejercicio.
Pero en la carpeta test.ts, verás que aquí es donde
tu soporte karma está siendo configurado aquí.
Así que entrando en este archivo test.ts, por defecto,
cuando use el soporte angular CLS para test,
ejecutará las pruebas para todos los componentes y
servicios que están incluidos en su aplicación angular.
Ahora, voy a ilustrar cómo hacer pruebas para
un componente específico, el MenuComponent.
Así que quiero restringirme para usar solo el archivo.spec del componente de menú y
hacer las pruebas solo para el componente de menú.
Entonces, entra en el archivo test.ts.
Una forma de configurar la prueba CLI angular para ejecutar la prueba solo para
un componente específico es ir a esta línea aquí,
que dice contexto const y luego cambiar esto a menú,
puede ver /menu\ .component y spec.ts file.
Anteriormente era solo el archivo/\ .spec.ts, lo que significaba que
ejecutará todos los archivos de especificación que están allí en la carpeta de origen del proyecto.
Entonces, en este momento, especificando esto aquí,
estoy interesado en ejecutar la prueba solo para el archivo de especificación del componente de menú aquí.
Ahora esto lo descubro buscando en el desbordamiento de la pila
donde encontré a alguien dándome la respuesta a esto,
apuntando a algún recurso en Angular CLI, y así
así es como descubrí que esta es la forma de restringir
la prueba al archivo de prueba de un componente específico.
Así que después de hacer un cambio en el archivo test.ts, vamos a guardar el cambio.
Ahora, intentaremos ejecutar nuestra prueba en el componente de menú.
Así que como ves, en el componente de menú, ya tenemos el archivo menu
componente.spec.ts, que ya contiene algún código.
Vamos a tratar de ejecutar esta prueba y ver qué sucede.
Al ir a la terminal, agregue el prompt, escriba ng test, y este
dará como resultado una CLI angular que inicie la prueba para el componente de menú.
Entonces, cuando escriba esto y presione Return,
, entonces Angular CLI comenzará a compilar su aplicación angular.
También abrirá una ventana del navegador, en mi caso abrirá una ventana
del navegador Chrome y luego usará esa ventana del navegador para ejecutar la prueba.
Y ves que en la parte posterior, tienes la ventana del navegador Chrome ejecutándose y
está llena de rojo y un montón de palabras allí.
La misma información también se imprimirá en la ventana de la consola,
y de esto puedo ver que mi prueba no se ejecutó correctamente.
Hay algo que no está configurado correctamente en mi archivo de prueba, así que tendré que ir y
editar mi archivo de prueba para incluir el soporte adecuado para ejecutar esta prueba correctamente.
Así que vayamos al archivo spec.ts del componente de menú y
luego preparemos nuestra prueba en consecuencia.
Ahora podemos dejar la prueba ng corriendo justo aquí.
Cada vez que realice cambios en el archivo mini component.ts o
el archivo mini component.spec.ts y
guarde los cambios, esta prueba se ejecutará automáticamente en ese momento.
Entonces, vamos al archivo MenuComponent.spect.ts.
Al ir al archivo MenuComponent.spect.ts,
entendemos que el archivo spect utiliza la sintaxis de Jasmine para describir la prueba.
Así que ya notaste que hay algo aquí
que comienza con describir y luego hay una función definida allí.
Así que esto es a lo que me refería cuando hablé antes sobre la sintaxis de Jasmine.
Y también si te desplazas hacia abajo verás un o algo así allí.
Y además, verás algo llamado beforeEach, aquí.
Examinemos este archivo con un poco más de detalle para entender cómo se configura este archivo
, y cómo se configura esta prueba en este archivo en particular.
Así que dentro de este archivo de prueba, se dará cuenta de que
estamos importando aquí un conjunto de clases de Angular core testing.
Así que este módulo le permite proporcionar el soporte de pruebas para
su aplicación angular, y le permite diseñar la prueba para su componente.
Entonces verá que estoy importando async y
ComponentFixture y TestBed de esta biblioteca de pruebas.
Voy a llamarlo biblioteca de pruebas.
También ve que el MenuComponent también se importa aquí.
Ahora, una vez que comprendamos estos dos,
vamos a caminar por el código para entender lo que estamos tratando de hacer aquí.
Así que, aquí, como usted espera, esta descripción aquí es
especificando que esta función en particular está describiendo,
Una prueba basada en Jasmine que estamos especificando para nuestra aplicación Angular.
Así que cuando mires la descripción aquí,
verás que esto incluye todo este código aquí.
Así que esto es parte de un solo conjunto de pruebas que estamos ejecutando son nuestro componente de menú
.
Así que dentro de la descripción, verá que hay una cadena aquí.
Esto especifica este conjunto particular de pruebas que está ejecutando aquí.
Entonces, dice en el componente de menú.
Así que aquí puede especificar cualquier cadena que desee.
Puede usar esto como una descripción para
especificar lo que está haciendo este conjunto particular de pruebas.
Así que aquí, me voy a quedar con una cosa antes.
Estamos tratando de probar el componente de menú.
Y después de eso, verá que estamos especificando una función addo aquí.
Dentro de esta función addo, vamos a construir la prueba.
Para nuestro MenuComponent aquí.
Así que después de esto, verá que estamos declarando una variable llamada componente,
que es del tipo MenuComponent.
De vez en cuando, también estamos declarando una variable de fixture,
que es del tipo ComponentFixture.
Que es del tipo MenuComponent.
Ahora, ¿por qué es esto interesante?
Ahora, dentro de nuestra aplicación Angular,
tenemos el MenuComponent que ya hemos diseñado.
Así que en este archivo de prueba,
vamos a crear ese MenuComponent usando el testBed angular,
y luego vamos a llevar a cabo las pruebas en el MenuComponent.
Así que vamos a aislar el MenuComponent, y
luego llevar a cabo pruebas unitarias en ese componente específico.
Ahora, aquí es donde las utilidades angulares de prueba
que vienen con soporte usando TestBed.
El TestBed me permite configurar el entorno dentro del cual
puedo probar mi componente angular.
Así que aquí, verá que estamos diciendo TestBed y
luego llamando al método del módulo de configuración de prueba de la clase TestBed aquí.
Y dentro de este módulo de prueba de configuración,
puedes declarar un montón de cosas, y me verás agregando más aquí.
Esto actúa exactamente como la configuración del módulo NG
que usted hace para nuestro módulo en allí.
Así que toda la información que necesita para
configurar el MenuComponent se declarará aquí.
Entonces, la parte del modelo NG que vio en el módulo de la aplicación,
tipo similar de sintaxis se puede usar aquí para declarar el soporte para
probar el MenuComponent aquí.
Y también después de esto, verá esta función llamada a CompileComponents.
Así que este método compilará el MenuComponent y
lo preparará para hacer las pruebas.
Tenga en cuenta también, que todo esto, esta función aquí,
está encerrado dentro de algo llamado asíncrono aquí.
Ahora, ¿por qué necesitamos este asincrónico?
Ahora, porque la preparación de los componentes usando este método
CompileComponents lleva algo de tiempo.
Y hasta que esto se complete, no podemos continuar con las pruebas.
Entonces, usando el módulo asíncrono, esencialmente estamos especificando que
voy a esperar a que todo esto se complete antes de continuar.
Entonces, el módulo asynch como ves,
envuelve una función de prueba dentro de una zona de prueba asíncrona.
Entonces, lo que esto significa es que esta prueba completará automáticamente
cuando se realicen todas las llamadas asincrónicas dentro de esta zona.
Así que esto es lo que hace el uso de la asíncrona que tenemos aquí.
Entonces, lo que esto significa es que puedes usar esta función de sincronización,
ya sea en el antes de cada uno o en el también, por lo que dentro de la misma, nuestra declaración.
Entonces, cuando vea dentro del también, verá que puede usar el asíncrono.
Entonces, en caso de que tenga alguna operación aquí que se realice asincrónicamente.
Entonces debe esperar a que esas operaciones se completen para que esa prueba se complete.
Entonces, por ejemplo, si está llamando a un servicio y espera a que
el servicio devuelva el valor, entonces.
Todo lo que necesita para completar antes de que pueda continuar adelante.
Entonces, esos están habilitados mediante el uso de este asincrónico, para rodear esta función aquí.
Ahora, además, el segundo AntesEach, ahora hemos separado
esto en dos separados antesEach aquí, porque queremos que esto se complete.
Y este CompileComponents va a tomar una cierta cantidad de tiempo,
especialmente si su componente está usando una plantilla externa,
como lo hacemos en nuestro MenuComponent.
Por lo tanto, requiere algún tiempo para que la plantilla externa se prepare para que
mis pruebas continúen.
Por lo tanto, tenemos que esperar a que todo esto se complete.
Así que es por eso que después de que esto esté completo,
entonces vamos a llegar a la segunda parte donde vamos a
obtener algunas referencias a algunos valores del banco de pruebas.
Ahora, ¿qué es esto BeforeEach función que estás haciendo aquí?
Lo que BeforeEach significa es que lo que declare dentro de aquí,
esa función se ejecutará beforeEach test,
que va a especificar más adelante usando el it.
Así que usando esto BeforeEach, puede configurar la configuración
inicial para que su prueba continúe hacia adelante.
Así que significa que aquí, estamos configurando nuestro TestBed,
preparando nuestro componente de menú y luego configurando algunas cosas para
nuestro componente de menú, antes de proceder a llevar a cabo la prueba.
Así que para cada una de las pruebas que va a especificar usando un aquí,
estos antes de cada uno lo que especifique en esto antes de cada uno,
se ejecutará antes de que se lleve a cabo la prueba.
Así que aquí como pueden ver estoy preparando el TestBed.
Luego, después, estoy obteniendo acceso al accesorio.
Así que estoy usando TestBed, estoy diciendo CreateComponent y MenuComponent.
Así que esto me devolverá una referencia al MenuComponent que
estoy creando dentro de mi script de prueba aquí y
luego obtendré una referencia a eso, porque necesitaré una referencia a
que para hacer algunas manipulaciones en ese componente allí.
Además, desde el accesorio, estoy obteniendo un acceso a la instancia de componente
que está siendo creada por mi accesorio de componente aquí.
Así que como puede ver, el accesorio del componente del tipo MenuComponent y
luego llamando al ComponentInstance, me da acceso a ese componente
de menú específico que he creado dentro del TestBed para llevar a cabo las pruebas unitarias.
Ahora, después de esto llamamos esto DetectChanges.
Ahora, lo que esto significa es que esto continuará adelante sólo después de que todos los cambios
sean completados, y luego reconocer que los cambios se han completado.
Así que esto activará un ciclo de detección de cambios para este componente.
Así que lo que esto significa es que esto asegurará que has hecho cualquier cambio
antes, todos los cambios son detectados y
todo se estabiliza antes de que puedas continuar con tu prueba.
Ahora, después de esto, vamos a usar nuestro para configurar nuestra primera prueba aquí.
¿Cuál es la primera prueba que estamos haciendo aquí?
La primera prueba,
lo que vamos a probar es asegurarnos de que el componente ha sido creado.
Entonces, dentro de esto aquí, estoy usando la sintaxis de Jasmin y lo estoy diciendo.
Y luego aquí puede dar una descripción en forma de una cadena
para especificar lo que esta prueba realmente está probando.
Entonces, lo que estamos diciendo es,
estamos probando para ver si el componente ha sido creado o no.
Entonces, para hacer eso, estoy diciendo que debería crear un significado que,
esta configuración aquí debería haber creado el componente correctamente.
Así que es por eso que dentro de aquí, estoy usando este método llamado expect.
Entonces, el método esperado dentro de aquí toma un valor aquí, y
luego puede probar para ver si este valor satisface algo.
Así que aquí estamos diciendo a BeTruthy, lo que significa que este valor particular debe ser verdadero.
Eso es lo que se especifica por este método llamado aquí ToBtruthy.
También puedes decir toBefalsy, lo que significa que debe evaluarse como falso.
Pero en este caso,
estamos probando para asegurarnos de que el componente se ha creado correctamente.
Así que es por eso que estamos diciendo que esperemos a Truthy aquí.
Así que esta es una prueba simple que estamos haciendo para asegurarnos de que nuestro componente
se está creando correctamente.
Pero como nos damos cuenta cuando ejecuto esta prueba, no se está ejecutando correctamente.
Echemos un vistazo rápidamente y veamos cuál es el problema dentro de
nuestra creación de componentes en la ventana de la consola allí.
Volviendo a la ventana de la consola, déjame mirar hacia atrás y
ver dónde está el problema.
Y estoy empezando a notar que esto está especificando que no parece
reconocer algunas de las cosas que mi componente está usando.
En particular, está diciendo que el MDSpinach
es algo que no reconoce,
el MDGetGridList y algunas otras cosas.
Eso inmediatamente me sugiere que necesito hacer algunas configuraciones
más dentro de mi archivo de prueba antes de que mi prueba pueda ejecutarse correctamente.
Entonces, volvamos a nuestro archivo de especificaciones y hagamos algunos cambios en él.
Volviendo a nuestro archivo de especificaciones,
de nuestro recuerdo de cómo creamos la plantilla.
Sabemos que dentro de la plantilla teníamos un enlace de router en la plantilla
del MenuComponent.
Así que necesito soporte para el enrutamiento con el fin de reconocer ese enlace del enrutador
que usamos dentro del archivo MenuComponent.html.
Así que aquí es donde voy a importar
otro soporte de prueba proporcionado
llamado como routerTestingModule,
que está disponible en la biblioteca angular/router/testing aquí.
Así que este módulo de prueba del router me permitirá
configurar algunos aspectos sobre mi router.
Veremos que la forma en que usamos esto es un poco diferente del módulo de router
que hemos utilizado en nuestra aplicación.
Así que vamos a importar el módulo de prueba de enrutamiento, también usted nota
que estamos usando algunas animaciones, y
también usando el componente de material angular dentro de nuestra plantilla.
Así que necesito importar
el browserAnimationsModule en mi archivo de prueba.
Entonces esto viene del angular/plataforma/navegador.
Ahora notarás que tenemos que hacer esto explícitamente aquí simplemente porque
en la aplicación Angular real todo esto estaba en el módulo de la aplicación,
y por lo que estaba disponible para los componentes.
En este momento estamos probando este componente, el MenuComponent en aislamiento, por lo que
es por eso que no sabe sobre todas estas cosas, así que
necesitamos especificar explícitamente todas estas cosas aquí.
Así que voy a importar eso desde la animación del navegador de la plataforma de mensajería instantánea aquí.
Así angular.platform.browser animaciones importando las animaciones del navegador
módulo aquí.
Permítanme incluir el módulo de capa flexible, por lo que
incluiré Angular FlexLayout.
Así que estos son necesarios porque los necesito en la plantilla,
voy a importar también ese plato de,
compartido/plato porque como verá más adelante,
necesito configurar, A,
dishService porque mi menuComponent
depende de la dishService así
necesito que también en su lugar.
Aunque verán que voy a parar eso.
Voy a explicar eso en poco tiempo, y también necesito importar algunas cosas más.
Voy a importar DISEÑAS de,
recuerda que usamos esta constante llamada DISETS
que exportamos desde el archivo shared/dishes.ts.
Necesitaré eso para configurar algunas cosas más.
También voy a importar el BaseURL.
Que declaré en el archivo url, compartido/base
.
Y también, necesito importar
el Observable de,
rxjs, barra, Porque
también usaré Observable un poco más tarde, cuando configure algunas cosas.
Así que ahora, he importado todas estas cosas.
Al entrar en la configuración TestBed, verá que esta parte
es exactamente como el decorador del módulo del motor que tenemos en el módulo de la aplicación.
Así que aquí es donde también puedo usar las importaciones solo
como hice con el módulo del motor.
Y dentro de las importaciones, voy a importar el módulo BrowserAnimation
porque eso es algo que l requiere, y
luego también importar el módulo FlexLayout.
Y también el routerTestingModule porque
necesitaría el routerTestingModule para configurar algunas cosas.
Ahora, cuando usa el routerTestingModule, necesita usar este método
llamado WitRoutes en lugar de usar ForRoot como usamos con el módulo del router aquí.
Así que dentro de este WiThrough puede especificar algunas rutas
predeterminadas que necesita para su aplicación específica aquí.
Solo voy a configurar una sola ruta aquí,
y eso es lo suficientemente bueno para mí para probar este módulo aquí.
Así que solo voy a decir ruta: 'menu',
y componente: menuComponent.
Dado que las plantillas MenuComponent están utilizando ciertos componentes de material,
vamos a seguir adelante e importarlos.
Así que vamos a importar MatGridListModule
de @angular /material/grid-list y
también MatProgressSpinnerModule de
@angular /material/progress-spinner.
Y una vez que los hayamos importado, sigamos adelante y
los incluyamos en las importaciones allá abajo.
Así que vamos a añadir en MatGridListModule y MatProgressSpinnerModule.
Y eso es todo lo que necesito para que
estas importaciones particulares se configuren aquí.
Así que junto con las importaciones, tenemos las declaraciones donde tengo
el MenuComponent que se usa aquí, también puedo configurar los proveedores aquí.
Así que necesito configurar los proveedores aquí.
Ahora aquí es donde vamos
para crear algunos talones aquí, así que
voy a decir proporcionar: DishService.
Ahora, el DishService que vamos a usar aquí no va a ser el verdadero
DishService.
Cuando está probando un componente, no desea usar un servicio real.
En su lugar, corre el riesgo de tapar el servicio, y
luego usa un stub DishService, que voy a llamar como DishServiceTube.
Así que voy a decir, useValue: dishServiceTube.
Así que esta sería una función de stub que usaré en orden
para marcar el DishService aquí.
Así que esa es una de la que voy a hacer uso.
Y también el segundo que voy a usar
es baseURL,
que voy a usar el valor como el baseURL
que ya hemos importado anteriormente.
Entonces, ahora, con esto, realmente he configurado mi módulo de prueba,
, así que note que la forma en que especificamos esto es exactamente como la forma
especificamos el decorador del módulo NG para nuestro módulo de aplicación.
Y aquí, solo estamos configurando aquellos que son requeridos por MenuComponent, por lo que
no tengo los otros que usamos en el módulo de la aplicación en sí.
Así que así es como vamos a configurar el módulo de prueba.
Ahora lo único que falta es este DishServiceTube.
Así que lo que voy a hacer es
implementar una función aquí y
llamada que permita DishServiceTube
ser un simple objeto JavaScript aquí,
que voy a dejar que actúe en
lugar del servicio real.
Podemos eliminar servicios como este como se ve aquí.
Así que dentro de aquí, solo voy a
proporcionar una función simple,
la función getDish aquí,
que devolverá Observable del tipo de matriz Dish.
Entonces, así es exactamente como se configuró el valor devuelto allí.
Y voy a devolver
un observable de platos aquí.
Así que usando esta función de código auxiliar aquí,
lo que estoy haciendo es estoy desbaratando el DishService, y
luego configurándolo con este método que necesito para
mi caché, diciendo getDishS, y cuando se llama a este método,
solo voy a devolver este valor.
Los platos constantes, aquí.
Así que de esta manera, ahora puedes ver cómo estoy controlando lo que se está suministrando
al componente desde un stub DishService que acabo de crear aquí.
Así que así es como crearás talones para tu DishService.
El otro enfoque que podemos usar para
casos en los que estamos usando servicios se llama como usando el espía.
Jasmine admite algo llamado Spy, que nos permite espiar en llamadas de función,
y luego capturar las llamadas de función, y luego responder a esas llamadas de función.
Así que esa es otra forma de usar un servicio falso en lugar del servicio real.
Así que ahora somos capaces de controlar lo que se está suministrando a nuestro componente de menú.
Así que después de estas modificaciones, entonces
vamos a bajar a nuestro antes de cada método aquí.
Después de la asincrónica, lo que voy a hacer
es que me apoderaré del DishService.
Así que ven que estoy usando el banco de pruebas y luego usando el método get
del banco de pruebas para obtener el servicio de DishService que se ha creado aquí,
de este trozo particular que hemos declarado aquí en los proveedores.
Así que esto me da una referencia al DishService para que
pueda llamar a los métodos del DishService donde quiera que lo necesite aquí.
Así que después de hacer estos cambios, vamos a guardar los cambios y
luego ver cómo nuestra CLI angular ejecutará esta prueba después de estos cambios,
y si nuestra prueba será exitosa en este punto o no.
Así que guardemos los cambios.
En el momento en que guardes los cambios notarás que tu prueba NG
empezará a volver a ejecutar nuestra prueba.
Entonces compilará la aplicación y luego volverá a ejecutar la prueba.
Y listo, nuestra prueba pasó con éxito después de
haciendo los cambios en nuestro archivo component.spec.ts.
Así que nuestra primera prueba, lo que significa que ahora somos capaces de crear un componente de menú
desde nuestro menú, component.spec.ts archivo allí.
Así que nuestra configuración de prueba está funcionando bien.
Ahora puedo entrar y hacer pruebas más intensas dentro de mi componente de prueba.
Volviendo a ese archivo component.spec de menú, permítanme agregar otra prueba.
Ahora ves que debido a que ahora tengo un servicio establecido aquí
que está devolviendo este valor de los platos, ahora puedo hacer uso de mi DishService,
al que tengo la referencia aquí.
Inside fue antes de cada uno, y luego llame al método GetDRICES y
luego podré obtener el valor.
Y eso estará disponible dentro de mi componente de menú que acabo de crear.
Así que mi MenuComponent ahora debería tener acceso a la constante de platos que
se le ha suministrado a través de esta parada de servicio de alimentos.
Así que ahora puedo probar para ver si la variable de platos dentro de mi
MenuComponent realmente está recibiendo los valores correctamente o no.
Así que entrando, déjame crear otra prueba aquí.
Así que voy a crear una prueba aquí, Con el it,
como viste antes, así como la anterior.
Esta segunda prueba voy a llamar así como
platos, Artículos deben ser 4,
porque los platos constantes que declaramos en
el archivo shared.platos tiene cuatro platos en la constante allí.
Entonces, cuando mi variable de platos dentro de mi archivo MenuComponent o
ts se inicializa llamando al servicio de alimentos.
Debería haber recibido esos cuatro platos y
se inicializó con esos cuatro platos.
Así que voy a llevar a cabo algunas pruebas en ese plato variable allí.
Entonces, ¿cómo obtengo acceso a la variable de platos aquí?
Así que yo diría que los platos deben ser 4, y
entonces declararé una función de flecha aquí.
Y dentro de esta función de flecha voy a especificar
las diversas pruebas que voy a llevar a cabo.
Así que aquí voy a decir ahora esperar (componente.,
y observe que automáticamente me da acceso
a esta propiedad de platos desde el MenuComponent.
Así que puedo decir que component.platos, y luego puedo probar
para ver que la longitud de esa matriz de objetos JavaScript debería ser.
Así que aquí es donde uso el método ToBe de Jasmine aquí.
Y luego puedo especificar el valor 4,
porque estaba suministrando 4 platos en mis platos constante
que he declarado en el archivo shared.platos allí.
Así que esa es la primera prueba que voy a llevar a cabo,
esto debería ser cierto.
De lo contrario, la configuración no funcionó correctamente, así que
sé que mi código no funciona correctamente.
Pero estoy seguro de que esta prueba debería funcionar correctamente.
Si quieres estar seguro,
vamos a guardar los cambios y luego ir a ver nuestra prueba ejecutándose.
Al ir a esa terminal,
ves que ahora mi aplicación se está recompilando, y la prueba se ejecuta.
Y observe todos los greens en la ventana de la terminal.
Dice ejecutado 1 de 2 éxito, ejecutado 2 de 2 éxito.
Lo que significa que mis dos pruebas se ejecutaron con éxito.
Si miro mi navegador, por lo que ve que el MenuComponent,
ambas pruebas son exitosas.
Permítanme crear algunos más y
agregarlos a ese conjunto de segundo grupo de pruebas que estoy creando allí.
Al ir al archivo menu_component_spec.ts, agregaré uno más.
Voy a decir esperar componente.,
y voy a decir platos [1].
Recordemos que el nombre del primer plato era,
Así que eso es lo que voy a probar, los platos [1] .name.
Así que así es como puedo probar para ver si está recibiendo los valores correctamente.
¿Cuáles son todas las formas que puedo probar?
Si pongo un punto allí, me dará una sugerencia de todas las posibilidades aquí.
Así que diré, también volveré a usar el método ToBe aquí.
Y entonces el segundo nombre del plato es,
Justo eso allí, así que ese es el segundo lanzador que voy a llevar a cabo.
Entonces, si mi código se ejecutó correctamente, entonces esto también debería pasar.
Del mismo modo, permítanme poner en uno más aquí.
Así que voy a decir esperar,
component.Platos y voy a decir 3.
Y aquí, la propiedad
destacada debería ser Falsy.
Que usted debe ser falso, no es cierto en este caso, así que permítanme añadir una más.
Puedes empezar a añadir más si quieres,
juega con él hasta que estés satisfecho.
También lo hacen esas adiciones. Permítanme guardar los cambios que he hecho
aquí, vamos a ver si esta prueba se ejecuta correctamente.
Y volviendo a mi terminal, ves que mi prueba se está ejecutando de nuevo.
Ves que ambas pruebas fueron exitosas,
ahora voy a hacer que una de esas cosas falle.
Así que voy a entrar y cambiar esto a verdad.
Ves, esa es la diversión de jugar con código.
Voy a cambiar esto a verdad y sé que esta prueba va a fallar.
Así que guardemos los cambios.
Echando un vistazo a la terminal, allí verá que la prueba ha fallado.
Usted ve todo este rojo aquí, lo que significa que la segunda prueba no pasó correctamente.
Y si te desplazas hacia atrás, verías que esta prueba en particular falló,
porque en algún lugar allí abajo dirá que no lo hizo.
Vale, mira esta declaración aquí dice que espera que sea falso,
, así que es por eso que falló.
Así que no se suponía que fuera cierto, pero dije que debería ser cierto, y
obviamente la prueba es incorrecta, así que es por eso que la prueba falló.
Así que así es como puedes incluso probar para ver si la prueba falla,
si también pediste las cosas equivocadas.
Pero de nuevo, déjame volver atrás y corregir eso una vez más.
Así que volviendo a mi, Archivo, los cambiaré
de nuevo a falsy, porque quiero que esta prueba se ejecute correctamente.
Ahora no estamos satisfechos todavía.
Ahora, en esta prueba particular, solo estoy probando la variable de platos
que está dentro de mi MenuComponent.
¿Cómo hago para jugar con la plantilla en sí?
Así que aquí es donde necesitamos más ayuda de Angular.
Para llevar a cabo algunas pruebas en la plantilla, voy a entrar y
tirar un par de importaciones más aquí.
Así que voy a mi parte superior de este archivo, menu_component_spec.tsfile.
Voy a importar, Uno
más llamado By, que es un método.
Me verás usando esto en poco tiempo.
Esto debe importarse desde, Angular,
/platform-browser.
Y también, voy a importar uno más que es un elemento de depuración.
El elemento de depuración me permite obtener acceso al DOM para que
pueda llevar a cabo pruebas en los elementos DOM directamente.
Así que ahí es donde voy a importar esto, el código angular aquí, por lo que estos dos.
Así que agregue el By y el DebugElement a las importaciones, y
luego una vez que haga eso, caminaremos hacia abajo en el código aquí.
Y luego agregaremos en una prueba más donde vamos a entrar en el DOM y
buscar uno de los elementos del documento.
Así que lo diría, así que una prueba más aquí,
¿qué va a hacer esta prueba?
Para esta prueba, voy a especificar
la prueba como debe usar platos en la plantilla.
Estoy diciendo algo aleatoriamente aquí,
porque solo quiero verificar que la variable de platos,
lo que esté haciendo disponible, se está usando en la plantilla correctamente.
Así que esa es la parte que estoy configurando, y
luego la segunda parte es la función de flecha, y
dentro de esta función de flecha voy a proporcionar el código para la siguiente prueba.
Así que dentro de esta función de flecha lo que voy a hacer
es primero llamar al accesorio y
luego detectar cambios.
Y luego después de eso voy a decir let de:,
Es un DebugElement.
A través de esto voy a obtener acceso al DOM y
, entonces el elemento sería HTMLElement.
Así que quiero obtener acceso a uno de los HTMLElements de mi DOM.
Entonces, ¿qué elemento quiero?
Así que para hacer eso, obtendré acceso al,
DebugElement diciendo fixture y DebugElement.
Entonces esto me permite obtener acceso a los elementos de mi DOM aquí para DebugElement.
Y luego puedo consultar y luego elegir solo aquellos que serán de interés para mí.
Así que voy a consultar y luego pediré usando el By.
Así que observe dónde estoy usando el By que he incluido importándolo.
So By, el By admite un montón de métricas por las cuales puedo
pedir acceso a elementos particulares en el DOM.
Así que como puede ver, me dirá qué puedo importar y
luego .css me permite obtener acceso
para que coincida con los elementos del selector css dado.
Entonces, ¿cuál es el selector css que voy a usar?
Sé que hay un elemento h1, elemento html en el DOM y
que voy a obtener acceso al primer elemento h1 del DOM.
Y uno de los elementos h1 allí es el que
va a mostrar el nombre de cada plato allí.
Mira hacia atrás y ves que dentro de la línea de tiempo de cuadrícula usando un h1 y
que h1 contiene el nombre del plato allí.
Así que voy a conseguir eso y
luego voy a obtener un elemento y luego diría de,
del elemento de depuración, y luego diría nativeElement.
Y eso me da acceso al elemento específicamente en el DOM
al que me estoy refiriendo y que he seleccionado usando esta declaración anteriormente.
Entonces, cuando consulto el DOM y luego digo, devuélveme todos los
aquellos que están usando la etiqueta h1 para el elemento HTML.
Y obtengo acceso a eso, y puedo consultar y
decir esperar (el.textContent).
Así que estoy buscando el contenido dentro de este h1 en mi plantilla
contenido fijo y luego diré toContener.
Así que este es otro método, toContener, este es un método Jasmine llamado toContener.
Esto comprueba si contiene un valor particular,
y luego verificaré platos (0) .name.
Entonces, ¿se creó el primer plato en el DOM y se agregó al DOM?
Si mi plantilla funciona correctamente, entonces eso debe estar presente en el DOM.
Entonces eso es lo que voy a verificar para ver si el mosaico de cuadrícula correspondiente a
el primer DISH se ha creado y agregado al DOM o no.
Así que digo platos (0) .name, y digo en mayúsculas.
Recordemos que utilicé la tubería en mayúsculas para mostrar el nombre
del DISH convirtiendo el nombre del plato en
todas mayúsculas en el mosaico de cuadrícula en el componente de menú.
Así que eso es lo que voy a comprobar, vale, así que solo estoy buscando
solo uno de ellos.
Usted puede llevar a cabo muchas de esas pruebas, puede comprobar
platos (1) .name y luego platos (2) .name y más si lo desea.
Solo estoy ilustrando un ejemplo de cómo acceder a los elementos del DOM y
luego verificar lo que contienen allí.
Así que esta es una prueba que voy a llevar a cabo aquí, así que déjame guardar los cambios,
y luego ver si la prueba se ejecuta correctamente.
Entra en esa terminal y cuando se ejecuta la prueba,
ves que mi primera prueba fue exitosa, la segunda prueba fue exitosa,
y la tercera prueba también fue exitosa, maravillosa.
Ahora, déjame hacer que la tercera prueba falle.
Al ir al archivo menucomponentspec.ts,
voy a eliminar esto en mayúsculas, y luego llevar a cabo la misma prueba.
Verá que esta prueba fallará, guarde los cambios.
Y cuando se ejecute la prueba, verá que la tercera prueba fallará.
Porque estoy haciendo que falle comprobando si hay algo incorrecto allí y
ahí tienes, la tercera prueba falló aquí.
Así que así es como puedes comprobar si ciertas cosas que
se supone que están allí están correctamente o no.
¿Por qué es este caso, por lo que puede ver aquí, la razón por la que esta prueba falló.
Se espera que esto esté en el DOM,
pero en su lugar esto es lo que está en el DOM en el elemento h1 en el DOM.
Así que esa es la razón por la que la prueba falló aquí.
Así que volviendo atrás déjame corregir el error y
entonces cuando vuelva a ejecutar la prueba, ahora deberías ver que la prueba pasa con éxito.
Volviendo a la terminal verá que cuando esta prueba se ejecute ahora
se ejecutará correctamente.
Y ahí tienes, las tres pruebas son aprobadas por mi aplicación.
Además, mirando el navegador, puede ver que las tres pruebas
se ejecutaron con éxito en el archivo de plantilla de componentes de menú y
también en el componente de menú en sí.
Ahora, obviamente, esta no es necesariamente la prueba más completa, pero
solo quería darle un sabor de cómo iría
sobre la construcción de pruebas dentro de su aplicación Angular.
Si te dejes llevar puedes entrar en todos los archivos spec.ts que tienes y
luego escribir tu propia prueba para cada uno y
cada uno de esos componentes usando el conocimiento que has ganado aquí.
Además, puede leer más sobre las pruebas en la documentación Angular y
luego aprender más formas de llevar a cabo pruebas en su aplicación Angular.
Testing es un campo por sí mismo, así que si necesito enseñarte todo sobre
testing que vendrá un curso completo en sí mismo para Angular.
Y en este curso, solo quería darle un sabor de cómo
llevará a cabo las pruebas en su aplicación Angular.
Y este es un ejemplo de cómo podemos configurar y
realizar una prueba unitaria en uno de los componentes de nuestra aplicación Angular.
Este es un buen momento para que hagas un buen comentario con la prueba de componentes del mensaje.
[MÚSICA]