1

I saw many unit test examples testing real DOM elements.

ex:

expect(vm.$el.querySelector('div').textContent).toBe('xxx')

What's the purpose of checking the text of DOM elements?

Someone says that you can test computed values, but aren't computed values tested by using nextTick?

Also, people say that HTML tags will affect the text of the element:

<htmlTag><a><p>{{user.name}}</p></a></htmlTag>

And what if the product is in multiple languages?

I believe that we should test data, state, functions, and elements which should display correctly in the HTML template.

What are all you guys doing with Vue's unit test?

KevinHu
  • 991
  • 3
  • 10
  • 20

1 Answers1

1

You make different questions, but I will try to answer the 'general' question about Unit Testing in the DOM.

Unit Testing in DOM elements can be useful for differents reasons, but the most importants usually are these:

  • Test simple user actions

    Example of simple user actions:

    Clicking on a link that toggles the visibility of a DOM element Submitting a form that triggers the form validation (...) These actions can be easily tested by simulating DOM events

  • Analyzing Network Characteristics

    Manipulating JavaScript to determine various network characteristics from within the browser. An example here

  • Test DOM mutations & Manipulation

    A good example explained here

As you said, it's better to test directly the state / vars / methods, but sometimes the only way it's with the real or the virtual DOM.

To learn more you can take a look at this (fantastic) guide on GitHub for Unit Testing in JavaScript here

Hope it clarify and helps you!

Community
  • 1
  • 1
JP. Aulet
  • 4,375
  • 4
  • 26
  • 39
  • If we have test our function, I think the form validation and result should be e2e test. Is that correct? – KevinHu Oct 25 '17 at 09:35
  • It's little vague, but usually the answer is 'Yes, you are correct'. "Unit test should not really test the form. To test the form and other not controller related things use e2e testing." < extracted from here: https://stackoverflow.com/questions/36928333/angularjs-how-to-unit-test-form-validation – JP. Aulet Oct 25 '17 at 09:47
  • Thanks, and the other question about HTML tags will affect the text of the element. I don't really get what that person mean. Do you have any idea? – KevinHu Oct 25 '17 at 09:56
  • Sorry but I don't understand you, you mean "How I can test the with a dynamic user.name?" You should use a predefined user object I guess... – JP. Aulet Oct 25 '17 at 10:04