Full Stack Developer, Speaker, Educator, & Thinkster.io Author.

Category: Programming (Page 1 of 2)

Stubbing location.reload in Angular for Jasmine Tests

Jasmine test logo

Today I ran into a new problem in my Angular application. My Jasmine unit tests were running FOREVER. Every time the tests finished they just kept running again and again. I reached 1505 out of 490 unit tests run. I was very confused! location.reload was the problem!

After finding the exact tests that were the culprit. (Thank you small commits!) It was narrowed down to a location.reload() call in my production Angular component code that was causing the issue.

So let’s jump into how to handle a location.reload() in our production code from our tests. Note: I did not want/need to test my location.reload(), I just wanted to get past it, essentially ignore it.


Step One

First off, we need to move our location.reload() call, from our production code, into its own function. We do this because it makes it MUCH easier for us to stub out a component level function in our test. So here we made a simple reloadPage function.

The reloadPage function in our production code simply calling location.reload()

Step Two

Next up, we go to our tests. I am assuming you already have your tests set up, most importantly getting an instance of your component under test. We can now reassign our reloadPage function to an empty function.

Stubbing out our reloadPage call so location.reload() is not called

In the above code, we are stubbing out or overriding the function reloadPage from our component. In this test, reloadPage no longer calls location.reload(). It will call our empty function instead, thus doing nothing. We have essentially removed the location.reload() call from this test or more appropriately stubbed reloadPage out.

Again Note: In my situation, I did not want/need to test location.reload() with this test. I simply wanted to get past it, essentially ignore it.

After making these changes, the tests ran as expected. No more 1505 out of 490 tests. I hope this helped and if it did leave a comment!

For more interesting JavaScript related posts check out const in JavaScript is weird! The non-immutable const.

Comparing null and undefined in JavaScript

When first learning JavaScript I came across a new value undefined. I was familiar with and understood null because of my .NET background but had never seen undefined. Let’s take a deeper look at null and undefined in JavaScript.

null in JavaScript

According to the JavaScript documentation: “The value null represents the intentional absence of any object value” (Docs). null represents that there is no value, and it is important to not miss the intentional aspect.

A value cannot be null unless it has specifically been assigned null. Let’s look at some code:

Example of null

Above, on line 1 we are setting our value to null. null is powerful and something commonly found in code. There is even a null object design pattern.

undefined in JavaScript

“A variable that has not been assigned a value is of type undefined” (Docs). If we declare a variable but do not assign a value to it, its value is undefined.

Example of undefined

Since we didn’t assign a value to temp on line 1 it is undefined.

“A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value.” So we would see undefined if we access a property on an object that does not exist or does not contain a value.

Example of undefined object property

We don’t need to be scared of undefined it just means the variable has never been assigned or does not exist.

null vs undefined equality gotcha

There is a bit of a gotcha when thinking about equality of null vs undefined. Let’s look at examples:

null vs undefined equality example

In the first strict equal (===) case, we get false returned. This is because both null and undefined evaluate to false BUT they are different object types. null is of type object while undefined is simply of type undefined.

That is why the second case of only loosely equal (==) we get true coming back. It’s important to realize the distinction that null & undefined are different types.

Having come from a .NET background I had not seen undefined before. With a little research and playing around with code, it all came together. I encourage you to open up your console window now and mess around a little with null and undefined!

const in JavaScript is weird! The non-immutable const.

JavaScript logo

Const variables in JavaScript have a behavior that I would not expect. Coming from a .NET/C# background const, behaves quite a bit differently than what I was used to.

Looking at the developer documentation for JavaScript, the declaration of a const “creates a constant whose scope can be either global or local to the block in which it is declared” (docs). That sounds all normal; well because it is so far.

As we read further, we get to this line: “The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned.” The VERY important piece here is that the VALUE IS NOT IMMUTABLE.

Immutable? What the heck does immutable mean? Well, if an object is immutable, for that instance the properties cannot be changed. But since const objects are NOT immutable; it means that a const object can have its properties changed within it.

That’s just how it is and we have to work with it but if you come from the C# world and you think of a const never changing, be prepared for a const to be non-immutable in JavaScript.

Valid Example

Looking at a code example, this is a valid usage of const where we change the non-immutable value of an underlying property.

Example of valid usage of const in JavaScript

Invalid Example

