0
\$\begingroup\$

I have a switch/case function that I'm testing and I have two versions of a unit test. I do not know which is the preferred method of writing a good test.

component

    <template>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col align-center">
          <a
            href="/"
            target="_blank"
            class="btn"
            name="cookieConsent"
            @click="logButtonClick(ANALYTICS.COOKIE_CONSENT)">{{ $t('footer.cookieConsent') }}</a>
          <a
            :href="$t('footer.termsUrl')"
            target="_blank"
            class="btn"
            name="termsAndConditions"
            @click="logButtonClick(ANALYTICS.TERMS_AND_CONDITIONS)">{{ $t('footer.terms') }}</a>
          <a
            :href="$t('footer.privacyUrl')"
            target="_blank"
            class="btn"
            name="privacyPolicy"
            @click="logButtonClick(ANALYTICS.PRIVACY_POLICY)">{{ $t('footer.privacy') }}</a>
          <p>{{ $t('footer.copyright') }}</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import analytics from '@/mixins/analytics'

export default {
  name: 'PageFooter',
  mixins: [analytics]
}
</script>

Version 1

I define a mockFn and then pass an arg to it.

describe('PageFooter Component', () => {
  const wrapper = shallowMount(PageFooter, { mocks })
  it('should render the component correctly', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })
  it('[positive] should track analytics if `cookieConsent` is passed to selectLink()', () => {
    const str = 'cookieConsent'
    const mockFn = jest.fn()
    jest.spyOn(wrapper.vm, 'logButtonClick')

    wrapper.find('a').trigger('click')
    mockFn(str)

    expect(wrapper.vm.logButtonClick).toHaveBeenCalledWith(ANALYTICS.COOKIE_CONSENT)
  })

Version 2

I call my switch/case function, selectLink,

  it('[positive] should track analytics if `termsAndConditions` is passed to selectLink()', () => {
    const str = 'termsAndConditions'
    jest.spyOn(wrapper.vm, 'logButtonClick')

    wrapper.find('a').trigger('click')
    wrapper.vm.selectLink(str)

    expect(wrapper.vm.logButtonClick).toHaveBeenCalledWith(ANALYTICS.TERMS_AND_CONDITIONS)
  }) 

Both tests versions pass, which one is most idiomatic in terms of testing? Is there a better way? Are there advantages to calling a mock function versus calling selectLink directly?

\$\endgroup\$
  • \$\begingroup\$ Neither, you shouldn't be spying on the component under test. Without a [mcve] of the component it's hard to say what exactly the test should look like. \$\endgroup\$ – jonrsharpe May 9 at 7:12
  • \$\begingroup\$ @jonrsharpe I added the component for clarity. \$\endgroup\$ – Kevin T. May 9 at 12:25
  • \$\begingroup\$ I'd suggest injecting a mock of the mixin, see e.g. stackoverflow.com/q/47329261/3001761 \$\endgroup\$ – jonrsharpe May 9 at 12:54
  • \$\begingroup\$ i saw that one, after you include it in the localVue, how do I use it in the test? \$\endgroup\$ – Kevin T. May 9 at 20:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.