{"id":22435,"date":"2025-12-04T09:52:10","date_gmt":"2025-12-04T09:52:10","guid":{"rendered":"https:\/\/prometteursolutions.com\/blog\/?p=22435"},"modified":"2025-12-04T09:53:21","modified_gmt":"2025-12-04T09:53:21","slug":"tutorial-de-pruebas-de-angularjs-para-principiantes","status":"publish","type":"post","link":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/","title":{"rendered":"Tutorial de pruebas de AngularJS para principiantes"},"content":{"rendered":"
\n
\n
\n
\n

\u00a1Bienvenido a este tutorial pr\u00e1ctico de pruebas en AngularJS para principiantes!<\/p>\n

Las pruebas son cruciales para construir aplicaciones AngularJS robustas, pero muchos desarrolladores las encuentran desafiantes. Este tutorial pretende hacer que probar c\u00f3digo Angular sea sencillo mediante ejemplos f\u00e1ciles de seguir.<\/p>\n

Siguiendo los principios fundamentales de pruebas sobre aislamiento y simulaci\u00f3n (mocking), obtendr\u00e1s experiencia pr\u00e1ctica creando tests mantenibles que detecten problemas r\u00e1pidamente. Al final, tendr\u00e1s las habilidades esenciales para construir aplicaciones AngularJS de nivel productivo que cumplan con los requisitos de funcionalidad, compatibilidad, confiabilidad y rendimiento.<\/p>\n

Con un enfoque en la simplicidad y la aplicabilidad en el mundo real, este\u00a0Tutorial de Pruebas en AngularJS<\/strong>\u00a0te dar\u00e1 la confianza necesaria para crear aplicaciones AngularJS libres de errores.<\/p>\n

\u00a1As\u00ed que comencemos!<\/p>\n

Herramientas Comunes de Pruebas en AngularJS<\/strong><\/h2>\n
    \n
  • \n

    Cypress<\/strong>\u00a0– Framework de pruebas de extremo a extremo (E2E) que se ejecuta directamente en navegadores modernos.<\/p>\n<\/li>\n

  • \n

    Karma<\/strong>\u00a0– Ejecutor de pruebas (test runner) para pruebas unitarias de c\u00f3digo AngularJS.<\/p>\n<\/li>\n

  • \n

    Protractor<\/strong>\u00a0– Framework de pruebas de extremo a extremo para aplicaciones AngularJS.<\/p>\n<\/li>\n<\/ul>\n

    Aplicaciones AngularJS – Componentes Clave<\/strong><\/h3>\n

    Al construir aplicaciones AngularJS, los desarrolladores trabajan con varios componentes clave que forman la estructura y funcionalidad de la app. Estos componentes trabajan juntos para crear la l\u00f3gica, las vistas y los servicios subyacentes que impulsan la experiencia del usuario.<\/p>\n

    1. Controladores (Controllers):<\/strong>
    \nEstas son funciones JavaScript que proporcionan la l\u00f3gica de negocio detr\u00e1s de las vistas. En el patr\u00f3n de dise\u00f1o MVC, los controladores act\u00faan como el “control”, manejando la entrada del usuario, manipulando datos y decidiendo qu\u00e9 contenido renderizar. En la pr\u00e1ctica, los desarrolladores crean controladores para conectar los \u00e1mbitos (scopes) de AngularJS a las vistas.<\/p>\n

    2. Vistas (Views):<\/strong>
    \nDefinidas usando HTML, las vistas renderizan datos desde los controladores y modelos. Una caracter\u00edstica clave es su uso del enlace de datos (data binding) para actualizarse autom\u00e1ticamente cuando cambian los datos del modelo, lo que elimina la necesidad de actualizaciones manuales.<\/p>\n

    3. Modelos (Models):<\/strong>
    \nPueden ser objetos JavaScript simples o derivarse de un framework de persistencia como Firebase. Su prop\u00f3sito es representar los conceptos de datos de la aplicaci\u00f3n en una estructura adecuada para las vistas.<\/p>\n

    4. Servicios (Services):<\/strong>
    \nLos servicios de AngularJS realizan tareas como llamadas a API sin saturar el c\u00f3digo del controlador. Adem\u00e1s, los servicios pueden compartirse en toda la aplicaci\u00f3n, lo que aumenta la flexibilidad y la reutilizaci\u00f3n.<\/p>\n

    5. M\u00f3dulos (Modules):<\/strong>
    \nLos desarrolladores definen m\u00f3dulos usando\u00a0ng-app<\/code>\u00a0para declarar las dependencias de la aplicaci\u00f3n y el componente de entrada. Este enfoque mejora la organizaci\u00f3n y mantiene una separaci\u00f3n de responsabilidades (separation of concerns).<\/p>\n

    Al aprovechar estos componentes clave, los desarrolladores pueden construir aplicaciones web AngularJS robustas con una clara separaci\u00f3n de responsabilidades entre las diferentes capas. En \u00faltima instancia, la flexibilidad de los componentes de AngularJS permite crear experiencias de usuario complejas e impulsadas por datos.<\/p>\n

    Pruebas Unitarias en AngularJS<\/strong><\/h3>\n

    Las pruebas unitarias en AngularJS son esenciales para construir aplicaciones de alta calidad porque validan que componentes individuales como controladores, directivas y servicios funcionen como se espera.<\/p>\n

    Los beneficios clave incluyen: detectar errores temprano, permitir la refactorizaci\u00f3n segura del c\u00f3digo y simplificar la integraci\u00f3n de c\u00f3digo de diferentes desarrolladores. Por lo tanto, antes de que una aplicaci\u00f3n AngularJS pueda considerarse lista para producci\u00f3n, debe someterse a pruebas unitarias exhaustivas para detectar problemas en la etapa m\u00e1s temprana posible.<\/p>\n

    Como resultado, unas pruebas unitarias robustas conducen a aplicaciones que son m\u00e1s confiables, mejor optimizadas y m\u00e1s alineadas con los requisitos del negocio. Tambi\u00e9n permiten diagnosticar y corregir errores r\u00e1pidamente, dando a los usuarios una mayor confianza en las capacidades de la aplicaci\u00f3n.<\/p>\n

    Fundamentos de las Pruebas Unitarias en AngularJS<\/strong><\/h4>\n

    Al escribir pruebas unitarias para tu c\u00f3digo AngularJS, seguir estos fundamentos garantizar\u00e1 que tu conjunto de pruebas sea robusto, mantenible y sostenible a medida que tu aplicaci\u00f3n evoluciona:<\/p>\n

      \n
    • \n

      A\u00edsla las Dependencias:<\/strong>\u00a0Cada prueba unitaria debe probar un componente espec\u00edfico de forma aislada, sin depender de otros m\u00f3dulos o dependencias externas. Usa mocks, esp\u00edas (spies) y stubs para simular dependencias.<\/p>\n<\/li>\n

    • \n

      Organizar, Actuar, Afirmar (AAA):<\/strong>\u00a0Estructura tu prueba en tres secciones claramente definidas: organiza los datos\/entradas de la prueba, ejecuta la l\u00f3gica a probar (actuar) y afirma que se produjo la salida esperada.<\/p>\n<\/li>\n

    • \n

      Una Afirmaci\u00f3n por Prueba:<\/strong>\u00a0Cada caso de prueba debe validar un comportamiento o salida para facilitar la identificaci\u00f3n de lo que fall\u00f3. Evita afirmaciones que verifiquen m\u00faltiples salidas.<\/p>\n<\/li>\n

    • \n

      Haz las Pruebas Independientes:<\/strong>\u00a0Escribe casos de prueba que configuren sus propios datos de prueba para que puedan ejecutarse de forma independiente y no dependan del orden de ejecuci\u00f3n. Esto es especialmente \u00fatil al ejecutar pruebas en paralelo.<\/p>\n<\/li>\n

    • \n

      Mant\u00e9n las Pruebas Breves y Legibles:<\/strong>\u00a0Divide los casos de prueba extensos en funciones auxiliares m\u00e1s peque\u00f1as que prueben un solo comportamiento o una subunidad de un componente.<\/p>\n<\/li>\n<\/ul>\n

      Seguir estas pautas fundamentales garantizar\u00e1 que tu conjunto de pruebas unitarias de AngularJS permanezca robusto y f\u00e1cil de extender con el tiempo a medida que crece la complejidad de la aplicaci\u00f3n.<\/p>\n

      Configurar tu Entorno<\/strong><\/h4>\n

      Para comenzar con las pruebas unitarias, solo sigue estos pasos:<\/p>\n

      1. Instalar los Requisitos Previos<\/strong><\/p>\n

        \n
      • \n

        Instala Node.js en tu computadora, ya que es el framework sobre el que construiremos.<\/p>\n<\/li>\n

      • \n

        Abre tu editor de c\u00f3digo favorito (por ejemplo, Visual Studio Code, Brackets o Sublime Text).<\/p>\n<\/li>\n<\/ul>\n

        2. Crear la Estructura del Proyecto<\/strong><\/p>\n

          \n
        • \n

          Crea una nueva carpeta llamada “unit-testing” en tu computadora usando el comando\u00a0mkdir<\/code>. Aqu\u00ed es donde almacenar\u00e1s tus archivos de prueba.<\/p>\n<\/li>\n

        • \n

          Abre la carpeta\u00a0unit-testing<\/code>\u00a0en tu editor de c\u00f3digo y abre una ventana de terminal dentro de ella.<\/p>\n<\/li>\n<\/ul>\n

          3. Inicializar el Proyecto e Instalar las Dependencias<\/strong><\/p>\n

          Crea un archivo\u00a0package.json<\/code>\u00a0e instala los paquetes necesarios:<\/p>\n

          \n
          \n
          \n
          \n
          bash<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
          npm<\/span> init\r\nnpm<\/span> i angular --save<\/span>\r\nnpm<\/span> i -g<\/span> karma --save-dev\r\nnpm<\/span> i karma-jasmine jasmine-core --save-dev\r\nnpm<\/span> i angular-mocks --save-dev\r\nnpm<\/span> i karma-chrome-launcher --save-dev<\/pre>\n<\/div>\n
          4. Configurar Karma<\/strong><\/p>\n
            \n
          • \n
            En tu carpeta\u00a0unit-testing<\/code>, crea dos nuevas carpetas llamadas\u00a0app<\/code>\u00a0y\u00a0test<\/code>.<\/p>\n<\/li>\n
          • \n
            Luego, dentro de la carpeta\u00a0unit-testing<\/code>, crea un nuevo archivo llamado\u00a0karma.config.js<\/code>.<\/p>\n<\/li>\n
          • \n
            Abre\u00a0karma.config.js<\/code>\u00a0en tu editor de c\u00f3digo y escribe\u00a0karma init<\/code>. Esto inicializar\u00e1 un repositorio vac\u00edo con algunas configuraciones est\u00e1ndar.<\/p>\n<\/li>\n
          • \n
            Se te har\u00e1n una serie de preguntas sobre c\u00f3mo deseas configurar Karma. Resp\u00f3ndelas seg\u00fan tus preferencias (los valores predeterminados est\u00e1n bien).<\/p>\n<\/li>\n<\/ul>\n
            Pruebas de Extremo a Extremo (E2E) en AngularJS con Protractor o Cypress<\/strong><\/h3>\n
            Las pruebas de extremo a extremo (E2E) simulan c\u00f3mo un usuario real interactuar\u00eda con tu aplicaci\u00f3n de principio a fin. Si bien las pruebas unitarias se limitan a evaluar partes individuales del c\u00f3digo de forma aislada, las pruebas E2E son significativas para detectar problemas que surgen cuando unes esos bloques de construcci\u00f3n en flujos de trabajo completos.<\/p>\n
            Por ejemplo, las pruebas unitarias podr\u00edan validar que un formulario de inicio de sesi\u00f3n y una consulta a la base de datos funcionen como se espera. Sin embargo, las pruebas E2E van m\u00e1s all\u00e1 al iniciar sesi\u00f3n con credenciales reales, hacer clic en diferentes lugares y extraer datos reales.<\/p>\n
            En consecuencia, las pruebas E2E brindan confianza en que tu aplicaci\u00f3n funciona sin problemas en condiciones del mundo real, encontrando brechas que caen entre las pruebas unitarias y de integraci\u00f3n.<\/p>\n
            Beneficios de las Pruebas de Extremo a Extremo<\/strong><\/h4>\n
            Realizar pruebas E2E integrales proporciona varios beneficios importantes:<\/p>\n
              \n
            • \n
              Detecta m\u00e1s errores desde el principio, lo que lleva a un software de mayor calidad.<\/p>\n<\/li>\n
            • \n
              Asegura que todos los componentes trabajen juntos sin problemas, aumentando la confianza.<\/p>\n<\/li>\n
            • \n
              Modela flujos de trabajo de usuarios del mundo real, mejorando la experiencia del usuario.<\/p>\n<\/li>\n
            • \n
              Ahorra tiempo y dinero al corregir problemas antes que despu\u00e9s.<\/p>\n<\/li>\n
            • \n
              Promueve la colaboraci\u00f3n entre equipos que trabajan en diferentes componentes.<\/p>\n<\/li>\n
            • \n
              Automatiza pruebas repetitivas, aumentando la productividad.<\/p>\n<\/li>\n
            • \n
              Acelera el tiempo de llegada al mercado al reducir defectos antes del lanzamiento.<\/p>\n<\/li>\n<\/ul>\n
              En resumen, las pruebas E2E ofrecen un software m\u00e1s robusto y confiable que satisface las necesidades empresariales y de los usuarios al validar la calidad de principio a fin en toda la aplicaci\u00f3n.<\/p>\n
              1. Configurar Cypress para Pruebas E2E<\/strong>
              \nConfigurar Cypress es sencillo:<\/p>\n
                \n
              • \n
                Crea una nueva carpeta de proyecto e inicial\u00edzala:\u00a0npm init<\/code><\/p>\n<\/li>\n
              • \n
                Instala Cypress en la carpeta del proyecto:\u00a0npm install cypress --save-dev<\/code>\u00a0(o\u00a0yarn add cypress --dev<\/code>)<\/p>\n<\/li>\n<\/ul>\n
                \u00a1Y eso es todo! Con Cypress instalado, ahora puedes comenzar a crear y ejecutar pruebas de extremo a extremo para tu aplicaci\u00f3n.<\/p>\n
                2. Instalar Protractor para Pruebas E2E<\/strong><\/p>\n
                Requisito previo:<\/em>\u00a0Node.js debe estar instalado.<\/p>\n
                  \n
                • \n
                  Abre una terminal y escribe:\u00a0npm install -g protractor<\/code><\/p>\n
                    \n
                  • \n
                    Esto instala dos herramientas de l\u00ednea de comandos:\u00a0protractor<\/code>\u00a0(el ejecutor de pruebas) y\u00a0webdriver-manager<\/code>\u00a0(gestiona el controlador web de Selenium).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
                  • \n
                    Verifica la instalaci\u00f3n con:\u00a0protractor --version<\/code><\/p>\n<\/li>\n<\/ul>\n
                    Esto instalar\u00e1 la \u00faltima versi\u00f3n de Protractor globalmente, haciendo que el ejecutor de pruebas y el administrador de Selenium est\u00e9n disponibles desde la l\u00ednea de comandos.<\/p>\n
                    Pruebas de Integraci\u00f3n en AngularJS<\/strong><\/h3>\n
                    Las pruebas de integraci\u00f3n validan que diferentes unidades o componentes de una aplicaci\u00f3n funcionen correctamente cuando se combinan.<\/p>\n
                    Es importante distinguir esto de otros tipos de prueba:<\/p>\n
                      \n
                    • \n
                      Las pruebas unitarias<\/strong>\u00a0se centran en unidades individuales de forma aislada.<\/p>\n<\/li>\n
                    • \n
                      Las pruebas de extremo a extremo (E2E)<\/strong>\u00a0replican flujos de trabajo completos del usuario.<\/p>\n<\/li>\n<\/ul>\n
                      Sin embargo,\u00a0las pruebas de integraci\u00f3n<\/strong>\u00a0confirman que las interacciones entre las unidades integradas funcionan como se espera. Por ejemplo, puede probar que la capa de interfaz de usuario llame y muestre con \u00e9xito datos desde un endpoint de API.<\/p>\n
                      Entonces, mientras las pruebas unitarias examinan m\u00f3dulos individuales y las E2E verifican flujos generales, las pruebas de integraci\u00f3n se centran en verificar las conexiones entre componentes integrados.<\/p>\n
                      Configurar una Prueba de Integraci\u00f3n en Angular<\/strong><\/h4>\n
                      Paso 1: Crear un Nuevo Proyecto Angular<\/strong><\/p>\n
                      Para crear un nuevo proyecto Angular, escribe el siguiente comando en tu terminal:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      bash<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      ng new angular-todo-app<\/pre>\n<\/div>\n
                      Espera a que Angular configure tu nuevo proyecto.<\/p>\n
                      Paso 2: Aprovechar los Archivos de Prueba Generados Autom\u00e1ticamente<\/strong><\/p>\n
                      Angular genera autom\u00e1ticamente archivos de prueba (*.spec.ts) para componentes TypeScript. Para nuestra prueba de integraci\u00f3n, utilizaremos el archivo\u00a0app.component.spec.ts<\/code>\u00a0predeterminado que Angular genera en la carpeta ra\u00edz\u00a0app<\/code>. Este archivo spec est\u00e1 conectado al principal\u00a0app.component.ts<\/code>\u00a0y est\u00e1 preconfigurado para pruebas.<\/p>\n
                      Paso 3: Crear y Configurar un Conjunto de Pruebas (Test Suite)<\/strong><\/p>\n
                      Abre\u00a0app.component.specs.ts<\/code>\u00a0y crea un nuevo conjunto de pruebas con el siguiente c\u00f3digo:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      typescript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      describe<\/span>(<\/span>'TodoList Integration'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\r\n  let<\/span> component:<\/span> AppComponent;<\/span>\r\n  let<\/span> fixture:<\/span> ComponentFixture<<\/span>AppComponent><\/span>;<\/span>\r\n  let<\/span> service:<\/span> TodoService;<\/span>\r\n\r\n  beforeEach<\/span>(<\/span>async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\r\n    await<\/span> TestBed.<\/span>configureTestingModule<\/span>(<\/span>{<\/span>\r\n      imports:<\/span> [<\/span>FormsModule]<\/span>,<\/span>\r\n      declarations:<\/span> [<\/span>AppComponent,<\/span> TodoComponent]<\/span>,<\/span>\r\n      providers:<\/span> [<\/span>\r\n        {<\/span>\r\n          provide:<\/span> TodoService,<\/span>\r\n          useValue:<\/span> {<\/span>\r\n            getTasks<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\r\n              return<\/span> dummyTodos;<\/span>\r\n            }<\/span>\r\n          }<\/span>\r\n        }<\/span>\r\n      ]<\/span>\r\n    }<\/span>)<\/span>.<\/span>compileComponents<\/span>(<\/span>)<\/span>;<\/span>\r\n\r\n    fixture =<\/span> TestBed.<\/span>createComponent<\/span>(<\/span>AppComponent)<\/span>;<\/span>\r\n    component =<\/span> fixture.<\/span>componentInstance;<\/span>\r\n    service =<\/span> TestBed.<\/span>inject<\/span>(<\/span>TodoService)<\/span>;<\/span>\r\n  }<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n\r\nconst<\/span> dummyTodos =<\/span> [<\/span>\r\n  {<\/span>\r\n    id:<\/span> 1<\/span>,<\/span>\r\n    title:<\/span> 'Todo 1'<\/span>,<\/span>\r\n    completed:<\/span> false<\/span>\r\n  }<\/span>,<\/span>\r\n  {<\/span>\r\n    id:<\/span> 2<\/span>,<\/span>\r\n    title:<\/span> 'Todo 2'<\/span>,<\/span>\r\n    completed:<\/span> false<\/span>\r\n  }<\/span>\r\n]<\/span>;<\/span><\/pre>\n<\/div>\n
                      Esta configuraci\u00f3n incluye una configuraci\u00f3n de prueba as\u00edncrona, compilaci\u00f3n de m\u00f3dulos y definici\u00f3n de datos ficticios (dummy data).<\/p>\n
                      Paso 4: Escribir la Prueba de Integraci\u00f3n<\/strong><\/p>\n
                      \n
                      \n
                      \n
                      \n
                      typescript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      it<\/span>(<\/span>'should load todos from service'<\/span>,<\/span> async<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\r\n  fixture.<\/span>detectChanges<\/span>(<\/span>)<\/span>;<\/span>\r\n  expect<\/span>(<\/span>component.<\/span>todos.<\/span>length)<\/span>.<\/span>toBe<\/span>(<\/span>2<\/span>)<\/span>;<\/span>\r\n  expect<\/span>(<\/span>service.<\/span>getTasks<\/span>(<\/span>)<\/span>)<\/span>.<\/span>toEqual<\/span>(<\/span>dummyTodos)<\/span>;<\/span>\r\n}<\/span>)<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
                      Esta prueba activa el enlace de datos y afirma que los datos del componente coinciden con los datos del servicio.<\/p>\n
                      Paso 5: Ejecutar la Prueba<\/strong><\/p>\n
                      Para ejecutar las pruebas de integraci\u00f3n, navega a la ra\u00edz del proyecto en una terminal y ejecuta:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      bash<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      ng test<\/span><\/pre>\n<\/div>\n
                      O para ejecutar un archivo espec\u00edfico:<\/p>\n
                      \n
                      \n
                      \n
                      \n
                      bash<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      ng test<\/span> --include<\/span> app.component.spec.ts<\/pre>\n<\/div>\n
                      Angular configurar\u00e1 el entorno de prueba y reportar\u00e1 los resultados.<\/p>\n
                      Probar Servicios en AngularJS<\/strong><\/h3>\n
                      Los servicios son uno de los bloques de construcci\u00f3n m\u00e1s importantes en las aplicaciones AngularJS, ya que proporcionan l\u00f3gica de negocio reutilizable. Pero, \u00bfc\u00f3mo te aseguras de que tus servicios tengan una cobertura de pruebas robusta?<\/p>\n
                      Esta secci\u00f3n ofrece mejores pr\u00e1cticas para las pruebas unitarias de tus servicios para que puedas:<\/p>\n
                        \n
                      • \n
                        Configurar el framework de pruebas de AngularJS desde cero.<\/p>\n<\/li>\n
                      • \n
                        Simular (mock) efectivamente las dependencias con las que interact\u00faan tus servicios.<\/p>\n<\/li>\n
                      • \n
                        Validar el comportamiento del servicio a trav\u00e9s de especificaciones de prueba (test specs) bien estructuradas.<\/p>\n<\/li>\n
                      • \n
                        Identificar casos de uso relevantes para maximizar la cobertura.<\/p>\n<\/li>\n<\/ul>\n
                        Probar los servicios a fondo descubre fallos temprano y da confianza en que las reglas de negocio hacen cumplir la integridad de los datos.<\/p>\n
                        Probar Controladores en AngularJS<\/strong><\/h3>\n
                        Los controladores son la columna vertebral del comportamiento din\u00e1mico en las aplicaciones AngularJS, conectando la interfaz de usuario con la l\u00f3gica subyacente. Por lo tanto, probar los controladores a fondo previene problemas en la interfaz en el futuro.<\/p>\n
                        Un conjunto de pruebas confiable te permite simular interacciones del usuario y validar que los controladores transformen y presenten los datos correctamente.<\/p>\n
                        Inyectar Servicios en Controladores AngularJS<\/strong><\/h4>\n
                        Al realizar pruebas unitarias de controladores, necesitar\u00e1s simular sus dependencias. Hay dos formas est\u00e1ndar de inyectar estas dependencias:<\/p>\n
                        1. Array en L\u00ednea<\/strong><\/p>\n
                        Define un array en l\u00ednea que enumere las dependencias; \u00fatil para casos simples:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        javascript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        angular.<\/span>module<\/span>(<\/span>'myApp'<\/span>)<\/span>\r\n.<\/span>controller<\/span>(<\/span>'MyController'<\/span>,<\/span> [<\/span>'$scope'<\/span>,<\/span> 'MyService'<\/span>,<\/span> function<\/span>(<\/span>$scope,<\/span> MyService<\/span>)<\/span> {<\/span>\r\n  \/\/ ...<\/span>\r\n}<\/span>]<\/span>)<\/span>;<\/span><\/pre>\n<\/div>\n
                        2. Propiedad\u00a0$inject<\/code><\/strong><\/p>\n
                        Alternativamente, establece una propiedad\u00a0$inject<\/code>\u00a0en la funci\u00f3n del controlador:<\/p>\n
                        \n
                        \n
                        \n
                        \n
                        javascript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
                        angular.<\/span>module<\/span>(<\/span>'myApp'<\/span>)<\/span>\r\n.<\/span>controller<\/span>(<\/span>'MyController'<\/span>,<\/span> MyController)<\/span>;<\/span>\r\n\r\nMyController.<\/span>$inject =<\/span> [<\/span>'$scope'<\/span>,<\/span> 'MyService'<\/span>]<\/span>;<\/span>\r\n\r\nfunction<\/span> MyController<\/span>(<\/span>$scope,<\/span> MyService<\/span>)<\/span> {<\/span>\r\n \/\/ ...<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
                        Ambos enfoques funcionan para simular en pruebas. La clave es enumerar las dependencias expl\u00edcitamente para asegurar que se resuelvan correctamente despu\u00e9s de la minificaci\u00f3n del c\u00f3digo.<\/p>\n
                        Conclusi\u00f3n de nuestro Tutorial de Pruebas en AngularJS<\/strong><\/h3>\n
                        \u00a1Felicidades por completar nuestro tutorial de pruebas en AngularJS! Ahora tienes el conocimiento fundamental y las habilidades para comenzar a construir conjuntos de pruebas robustos para tus aplicaciones AngularJS.<\/p>\n
                        Si bien las pruebas pueden parecer abrumadoras al principio, perseverar con ellas tiene enormes dividendos en estabilidad de la aplicaci\u00f3n, entrega m\u00e1s r\u00e1pida y experiencia de usuario mejorada. Recuerda aplicar las mejores pr\u00e1cticas de pruebas, como el aislamiento, la simulaci\u00f3n y la organizaci\u00f3n legible de las pruebas.<\/p>\n
                        Esto era solo el comienzo. Hay mucho m\u00e1s por explorar, como probar directivas, pruebas de regresi\u00f3n visual y t\u00e9cnicas avanzadas para escenarios de prueba complicados.<\/p>\n
                        La clave es mantener una actitud positiva, comenzar a probar temprano, refactorizar regularmente y pedir ayuda cuando la necesites. Lo m\u00e1s importante es que la pr\u00e1ctica continua consolidar\u00e1 lo que has aprendido y generar\u00e1 confianza real.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                        \u00a1Bienvenido a este tutorial pr\u00e1ctico de pruebas en AngularJS para principiantes! Las pruebas son cruciales para construir aplicaciones AngularJS robustas, pero muchos desarrolladores las encuentran desafiantes. Este tutorial pretende hacer que probar c\u00f3digo Angular sea sencillo mediante ejemplos f\u00e1ciles de seguir. Siguiendo los principios fundamentales de pruebas sobre aislamiento y simulaci\u00f3n (mocking), obtendr\u00e1s experiencia pr\u00e1ctica […]<\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"footnotes":""},"categories":[1159],"tags":[],"class_list":{"0":"post-22435","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-uncategorized-es"},"yoast_head":"\nTutorial de Pruebas AngularJS para Principiantes<\/title>\n<meta name=\"description\" content=\"Aprende a testear aplicaciones AngularJS paso a paso. Gu\u00eda pr\u00e1ctica con ejemplos reales de pruebas unitarias (Karma\/Jasmine), E2E (Protractor\/Cypress) e integraci\u00f3n. Empieza a crear c\u00f3digo robusto y sin errores. \u00a1Descarga ejemplos!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial de Pruebas AngularJS para Principiantes\" \/>\n<meta property=\"og:description\" content=\"Aprende a testear aplicaciones AngularJS paso a paso. Gu\u00eda pr\u00e1ctica con ejemplos reales de pruebas unitarias (Karma\/Jasmine), E2E (Protractor\/Cypress) e integraci\u00f3n. Empieza a crear c\u00f3digo robusto y sin errores. \u00a1Descarga ejemplos!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\" \/>\n<meta property=\"og:site_name\" content=\"blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prometteurSolutions\/timeline\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-04T09:52:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T09:53:21+00:00\" \/>\n<meta name=\"author\" content=\"raman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Iamprometteur\" \/>\n<meta name=\"twitter:site\" content=\"@Iamprometteur\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"raman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\"},\"author\":{\"name\":\"raman\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#\/schema\/person\/a8b19c23ac440968cb8277d1219da48b\"},\"headline\":\"Tutorial de pruebas de AngularJS para principiantes\",\"datePublished\":\"2025-12-04T09:52:10+00:00\",\"dateModified\":\"2025-12-04T09:53:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\"},\"wordCount\":2247,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\",\"url\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\",\"name\":\"Tutorial de Pruebas AngularJS para Principiantes\",\"isPartOf\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#website\"},\"datePublished\":\"2025-12-04T09:52:10+00:00\",\"dateModified\":\"2025-12-04T09:53:21+00:00\",\"description\":\"Aprende a testear aplicaciones AngularJS paso a paso. Gu\u00eda pr\u00e1ctica con ejemplos reales de pruebas unitarias (Karma\/Jasmine), E2E (Protractor\/Cypress) e integraci\u00f3n. Empieza a crear c\u00f3digo robusto y sin errores. \u00a1Descarga ejemplos!\",\"breadcrumb\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/prometteursolutions.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial de pruebas de AngularJS para principiantes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#website\",\"url\":\"https:\/\/prometteursolutions.com\/blog\/\",\"name\":\"blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/prometteursolutions.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#organization\",\"name\":\"blog\",\"url\":\"https:\/\/prometteursolutions.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/prometteursolutions.com\/blog\/wp-content\/uploads\/2021\/04\/new-logo.png\",\"contentUrl\":\"https:\/\/prometteursolutions.com\/blog\/wp-content\/uploads\/2021\/04\/new-logo.png\",\"width\":211,\"height\":60,\"caption\":\"blog\"},\"image\":{\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/prometteurSolutions\/timeline\/\",\"https:\/\/x.com\/Iamprometteur\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#\/schema\/person\/a8b19c23ac440968cb8277d1219da48b\",\"name\":\"raman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/prometteursolutions.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85b952b5d8cf5cdbbb4ea41025b2b84ba089c12d8352f935442901a6c6106dcc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85b952b5d8cf5cdbbb4ea41025b2b84ba089c12d8352f935442901a6c6106dcc?s=96&d=mm&r=g\",\"caption\":\"raman\"},\"url\":\"https:\/\/prometteursolutions.com\/blog\/author\/raman\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial de Pruebas AngularJS para Principiantes","description":"Aprende a testear aplicaciones AngularJS paso a paso. Gu\u00eda pr\u00e1ctica con ejemplos reales de pruebas unitarias (Karma\/Jasmine), E2E (Protractor\/Cypress) e integraci\u00f3n. Empieza a crear c\u00f3digo robusto y sin errores. \u00a1Descarga ejemplos!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial de Pruebas AngularJS para Principiantes","og_description":"Aprende a testear aplicaciones AngularJS paso a paso. Gu\u00eda pr\u00e1ctica con ejemplos reales de pruebas unitarias (Karma\/Jasmine), E2E (Protractor\/Cypress) e integraci\u00f3n. Empieza a crear c\u00f3digo robusto y sin errores. \u00a1Descarga ejemplos!","og_url":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/","og_site_name":"blog","article_publisher":"https:\/\/www.facebook.com\/prometteurSolutions\/timeline\/","article_published_time":"2025-12-04T09:52:10+00:00","article_modified_time":"2025-12-04T09:53:21+00:00","author":"raman","twitter_card":"summary_large_image","twitter_creator":"@Iamprometteur","twitter_site":"@Iamprometteur","twitter_misc":{"Written by":"raman","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#article","isPartOf":{"@id":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/"},"author":{"name":"raman","@id":"https:\/\/prometteursolutions.com\/blog\/#\/schema\/person\/a8b19c23ac440968cb8277d1219da48b"},"headline":"Tutorial de pruebas de AngularJS para principiantes","datePublished":"2025-12-04T09:52:10+00:00","dateModified":"2025-12-04T09:53:21+00:00","mainEntityOfPage":{"@id":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/"},"wordCount":2247,"commentCount":0,"publisher":{"@id":"https:\/\/prometteursolutions.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/","url":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/","name":"Tutorial de Pruebas AngularJS para Principiantes","isPartOf":{"@id":"https:\/\/prometteursolutions.com\/blog\/#website"},"datePublished":"2025-12-04T09:52:10+00:00","dateModified":"2025-12-04T09:53:21+00:00","description":"Aprende a testear aplicaciones AngularJS paso a paso. Gu\u00eda pr\u00e1ctica con ejemplos reales de pruebas unitarias (Karma\/Jasmine), E2E (Protractor\/Cypress) e integraci\u00f3n. Empieza a crear c\u00f3digo robusto y sin errores. \u00a1Descarga ejemplos!","breadcrumb":{"@id":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/prometteursolutions.com\/blog\/es\/tutorial-de-pruebas-de-angularjs-para-principiantes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/prometteursolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial de pruebas de AngularJS para principiantes"}]},{"@type":"WebSite","@id":"https:\/\/prometteursolutions.com\/blog\/#website","url":"https:\/\/prometteursolutions.com\/blog\/","name":"blog","description":"","publisher":{"@id":"https:\/\/prometteursolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/prometteursolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/prometteursolutions.com\/blog\/#organization","name":"blog","url":"https:\/\/prometteursolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/prometteursolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/prometteursolutions.com\/blog\/wp-content\/uploads\/2021\/04\/new-logo.png","contentUrl":"https:\/\/prometteursolutions.com\/blog\/wp-content\/uploads\/2021\/04\/new-logo.png","width":211,"height":60,"caption":"blog"},"image":{"@id":"https:\/\/prometteursolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/prometteurSolutions\/timeline\/","https:\/\/x.com\/Iamprometteur"]},{"@type":"Person","@id":"https:\/\/prometteursolutions.com\/blog\/#\/schema\/person\/a8b19c23ac440968cb8277d1219da48b","name":"raman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/prometteursolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85b952b5d8cf5cdbbb4ea41025b2b84ba089c12d8352f935442901a6c6106dcc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b952b5d8cf5cdbbb4ea41025b2b84ba089c12d8352f935442901a6c6106dcc?s=96&d=mm&r=g","caption":"raman"},"url":"https:\/\/prometteursolutions.com\/blog\/author\/raman\/"}]}},"_links":{"self":[{"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/posts\/22435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=22435"}],"version-history":[{"count":1,"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/posts\/22435\/revisions"}],"predecessor-version":[{"id":22436,"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/posts\/22435\/revisions\/22436"}],"wp:attachment":[{"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=22435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=22435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prometteursolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=22435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}