Adds js/tsdocs definitions to js specs helpers
What does this MR do and why?
This MR adds JSDoc type definitions to extendedWrapper functions from spec/frontend/__helpers__/vue_test_utils_helper.js
.
/** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
let wrapper;
This will improve type inference on extended mount functions (mountExtended
and shallowMountExtended
)
And it will also add type definitions to wrapper (when it has a special type annotation)
Extended Wrapper type | Extended Wrapper method's return type |
---|---|
See screen recording below for more
Screenshots or screen recordings
How to set up and validate locally
Prerequisites:
You'll need helpers
alias to be recognised by your IDE. If it's not recognised — consider creating a jsconfig.json
in your project root:
jsconfig.json
{
"exclude": ["node_modules", "vendor"],
"include": [
"app/assets/javascripts",
"ee/app/assets/javascripts",
"spec/frontend",
"ee/spec/frontend",
"tmp/tests/frontend/fixtures/",
"tmp/tests/frontend/fixtures-ee/"
],
"compilerOptions": {
"baseUrl": ".",
"checkJs": false,
"disableSizeLimit": true,
"paths": {
"@apollo/client$/*": ["@apollo/client/core/*"],
"@sentry/browser$/*": [
"app/assets/javascripts/sentry/sentry_browser_wrapper.js/*"
],
"~/*": ["app/assets/javascripts/*"],
"emojis/*": ["fixtures/emojis/*"],
"empty_states/*": ["app/views/shared/empty_states/*"],
"icons/*": ["app/views/shared/icons/*"],
"images/*": ["app/assets/images/*"],
"vendor/*": ["vendor/assets/javascripts/*"],
"shared_queries/*": ["app/graphql/queries/*"],
"ee_else_ce/*": ["ee/app/assets/javascripts/*"],
"jh_else_ce/*": ["app/assets/javascripts/*"],
"any_else_ce/*": ["ee/app/assets/javascripts/*"],
"spec/test_constants$/*": ["spec/frontend/__helpers__/test_constants/*"],
"ee_else_ce_jest/*": ["ee/spec/frontend/*"],
"helpers/*": ["spec/frontend/__helpers__/*"],
"jest/*": ["spec/frontend/*"],
"test_fixtures/*": ["tmp/tests/frontend/fixtures-ee/*"],
"test_fixtures_static/*": ["spec/frontend/fixtures/static/*"],
"test_helpers/*": ["spec/frontend_integration/test_helpers/*"],
"public/*": ["public/*"],
"storybook_addons/*": ["storybook/config/addons/*"],
"ee/*": ["ee/app/assets/javascripts/*"],
"ee_component/*": ["ee/app/assets/javascripts/*"],
"ee_empty_states/*": ["ee/app/views/shared/empty_states/*"],
"ee_icons/*": ["ee/app/views/shared/icons/*"],
"ee_images/*": ["ee/app/assets/images/*"],
"jh_else_ee/*": ["ee/app/assets/javascripts/*"],
"ee_jest/*": ["ee/spec/frontend/*"]
}
}
}
If your IDE doesn't automatically fetch lodash
type definitions — for mountExtended
type annotations you might want to run
yarn add -D @types/lodash
See Adds @types/lodash node_module (!128525 - merged) for details.
Testing:
To test mountExtended
functions annotation — just start typing it.
To test wrapper
type annotation — add a JSDoc comment to your wrapper declaration, e.g.:
/** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
let wrapper;
This is needed because we separate variable declaration and variable assignment. It is not needed when we do an inline let wrapper = mountExtended()
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.