2

I have a vue function that returns an array of strings

1 selectStyles (): string[] {
2  const baseStyles = ['selected-label', 'px-4']
3  const placeholderStyle = this.internalValue?.length === 0 ? 'text-gray-400' : 'text-black'
4
5  return [...baseStyles, placeholderStyle]
6 },

And I have three jest tests cases testing for

  1. if internalValue has a value and it's therefore its length is !0
  2. if internalValue is an empty array and therefore its length is 0
  3. if internalValue is undefined, undefined === 0 is false and therefore second condition is assigned

And yet codecov says that line 3 is a partial hit?

Any idea why?

I read this great response concerning an if statement in python and the results of that, but I don't think it answers my question.

Here are my test cases:

  it('selectStyles', () => {
    expect(
      Select.computed.selectStyles.call({
        internalValue: []
      })
    ).toEqual(['selected-label', 'px-4', 'text-gray-400'])

    expect(
      Select.computed.selectStyles.call({
        internalValue: ['some opt selected']
      })
    ).toEqual(['selected-label', 'px-4', 'text-black'])

    expect(
      Select.computed.selectStyles.call({
        internalValue: undefined, // unlikely
      })
    ).toEqual(['selected-label', 'px-4', 'text-black'])
  })

Tyia!

saylestyler
  • 389
  • 1
  • 4
  • 20
  • Jest's code coverage is supported by [Istanbul](https://istanbul.js.org/docs/tutorials/jest/), which has an [open issue, where optional chaining does not count as branch coverage](https://github.com/istanbuljs/istanbuljs/issues/516). But FWIW, I actually cannot reproduce the problem: the report generates full code coverage with that test code. Can you share a link to a reproduction of the problem where your reports show partial coverage? – tony19 Feb 17 '22 at 22:39
  • unfortunately it's not a public repo but here is a screenshot of the relevant portion that's yellow i legend , same code as above https://github.com/saylestyler/tylsyl/blob/master/codecovpartial.png?raw=true @tony19 – saylestyler Feb 18 '22 at 21:27
  • That screenshot doesn't offer anything more than what you've already described. Can you create a GitHub repo with a [mcve]? – tony19 Feb 18 '22 at 23:21

1 Answers1

1

You can use Nullish coalescing operator (??) to check if internalValue is undefined or not as this operator returns its right-hand side operand when its left-hand side operand is null or undefined.

// Here if this.internalValue is undefined we are assigning it with an empty array.
this.internalValue = this.internalValue ?? []

Your logic will be like this :

selectStyles (): string[] {
  const baseStyles = ['selected-label', 'px-4']
  this.internalValue = this.internalValue ?? []
  const placeholderStyle = this.internalValue?.length === 0 ? 'text-gray-400' : 'text-black'
  return [...baseStyles, placeholderStyle]
}

I just gave my thought as per your problem statement. You can do modifications as per the actual code you have.

Debug Diva
  • 26,058
  • 13
  • 70
  • 123