Author: John Au-Yeung

Sometimes, we want to mock the imports of an ES6 module with Jest and JavaScript.

In this article, we’ll look at how to mock the imports of an ES6 module with Jest and JavaScript.

How to mock the imports of an ES6 module with Jest and JavaScript?

To mock the imports of an ES6 module with Jest and JavaScript, we can call jest.mock.

For instance, we write

import myfunc from "./mymod";
import shortid from "shortid";

jest.mock("shortid");

describe("mocks shortid", () => {
  it("works", () => {
    shortid.mockImplementation(() => 1);
    expect(myfunc()).toEqual(1);
  });
});

to import the real shortid module with

import shortid from "shortid";

Then we use

jest.mock("shortid");

to mock the shortid module.

And then we call shortid.mockImplementation with a callback to mock the return value of the shortid function.

Conclusion

To mock the imports of an ES6 module with Jest and JavaScript, we can call jest.mock.

Sometimes, we want to destructure onto an existing object with JavaScript.

In this article, we’ll look at how to destructure onto an existing object with JavaScript.

How to destructure onto an existing object with JavaScript?

To destructure onto an existing object with JavaScript, we can destructure the properties into variables and then put the properties into the new object.

For instance, we write

const { prop1, prop2, prop3 } = someObject;
const data = { prop1, prop2, prop3 };

to destructure the prop1, prop2 and prop3 properties from someObject.

Then we put the values of each variable as properties of the data object.

Conclusion

To destructure onto an existing object with JavaScript, we can destructure the properties into variables and then put the properties into the new object.

Sometimes, we want to insert Unicode character into JavaScript.

In this article, we’ll look at how to insert Unicode character into JavaScript.

How to insert Unicode character into JavaScript?

To insert Unicode character into JavaScript, we put them into strings.

For instance, we write

const omega = '\u03A9';

to assign omega to a string with the Unicode character for the letter omega.

Conclusion

To insert Unicode character into JavaScript, we put them into strings.

Sometimes, we want to downscale HTML5 canvas image with JavaScript.

In this article, we’ll look at how to downscale HTML5 canvas image with JavaScript.

How to downscale HTML5 canvas image with JavaScript?

To downscale HTML5 canvas image with JavaScript, we use the blitz-hermite-resize package.

To install it, we run

npm install blitz-resize --save

Then we use it by writing

const blitz = Blitz.create();

//...

const output = await blitz({
  source,
  width: 400,
  height: 600,
});

to call blitz with an object with the image source and the width and height to scale the image to.

source can be a DOM img element, DOM canvas element, jQuery element, base64 data URL string, or a File object.

It returns a promise with the resized image.

output is an object with the image in DOM img element, DOM canvas element, jQuery element, base64 data URL string, and a File object,

Conclusion

To downscale HTML5 canvas image with JavaScript, we use the blitz-hermite-resize package.

Sometimes, we want to disable scrolling on number inputs with JavaScript.

In this article, we’ll look at how to disable scrolling on number inputs with JavaScript.

How to disable scrolling on number inputs with JavaScript?

To disable scrolling on number inputs with JavaScript, we can listen to the wheel event.

For instance, we write

document.addEventListener("wheel", (event) => {
  if (document.activeElement.type === "number") {
    document.activeElement.blur();
  }
});

to get the active element with document.activeElement.

We get its type attribute and check if it’s 'number'.

And if it is, we call its blur method to move focus away from it to stop it from scrolling.

Conclusion

To disable scrolling on number inputs with JavaScript, we can listen to the wheel event.