1 of 2

learn-integration-testing

index

Learn how to use integration tests to make sure the different parts of your application work together correctly.

Integration tests check that whole features of your code work correctly. This usually involves checking several units of code at once.

Testing application logic

Usually some of your code is devoted to "application logic". This is where you coordinate several other bits of code, possibly with branching logic depending on some conditions. Imagine we were building a calculator:

We could individually unit test all the small maths functions, but that would be a lot of work. Instead we can write tests for the calculate function. If we verify that gives the right answer then we know the smaller functions must work. We're also testing how our application integrates those small units together. If we only unit tested our maths functions we could miss that our app was still totally broken (e.g. if there was a mistake in our switch).

Challenge

Open workshop/index.js in your editor and read the calculate function
Open workshop/index.test.js and write tests for the calculate function.

Testing UI logic

Integration tests can also check where our code integrates with things outside our control. For example web apps often have to update the DOM to show results to the user. We didn't write the DOM code (that's part of the browser), but we still need to make sure our code integrates with it correctly.

We can write our tests to simulate a real user browsing the site. For example here is a form that takes user input and makes it uppercase:

Imagine we wanted to check that our code worked correctly. We would open the page in our browser, then follow these steps:

Find the input we want
Change the input's value to "test"
Click the submit button

We can write an automated test using JS that does exactly the same thing.

Challenge

Open workshop/index.html in your editor. You should see a basic calculator form.
Add a test to workshop/index.test.js that checks the form works correctly, just like the example above.

index

Learn how to use integration tests to make sure the different parts of your application work together correctly.

Integration tests check that whole features of your code work correctly. This usually involves checking several units of code at once.

Testing application logic

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;

function calculate(a, sign, b) {
  switch (sign) {
    case "+":
      return add(a, b);
    case "-":
      return subtract(a, b);
    case "*":
      return multiply(a, b);
    case "/":
      return divide(a, b);
    default:
      return "Please enter a valid sign (+, -, *, /)";
  }
}

Challenge

Open workshop/index.js in your editor and read the calculate function
Open workshop/index.test.js and write tests for the calculate function.

Testing UI logic

We can write our tests to simulate a real user browsing the site. For example here is a form that takes user input and makes it uppercase:

Imagine we wanted to check that our code worked correctly. We would open the page in our browser, then follow these steps:

Find the input we want
Change the input's value to "test"
Click the submit button

We can write an automated test using JS that does exactly the same thing.

Challenge

Open workshop/index.html in your editor. You should see a basic calculator form.
Add a test to workshop/index.test.js that checks the form works correctly, just like the example above.

<form>
  <label for="text">Enter text to be uppercased</label>
  <input type="text" id="text" name="text" />
  <button type="submit">Submit</button>
  <output id="result"></output>
</form>
<script>
  const form = document.querySelector("form");
  const result = document.querySelector("#result");

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const value = form.elements.text.value; // get the value of the name="text" input
    const uppercased = value.toUpperCase(); // uppercase the value
    result.textContent = uppercased; // put the result on the page
    form.reset(); // clear the form inputs for next time
  });
</script>

<form>
  <label for="text">Enter text to be uppercased</label>
  <input type="text" id="text" name="text" />
  <button type="submit">Submit</button>
  <output id="result"></output>
</form>
<script>
  const form = document.querySelector("form");
  const result = document.querySelector("#result");

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const value = form.elements.text.value; // get the value of the name="text" input
    const uppercased = value.toUpperCase(); // uppercase the value
    result.textContent = uppercased; // put the result on the page
    form.reset(); // clear the form inputs for next time
  });
</script>

learn-integration-testing

index

hashtagTesting application logic

hashtagChallenge

hashtagTesting UI logic

hashtagChallenge

learn-integration-testing

index

hashtagTesting application logic

hashtagChallenge

hashtagTesting UI logic

hashtagChallenge

Testing application logic

Challenge

Testing UI logic

Challenge

Testing application logic

Challenge

Testing UI logic

Challenge