Pure functions are the perfect case for unit testing. For a given input, we always expect the same output—there is no internal state involved. Let’s take a look at a few examples and some simple tests that check if the methods work as expected. Jasmine Jasmine is a unit test framework for JavaScript. It can run tests in both Node.js or on the browser. It’s used in the Angular framework, and it’s especially popular in projects based on Angular. It’s a solid choice for Vanilla JS projects, or projects based on other frameworks as well. Happy Path Testing Happy path testing is when we test a method with inputs that it’s expected to work normally. The arguments are valid and within reasonable ranges. Those tests check if the method does its job correctly—the test cases should be straightforward examples of how the method is explained in its documentation. Pseudocode examples: expect(add(2, 2)).toBe(4), expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”) Those tests are meant to automatically catch it anytime the method key behavior is broken. Methods Let’s see a few simple methods: simple operations that we might need in some real-world applications. All implementations are greatly simplified—all methods will break in an ugly way if only we provide them with parameters that differ slightly from what is expected. The code is far from being robust. greet Method that greets the user with their name and surname: export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
} shortDate shortDate is a formatting method that takes a date object and returns it formatted as a short string. The code: export function shortDate(date) {
  return date.toISOString().substring(0, 10);
} ellipsis ellipsis takes a long text string and an optional length parameter, and then trims the string to fit within the limit: export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
} translate A method that provides translated string values for a key and lang pair. It’s a simplified implementation of what could be replaced with more advanced translating libraries. export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
} applyDiscount Method to apply a percentage discount to a price. It can feel like overkill with this naive implementation, but later, when we start investigating edge cases, it will get much more interesting. export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
} calculatePrice This one calculates the total price when buying multiple units at a given price. It will also get more complicated after adding interesting edge cases. export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Complete JS Code The complete JS code, src/main.js: export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
}

export function shortDate(date) {
  return date.toISOString().substring(0, 10);
}

export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
}

export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
}

export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
}

export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Adding Jasmine Tests To add Jasmine, let’s start by converting the folder into an npm package: $ npm init -y
Wrote to …/package.json:
… Then we can install the Jasmine package: $ npm install --save-dev jasmine

added 42 packages, and audited 43 packages in 2s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities Then we can generate folders and files used by Jasmine: $ npx jasmine init
(no output) This command generates the following: spec/—a folder where we can put *.spec.js files with the test, and spec/support/jasmine.json—a file with the Jasmine config. Unit Tests For the following unit tests, I’m focusing on the happy path only—I check if the result is as expected for reasonable inputs. The test should be self-explanatory, so let’s take a look at them: import {
  greet,
  shortDate,
  ellipsis,
  translate,
  applyDiscount,
  calculatePrice,
} from "../src/main.js";

