Though we've yet to address testing in this course, the importance of testing in front end web development can't be stressed enough.

Testing can help reveal bugs before they appear, instill confidence in your web application, and make it easy to onboard new developers on an existing codebase. As an upfront investment, testing often pays dividends over the lifetime of a system.

End-to-end vs. Unit Testing#

Application testing is often broken down into two main buckets: end-to-end testing or unit testing.

End-to-End Testing#

End-to-end testing is a top-down approach where tests are written to determine whether an application has been built appropriately from start to finish. We write end-to-end tests as though we are a user's movement through our application.

End-to-end tests are often labeled as integration tests since multiple modules or parts of a software system are often tested together.

Unit Testing#

Unit testing is a confined approach that involves isolating each part of an application and testing it in isolation. Tests are provided a given input and an output is often evaluated to make sure it matches expectations.

In this module, we'll be focusing solely on unit testing on the client side.

Testing a mock Calculator#

Assume we wanted to test a Calculator object performs all the expected arithmetic actions we expect from a calculator.

new Calculator();

// 2 + 2 we expect 4

// 5 - 3 we expect 2

// 4 * 4 we expect 16

With existing/popular testing frameworks in JavaScript, our test structure can look something like the following:

describe("Calculator", () => {

  it("sums 2 and 2 to 4", () => {

    // ...

  });

  it("subtracts 5 and 3 to 2", () => {

    // ...

  });

});