Now, it wouldn’t be called const if everything was not constant about our objects. In the docs, we see that “the variable identifier cannot be reassigned”. What this means is that we cannot completely reassign our const reference.

The following code is an example of what we CANNOT do with a const:

Example of a invalid reassign of const

const in JavaScript made me uneasy at first. The ability to change properties within a const was a new concept to me. However, I took the time to learn about it and understand it. I hope that after this const is a little less scary for you as well.

programming on a macbook

Fun Python Beginner Course for First Time Programmers

Python has recently been an interest of mine. I have dabbled with it in the past. I would like to really start incorporating it into my skill set more often. The main standout of why Python is great is how easy and quick it is to get started with and how much open source support there is for it.

I started my search for Python learning material on YouTube. I like watching videos so YouTube was the way to go. And I found this video on the channel Programming with Mosh:

I have been programming for 10+ years now so this video was pretty elementary but it was great for setting a good foundation of the basics. I highly recommend the course for first-timers wanting to get their feet wet with Python. It has great tutorials and small projects that really solidify the learning.

I powered through the first 3 hours watching at a faster speed and skipping a few rudimentary sections. It inspired me to learn more Python. My first steps are using Python for automation. Little tasks that I do every day on my computer will soon be automated by Python.

That’s about it I just wanted to share the great beginner python course for those that are just getting started with their programming adventures https://www.youtube.com/watch?v=_uQrJ0TkZlc&t.

Must Have VS Code Extensions for Angular & Typescript

Let’s take a look at the VS Code extension that I use regularly when developing Angular code. I like my extension to make me a more productive developer. Many of these could be helpful outside of Angular development but these are some that I like.

#1 Angular Snippets

This extension is great because it gives you access to many useful Angular, Typescript, and even HTML. I find myself using the HTTP related snippets often. Snippets are great because you no longer need to memorize complex syntax and can now focus on the development.

#2 Material Theme Icons

Material Theme Icons is great because it changes all the icons used throughout VSCode with beautiful icons. It makes it much easier to discern between the different files in your project. Not only does it have icons for the different file types but also folder types. I highly recommend this extension to make your editor look nice and clean.

#3 Bracket Pair Colorizer 2

Bracket Pair Colorizer is one of the first extensions I install when if I come across a machine that does not have it. It changes the colors of all your brackets, parenthesis, etc. It even creates a line that connects each pair to one another. Just make sure to install version 2 because that is the one being actively developed.

#4 Typescript Importer

This one is helpful when working in our Typescript components. It will auto-import definitions for us. So if we start using a new service or a new model in our component on the first use it will automatically bring in the import. Again, this helps us focus on the development work not having to jump around the file importing new things.

#5 Angular Language Service

Angular Language Service is another great Angular extension. This one is developed by the Angular team itself. It helps make VSCode smarter with its auto completes and giving hints about what to do next in your Angular code. This one is a must-have for Angular development.

#6 Code Spell Checker

This is another extension that is helpful for any development done in VS Code. It checks the spelling of your code even for your camelCase variables. It is great at finding common spelling errors that we make in our code. This can be extremely helpful in finding those nasty spelling error bugs. Definitely add this extension to your VS Code if you have not already.

Two Angular 10 projects, same package.json, one project has 281 vulnerabilities the other has 0

The other day I was messing around with Angular and upgraded a project from Angular 8 to Angular 10. I wanted to see the new hotness! Upon upgrading my fairly simple application I was hit with 281 low vulnerabilities reported when I performed an ‘npm install’.

281?!? How could this be? I had zero before. Granted they are low but come on this is way too many. I scoured the internet and had trouble finding someone else who had the same issue as me. I thought to myself it must be because Angular 10 is so new.

So, I took the debugging into my own hands. I created a brand new ‘ng new’ project. Upgraded it to Angular 10, added all the same packages, and what do you know 0 package vulnerabilities. Two Angular 10 projects, the same set of packages, wildly different set of vulnerabilities.

This created a great deal of confusion for me. So I ended up taking the fight to Reddit. I presented my problem hoping the great ether of Reddit would be able to find a solution for me.

And you know what, they did! After a few failed attempts to fix the problem someone suggested deleting my entire node_modules folder and the package-lock.json file. Simple stuff right, I’ve done this before actually on different projects. How could I have forgotten this simple trick.

After deleting the node_modules and the package-lock.json file. I tried ‘npm install’ again and behold 0, zero, goose egg, vulnerabilities. Apparently npm is not the best at cleaning up after itself or taking the very latest packages.

