CODEWITHSUNDEEP
reactjsjestjs
fabiobh
fabiobh

Reputation: 779

How to correctly create a test in ReactJs with Jest when the function uses an if statement

A have a ReactJs application with the following function:

export function setTextoZonaNPS(valorNPS){
    if (valorNPS == null) return "Erro"
    else if (valorNPS >= 75) return "<span class='verde fonte_60x'>NPS: Zona de Excelência</span>"
    else if (valorNPS >= 50) return "<span class='verde fonte_60x'>NPS: Zona de Qualidade</span>"
    else if (valorNPS >= 0) return "<span class='laranja fonte_60x'>NPS: Zona de Aperfeiçoamento</span>"
    else if (valorNPS <  0) return "<span class='vermelho fonte_60x'>NPS: Zona Crítica</span>"
    else return "Erro"
}

I write some tests for the Application:

test('setTextoZonaNPS_set88String', () => {     expect( QuizzesHelper.setTextoZonaNPS("88") ).toMatch(/Excelência/)           })
test('setTextoZonaNPS_set88', () => {         expect( QuizzesHelper.setTextoZonaNPS(88) ).toMatch(/Excelência/)           })
test('setTextoZonaNPS_set47', () => {         expect( QuizzesHelper.setTextoZonaNPS(47) ).toMatch(/Qualidade/)           })
test('setTextoZonaNPS_set-6', () => {         expect( QuizzesHelper.setTextoZonaNPS(-6) ).toMatch(/Aperfeiçoamento/)           })
test('setTextoZonaNPS_setString', () => {         expect( QuizzesHelper.setTextoZonaNPS("-6") ).toMatch(/Erro/)           })
test('setTextoZonaNPS_setUndefined', () => {         expect( QuizzesHelper.setTextoZonaNPS(undefined) ).toMatch(/Erro/)           })
test('setTextoZonaNPS_setNull', () => {         expect( QuizzesHelper.setTextoZonaNPS(null) ).toMatch(/Erro/)           })
test('setTextoZonaNPS_setEmpty', () => {         expect( QuizzesHelper.setTextoZonaNPS() ).toMatch(/Erro/)           })

All tests have passed successfully. I have some questions about the tests and the code that I write.

I need to check the null value first because when I use the null value, it is the same as I use the 0(zero) value. Is this a common pattern in Javascript?

Am I writing too many tests? Is there a better way to write those tests?

Upvotes: 1

Views: 55

Answers (2)

k-wasilewski
k-wasilewski

Reputation: 4623

I would just say that it's a matter of taste, but in such situation I prefer to put all the expect statements in one test it('setTextToZonaNPS', ....

And yes, arithmetic operations use a ToNumber operation when encounter a NaN such as null.

Upvotes: 1

Estus Flask
Estus Flask

Reputation: 222354

Multiple tests could be generated either in a loop or with test.each:

const matchMap = [
  ["88", /Excelência/],
  [88, /Excelência/],
  ...
];

test.each(matchMap)('setTextoZonaNPS with %p', (value, match) => {
  expect(QuizzesHelper.setTextoZonaNPS(value)).toMatch(match);
});

Or this could be done in a single test if it's desirable for the test to fail on first error:

test('setTextoZonaNPS', () => {
  for (const [value, match] of matchMap)
    expect(QuizzesHelper.setTextoZonaNPS(value)).toMatch(match);
});

It doesn't test for NaN. == null may be not enough to check for invalid values. NaN value is covered with >= 0 and < 0 but some invalid values may pass. If the intention is to not allow this, it can be:

value = Number.parseFloat(valorNPS);
if (Number.isNaN(valorNPS)) return "Erro"

If the function accepts only integers, this possibly needs to be secured too, as well as tested.

Upvotes: 1

Related Questions