JavaScript Problems — Click Events, Unit Tests, Page Load, and More

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.

In this article, we’ll look at some solutions to common JavaScript problems.

Tools for Unit Testing JavaScript Code

There are many test runners for creating and running unit tests with JavaScript apps.

Ava is a fast test runner that lets us run unit tests. It supports promises and ES6 syntax. Also, the environment is isolated for each file.

It also supports generators and async functions. Observables are also supported. Stack traces are easier to read than other runners as it’s clean.

Buster.js is another test runner. It’s cross-platform and it runs on Windows, Mac, and Linux. Tests run from a browser headlessly. Multiple clients can run the tests at the same time. Node apps can also be tested. xUnit or BDD style tests can be written.

Multiple JavaScript test frameworks are supported. It comes with SinonJS. Tests are run automatically on save.

Jasmine is a BDD test framework. The syntax of it looks like the RSpec syntax, which is used to test Ruby and Rails apps.

QUnit lets us test JavaScript front end code. It’s mainly based on jQuery, jQuery UI, and jQuery Mobile.

Sinon is another testing tool. It’s a simple test runner that lets us mock code and run them.

It has no dependencies.

Jest is another powerful test framework with a built-in test runner and many tools for mocking things to help us tets. It supports all modern syntax, It supports async and modules, including mocking them.

JavaScript Static Variables

We can add static variables by directly attaching a property directly to the constructor.

For instance, if we have:

function MyClass () {  
  //...  
}

Then we can write:

MyClass.staticProp  = "baz";

We attach staticProp to MyClass directly.

Check that a Number is a Float or an Integer

We can check if a number is an integer by using the remainder operator to get the remainder of it when we divide it by 1.

For example, we can write;

const isInt = (n) => {  
  return n % 1 === 0;  
}

If it’s an integer, then it’s true .

We can check if it’s a floating-point number by changing === to !== . We write:

const isFloat = (n) => {  
  return n % 1 !== 0;  
}

Check Which Key is Pressed on the Keyboard

We can use the keypress event’s keyCode or which property.

They both have the integer code for the keyboard key that is pressed.

For example, we can write:

const code = e.keyCode || e.which;  
if(code === 13) {   
  //Do something  
}

We check if it’s 13 to check for the Enter key.

window.onload vs document.onload

There is a difference between window.onload and document.onload .

window.onload is fired when the entire page loads, including all content like images, CSS, scripts, and other things.

documebt.onload is called when the DOM is ready which can be prior to images and other external content is loaded.

Self-References in Object Literals

We can use this to reference the object that this is currently in.

For instance, if we have:

const foo = {  
  a: 1,  
  b: 2,  
  get c() {  
    return this.a + this.b;  
  }  
}

Then this.a is 1 and this.b is 2, so c is 3.

We can only do this with top-level methods, including getters and setters.

Otherwise, the value of this maybe different.

addEventListener vs onclick

To attach a click listener to an element, we can do it a few ways.

We can call addEventListener with the 'click' event.

Also, we can add the onclick attribute to an element.

We can also get the element and set a callback as the value of the onclick property.

For example, we can write:

element.addEventListener('click', onClick, false);

onClick is a function.

false disables capture mode, which propagates events from the root element down.

Likewise, we can write:

<a href="#" onclick="alert('hello');">click me</a>

We have the a element with the onclick attribute that has JavaScript expressions in it.

Likewise, we can write:

element.onclick = () => {   
  //...  
};

We set a listener function to the onclick method of a DOM element object.

They do the same thing.

Conclusion

We can attach click listeners in various ways,

Also, we can use this to reference itself in top-level methods.

There are also many tools for writing and running unit tests for JavaScript apps.