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

typed_specs

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.

😈