vuejs / test-utils-docs

Docs for vue-test-utils-next

DEPRECATED:

Docs are ported to VTU-next main repo: https://github.com/vuejs/vue-test-utils-next/

test-utils-docs's Issues

UI/UX: Better landing page

https://vuejs.github.io/vue-test-utils-next-docs/

It's not very good. Let's put something here?

• example component/test?
• example output?
• list some features?

Alternatively we remove this page and redirect here: https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html

What do you all think?

feat: Add Stubs/Shallow Mount section

https://github.com/vuejs/vue-test-utils-next-docs/blob/master/src/guide/stubs-shallow-mount.md

feat: Add Migration from VTU v1 section

https://github.com/vuejs/vue-test-utils-next-docs/blob/master/src/guide/migration.md

Update docs on plugins to show you can pass options

ref: vuejs/test-utils#255

feat: add HTTP requests section

This is one of the common pain points when someone starts testing their apps.

Thus, I would

• showcase how to mock GET requests.
• showcase how to mock POST requests.
• showcase how to test failing HTTP requests.

I'd use jest.mock to perform the API mocking/stubbing

guide: Essentials

This comment by @bencodezen in discord regarding docs-next:

Our goal in "Essentials" is to get people up and running with just enough and nothing more

Made me think about something that has been on my mind for days. Right now, I see VTU as a toolset with 2 categories of stuff:

• Set 1: basic, "essentials" tools such as find, trigger, setValue, emitted, and so on (I believe the list doesn't grow much larger, tbh).
• Set 2: advanced stuff: stubbing, setProps, findComponent, and whatever flavour of shallow mounting we end up using.

I think docs should follow this structure. An Essentials category, with everything you need to get up and running if you're writing your first tests with Vue.

Then, and only then, we unveil advanced features which require deeper knowledge.

Does it make sense? Would we be able to "split" all VTU-next features in two sets, or at least "prioritize" them in a way that allow us to teach them sequentially?

Suggested way for docs to show mocking axios?

Hi! 👋 I was writing docs for Making HTTP Requests, and I had this doubt.

There are several ways of mocking a module in Jest, and I'm not sure which one is the one we should showcase in docs:

jest.mock('axios')
axios.get = jest.fn().mockResolvedValue(posts)

jest.mock('axios', () => ({
  get: jest.fn(() => posts)
}))

jest.mock('axios')
axios.get.mockResolvedValue(fakePostList)

any preference? any downsides?

disclaimer: docs will mention alternatives such as axios-mock-adapter or msw, but I want to keep it simple for the example.

feat: add "How to test passing props" section

One of the common frictions in VTU is how to test that given a prop, something happens in the component under testing.

We should explain:

• How to pass in props, and assert the expected behavior (a special case is a prop that triggers some sort of behaviour in created or mounted).
• How to "update" that prop. This might change depending on the final VTU API (related), but we could "officialy" suggest using a Wrapper component for the time being.

feat: add Forms section

I believe handling forms is one of the main usages of Vue, and one of the common target of tests.

Thus, I would

• showcase how to perform simple, basic assertions and interactions on a form.
• showcase how to use VTU + vuelidate (once they update to Vue 3)
• showcase how to use VTU + vee-validate (once they update to Vue 3)

feat: add Vuex section

• showcase how to test a component that interacts with a store.
• showcase how to mock/stub some potentially expensive Vuex actions (through jest.mock).
• explain how, if needed, testing a Vuex store in isolation is no different from testing any other JS function/object.

I'm assuming Vuex 4, by the way.

docs: Continuous deployment

I tried to set a Github Action to automatically build and deploy docs, but I lack the ability to set up Secrets in this repo. I guess we should wait until both repos are merged and then work from there?

Also it would be cool to leverage Netlify, just as docs-next is doing.

I'll keep updating manually for now 👍

What test runners should we take into account?

Can we provide configuration guides for Jest+Mocha but then just use Jest for the rest of guide?

feat: add Vue Router section

• showcase how to mock Vue Router.
• showcase how to use router-link-stub (source).
• avoid common pitfalls when trying to assert against a URL.

feat: Add "Write Vue code that's easy to test" section

I was thinking of adding a section somewhere with several tips on writing testable code:

• Extract requests into services to simplify mocking.
• Extract complex methods and test them in isolation.
• Do not test implementation details (with examples).
• Build small things to have simpler test scenarios.
• Write tests before writing production code (the ultimate technique to write testable code 😆).

Also, we could point to some smells:

• Large "setup/arrange" blocks on each test.
• Breaking tests on a refactor (from my POV this is critical but I'm not 100% sure it would fit in this section).

Sounds cool? More ideas?

disclaimer: There's a lot of content on the internet about these topics. I think this section should be focused on Vue stuff with Vue examples, and then maybe links to well-established content.

Document global.config

We support config but we did not document it

It's here https://github.com/vuejs/vue-test-utils-next/blob/e5aee88ec6437a7d28dd0a4a9d0e84bbe3a8df40/src/types.ts#L24

Add asserting hidden elements to Conditional Rendering

We're missing a section for the resurrected isVisible(), showing how to test hidden content (using v-show, for instance).