When working with mocks and spies in Jest, it is quite easy to fall into a trap where they become stale (especially in cases where pure functions are not being used). Heading to the documentation for Jest yields a lot of similar-looking methods for restoring mocks, clearing mocks and resetting mocks.
This is where confusion sets in. What is the best practice? Which ones should I call to ensure my tests don’t have stale mocks or spies? Even I struggled with this aspect.
People once thought the banking industry was too big to fail, some seriously big financial institutions ultimately proved that wrong during the Global Financial Crisis of 2008/2009 which saw many seemingly unsinkable companies go out of businesses.
Early 2019, after two deadly crashes of the allegedly bigger and better 737 MAX, the plane was grounded by countries around the world as people scrambled to find answers for what happened. After numerous investigations, the culprit turned out to be MCAS also known by its non-abbreviated mouthful of a name Maneuvering Characteristics Augmentation System.
Well, this is a pretty frustrating bug. The other day I and a few other people in my team noticed something peculiar while debugging some Javascript. The ability to hover over variables and function arguments in Chrome Developer Tools had stopped working.
At first, we thought this might have been a Webpack configuration issue or an update to one or more of our packages breaking the way in which Chrome parses our Javascript. The issue turned out to be Chrome itself. There is an issue recently created where many voice their frustration (myself included) over this bug.
In Aurelia 2, a new element called bindable has been introduced which is leveraged in HTML only custom elements. If you want a HTML only custom element which has one or more bindable properties, then you use the bindable element to specify them.
The ability to create bindables for HTML only custom elements existed in Aurelia 1, but was limited. The constraint being the bindable keyword had to be specified on the template element.
If you are already familiar with Aurelia and have worked with Aurelia 1, then HTML custom elements are not a new concept to you. If you’re starting out with Aurelia 2, they might be a new concept to you.
How HTML Only Custom Elements Looked In Aurelia 1 We have a custom element called user-info.html which accepts a user object through a bindable property called user and we display their name and email.
While Aurelia 2 is still not quite ready for release, you can use it right now as the basic core pieces are functional. I thought it would be fun to build a weather application using Aurelia 2.
If you don’t want to run through a tutorial and just want the final result, all of the code for the weather application can be found on GitHub here.
What Are We Building? In this tutorial, we are going to be building an Aurelia 2 application that displays weather information. Original, right? You will learn how to create new Aurelia 2 applications, as well as work with the OpenWeatherMap API where we will consume JSON for the information.
The front-end space over the last six years or so has really heated up, you could say superheated. As browsers become more powerful, devices continually improved and innovation a constant thing, no language is more popular and widely used than Javascript.
And yet, as learning resources have become more easily accessible and coding boot camps have become a thing, newcomers are being taught to lean on frameworks and libraries straight out of the gate.
Staunch functional proponents will fire up at the mere mention of classes or any form of object-oriented programming. These arguments go way back to before Javascript was even a thing or as popular as it is now.
Let’s clear the air and point out that classes in Javascript are not real classes. They’re often compared to the likes of Java and other languages that promote OOP-style programming, but classes in JS are unlike those implementations. Javascript has prototypes and prototypes are not classes.
The hype surrounding Svelte right now is inescapable. Every blog post comment section, the article comment section on Dev.to or Twitter thread/hot take seems to solicit a response about Svelte.
If you are not familiar, Svelte is a Javascript library which leverages a compiler to turn your Svelte code into plain old Javascript and HTML. You write your applications inside of .svelte files and they get compiled to something that has no runtime.
Aurelia’s robust binding system allows you to not only bind values into your custom attributes and elements, but also the ability to pass in callback functions as well. While your first instinct might be to try using you will quickly realise that this will not work because of scoping issues.
This is where `.call` comes in. Using `.call` allows you to pass in callback functions to your bindables, and when they get called, their scope is retained. ## Callbacks Without Parameters Say we have a custom element we have created called `my-custom-element` and it has a bindable property called `callback` defined inside of the view-model using ``` @bindable callback = () => {} ``` Then our custom element callback binding looks like this: Inside of our custom element, when the callback bindable is fired, it will call our callback function and the scope of `someCallbackFunction` will be retained (the view-model it is defined in). When you are not using parameters things are easy enough. You just need to define your callback with the circular function brackets like you would if you're using `click.delegate` or other more event-type bindings. ## Callbacks With Parameters This is where I see developers get caught out quite a bit, passing parameters to callback functions. Using our above function, let's say that our callback accepts two parameters: `user` and `item`. Inside of your custom element, when you call the callback you might try something like this if you didn't read or understand the documentation correctly: ``` this.callback(this.selectedUser, this.selectedItem) ``` Because of how the `.call` feature works, this will not work (as you might have possibly already discovered). This is because you need to pass an object to the callback with your parameters matching the names you use in your HTML. In our case, we are expecting two parameters: one called `user` and one called `item` to be passed into the callback. Inside of our custom element, we need to pass them like this: ``` this.callback({user: this.selectedUser, item: this.selectedItem}) ``` Now, our values get passed correctly and the callback retains its scope.