{"id":13313866,"url":"https://github.com/JandroMejia97/ng-testing","last_synced_at":"2025-03-10T20:33:05.124Z","repository":{"id":63287998,"uuid":"521350993","full_name":"JandroMejia97/ng-testing","owner":"JandroMejia97","description":"This Angular app is used to learn how to make unit tests with Jasmine","archived":false,"fork":false,"pushed_at":"2023-04-03T08:11:16.000Z","size":1407,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-29T19:04:37.291Z","etag":null,"topics":["angular","jasmine","testing","unit-testing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JandroMejia97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-04T17:09:13.000Z","updated_at":"2023-02-08T20:58:15.000Z","dependencies_parsed_at":"2023-02-19T05:16:08.423Z","dependency_job_id":null,"html_url":"https://github.com/JandroMejia97/ng-testing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JandroMejia97%2Fng-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JandroMejia97%2Fng-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JandroMejia97%2Fng-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JandroMejia97%2Fng-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JandroMejia97","download_url":"https://codeload.github.com/JandroMejia97/ng-testing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242921935,"owners_count":20207123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","jasmine","testing","unit-testing"],"created_at":"2024-07-29T18:07:22.425Z","updated_at":"2025-03-10T20:33:04.819Z","avatar_url":"https://github.com/JandroMejia97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pruebas Unitarias en Angular\n\nEn Angular, tenemos 2 herramientas para realizar Unit Tests, por un lado, tenemos a [Jasmine](https://jasmine.github.io/) que es un framework para hacer pruebas. Según su documentación oficial:\n\n\u003e Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.\n\nPor el otro, tenemos [Karma](https://www.notion.so/Servicios-60730fd290b04fcd806c5eede7d0e972), que es un test runner (ejecuta las pruebas), que según su sitio oficial, describen el principal objetivo de esta herramienta cómo:\n\n\u003e Bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and [creative](http://vimeo.com/36579366).\n\nEn sí, Karma corre por detrás, por lo cuál, solo deberíamos enfocarnos en Jasmine, qué es donde escribiremos las pruebas.\n\n## Jasmine vs. Jest: entornos para testing\n\nSi bien, actualmente el framework de pruebas más famoso es Jest, algo que debemos tener en cuenta es que los proyectos de Angular ya vienen pre-configurados con Jasmine, por lo que no tenemos que preocuparnos por nada.\n\nAngular ya nos provee una plataforma para ejecutar nuestras pruebas, donde con solo ejecutar algunos comandos, podemos realizar muchas acciones.\n\nAlgo importante a tener en cuenta de los frameworks de testing en JS, es que prácticamente todos manejan la misma estructura, a diferencia de lo que pasa en el mundo del frontend donde tanto el código, cómo la estructura de un proyecto en cada tecnología puede variar en gran medida.\n\nA continuación, se muestra una prueba para cada una de estas tecnologías:\n\n- **Jest**\n\n    ```jsx\n    describe(\"A suite is just a function\", () =\u003e {\n      const a;\n      test(\"and so is a spec\", () =\u003e {\n        a = true; expect (a).toBe(true);\n      });\n    });\n    ```\n\n- **Jasmine**\n\n    ```jsx\n    describe(\"A suite is just a function\", () =\u003e {\n      const a;\n      it(\"and so is a spec\", () =\u003e {\n        a = true; expect (a).toBe(true);\n      });\n    });\n    ```\n\nComo habrás notado, la única gran diferencia es que Jasmine utiliza la palabra reservada `it`, mientras que Jest utiliza `test`. Pero no solo Jasmine usa esta palabra reservada, sino otros frameworks como Mocka, chai, etc.\n\nEsto último es tan común, que Jest permite utilizar cualquiera de estas palabras reservadas (`test` o `it`) para correr una prueba. Por lo tanto, sin importar el framework que elijas, la estructura de los test no va a variar.\n\n### Test match\n\nEn las pruebas, se tiene algo llamado “test matchers”, que prácticamente son funciones que nos permiten hacer comprobaciones. A continuación, se muestran algunos ejemplos de matchers de Jest y Jasmine.\n\n- **Jest**\n\n    ```jsx\n    test('null', () {\n      const n = null;\n      expect(n).toBeNull();\n      expect(n).toBeDefined();\n      expect(n).not.toBeUndefined();\n      expect(n).not.toBeTruthy();\n      expect(n).toBeFalsy();\n    });\n    ```\n\n- **Jasmine**\n\n    ```jsx\n    it('null', () {\n      const n = null;\n      expect(n).toBeNull();\n      expect(n).toBeDefined();\n      expect(n).not.toBeUndefined();\n      expect(n).not.toBeTruthy();\n      expect(n).toBeFalsy();\n    });\n    ```\n\nComo pudiste observar, los matchers de Jest y Jasmine son exactamente iguales. Dicho esto, te darás cuenta que la herramienta que decidas usar, al final, no será un problema, ya que los test se escriben de igual manera.\n\n## Proyecto\n\nSi creas un proyecto desde la CLI de Angular, te darás cuenta que en la raíz se encuentra un archivo llamado **karma.config.js**, el cuál contiene la configuración del test runner.\n\nSi abres dicho archivo, verás una serie de plugins definidos, entre ellos, uno que se llama **karma-chrome-launcer**, esto se debe a que nuestras aplicaciones se ejecutan en un navegador y Karma utiliza el motor de Chrome para ejecutar las pruebas.\n\n\u003e💡 Cabe mencionar, que es acá dónde podrías cambiar Chrome por cualquier otro motor de tu preferencia.\n\nKarma, de manera automática leerá todos los archivos que terminen en **.spec.ts**, ya que es en esos archivos donde normalmente se definen las pruebas.\n\n\u003e💡 Se usa el sufijo **spec** porque en estos archivos se definen las especificaciones (o los contratos) que nuestro componente debe cumplir para funcionar correctamente.\n\n### Tests en WSL\n\nTen en cuenta que para ejecutar estos test en WSL, tendrás que realizar la siguiente configuración:\n\n```bash\nsudo apt update \u0026\u0026 sudo apt -y upgrade \u0026\u0026 sudo apt -y autoremove\n\nwget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb\n\nsudo apt -y install ./google-chrome-stable_current_amd64.deb\n\ngoogle-chrome --version\n```\n\n## Secciones\n\n[Componentes](https://www.notion.so/Componentes-8104576004504fd4a1e95711c08a5a92)\n\n[Servicios](https://www.notion.so/Servicios-60730fd290b04fcd806c5eede7d0e972)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJandroMejia97%2Fng-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJandroMejia97%2Fng-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJandroMejia97%2Fng-testing/lists"}