Deleting node_modules and package-lock.json to have them recreated by an ‘npm install’ will not solve everyones problems. But if you are seeing issues revolving around npm not pulling down the very latest versions of packages, this very well may be a good solution for you.

App Module vs Core Module vs Shared Module vs Feature Modules in Angular

Angular Icon

Angular development best practices indicate we should break our applications into modules. Modules in Angular refer to a place where we group like components, services, directives, pipes, etc for our applications.

The easiest to think about would be Feature Modules we simply break these up by feature or domain. But what about the App Module, Core Module, & Shared Module?

What should we put into each of them? What components should live in each of them? Why do we need all of them? Let’s take a look at each of the types of modules and what they are used for.

App Module

Lets first take a look at the App Module in Angular. The App Module can also be called the root module. Every app must contain at least one module and that is the App Module. We launch our applications by bootstrapping the root module.

We want to keep our App Module pretty compact. There should not be a lot of content in the App Module or App Component. We want to encapsulate our application into domain-specific modules, the Core Module, & the Shared Module, which we will look into now.

Core Module

The Core Module is where we want to put our shared singleton services. So the services that we want only one instance of while having them shared among multiple modules should live here.

The Angular injector creates a new instance of a service for each lazily loaded module that it is provided in. We want to keep our singleton services in the core module so only one instance is ever created. We do not want to spread them out in our feature modules.

Another piece of our application that should live in the Core Modules are app-level components. A good example of an app-level component would be the navigation bar. Only the app needs to know about our navigation component.

We do not want to put components used throughout the application inside of the Core Module. We have the Shared Module for that and we will look at that now.

Shared Module

The Shared Module is where we want everything to live that is shared throughout the application. Components, directives, guards, & pipes can all live in the Shared Module.

An example of something commonly found in the shared module would be a loading spinner. If you have any other components that you want to be distributed throughout your application the shared module is where you want to keep them.

It is also common to import and export Angular built modules inside your Shared Module if you need to access them in multiple locations. Because Shared is imported into many of your Feature Modules it’s common to import/export Common Module or Angular Material modules. Import/Export the modules once in Shared Module and now anyone that imports Shared will have access to them.

Feature Modules

Applications commonly have multiple Feature Modules. Depending on the size of your application you may have A LOT of Feature Modules. Breaking things up into domain-specific areas can help in the long run for development.

One of the main reasons to break your features up into different modules is lazy loading. If you want to learn more about lazy loading check out the Angular documentation on Lazy Loading Feature Modules.

Laptop Code

Now you have a better understanding of how to separate your different modules in Angular. For more on modules check out the Angular Introduction to Modules.

What is Test-Driven Development (TDD)?

At my organization, we utilize test-driven development (TDD) to develop our software. To get a better understanding of TDD myself, I want to put together a post about what is test-driven development.

What Is a Test?

Before jumping straight into TDD let’s define what a test is. A test is something that verifies that our code works as we expect it to. Typically, this is a procedure or method that executes and asserts that a given valid response is received.

With a test, we verify that our code solves the problem it was intended to solve. That given a particular set of inputs and setup we get back the responses or see the changes that we would expect.

What is Test-Driven Development?

Test Driven Development

TDD can be defined as a programming practice that instructs developers to write new code only if an automated test has failed. Guru99

The above definition is from Guru99. Let’s break it down and I will put TDD into my own words.

The code we develop is driven forward by our test hence, Test-driven development. We write our test first before the implementation has been written. Making sure the test fails and for the right reason. Our test asserts proper functionality. Our test should satisfy the requirements of the software.

We then write the code that makes the test pass. This means our production code is already under test because we wrote the test first.

Red Green Refactor

Red Green Refactor is an important concept in TDD. Above I described how we wrote a failing test this is the red. Then we wrote the actual implementation code to make the test pass this is the green.

We have made it to the refactor step. Now that we have code written that is tested we can feel comfortable to refactor it. Maybe we see code duplication or any number of code smells.

With the tests backing us up, we can feel comfortable modifying the code running our tests and ensuring we are still green.

The simple definition of Test-Driven Development is that we write our tests first. The code is tested from the very beginning. We gain the confidence to refactor and improve our code.

Expect more posts on TDD as I expand my own knowledge of test-driven development!

Make it work, Make it right, Make it fast

