Angular testing made easy – Clarity Design System – Medium

“Angular Testing Made Easy” by @EudesPV  #angularjs #javascript #typescript #testing #coding

  • So what’s the most efficient way to centralize that boilerplate, so that your actual spec files can focus on the unit tests themselves?This article will show you a neat solution to this problem, using two little-known features: Jasmine’s user context and Typescript’s ability to type this.
  • There are two main advantages to this approach over local variables: it helps fight the memory leaks that keep creeping up on large projects’ tests, and it also offers a very easy way to have your beforeEach and it in two different files, which is much harder to set up with local variables.CAUTION: We are using a plain function() {} here, rather than the very useful () = {} arrow notation from Typescript.
  • One of the recommended patterns (and the one we use the most, by far, in Clarity) is to use a “test host” component which includes the actual component to test in its template:This example makes a few assumptions to keep it simple: the templates are all inline or inlined at build time so we don’t need to MyUserComponent doesn’t depend on other components, … Feel free to adapt to your specific use case.Introducing the TestContextIf we want to extract all the boilerplate into a separate file, we need to decide what the type of the user context passed around by Jasmine should be.
  • The one difference is that we’re getting the tested directive through the injector, rather than componentInstance, once again to be able handle attribute directives and components at the same time.The final spec fileLet’s remove all the boilerplate from the user component’s spec file and use our brand new context:It’s now entirely comprised of the unit tests, no distractions or verbose setup to go through.
  • That’s a win!To improve this further, you could easily:include the setup() call at the root of the tests to have it always be available,allow passing extra directives to declare or modules to import, in case your component depends on other ones,add additional shortcuts to the TestContext interface,throw explicit errors when trying to test with a host component that does not contain the directive,…In our case, for instance, we have a shortcut to get providers from the tested element’s injector.

If you’re here, you have probably already read the Angular documentation on testing, and maybe have written a few tests for your own project. If you have not, I can only suggest you do so, because…
Continue reading “Angular testing made easy – Clarity Design System – Medium”

How To Debug an Angular 1 Application via DevTools

  • I’ll list a few important concepts, but for an in-depth tutorial on debugging JavaScript in the console I highly recommend reading through the DevTools documentation on you might set breakpoints to explore the code and check the value of variables mid-execution.
  • Recently, a friend asked me to help debug their Angular 1 application but I didn’t have immediate access to the source code and the deployed code was minified without source maps.
  • For illustration, here is the same statement executed against the Angular 1 TodoMVC app to list its controllers and providers:

    This snippet has come in handy many times.

  • Unlike providers, controllers are not registered on the application’s  instance.
  • To begin, select an element whose controller you want to inspect:

    Then via the console execute this line:

    Alternatively, you can use  to target an element and use the same code snippet:

    Once you’ve captured a reference to the controller for a particular element, you can inspect the scope and any properties attached to the controller itself and even explore up and down the scope tree to look for shadowed properties and explore child scopes.

The browser provides powerful tools for debugging web applications, including those built with Angular 1. I’ll list a few important concepts, but for an in-depth tutorial on debugging JavaScript in the console I highly recommend reading through the DevTools documentation on developers.google.com.
Continue reading “How To Debug an Angular 1 Application via DevTools”

AngularJS 2.0 From The Beginning

#AngularJS 2.0 From The Beginning - #ngForm - Day 16 by @debasiskolsaha cc @CsharpCorner

  • So far, we have discussed about data binding, input properties, output properties, pipes, viewchild, Directives, Services including routes and template based form binding, using ngForms in Angular 2.0.
  • Now, in this article, I will discuss how to create model based form, using Angular form module in Angular 2.0.
  • In my previous article, I already discussed about the template driven form binding in Angular 2.0.
  • Now, in this article, we will discuss about the Model Driven or Reactive Form binding in the Angular 2.0.
  • To begin, we must first ensure that we are working with the right Directives and the right classes in order to take advantage of procedural forms.

In this article, we will discuss model based form binding in Angular 2.0.
Continue reading “AngularJS 2.0 From The Beginning”

