Author: John Au-Yeung

Sometimes, we want to mock inner function with Jest and JavaScript.

In this article, we’ll look at how to mock inner function with Jest and JavaScript.

How to mock inner function with Jest and JavaScript?

To mock inner function with Jest and JavaScript, we should export the inner function in a module.

For instance, we write

funcB.js

export const funcB = () => {
  return "original";
};

Then we import it with

foo.js

import { funcB } from "./funcB";

export const funcA = () => {
  return funcB();
};

Next, we write tests for funcA and funcB with

import * as funcBModule from "./funcB";
import { funcA } from "./foo";

describe("helper", () => {
  test("test funcB", () => {
    expect(funcBModule.funcB()).toBe("original");
  });

  test("test funcA", () => {
    const spy = jest.spyOn(funcBModule, "funcB");
    spy.mockReturnValue("mocked");

    expect(funcA()).toBe("mocked");

    spy.mockRestore();
  });
});

We funcBModule.funcB in the first test.

And we create a spy and mock the return value of funcB in the 2nd test with

const spy = jest.spyOn(funcBModule, "funcB");
spy.mockReturnValue("mocked");

And we call funcA after that.

Finally we call mockRestore to restore the mocks to their original values.

Conclusion

To mock inner function with Jest and JavaScript, we should export the inner function in a module.

Sometimes, we want to get the difference between dates in JavaScript.

In this article, we’ll look at how to get the difference between dates in JavaScript.

How to get the difference between dates in JavaScript?

To get the difference between dates in JavaScript, we can subtract 2 date objects directly.

For instance, we write

const a = new Date();
const b = new Date(2022, 0, 1, 0, 0, 0, 0);
const d = b - a;

to define the a and b date objects.

Then we subtract b by a to get their difference.

They’ll be converted to timestamps in milliseconds before the difference is computed, so d would be a timestamp in milliseconds.

Conclusion

To get the difference between dates in JavaScript, we can subtract 2 date objects directly.

To fix Node.js: SyntaxError: Cannot use import statement outside a module with JavaScript, we can create and import CommonJS modules.

For instance, we write

mod.js

module.exports.func = () => {
  console.log("Hello World");
};

We export the func function in the mod.js module file.

Then we write

const myMod = require("./mod");
myMod.func();

to call require to import mod.js.

And then we call myMod.func, which should log 'Hello World'.

Sometimes, we want to limit panning in Google maps API V3 and JavaScript.

In this article, we’ll look at how to limit panning in Google maps API V3 and JavaScript.

How to limit panning in Google maps API V3 and JavaScript?

To limit panning in Google maps API V3 and JavaScript, we can create a bounds object and check against it.

For instance, we write

const allowedBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(70.33956792419954, 178.01171875),
  new google.maps.LatLng(83.86483689701898, -88.033203125)
);
const lastValidCenter = map.getCenter();

google.maps.event.addListener(map, "center_changed", () => {
  if (allowedBounds.contains(map.getCenter())) {
    lastValidCenter = map.getCenter();
    return;
  }

  map.panTo(lastValidCenter);
});

to call addListener to listen to the center_changed event.

Then event handler is run when we pan the map.

In the event handler, we check if the center is in the bounds with allowedBounds.contains(map.getCenter()).

If it is, we pan with panTo.

Otherwise, we move back to lastValidCenter.

We create the allowedBounds object with the LatLngBounds constructor called with 2 LatLng objects.

Conclusion

To limit panning in Google maps API V3 and JavaScript, we can create a bounds object and check against it.

Sometimes, we want to resize a Base64 image in JavaScript without using canvas.

In this article, we’ll look at how to resize a Base64 image in JavaScript without using canvas.

How to resize a Base64 image in JavaScript without using canvas?

To resize a Base64 image in JavaScript without using canvas, we can create an off-screen canvas component.

For instance, we write

const imageToDataUri = (img, width, height) => {
  const canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(img, 0, 0, width, height);
  return canvas.toDataURL();
};

to define the imageToDataUri function.

In it, we create a canvas with createElement.

Then we get the canvas with canvas.getContext.

Next, we set the width and height of the canvas to the size we want.

Then we call drawImage to draw the image with the width and height.

And finally we call canvas.toDataURL to return the resized image as a base64 string.

Conclusion

To resize a Base64 image in JavaScript without using canvas, we can create an off-screen canvas component.