describe("main", () => {
  describe("greet", () => {
    it("should greet by name and surname", () => {
      expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!");
    });
  });

  describe("shortDate", () => {
    it("should format correclty date", () => {
      const date = new Date("2023-11-02");
      expect(shortDate(date)).toEqual("2023-11-02");
    });
  });

  describe("shortDate", () => {
    it("should shorten long text at 50 chars", () => {
      expect(
        ellipsis(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa."
        )
      ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…");
    });

    it("should leave short text unchanged", () => {
      expect(ellipsis("Lorem ipsum sin dolor")).toEqual(
        "Lorem ipsum sin dolor"
      );
    });

    it("should shorten to custom length", () => {
      expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…");
    });
  });

  describe("translate", () => {
    it("should translate to supported langauges", () => {
      expect(translate("hello", "en")).toEqual("Hello!");
      expect(translate("hello", "pl")).toEqual("Cześć!");
    });
  });

  describe("applyDiscount", () => {
    it("should lower the price accordingly", () => {
      expect(applyDiscount(120, 25)).toEqual(90);
      expect(applyDiscount(8, 50)).toEqual(4);
    });
  });

  describe("calculatePrice", () => {
    it("should find a price of many products", () => {
      expect(calculatePrice(4, 3)).toEqual(12);
      expect(calculatePrice(9, 0.5)).toEqual(4.5);
    });
  });
}); (file spec/main.spec.js) Running Tests To run the tests, we can add the following script to package.json: ..
  "scripts": {
    "test": "jasmine"
  },
  … With this in place, npm run test runs our tests: $ npm run test

> testing-example@1.0.0 test
> jasmine

Randomized with seed 76873
Started
........


8 specs, 0 failures
Finished in 0.004 seconds
Randomized with seed 76873 (jasmine --random=true --seed=76873) Summary In this post, we took a look at a simple example of JS code and how it can be covered by unit tests. You can find the complete code example on GitHub. Also published here Pure functions are the perfect case for unit testing. For a given input, we always expect the same output—there is no internal state involved. Let’s take a look at a few examples and some simple tests that check if the methods work as expected. Jasmine Jasmine is a unit test framework for JavaScript. It can run tests in both Node.js or on the browser. It’s used in the Angular framework, and it’s especially popular in projects based on Angular. It’s a solid choice for Vanilla JS projects, or projects based on other frameworks as well. Happy Path Testing Happy path testing is when we test a method with inputs that it’s expected to work normally. The arguments are valid and within reasonable ranges. Those tests check if the method does its job correctly—the test cases should be straightforward examples of how the method is explained in its documentation. Pseudocode examples: expect(add(2, 2)).toBe(4), expect(add(2, 2)).toBe(4) , expect(add(2, 2)).toBe(4) expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”) expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”) expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”) Those tests are meant to automatically catch it anytime the method key behavior is broken. Methods Let’s see a few simple methods: simple operations that we might need in some real-world applications. All implementations are greatly simplified—all methods will break in an ugly way if only we provide them with parameters that differ slightly from what is expected. The code is far from being robust. greet Method that greets the user with their name and surname: export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
} export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
} shortDate shortDate is a formatting method that takes a date object and returns it formatted as a short string. The code: shortDate export function shortDate(date) {
  return date.toISOString().substring(0, 10);
} export function shortDate(date) {
  return date.toISOString().substring(0, 10);
} ellipsis ellipsis takes a long text string and an optional length parameter, and then trims the string to fit within the limit: ellipsis export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
} export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
} translate A method that provides translated string values for a key and lang pair. It’s a simplified implementation of what could be replaced with more advanced translating libraries. key lang export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
} export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
} applyDiscount Method to apply a percentage discount to a price. It can feel like overkill with this naive implementation, but later, when we start investigating edge cases, it will get much more interesting. export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
} export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
} calculatePrice This one calculates the total price when buying multiple units at a given price. It will also get more complicated after adding interesting edge cases. export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Complete JS Code The complete JS code, src/main.js : src/main.js export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
}

export function shortDate(date) {
  return date.toISOString().substring(0, 10);
}

export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
}

export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
}

export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
}

export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
}

export function shortDate(date) {
  return date.toISOString().substring(0, 10);
}

export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
}

export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
}

export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
}

export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Adding Jasmine Tests To add Jasmine, let’s start by converting the folder into an npm package: $ npm init -y
Wrote to …/package.json:
… $ npm init -y
Wrote to …/package.json:
… Then we can install the Jasmine package: $ npm install --save-dev jasmine

added 42 packages, and audited 43 packages in 2s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities $ npm install --save-dev jasmine

added 42 packages, and audited 43 packages in 2s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities Then we can generate folders and files used by Jasmine: $ npx jasmine init
(no output) $ npx jasmine init
(no output) This command generates the following: spec/—a folder where we can put *.spec.js files with the test, and spec/ —a folder where we can put *.spec.js files with the test, and spec/ *.spec.js spec/support/jasmine.json—a file with the Jasmine config. spec/support/jasmine.json —a file with the Jasmine config. spec/support/jasmine.json Unit Tests For the following unit tests, I’m focusing on the happy path only—I check if the result is as expected for reasonable inputs. The test should be self-explanatory, so let’s take a look at them: import {
  greet,
  shortDate,
  ellipsis,
  translate,
  applyDiscount,
  calculatePrice,
} from "../src/main.js";

