False Positive Unit Test: Missing test cases

It is important to cover all behaviors.

Given this screen.

A form with required error message displayed.

As Frontend Engineer here tests I can write:

• make sure required error message appears if Facility not filled.
• make sure required error message appears if Shift not filled.

test('
User can see required error message of Facility
after click Save button if Facility not filled
')
{
leaveFacilityNotFilled();
clickSave();
expect('Please select facility').toBeInTheScreen();
}
test('
User can see required error message of Shift
after click Save button if Shift not filled
')
{
leaveShiftNotFilled();
clickSave();
expect('Please select shift').toBeInTheScreen();
}

I have just introduce you with tests that still allow a bug in the feature.

To passes the test cases. I can write production code like below.

function showRequiredErrorMessage() {
  setShowRequiredMessage(true);
}
function handleSave() {
  if (shiftNotFilled) {   <-- where checking for Facility?
    showRequiredErrorMessage();
  }
}
if (isShowRequiredMessage) {
  return (
    <div>
      Please select facility
      Please select shift
    </div>
  )
}

Test cases passed! But…

It is not unfilled Facility field that triggers error message to show up. But other field. If user fill the Shift then click save, system will proceeds that even facility leaves empty.

To fix it we add our missing test case. Here it is:

test('
User should not see required error message of Facility
after click Save button if Facility has been filled
')
{
selectFacility();
clickSave();
expect('Please select facility').not.toBeInTheScreen();
}

Then our unit test failed nicely because it keeps showing required error message even after we has been filled Facility field. So now we already know there is a bug and we can fix it.

This our complete test cases:

• make sure required error message appears only if Facility not filled.
• make sure required error message appears only if Shift not filled.
• make sure required error message not appears if Facility filled.
• make sure required error message not appears if Shift filled.

We not only need to test one side of behavior but all of them.

If example too obvious for you. Try to read the next example.

Other Example

• make sure saving not happen after user click save button if mandatory fields is not filled
• make sure saving happens after user click save button if mandatory fields has been filled
• make sure saving happens after user click save button if all fields has been filled

You may think third and second test case is same and the second one can be deleted. But it is not true. If we delete it then we will not aware there is a bug. The bug is you can’t saving except we fill “all” fields. In other word, mandatory fields is not enough.

Note taking: try to look at opposite of our test case.