I support the software development strategy of make it work, make it right, make it fast. This is a quote from Kent Beck, common in the software industry. I interpret this quote as let us make sure our most basic solution solves the problem at hand before investing any more time than necessary.

Make it work

Not all solutions to a problem are pretty. This may mean little to no tests, poor performance, janky code, etc. Sometimes we just need a solution to a problem that shows that the problem can be solved. We want to make sure the problem is solvable albeit with a less than desirable solution.

An example where I implement a ‘make it work’ solution in code, is often in the area of user input or user navigation in my applications. Instead of relying on the user, I will hard-code the exact data I want. I want to encourage a happy path solution and test my application under only the best-case scenario. This will tell me if under the most ideal conditions whether or not my solution even works. If my code does not work for this, the solution will have no hope in the edge cases and no reason to continue on with the work. I would then focus my ‘make it work’ code on implementing a different solution until I get it right.

Pushing code to production in the ‘make it work’ phase is a scary thought and something we should all strive to avoid. If you have a continuous integration (CI machine running all your tests pushing this ‘Make it work’ code is an option (preferably in a separate branch). However, it is important to see how it holds up to a full suite of tests.

Make it right

If we can show the problem can be solved with a ‘make it work’ solution we can move onto steps to make it right. This includes tests, proper syntax, good naming conventions, extensibility, and the like.

We want to remove any hard-coded data, we want to start thinking about the edge cases, and we definitely need to have tests around the code. For testing make sure to comment out code or remove code to see a failing test. Never trust a test during this stage unless you see it failing first for the right reason.

Our code should be bulletproof at the end of the ‘make it right’ stage. We should not feel any hesitations about presenting this code to a user from the standpoint of introducing a bug. A ‘make it right’ solution should be production-ready.

Make it fast

Now for the hard part, ‘make it fast’. This is an area of software development that we often do not get the time and resources to experiment with. We just released a solution to production that works from the ‘make it right’ stage. It adds value to the users but we have ideas of making it even better. Often, the next bug or feature takes priority.

But let us assume we have the time. Let us assume we have the resources. We should always be thinking of ways to refactor our code and continuously improve the solutions we have.

Make it fast sounds like a performance or timing centric idea. People think “how can I get this code to run faster”. But it is more than that. We should be thinking how can I make it more testable, how can I make it more extensible, how can I make this code more valuable to the user. Performance is important but these other areas are just as important as well.

Having time for the ‘make it fast’ stage is a privilege and we should always try to take advantage of it. Improving existing code is just as important as writing new code.

In the end, we want to provide software solutions to our users that provide the most value. The make it work, make it right, make it fast idea of software development can help us get there. It allows us to choose the happy path of problem-solving before even considering the often much more difficult edge cases. Make it work, make it right, make it fast provides a solid foundation for building great code.

Make it work, make it fast, make it right -Kent Beck

For more on happy path coding, check out my previous post Programming Better and Easier With The Happy Path.

Microsoft Cognitive Services Emotion API First Impressions

I am always interested in and looking for new libraries to put to use in Xamarin.Forms. I recently stumbled upon Microsoft Cognitive Services Emotion API and wanted to see what it was all about. After a quick look at some sample code, I knew I needed to sign up and try this library out for myself.

The sample code I had been looking at can be found here Xamarin.Forms Emotion API sample code. The sample has some other services built into it but what really interested me the most was the Emotion API.

According to comments in the code, which I am always skeptical of, the API can detect happiness, sadness, anger, fear, contempt, disgust, and neutral. It is amazing that it can determine these emotions and with great accuracy. What is even more amazing is that it basically is one line of code.

This one simple line gets the first (highest percentile) emotion recognized from a picture. Using the sample code you can easily take a beautiful selfie, send it with the single API call, and within seconds get an emotion back. I am not sure yet what factors cause it to take longer but sometimes I get results back in under a second.

From my dozen or so attempts at taking a picture of myself, it gave quite accurate results. I have yet to fake fear in a picture but will see if I can make that happen.  I am very impressed with the Emotion API’s ability to analyze and image and produce an emotional result. Looking forward to Microsoft adding even more emotions.

The free tier for using the API is quite impressive in terms of the number of calls available. I hope to be writing a post soon showing off an app I have made in Xamarin.Forms incorporating the emotion API.

Xamarin.Forms Microsoft Emotion Api

« Older posts

© 2020 Thomas Desmond

Theme by Anders NorenUp ↑