{"id":1533,"date":"2022-12-20T11:49:49","date_gmt":"2022-12-20T11:49:49","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=1533"},"modified":"2025-09-24T06:34:32","modified_gmt":"2025-09-24T06:34:32","slug":"how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/","title":{"rendered":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/O6e5SiPuApSSK6VaR5rwm6Rqg6n1-aRBSmh8wZl8LbhhwdEqp30MjB5k7XF07BYM-PdSnSAmpCpdAWyMd1Lu2wd9q9NYpZb8NGZfWOWihdlTDyO72LnTZcDZt5-COgZG1DuRmRm7qSzwqyl7Ls2kWLoc2CpOTYDCoV6Epw-guYZamWwEa2oSL6ac-kQKWA\" alt=\"Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions\"\/><\/figure>\n\n\n\n<p>Refer to Part 2 of this blog, to know <a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-forms-in-an-angular-15-application-using-jasmine\/\">How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine?<\/a><\/p>\n\n\n\n<p>In this blog, we will cover:<\/p>\n\n\n\n<ul><li>What is Unit Testing?<\/li><li>About Angular<\/li><li>About Jasmine<\/li><li>Hands-on<\/li><li>Conclusion<\/li><\/ul>\n\n\n\n<h2>What Is Unit Testing?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">As you develop applications, you write code and as the application features expand, the more moving parts your code has. Over time one has a large code base to maintain and it becomes hectic to ensure quality and at the same time introduce new features. Unit Testing comes to the rescue to ensure that any new piece of code (function) works as intended without having to run into surprises after it is deployed.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Code in Unit Testing is generally regarded as independent functional pieces of code that can work separately to produce the desired outcome by accepting arguments, transforming the data, and returning the desired output. Unit Testing covers mocking these processes by using dummy data to mimic the real thing.<\/p>\n\n\n\n<h3>Why Is Unit Testing Important?<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Unit Testing is important to ensure that code is deployed free of bugs hence ensuring only quality work is either merged to repositories or shipped to production. Most companies include Unit Testing as part and parcel of their CI\/CD workflows to enforce code quality. This will ensure that only proven working code makes it to the repository.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">A good practice is sticking to the principles of TDD (Test Driven Development) which insists on the importance of Unit Testing and using successful Unit Tests as a rule of thumb that a feature is of good quality and ready to be deployed.<\/p>\n\n\n\n<h2>About Angular<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Angular is a JavaScript framework that uses TypeScript as its core development language and it comes ready with all the necessary tools to build a fully-fledged Single-Page Application. These tools include an inbuilt router, HTTP library, and rxjs for handling Observables. Angular uses an Imperative programming approach whereby it focuses on \u201cwhat\u201d and \u201chow\u201d. This is because Angular has a defined way of architecting components, using directives, services for API calls, modules for bootstrapping isolated pieces of code, and concepts such as dependency injection. Angular comes with Angular CLI which is a CLI tool that enables you to manage your projects. To install Angular CLI, we install it globally via npm using the command npm i -g @angular\/cli. As of the time of writing this blog, Angular is at version 15.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">To create a new project, we use the command <strong>ng new &lt;project_name&gt;<\/strong>. You will be prompted to select a couple of options such as routing; go with yes for routing and SCSS for the stylesheet.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/_jUzSWnQxact9_fPIpHVTLOTkyICrpstRpcc-erENfW4LGELEa_0q1NkBthOpFgbMISNghgkNHNGImrDsYL3a2e6h4pUKIJRyFiGWLL3-1SCAIkB1qpAyK51hruyZALckplG6Uizo8loO1wgeaMUsAFtOP9QCc0cosiSig8_KzRTALkvrnQWTT5wRBxZyg\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p>To serve our project, we use the <code>ng-serve<\/code> command.<\/p>\n\n\n\n<h2>About Jasmine<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Jasmine is a framework for testing JavaScript Code; specifically Unit Tests. Angular comes with Jasmine as the default tool for Unit Testing. To run Unit tests, we use the <strong>ng test<\/strong> command; It\u2019s preferably better using with the code coverage flag to get a coverage report i.e <strong>ng test &#8211;code-coverage<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/24op4K88iaMlBJn-OXu8nwW1pHqtVb5B9xfGVoqw905ug2nQVlVzBLBeHoJw-MyWpVai4eIGFRQWgNAzRnz4i_O3jrOSrB_X80X5QczJdJQQ0mhmgIbfnK4POX9j3X26SgyeeOGrg6SABEd6d-lgmmDKqStQyyQktZoBNtDlk6wZO2GHWPJyyTZ-93tLTw\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p>This will automatically open a browser window that displays the test suites as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/408fZRUKXOpsUFYmyvg13C5mLfUjMlRLWvwnYgiXVYxFFM8AIIDHsJOqqfu6psf0hdaOfCy9MpTwVcctIWsmCAYiwxKq8YIDXThBzD6ypZr-tM_pZ2WtLj2PoUd57lAty06F9xSf8QXhGIxUo3e35sBoRaNmNOgDJ36LOuyhDdngu4UjNXjIucTSnnrjug\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Note: During CI setup, we shall fine-tune Karma(the test runner for Jasmine) to run headless and also to enforce coverage thresholds since we won\u2019t have a GUI.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">To get the coverage report displayed on a web browser, go to your project directory there is a <strong>coverage<\/strong> folder; expand it and run the nested HTML file with <strong>Live Server<\/strong> extension on VS Code(not sure of other IDEs\/Editors). It should appear as below.<\/p>\n\n\n\n<h2>Hands-on<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/JhV7jb5_rZBAHAil1XS1pZwmK5CnLUtQGFODFmCQhW_k3miFT-4oj4CZ3rtTnouSTuEV_M8Bkh-cnshi9H4iKHQVdgX0xCeiaBNR91qmLLYE9ZXHlU767_ClbKCCewR8O-GIxAIWlkneii2phheeV7ifz_8LdHLOobgG7Gt1CCdeKFLd4vEBqbvrVjne3A\" alt=\"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?\"\/><\/figure>\n\n\n\n<p>We will be developing a shopping cart application using Angular 15, Angular Material, and TDD approach.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We shall have a simple checkout form to enable users to place their orders. To add to that, we will have a Github Actions pipeline that checks code quality before accepting a PR(Pull Request). The repository for the code used in this blog post is at <a href=\"https:\/\/github.com\/workfall\/workfall-jamine-ng\/tree\/v0.1.0\">https:\/\/github.com\/workfall\/workfall-jamine-ng\/tree\/v0.1.0<\/a>.<\/p>\n\n\n\n<h3>Project Structure<\/h3>\n\n\n\n<p>Our project is simply structured as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/15nyhfzNZwtRcs-eGMfiVGMt1jSFvfON5OlN_MOwFvQs06lTSu9Etz3sqzUJ2LPERJfqKpcBl7ugem5ro_y84P8kkKBVNbu_0CGH-8VL98H59Tm7FfgVyVvgAX-xuArpR995m5-5tCIH2N_13bqYK5Ow-ZyE_8WP3140mGErV2homAHlU2DQ-Hl2utWmjA\" alt=\"Unit Tests for Angular 15 Application\" width=\"375\" height=\"800\"\/><\/figure>\n\n\n\n<p>Our views will be modules so that we can lazy load them.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We\u2019ll create our first component using the <strong>ng generate component components\/nav-bar &#8211;module=&lt;module_name&gt;<\/strong> command or you can aliases i.e <strong>ng g c components\/nav-bar &#8211;module=&lt;module_name&gt;<\/strong> the <strong>&#8211;module=&lt;module_name&gt;<\/strong> flag specifies the module in which to register the component, if not specified, they will be automatically registered in <strong>AppModule<\/strong>. We\u2019ll create other components using the same command. For services, we shall use ng g s &lt;service_name&gt;, and finally for modules we shall use <strong>ng g m &lt;module_name&gt;<\/strong>.<\/p>\n\n\n\n<h3>Modules<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Our modules folder will contain <strong>SharedModule<\/strong> which will register all the components or modules that will be shared across the application and also in other modules. It is very important to note that. To generate the module use the <code>ng g m modules\/shared<\/code> command.<\/p>\n\n\n\n<h3>Components<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Our components folder will contain all the shared components for the entire application. This component will be registered in the <strong>SharedModule<\/strong>. This <strong>SharedModule<\/strong> will be imported into <strong>AppModule<\/strong>.<\/p>\n\n\n\n<h3>UI Library<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">For the UI library, we are going to use Angular Material simply because it\u2019s part of the Angular ecosystem. Therefore, things don\u2019t feel so much out of place and gels well with Angular itself. To add Angular Material use the <strong>ng add @angular\/material<\/strong> command.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/VjqldqGR1-4JG226lGe-4Ssf4SZQqL2LiPxnQdXQCKSZpyUEA6-mCuR93msS0FDuzojjQkYD80t84pNIY7I5Kn-NwFk1ruRKeqXw54MWZ0R2OBzRMB26HVCjJq93J450-BHMwlEfmVT8cut4ifMlDgWs7iYEsfzC9c5TnvV_zIzTkyO_JW1sZPoKW9UmSw\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<h3>Creating Our Code Pipeline on Github Actions<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Since we shall be enforcing code quality, we need to create our pipeline first so that we have standards set at the very start. As of now, you should be able to see that the Code coverage tab on your browser automatically updates when you add new components and services.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Note: The <strong>*.spec.ts<\/strong> files should mimic the corresponding file\u2019s module by having modules imported into the <strong>configureTestingModule<\/strong> method. This is very important to note.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/jO1mbgRbWTz-MOX3aDoQ-lCG2fyVJ9WKuO9KTovL6KeETQbPRYjAaQ_GD2cQq8tmHXKBo6pjh6fsPQ7ULz8l5hry7qH-kYdpO2k50-HZ1sBiRB4JZ-4uYr72SDQ-w2TwXA7ujnpNCGIvu5biXJgZ9q2C-JhwRfoEnMFWY-7nz1XyS8AKjdK7VskV8toIMg\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<h3>Github Branch Settings<\/h3>\n\n\n\n<p>Let us switch over to our repository with our initial commits.<\/p>\n\n\n\n<p>In the repository, we shall go to settings &gt; Branches. Makes sure that it is checked as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/gMOgWWh29vQGAwQuI71XyxnzgwJwEeOQf56U89WtSBsntyXVp6u67XmvELFsKHIq6CyhUjF8tTmEd_fAN0YW3lBrcYVl254TgIgtNL4aS8lx9V9k52FmJ7-XaspVg_PNXSjKoGImLsAPsJ54u8V9zw9XtdKxa3A4BUxEeHUsmMDNXbgVunuYQT_15yB6KA\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/-MGC9kTy3ZZTumjgOmNJQJwdR_9_ysSP749HaICe1cHW4FEiG1EPoVR2jpxSvgCT2wyQGIsrZ6ljOVXWomkKiAkuLenCNlTiTByPjvfO1KUQ4edIk-qv-AIq4Bd1vFuRIUKFkM72mUSBbY2etyO6EiuAUxCXDLChvSqsTk9H_cpQt3t5CfaWtfx1autaDw\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p>Then click on <strong>Create<\/strong>.<\/p>\n\n\n\n<h3>Workflows<\/h3>\n\n\n\n<p>On a dev branch, create a directory <strong>.github &gt; workflows &gt; main.yml<\/strong><\/p>\n\n\n\n<p>The <strong>main.yml<\/strong> file is as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/IH8dMZzx_ij3LO30lQrDGgNgZC4-jVsK4_U74UCQgd7sFDc8-g0kCfnHIEEmXS-IDahS7FOH3KzorVqlrS4mDvLk5T6BOGw41vDKczYTXNuqSWZ_Pt2LTXU9qbTpJ8J1zIzhWIPq1eRnfcbTq-JdX40x5MPaJTCNkCaJUHTzEm0LZxk2FvtbAXPKW--1Lg\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Create a <strong>karma.conf.js<\/strong> file in the root folder of the project which should appear as shown below: (we shall set our coverage threshold to 95% and throw an exception if they are not met)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/Up7z1V2gCghPl8v2T1fS1NSL3Wfl6nOJpCV1LC1qgUYS26HG1AZk27lG706SVQnfrk6hyUX22CYAtCSvB8AcG3nrz2EV1NlCRfKtE8hqnMf0-wBjYBpT8fU97ZIzoIIr70dCKUiLS3eip-TsJ9tKDaaOJowbYLYOH4EHMnszXWgbhgn2VGoDzhIf-ekDFw\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/nmRJGrs9FaeLv9g6czqCfNJzKkw7Xr2GFjj_qctqfyuSQhzELygflKBw0LoKzrGFwMF1akIA00UvXVO-a-hRNXoXriA4ILM3B7Lfvzy84t4iDJcgNnj9UFPKNM9nWu1HGi9_RTrrgQdGqRSprU0XhRGoWgg626KkaZfRNptSVZgOZ0Jjn_7xLEBUGQVf9Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>Make some changes to the angular.json test section to accommodate the Karma configurations.<\/p>\n\n\n\n<p><strong>angular.json:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/K7ptYq4Xof5Tb0fk64eXsmIKuXiQz-mzAO1ksqVcRLHklrtnDA5_u-Pw6Ot6BY2Iye8Vz3ufscfS4unlytw0r6kf4zz-JUlMuuaCyv3lrk_vFUyYeK-EhYFbkvPMD8ETjrry76dc5SP-MvOWID9MYqi5To1GHL4xpA1tUfXRHVnItL5k-okj0uvWe-lFgg\" alt=\"\"\/><\/figure>\n\n\n\n<p>We shall also add a new npm script <strong>test-ci<\/strong> to be used in the pipeline.<\/p>\n\n\n\n<p><strong>package.json:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/wMLRu1A0YmCaoWP5GznienfkJu-YVUwkR2HZMFEgXICXfMzPDK3FAye3DAXIoM_-TA3L8psdmekugOJCCI5kVMDyUig57RHYKFBl-kqhAsnSEuxA3LADgK1OVrW3JEM4_ZvEhIaDN6H5lo07fpnzsgqSHE3MGPJalfL2_e-xuyx5tBC3w8SGHPSgnf_73g\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/uISv6zYNs-xHDs357I51Ro-3klYR9MyxnDjgAgCZwDrt1QPDZDicuCTyCigx5bjFYBHKg0hRRqaHUm9Zava8p_F2wetENBDVHbwwhEwmJnao7WLZTSlDQHFxkvC1L-5TpTOSZGAKZmKjeqr-6OV1vdbs2SZr9MD9xF969Qqg010ESPHj81g16L-N9RTnaQ\" alt=\"\"\/><\/figure>\n\n\n\n<h3>Writing Unit Tests Using the TDD Approach<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">With that completed, time to write some features with the TDD approach. The first feature will be product display. So, we\u2019ll begin by writing tests that are failing. For the backend service, we shall be using <a href=\"https:\/\/fakestoreapi.com\/\">https:\/\/fakestoreapi.com\/<\/a> to act like our backend.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Let us start by writing unit tests for our services. To create a service, we shall use the <strong>ng g s &lt;service_name&gt;<\/strong> command. In this case <strong>ng g s api. To test services, we write test cases in the .spec file majorly to validate the responses and HTTP<\/strong> calls being made to the backend.<\/p>\n\n\n\n<p><strong>api.service.mock-data.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/W94Ywf-rwfhIhH8FEExhpyOgF43NSHu_7RjH4UnRnRWgbq6Dq7mapT8J3ivHUmCMQsuEJ7a2GOe0Ie2pO4-CW4t0ORv4rNhpIl05GBJ_JnuRPAM6lSRSJRZ1OdKuJ51dAuSUdvCjaOknDdplD7N2SAcBFLyufRBSkHfHN5_dPDVbmCrHp9At0rKMHmNBdw\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>api.service.spec.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/OkyO-iyF1wDzzI6LKCDybaARx5wMfMzhnsDQ_aeeK2x_itaEsML_NSphi99sj3INalwL6rsd-Fyx9ELq_mnmdVhLLqNJzGZVK_PbHK_ZWBMNfkAC6VXBl5YlMjNkb_imE-lt6W1afgSAcnORd-yJHU4Qg_-BY5CbBNCoXCszqeXN9nKuTirnb7ff7tUdZQ\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">The test case above expects an array of products from <strong>getProducts<\/strong> method in the <strong>ApiService<\/strong>. This data will come in streams hence an <strong>Observable<\/strong> that is why we use the <strong>of<\/strong> method from <strong>rxjs<\/strong>.<\/p>\n\n\n\n<p><strong>api.service.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/Zt8rZH0ZQpin4jU2Zb79DRVlKLGmg7tqi5JoyKf7VaamLi-qLP7GTXdCbuJaFi99kcDtSOIRA42M4Rnx67TeeKqBpocg2828dgOEi-24flV0GMeD5lF_yKi9Lk8Tkwtv46gCusq4x3e2pC9XovsMMMkVsr6125qc_cnpDaYcrIgsdQTWTq9Gs1Kwdp8EJg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">If we look at our test coverage results after using the <strong>ng test &#8211;code-coverage<\/strong> command, you\u2019ll realize that we are still at 100% including our services which is a plus.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/olSFQKQbBWF6HzNbINWtt9YUrk4By2h31m5VWjI2MfxaKlt_Jpr9otGrTOobsB5ubmEyiig5CeQ7OyJ6WXYKi2pCp9NzzpEOnXqCg_JH5DCyAeHIuyz7GxVzu12sz5VsRt_FZnWaTuzGmX6PTy3CnPTGjOkQV3Uivh9TGeENzvguc5gWYdBD5n4csomLxw\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Next, we shall create a simple UI for displaying the products. Let\u2019s start by creating a view for the products using <strong>ng g m views\/products &#8211;routing<\/strong>. This view will be a lazy-loaded module with its internal routing. We also have to register the root component for this module with ng g c views\/products &#8211;module=products. Next, we shall modify the routing to have the products module loaded on the home route.<\/p>\n\n\n\n<p><strong>products-routing.module.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/guFwRtwtAsnriOYh1rY1lhV3aiY4zyQc6cQ6cAhuodLqLZ3L3NbxSx_N4h986uyI4ZqJVQUwDqbBz5KQKfNlAzLbZQPznCyj9kN2hfTqeQ16peG3YHkM9Sps29I9BIjvkjrftNe3rNQlHMjApLnvWXVgxWgArXB3pfdzKoOEQsuqJ-1fsuWhYTw0Zwf1VQ\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p><strong>products.module.ts:<\/strong><\/p>\n\n\n\n<p>Note: Remember to import <strong>SharedModule<\/strong> into this module<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/R7FL0GUr2uUKpmwToPhiXIvX1_9EMYiwKujwBVXWKC1gkaNgoYpIzWQs6otKqCChnDua_DQwW4UIBHvfaZKOcGxpGmmnPORfvYXstqGClBT4j3JQdZ9tND6n_ELPz6vvSoN1m_B6tyQLpAu3U6rEqnnhmF11KegQ4kkmcVVcq7EKAsbwwReTqprGCfV68w\" alt=\"Unit Tests for Angular 15 Application\"\/><\/figure>\n\n\n\n<p><strong>app.component.html:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/SDEfy-RGhgtW8YpJTiIgLrrWLSgT1iSWfgfo4jo-eIn_UCy08ltJDIJJQXJdrmMEzWGykLIAtgtmUKVJ3_GCDzdqZTHcd74iHr4Y5_sBw4yIsdOgOsAUiIZQRjJ3TM91ij7K6zh_AyYpSyVBM5tcKu08UCPzWrafn73nqHIx-u_lWrRJL57sF0FnjTX8Gg\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>app-routing.module.ts<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/HyEhSnHbo22VGCS4vh9o8HDxSTFz940n_4WHjQtDxixH4oB5ZSd_qKbscag80OWyNWq8YFBjmdqZYW-cMD1gTgxXFcEj7glb3CvFJAXuenK64uwDwuH6SZIhiKsOHH1HbNjaEqEleWUEvTvc4wW0UBMfAANkKQ2em6D2rOMmapoP1_S0QU3ZExFSdAJ36A\" alt=\"\"\/><\/figure>\n\n\n\n<p>When you go to <a href=\"http:\/\/localhost:4200\"><strong>http:\/\/localhost:4200<\/strong><\/a> you should see this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/9uwYp-xzCbqy8SLKXkZRTcbSnCvhSqdMugcmoaU-x0ZHvZQvj2ndmSh9uTN9GyBzlpP-xo-YLKeUdC8_Dt9rP_d1hjaDhX73sPdhgJb4mDNK264qoGuB3nvwKBrzFYMUc1LymQhsxvpan6W81po-vJglX4UxBCKRIJC-XwlyBewupJDa8kk6CtCtT36z3g\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">This shows that our product&#8217;s view is the entry point of our application. Next, we shall create another module to handle all imports of angular material; <strong>ng g m modules\/material<\/strong><\/p>\n\n\n\n<p><strong>material.module.ts<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/zc0ORFoalY_1h5A7t3z3PkS7ky7PhtfZIXgUkacRhtV-klfiuKHBOsl0-Nc_aGTBCOTX0frjyQmapkMrYAaw31wpzw_LeZ9LIoK5Ibx-fvUO-rbWNUrUeXpAe1McC_MBYQ4pbIO_PnXgKv8t-Iz8-AwLn_pd5ewX_06E8CtTsurKVMWShRiV0UAvsfyXBQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Note: import <strong>MaterialModule<\/strong> into <strong>SharedModule<\/strong>.<\/p>\n\n\n\n<p><strong>nav-bar.component.html:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/pCJxb5JX1plIuXJ1cj2HjS4nGyxVL7ZFvUAwP0-nnkQijnxiH5AhA2ZaymZr9rSuj_GX8ONQxEb4w_ziz5PSTOlkbL8PvW1eaHugA65nFwe9NcU7xUyhq--AQrHQtsILMFS2hwsj-k3mLY4Hv8EoU5Q3BnQJsrdgg-b2SuYqNbZs_yETT8NFD4zm4zsuxw\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>nav-bar.component.scss:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/C-sAa-6rfwbncsvKL4KPIeL4vFNzKFOTyXq8_lmBg1zonfGaR3lFHhs1uh0Oig2CjQtAyhZYm2pwy80YIPucYihPHYquApnNGbrn6fXqCvWlEQYHyq979ew3yRduHMELpCwOe8tf0C7_B2Hm9RE6VCHLAftk1q9SPGXaDAmCsWrTPXrxXU6ssl3CJutXyw\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>products.component.html:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/dWfZMcp7CL1bAWplDaB_6X4-GXoBz7o4UMcD5daD2d1B7rj_9EbPibuy2r32gmCOgL-qh9wgR2Mp8tTBmvp5WFh_IFkhLC1XTN-e6uqPjQ0InUqqxpfpV_-8x55KADRM_sFyg0S5tlKE4BELqaPDQBnBivBsp1TZ0Q9SYviw5iG3as3DX99VpLhCDItPTQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>The web page should appear as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/_WeFJd2l3pgCyuX_qLM2enC3K2cSdW1N0pyV3kw-nKiq2aSGjvT4FG4_cXRjAGfCbkn9GhHffzKJUL_iV1qcVs3B9q_kJhD1ElYs3uyTFIW0vnTbwdd3R2n9sQ9pBbuxrFL8kgavBbW3iFkoBdAsjfv4ClpVVlca1akv6KhAjlWYr5bf65TzK7M7xreFdg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Next, we shall use <strong>MatGridListModule<\/strong> for defining our product layout. Therefore, import into <strong>material.module.ts<\/strong>.<\/p>\n\n\n\n<p><strong>products.component.html:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/rz4UasBxL7-fQCjQAKoIpJNnOPh6ArYiAlb11i6nR-BtszqhMwF8gL_xXVlE49vF9vfGFpQHXQoGShxhLt35FHirAcuxAgA1jv5q-YyHuumJPDiRw8FILq_XCYrwpq1d_ghrUA4z6ZQsnRiL2dnGaoHxTGGCqw6VVgtm8yK92-UAGcmGmFier7KZSJMSvg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">If you get the error: If &#8216;mat-grid-list&#8217; is an Angular component, then verify that it is part of this module, import <strong>MaterialModule<\/strong> into <strong>products.module.ts<\/strong>.<\/p>\n\n\n\n<p>The result should be as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/irdHAt54P7NYQMmyp1wXEWXeOf5DGWsDxsW_zlswaWrIFe5tzEandz8wswLne774uJZAofCXl_z8lqvkxnge9-cshweSWjKSkAWp6vt43DjJBFXYyso5Zn7--4Buhwkoe4n4woePBb4rm3bmyc-jjZ0gvC2N2l8gOM0USI9CcV-Dyea4anrm764w6LBAwg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, let us work on the UI of our product component.<\/p>\n\n\n\n<p><strong>product.component.html:<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\"><em>Note: We are hard-coding this now because we are interested in testing out the design. We will make this template dynamic.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/MjfLBhBumvvhPTD37SS_XnHzABwODxWeNULtt1xfVv4V3VnuZaioQ5mI7jTTOPZaiZA9xry0QxXz94K4WesELkvtS2R5f-hE_k9AZV6nhxwLvCqn59CJdSR1bUshxUHHJelXXGd879FvbyyNkuA7nJjzKB9ccm0MrVEDkqR8FatVuUwj1Ix4iQVHzXFOtw\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>product.component.scss:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/CC5lHPx5JnWIxmxh_LFdFxjVfaFDRQrK2bWNP7bHEDLuDSOwSy9D5MsQLHu-j4BNtTCyrv1tttl1nsv1fuYLSOCc25vkofuRBfjhNenW-AtVOuNHm5k9BL4KGeqFHGfIdSjfIZP7pYWqO2PjYEuiDy9Z2argIatB7NUW1okNiAOtcyipuBvKE9mQxgyqew\" alt=\"\"\/><\/figure>\n\n\n\n<p>Result:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/y4KUFh9NBVyigqsz0A8ovnDAnXDRUM65AJKKHYOlVrpFrW3cumZgxMpNqM7cbguR05U5lfxVqmaZaj5QjJi6Jl_QKnoKDzrNyFjBc2zbYSpwkAwTKw2Yb3eyyvpUxrEeJ50pup0Haoj8NhVlw7yjCyCJeRoIezOFgpais5vjcAIfcaQc_66YQvx9wlgFng\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Next, let us write test cases for this feature starting with the product component. You will realize that tests are failing because Testing Modules are not configured correctly (always ensure that the Tesing Module is configured the same as the real module; add the missing modules to the Testing Module i.e <strong>SharedModule<\/strong> and <strong>MaterialModule<\/strong>).<\/p>\n\n\n\n<p><strong>product.component.spec.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/UkBxyEaA_yAhXKfp07CVrM3V-Ym0XzLMa6UuNIrfmZt-iB8-XM5frk_3cSxM68W5VJ16xbSLuXXzOnBcv97YWe3GyEHviWCNGjsQm1E1MT2BLxrppRjcaK7_yuooyX3YAEmZWKrzcUlZ08dxQ67mvHaU-5aPNMMvHHrxu5K-OV5zOJyGdd7PC-nTjOQZvg\" alt=\"\"\/><\/figure>\n\n\n\n<p>We have to write the component to pass the tests. Now, this is the first step in TDD.<\/p>\n\n\n\n<p><strong>product.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/XafD5hdtKGNJpZ5NYg_tDQjSkOORWo8YEGYZchG2lP41pcX_idmmuB4X-EtmWscDTHjg-LKA9jib59nzObl4ZBALfre1D1hZG2rGXrCwMTNLygBA7twdLgHuVCKGISkkgK6ZOONk5c8uknJBpmkL0DhkiMAze-GJ0vZ6lIeyqQ0TL0czZNickp8NbAy98Q\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><em>Note: If you encounter an error like: Class is using Angular features but is not decorated. Please add an explicit Angular decorator; downgrade TypeScript using the <strong>npm i typescript@4.8.2 -D &#8211;save-exact<\/strong> command.<\/em><\/p>\n\n\n\n<p>Next, we shall write tests for the product&#8217;s feature module.<\/p>\n\n\n\n<p><strong>product.component.spec.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/mqo3TC_VMtwAh2xdOMxct55uPQx62DjJbJFdpE-umTlFeSskBOzOg1NuBQl4_NM84yaFjVa-aLtH7EWmrSrZqMpUwzHZ9YZA4YJ-ZuQ5k25_W1Jh48sGFGePfZ7oSn4NBFbH5qMG4RDNqr_Q06Vc2nKGzPtA6ZWU0OLgXzuSusUswcDTkqOTDchCC1xZsg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Since we shall be injecting the ApiService, we need to provide it for the Testing Module. It is a bad practice to Inject the Service directly, it is important to completely avoid making any HTTP calls in Unit Tests. Hence we shall create a service stub, which is simply a class with the same methods and return types as the actual service.<\/p>\n\n\n\n<p><strong>api.service.stub.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/7N7WG0E8qGDesyBTqCEWDpI6NjdUO_YRVCIP_YdsofqRitigxDcYLZwXw8XFLkcAYLpSWkKHsZA4mYO0ZHWluTD34EJyDBfoSMa79xtnghH4vgzgBIs4iDz5R_BEHbnYMr0ldidGoj5BRc3kGkAQakZPv3o9QVbE0D44tCNlYYurWbMdUnOtY__0AA-xyw\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>products.component.spec.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/JTNUOuCLBPGRpdo_t51mAjz8YBuI_SH8E-5Wtq1kYCu4F2NzmmZoaZPX4lbgc8nFkmVNyrQND5GEuZqGUW686I2RXUZJL8FgLXFy5iqyd6yzZ0JPViBpUPz_lzdlyUqkVnDmjfjti2ULh92uhCV1jjD7HFWIVRS5W38RdnJz-etGba3itBAyDF21lKjoDA\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>products.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/i_Nt4Tu3f6YYHc1Q6HRbmDhPbpJhugLVCjGJtob0yggyRZyY-d2tgYfMzwt7LLUHC8Za0nIpfHR_-XLe_SHhm3RLHMoz0-as20CGj6YrN8fd0h6549ZMNtgDiS-2-50M6WY4nICWycAN8uBmugfAnichDNWkztRjXuD8jlkSOWAm6ZkHSOMDvjH-bgZVSg\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>products.component.html:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/CCKXJh0ddIVOdB-CSHVlV86_gh4XiVZ2vWqCiU2TgCfJnmZrGSBK2R48nLf7PGebUIsmWj3WWJ2K98C8yF6fqfKEzXdNA0AOyO6D9AlVs3C08G4YN-rsbMtpLPns7WBNIRPDDdoW5lq8fHUfK4ObEyjPdJYofnudfWVihuLQDu4YKANjA_1gaMi-pBL0sw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Final Result:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/UlmuirDujDbcCJImw9ws3NjzCt0P2XIpW_umY9YDyq9tnmsKFm96HeXiMPInAHNxyMQAfBi5nOS7vxfhI2BP5RUZ6zpCaJSvixW05vkdSrxXd3VN5Moy0XthLTy2v_7TdnICJ37uF1OOJpf4aO5qKuZpzs9yTbanfb9ZuYC72ARiQZUItp9rVAOLZXQpXA\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>Final tip: Sometimes the trick is in adjusting your mock data to cover edge cases such as conditionals. Refer to the tests for the rating feature in the product. Another good way to do this is to separate the rating feature into a component because it may be reused in several places in the application.<\/em><\/p>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this blog we demonstrated how to write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions by following these steps:<\/p>\n\n\n\n<ul><li>How to write Unit Tests for Angular components and Services using Jasmine.<\/li><li>How to enforce Code quality by checking Unit Test coverages threshold with Karma and Github Actions CI.<\/li><li>How to run Karma in a non-GUI environment i.e CI pipeline.<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-justify\">Stay tuned for the part 2 blog on how to write Unit Tests for forms in Angular. We will come up with more such use cases in our upcoming blogs.<\/p>\n\n\n\n<p><strong>Meanwhile\u2026<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">If you are an aspiring Angular Lover and want to explore more about the above topics, here are a few of our blogs for your reference:<\/p>\n\n\n\n<p>Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/\">How to Create &amp; Use Standalone Components in Angular 14?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-enhance-ux-by-managing-api-requests-using-angular-resolver\/\">How to enhance UX by managing API requests using Angular Resolver?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-make-use-of-an-npm-package-highcharts-to-plot-network-graphs-in-angular\/\">How to make use of an npm package Highcharts to plot Network Graphs in Angular?<\/a><\/li><\/ul>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">At <a href=\"https:\/\/www.workfall.com\/\">Workfall<\/a>, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you\u2019re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at <a href=\"https:\/\/www.workfall.com\/partner\/\">workfall.com\/partner<\/a> today!<\/p>\n\n\n\n<p><\/p>\n\n\n<style type=\"text\/css\"><\/style><section id='' \n                class='helpie-faq accordions faq-toggle open-first groupSettings-512__enabled' \n                data-collection='' \n                data-pagination='0' \n                data-search='0' \n                data-pagination-enabled='0'\n                role='region'\n                aria-label='FAQ Section'\n                aria-live='polite'><h3 class=\"collection-title\">Frequently Asked Questions:<\/h3><article class=\"accordion \"><div class='helpie-faq-row'><div class='helpie-faq-col helpie-faq-col-12' ><ul><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2896\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2896\"\r\n                data-id=\"post-2896\" \r\n                data-item=\"hfaq-post-2896\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What is the combined goal of this article?<\/div><\/div><div id=\"accordion-content-post-2896\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2896\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> The goal is twofold: to demonstrate writing unit tests (components, services) in an Angular 15 application using Jasmine + Karma, <\/span><i><span style=\"font-weight: 400\">and<\/span><\/i><span style=\"font-weight: 400\"> to enforce code quality via continuous integration using GitHub Actions \u2014 ensuring that test coverage thresholds are met and that tests run automatically before merging code.<\/span><a href=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/\"><span style=\"font-weight: 400\">\u00a0<\/span><\/a><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2897\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2897\"\r\n                data-id=\"post-2897\" \r\n                data-item=\"hfaq-post-2897\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What is the benefit of integrating test coverage thresholds in CI?<\/div><\/div><div id=\"accordion-content-post-2897\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2897\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>\u00a0A:<\/strong> It ensures that new code doesn\u2019t degrade testing quality; developers must write sufficient tests to cover edge cases. It prevents merging code with low coverage, encourages responsibility, and helps maintain more reliable code over time. It also catches failures early.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2898\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2898\"\r\n                data-id=\"post-2898\" \r\n                data-item=\"hfaq-post-2898\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What tooling is used?<\/div><\/div><div id=\"accordion-content-post-2898\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2898\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> Angular 15, Jasmine (testing framework), Karma (test runner), GitHub Actions (CI\/CD pipeline), Angular Material for UI, SharedModule &amp; MaterialModule structures, service stubs\/mocks, TDD approach.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2899\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2899\"\r\n                data-id=\"post-2899\" \r\n                data-item=\"hfaq-post-2899\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. How do they configure GitHub Actions for this workflow?<\/div><\/div><div id=\"accordion-content-post-2899\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2899\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>\u00a0A:<\/strong> They create <\/span><span style=\"font-weight: 400\">.github\/workflows\/main.yml<\/span><span style=\"font-weight: 400\"> to define the pipeline. They configure Karma to run in a headless mode (since CI environments usually lack GUI), enforce coverage thresholds (e.g. 95%), and define npm scripts such as <\/span><span style=\"font-weight: 400\">test-ci<\/span><span style=\"font-weight: 400\">. They also adjust <\/span><span style=\"font-weight: 400\">angular.json<\/span><span style=\"font-weight: 400\"> and <\/span><span style=\"font-weight: 400\">karma.conf.js<\/span><span style=\"font-weight: 400\"> to support test settings and coverage reporting.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2900\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2900\"\r\n                data-id=\"post-2900\" \r\n                data-item=\"hfaq-post-2900\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What does TDD (Test Driven Development) mean in this context?<\/div><\/div><div id=\"accordion-content-post-2900\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2900\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>\u00a0A:<\/strong> It means writing tests <\/span><i><span style=\"font-weight: 400\">before<\/span><\/i><span style=\"font-weight: 400\"> implementing the features so that initially tests fail; then writing code to make them pass. This ensures that the behavior is clearly defined by tests and encourages minimal, clean, testable implementation. The article uses TDD for features like product display.<\/span><\/p>\n<\/div><\/li><\/ul><\/div><\/div><\/article><\/section>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">10<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> Refer to Part 2 of this blog, to know How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine? In this blog, we will cover: What is Unit Testing? About Angular About Jasmine Hands-on Conclusion What Is Unit Testing? As you develop applications, you write code and as the application features [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[289],"tags":[100,343,376,131,255,347,375,342,373,374,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions? - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"Want to know how to write Unit Tests for Angular 15 application using Jasmine and Enforce Code Quality in a CI Workflow with GitHub Actions?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions? - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"Want to know how to write Unit Tests for Angular 15 application using Jasmine and Enforce Code Quality in a CI Workflow with GitHub Actions?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-20T11:49:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-24T06:34:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ec2-18-141-20-153.ap-southeast-1.compute.amazonaws.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png\",\"width\":1200,\"height\":628,\"caption\":\"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#webpage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/\",\"name\":\"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions? - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#primaryimage\"},\"datePublished\":\"2022-12-20T11:49:49+00:00\",\"dateModified\":\"2025-09-24T06:34:32+00:00\",\"description\":\"Want to know how to write Unit Tests for Angular 15 application using Jasmine and Enforce Code Quality in a CI Workflow with GitHub Actions?\",\"breadcrumb\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learning.workfall.com\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#webpage\"},\"author\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?\",\"datePublished\":\"2022-12-20T11:49:49+00:00\",\"dateModified\":\"2025-09-24T06:34:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#webpage\"},\"wordCount\":2064,\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png\",\"keywords\":[\"angular\",\"angularjs\",\"angularmaterial\",\"developers\",\"frontend\",\"frontenddevelopers\",\"jasmine\",\"js\",\"karma\",\"karmajs\",\"workfall\"],\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions? - The Workfall Blog","description":"Want to know how to write Unit Tests for Angular 15 application using Jasmine and Enforce Code Quality in a CI Workflow with GitHub Actions?","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:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/","og_locale":"en_US","og_type":"article","og_title":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions? - The Workfall Blog","og_description":"Want to know how to write Unit Tests for Angular 15 application using Jasmine and Enforce Code Quality in a CI Workflow with GitHub Actions?","og_url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2022-12-20T11:49:49+00:00","article_modified_time":"2025-09-24T06:34:32+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/ec2-18-141-20-153.ap-southeast-1.compute.amazonaws.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/learning.workfall.com\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website","url":"https:\/\/learning.workfall.com\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png","width":1200,"height":628,"caption":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?"},{"@type":"WebPage","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#webpage","url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/","name":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions? - The Workfall Blog","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#primaryimage"},"datePublished":"2022-12-20T11:49:49+00:00","dateModified":"2025-09-24T06:34:32+00:00","description":"Want to know how to write Unit Tests for Angular 15 application using Jasmine and Enforce Code Quality in a CI Workflow with GitHub Actions?","breadcrumb":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learning.workfall.com\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?"}]},{"@type":"Article","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#article","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#webpage"},"author":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?","datePublished":"2022-12-20T11:49:49+00:00","dateModified":"2025-09-24T06:34:32+00:00","mainEntityOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#webpage"},"wordCount":2064,"publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png","keywords":["angular","angularjs","angularmaterial","developers","frontend","frontenddevelopers","jasmine","js","karma","karmajs","workfall"],"articleSection":["Frontend Development"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/12\/Cover-Images_Part2-1-2.png","jetpack-related-posts":[{"id":1540,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-forms-in-an-angular-15-application-using-jasmine\/","url_meta":{"origin":1533,"position":0},"title":"How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine?","date":"January 3, 2023","format":false,"excerpt":"In our previous blog, we demonstrated How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions. We looked at general unit tests involving components that receive data from services.\u00a0 It is important to always ensure that Unit Tests\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2337,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-handle-authentication-in-angular-spas\/","url_meta":{"origin":1533,"position":1},"title":"How to Handle Authentication in Angular SPAs?","date":"May 30, 2023","format":false,"excerpt":"Angular is a good framework for creating Single Page Applications (SPAs) using JavaScript\/TypeScript. With Single Page Applications, routing is handled on the client side. This calls for protecting routes on the client side as well. Angular comes with the Angular Routing module which handles routing. Sometimes you will have protected\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Handle Authentication in Angular SPAs?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/05\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1559,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/","url_meta":{"origin":1533,"position":2},"title":"How to Use NgRx Store in an Angular 15 Application?","date":"January 24, 2023","format":false,"excerpt":"With reference to the previous blog on state management with React and Redux, we will look at state management in an Angular 15 application using the NgRx store in this blog. NgRx is derived from Ng(the conventional name for Angular tools and ecosystem) and Rx(Reactive Extensions). Moreover, for anyone who\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"NgRx Store in an Angular 15 Application","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":848,"url":"https:\/\/learning.workfall.com\/learning\/blog\/angular-vs-react-which-one-to-choose-and-when\/","url_meta":{"origin":1533,"position":3},"title":"Angular vs React: Which one to choose and when?","date":"December 30, 2021","format":false,"excerpt":"Javascript is one of the most widely used programming languages today. Many developers, both new and experienced, choose to use Javascript to construct their applications or projects, but they are sometimes perplexed while deciding which framework or library to use for their projects. Although Angular and ReactJs are their top\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Angular vs React: Which One to Choose for Your App","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/12\/Cover-Images_Part2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":867,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","url_meta":{"origin":1533,"position":4},"title":"Custom Pipes in Angular Framework","date":"February 2, 2022","format":false,"excerpt":"In Angular, pipes are a helpful feature. They're a quick and easy way to change values in an Angular template. A pipe accepts one or more values and then returns one or more values. Pipes can be used to display strings, currency amounts, dates, and other types of data. Pipes\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Custom Pipes in Angular Framework - Workfall","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":870,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-httpclient-in-angular\/","url_meta":{"origin":1533,"position":5},"title":"How to use HttpClient in Angular?","date":"February 8, 2022","format":false,"excerpt":"To download or upload data and access other back-end services, most front-end applications must communicate with a server using the HTTP protocol. The HttpClient service class in @angular\/common\/http provides an Angular application with an HTTP client API. The HttpClient is a lightweight, easy-to-use, and robust HTTP client library. It allows\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How To Use HttpClient in Angular - Workfall","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1533"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":6,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1533\/revisions"}],"predecessor-version":[{"id":2902,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1533\/revisions\/2902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/1534"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=1533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=1533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}