Posts

How to Cast an Injected Service as a Mock in Angular Unit Tests

I've been meaning to write this for a while. Normally in my Angular unit tests, I set up my service mocks and then let dependency injection treat them as if they're the real thing. But sometimes you'll need to cast a service mock as a spy so you can do things like reset the calls it's made. And it's one of those things I always have to think back and remember "How did I do that last time?". Here's an example of how: const mockScoreAdminService = TestBed.inject(ScoreAdminService) as jasmine.SpyObj<ScoreAdminService>; mockScoreAdminService.processScores.calls.reset(); This code casts the service mock, which is treated as the real service type, to a Jasmine spy object. It then resets the calls made to the processScores  method to zero. I hope this helps someone!

Setting Default Values in an Angular Reactive Form

Something I ran into a few months back was that Angular won't reset a FormControl back to its initial value if you call reset()  on the FormGroup unless that FormControl was created with nonNullable: true . Here's an example:   private createForms ( formBuilder : FormBuilder ) : void {     //For the initial values to be considered the *default* values, we need to specify nonNullable: true.     //There used to be a dedicated property for this, but they deprecated it.     this . searchForm = formBuilder . group < ISearchForm >({       adminYear : new FormControl < number >( null , { validators : Validators . required }),       admin : new FormControl < string >( 'All' , { nonNullable : true , validators : Validators . required }), //Validator is kind of pointless here, as there WILL always be a value       examName : new FormControl < string | null >( null ), ...

How to Fake a Route Change in an Angular Unit Test

This isn't something that's come up too often in my experience with Angular, but sometimes I've needed to write code that subscribes to Router.events and takes action based on the current route. But how do you test something like that in a unit test? The key is by using a Subject , which is a kind of Observable , and exposes a next() method, which allows us to simulate a route change. Here's an example:     const event = new NavigationEnd ( 1703 , `/account/orders/ ${ orderId } ` , '/' );     ( router . events as Subject < Event >). next ( event ); By casting Router's events property as a Subject , we can call next() with our NavigationEnd event, and simulate the route change. For the Event type, make sure you are importing Event from @angular/router .

Ranking Led Zeppelin's Studio Albums

Image
The first time I really listened to Led Zeppelin was in my junior year of high school, when my friend John gave me a copy of Led Zeppelin IV  for Christmas. It was one of those rare, consistent albums that I could listen to from start to finish without wanting to skip a track. Not too long after that I picked up Houses of the Holy  and was surprised to find that I liked that  album even more . Sometime after that , I picked up Led Zeppelin II , which I didn't like as much as the other two albums I already had. After high school, I picked up the boxed set . This was my first exposure to a lot of the tracks from the albums I didn't own. One of the things about the boxed set that I heard people say they didn't like was that the tracks were out of chronological order, and it can be kind of confusing as to which song came from which album. A few years later I picked up the second boxed set which included all of the remaining studio tracks not on the first boxed set (pretty coo...

Why I'm Not Down with GitHub Copilot

Image
  If you don’t know how something works, how can you fix it when it doesn’t  work? This is why I’m not entirely behind something like GitHub Copilot. It’s already easy for developers to copy and paste code they find on the internet and implement it without understanding how it works. Here’s a ridiculous, real-world example. In 1979, “Star Trek: The Motion Picture” was released. It had amazing special effects but awful pacing. It’s a slow movie, to put it lightly. Yet it’s been re-released twice in the past 20 years with additional special effects work…and not much done to improve its pace. The special effects were never the problem, but that’s what they’ve “fixed”, twice. This is a movie which includes a 10 minute long sequence with no dialog, just the characters flying through a cloud and looking at a viewscreen. They might as well have put the word “Intermission” on the screen during this sequence so the audience would know they could get up, use the bathroom, and not miss a...

Ranking Queen’s Studio Albums

Image
One of my favorite bands is Queen . Probably more than any band, the music of Queen takes me back to certain moments of my life, as if part of the soundtrack to it. Along with Iron Maiden , they were a perennial during a period of my life. Just recently, I started listening to them again after many years without. I became a fan after their career with the original lineup had ended, and over the course of some time collected their albums. I didn't get them all in the order they were released (far from it), and could easily pick up an album from a different stage in their career which was much different in style from whatever my previous purchase was. Below is my ranking of their studio albums, from least favorite to favorite. This is just my opinion , and not an attempt to say "this album is better than that  one" -- it's only personal preference. 15. Flash Gordon Released 12/8/1980 This album is ranked last on my list simply because it's the one I listen to least....

Formatting Dates in Angular Without Using DatePipe

For formatting dates in HTML, Angular provides DatePipe , but what if you need to format a date within a component, service, or other non-HTML code? For this, Angular provides the formatDate()  function. I was unaware of this function until one of the developers I work with submitted a pull request where he used it. I've often seen developers inject DatePipe  into their components when they need to format dates, but formatDate()  is the better option for that. Here's an example: public formattedDate : string = formatDate ( Date . now (), "MM/dd/yyyy" , 'en-US' ); You can read it about it at the official docs here .