describe("main", () => {
  describe("greet", () => {
    it("should greet by name and surname", () => {
      expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!");
    });
  });

  describe("shortDate", () => {
    it("should format correclty date", () => {
      const date = new Date("2023-11-02");
      expect(shortDate(date)).toEqual("2023-11-02");
    });
  });

  describe("shortDate", () => {
    it("should shorten long text at 50 chars", () => {
      expect(
        ellipsis(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa."
        )
      ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…");
    });

    it("should leave short text unchanged", () => {
      expect(ellipsis("Lorem ipsum sin dolor")).toEqual(
        "Lorem ipsum sin dolor"
      );
    });

    it("should shorten to custom length", () => {
      expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…");
    });
  });

  describe("translate", () => {
    it("should translate to supported langauges", () => {
      expect(translate("hello", "en")).toEqual("Hello!");
      expect(translate("hello", "pl")).toEqual("Cześć!");
    });
  });

  describe("applyDiscount", () => {
    it("should lower the price accordingly", () => {
      expect(applyDiscount(120, 25)).toEqual(90);
      expect(applyDiscount(8, 50)).toEqual(4);
    });
  });

  describe("calculatePrice", () => {
    it("should find a price of many products", () => {
      expect(calculatePrice(4, 3)).toEqual(12);
      expect(calculatePrice(9, 0.5)).toEqual(4.5);
    });
  });
}); import {
  greet,
  shortDate,
  ellipsis,
  translate,
  applyDiscount,
  calculatePrice,
} from "../src/main.js";

describe("main", () => {
  describe("greet", () => {
    it("should greet by name and surname", () => {
      expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!");
    });
  });

  describe("shortDate", () => {
    it("should format correclty date", () => {
      const date = new Date("2023-11-02");
      expect(shortDate(date)).toEqual("2023-11-02");
    });
  });

  describe("shortDate", () => {
    it("should shorten long text at 50 chars", () => {
      expect(
        ellipsis(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa."
        )
      ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…");
    });

    it("should leave short text unchanged", () => {
      expect(ellipsis("Lorem ipsum sin dolor")).toEqual(
        "Lorem ipsum sin dolor"
      );
    });

    it("should shorten to custom length", () => {
      expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…");
    });
  });

  describe("translate", () => {
    it("should translate to supported langauges", () => {
      expect(translate("hello", "en")).toEqual("Hello!");
      expect(translate("hello", "pl")).toEqual("Cześć!");
    });
  });

  describe("applyDiscount", () => {
    it("should lower the price accordingly", () => {
      expect(applyDiscount(120, 25)).toEqual(90);
      expect(applyDiscount(8, 50)).toEqual(4);
    });
  });

  describe("calculatePrice", () => {
    it("should find a price of many products", () => {
      expect(calculatePrice(4, 3)).toEqual(12);
      expect(calculatePrice(9, 0.5)).toEqual(4.5);
    });
  });
}); (file spec/main.spec.js ) spec/main.spec.js Running Tests To run the tests, we can add the following script to package.json : package.json ..
  "scripts": {
    "test": "jasmine"
  },
  … ..
  "scripts": {
    "test": "jasmine"
  },
  … With this in place, npm run test runs our tests: npm run test $ npm run test

> testing-example@1.0.0 test
> jasmine

Randomized with seed 76873
Started
........


8 specs, 0 failures
Finished in 0.004 seconds
Randomized with seed 76873 (jasmine --random=true --seed=76873) $ npm run test

> testing-example@1.0.0 test
> jasmine

Randomized with seed 76873
Started
........


8 specs, 0 failures
Finished in 0.004 seconds
Randomized with seed 76873 (jasmine --random=true --seed=76873) Summary In this post, we took a look at a simple example of JS code and how it can be covered by unit tests. You can find the complete code example on GitHub . complete code example on GitHub Also published here Also published here here

Jasmine: A Beginner-Friendly Guide on Pure Functions and Basic Tests

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Steps to Adding End-to-end Tests to Your Project

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Is ‘bias for action’ making product managers lazier?

What No One Told Me About Being a Product Manager at an Early Stage Startup

3 Steps to Adding End-to-end Tests to Your Project

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Is ‘bias for action’ making product managers lazier?

What No One Told Me About Being a Product Manager at an Early Stage Startup

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps