Add troubleshooting sections and further guidelines to documentation sections

[cnotv]

Description

As outcome of several faced complexities, add a troubleshooting section within unit tests and Storybook section in the DevKit and extend the existing guidelines.

Context

Unit tests

• Selecting elements and use of data-testid over classes as separation of concerns
• Namespaced states mocks
• Module state mocks
• Vue mapping functions combined to modules, e.g. mapGetters('type-map', ['activeProducts']),
• Vm linting issues
• Elements outside of the wrapper, e.g. appended to the document or outside the component (vue-select example handled case)
• Object get/set
• Directives
• Mapped computed properties to the state or getters
• Slots (beside documentation)
  • Simple stub
  • Multiple cases
  • Destructured slots options (case Vue2 and Vue3) with multiple attributes
• Dispatched actions with mocked state
• Debounce and computed/method cases with Vue
• Case sensitive import in unit tests
• Debugging setup
• Debug views without components with stubs or shalloMount()
• View components with select/checkbox events
• Mock imports
• Complex views, e.g. cluster config editor
• Nuxt $fetch
• Async functions
  • Errors: it crashes Jest
  • How to await for Vue methods
• Class models
• Document functions, e.g. document.queryAll()
• Vue $el()
• Jest unexpected token (ESM mismatch, e.g. use of conditional chaining in Vue templates)
• Read only properties

Storybook

• Migrating i18n text in @rancher/components
• Require jsdoc comments
• Define default controls using Vue2 MDX, by default are all set automatically
• Action binding to the existing examples, currently never triggered in any story
• Example with Vuex integration, by default we have i18n mandatory
• Example with parent component holding data
• Global and component styling (SCSS)
• <nuxt-link> integration (e.g. DetailTop)
• Multiple slots

Setup

• Build issues in the monorepo (episode with rancher/icons)

Typescript

• Extending JS classes
• Extending JS mixins

Generic

• Some global styling are applied also to other packages, e.g. the case with the headers and Harvester

[aalves08]

@cnotv A couple of items more for the list

• Ghost errors (yarn test:ci vs yarn test -> one showing errors the other doesn't): jest tests/unit --clearCache

• Problem with method not being called/reachable: <button type="button" @click="someMethod" /> should be <button type="button" @click="someMethod()" />. If you need to get the event details, pass the arg $event like: <button type="button" @click="someMethod($event)" />

[gaktive]

This needs to be broken into smaller chunks.