computer solutions: JSON Web Token Tutorial: An Example in Laravel and AngularJS

  • It comprises a compact and URL-safe JSON object, which is cryptographically signed to verify its authenticity, and which can also be encrypted if the payload contains sensitive information.Because of it’s compact structure, JWT is usually used in HTTPheaders or URL query parameters.A JWT is represented as a sequence of base64url encoded values that are separated by period characters.JSON Web Token example:The header contains the metadata for the token and it minimally contains the type of signature and the encryption algorithm.
  • This JWT Header declares that the encoded object is a JSON Web Token, and that it is signed using the HMAC SHA-256 algorithm.Once this is base64 encoded, we have the first part of our JWT.In the context of JWT, a claim can be defined as a statement about an entity (typically, the user), as well as additional meta data about the token itself.
  • However, if we want to add an additional layer of protection, we can encrypt the JWT payload itself using the JSON Web Encryption (JWE) specification.Of course, if we want to avoid the additional overhead of using JWE, another option is to simply keep sensitive information in our database, and use our token for additional API calls to the server whenever we need to access sensitive data.Before we can see all the benefits of using token authentication, we have to look at the way authentication has been done in the past.Because the HTTP protocol is stateless, there needs to be a mechanism for storing user information and a way to authenticate the user on every subsequent request after login.
  • We can easily use the same token for fetching a secure resource from a domain other than the one we are logged in to.A browser or mobile client makes a request to the authentication server containing user login information.
  • The only thing we have to do is calculate the HMAC SHA-256 to validate the token and parse its content.In this tutorial I am going to demonstrate how to implement the basic authentication using JSON Web Tokens in two popular web technologies: Laravel 5 for the backend code and AngularJS for the frontend Single Page Application (SPA) example.

Continue reading “computer solutions: JSON Web Token Tutorial: An Example in Laravel and AngularJS”

DHTMLX Gantt Chart Usage with Angular JS 2 Framework

  • To add data loading to our angular gantt chart, we are going to add task and link services.
  • Angular services can be injected using Dependency Injection mechanism and include data, function or some features necessary for your application.
  • We’re going to create a data service that we’ll use to provide our gantt chart with tasks.
  • So, our component can use that services to get tasks and links.
  • Also here we call our services to get function and then are waiting for response to put data to gantt.

DHTMLX Blog – Rich JavaScript Library and UI Widgets – News, Tips, Updates
Continue reading “DHTMLX Gantt Chart Usage with Angular JS 2 Framework”

Angular testing made easy – Clarity Design System – Medium

Angular testing made easy @EudesPV  #AngularJS #Nodejs #JavaScript #Testing

  • So what’s the most efficient way to centralize that boilerplate, so that your actual spec files can focus on the unit tests themselves?This article will show you a neat solution to this problem, using two little-known features: Jasmine’s user context and Typescript’s ability to type this.
  • There are two main advantages to this approach over local variables: it helps fight the memory leaks that keep creeping up on large projects’ tests, and it also offers a very easy way to have your beforeEach and it in two different files, which is much harder to set up with local variables.CAUTION: We are using a plain function() {} here, rather than the very useful () = {} arrow notation from Typescript.
  • One of the recommended patterns (and the one we use the most, by far, in Clarity) is to use a “test host” component which includes the actual component to test in its template:This example makes a few assumptions to keep it simple: the templates are all inline or inlined at build time so we don’t need to MyUserComponent doesn’t depend on other components, … Feel free to adapt to your specific use case.Introducing the TestContextIf we want to extract all the boilerplate into a separate file, we need to decide what the type of the user context passed around by Jasmine should be.
  • The one difference is that we’re getting the tested directive through the injector, rather than componentInstance, once again to be able handle attribute directives and components at the same time.The final spec fileLet’s remove all the boilerplate from the user component’s spec file and use our brand new context:It’s now entirely comprised of the unit tests, no distractions or verbose setup to go through.
  • That’s a win!To improve this further, you could easily:include the setup() call at the root of the tests to have it always be available,allow passing extra directives to declare or modules to import, in case your component depends on other ones,add additional shortcuts to the TestContext interface,throw explicit errors when trying to test with a host component that does not contain the directive,…In our case, for instance, we have a shortcut to get providers from the tested element’s injector.

If you’re here, you have probably already read the Angular documentation on testing, and maybe have written a few tests for your own project. If you have not, I can only suggest you do so, because…
Continue reading “Angular testing made easy – Clarity Design System – Medium”

JSON Web Token Tutorial: An Example in Laravel and AngularJS

  • In the context of JWT, a claim can be defined as a statement about an entity (typically, the user), as well as additional meta data about the token itself.
  • A browser or mobile client makes a request to the authentication server containing user login information.
  • A JSON Web Token Example using Laravel 5 and AngularJS

    This JSON web token example will not use any kind of encryption to ensure the confidentiality of the information transmitted in the claims.

  • When we make a POST request to /signin with a username and password, we verify that the user exists and returns a JWT via the JSON response.
  • We are using AngularJS as a front-end, relying on the API calls to the Laravel back-end authentication server for user authentication and sample data, plus the API server for cross-origin example data.

Continue reading “JSON Web Token Tutorial: An Example in Laravel and AngularJS”