vue-test-utils-compat - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

CHANGELOG.md

@@ -0,22 +1,28 @@
+# 0.0.2
+
+- Added flags:
+  - FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS
+
 ## 0.0.1
-* Initial release.
-* Flags available:
-  * EXPORT_CREATE_LOCAL_VUE
-  * EXPORT_CREATE_WRAPPER
-  * GLOBAL_STUBS
-  * MOUNT_ARGS_CONTEXT_ATTRS
-  * MOUNT_ARGS_CONTEXT_CHILDREN
-  * MOUNT_ARGS_CONTEXT_CLASS
-  * MOUNT_ARGS_CONTEXT_ON
-  * MOUNT_ARGS_CONTEXT_PROPS
-  * MOUNT_ARGS_LISTENERS
-  * MOUNT_ARGS_MOCKS
-  * MOUNT_ARGS_PROVIDE
-  * MOUNT_ARGS_SCOPED_SLOTS
-  * MOUNT_ARGS_SCOPED_SLOTS_THIS
-  * MOUNT_ARGS_STUBS
-  * WRAPPER_ATTRIBUTES_DISABLED
-  * WRAPPER_ATTRIBUTES_VALUE
-  * WRAPPER_DESTROY
-  * WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED
-  * WRAPPER_FIND_ALL
+
+- Initial release.
+- Flags available:
+  - EXPORT_CREATE_LOCAL_VUE
+  - EXPORT_CREATE_WRAPPER
+  - GLOBAL_STUBS
+  - MOUNT_ARGS_CONTEXT_ATTRS
+  - MOUNT_ARGS_CONTEXT_CHILDREN
+  - MOUNT_ARGS_CONTEXT_CLASS
+  - MOUNT_ARGS_CONTEXT_ON
+  - MOUNT_ARGS_CONTEXT_PROPS
+  - MOUNT_ARGS_LISTENERS
+  - MOUNT_ARGS_MOCKS
+  - MOUNT_ARGS_PROVIDE
+  - MOUNT_ARGS_SCOPED_SLOTS
+  - MOUNT_ARGS_SCOPED_SLOTS_THIS
+  - MOUNT_ARGS_STUBS
+  - WRAPPER_ATTRIBUTES_DISABLED
+  - WRAPPER_ATTRIBUTES_VALUE
+  - WRAPPER_DESTROY
+  - WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED
+  - WRAPPER_FIND_ALL

package.json

 {
   "name": "vue-test-utils-compat",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Compat layer for @vue/test-utils@2.x",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -6,2 +6,3 @@ # vue-test-utils-compat
 ---
+
 A migration tool to help you with migration from Vue 2 to Vue3
@@ -15,22 +16,22 @@
 
-* ⏩ [Quickstart](#-quickstart)
-* ✔️ [Upgrade workflow](#%EF%B8%8F-upgrade-workflow)
-* 🌐 [Global API](#-global-api)
-* 🏁 Compatibility flags
-    * [EXPORT_CREATE_LOCAL_VUE](#export_create_local_vue)
-    * [EXPORT_CREATE_WRAPPER](#export_create_wrapper)
-    * [MOUNT_ARGS_CONTEXT_*](#mount_args_context_)
-    * [MOUNT_ARGS_LISTENERS](mount_args_listeners)
-    * [MOUNT_ARGS_MOCKS](#mount_args_mocks)
-    * [MOUNT_ARGS_PROVIDE](#mount_args_provide)
-    * [MOUNT_ARGS_SCOPED_SLOTS](#mount_args_scoped_slots)
-    * [MOUNT_ARGS_SCOPED_SLOTS_THIS](#mount_args_scoped_slots_this)
-    * [MOUNT_ARGS_STUBS](#mount_args_stubs)
-    * [WRAPPER_ATTRIBUTES_DISABLED](#wrapper_attributes_disabled)
-    * [WRAPPER_ATTRIBUTES_VALUE](#wrapper_attributes_value)
-    * [WRAPPER_DESTROY](#wrapper_destroy)
-    * [WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED](#wrapper_do_not_include_native_events_in_emitted)
-    * [WRAPPER_FIND_ALL](#wrapper_find_all)
-* 🚧 [Work in progress](#-work-in-progress)
-* ⚠️ [Known issues](#known-issues)
+- ⏩ [Quickstart](#-quickstart)
+- ✔️ [Upgrade workflow](#%EF%B8%8F-upgrade-workflow)
+- 🌐 [Global API](#-global-api)
+- 🏁 Compatibility flags
+  - [EXPORT_CREATE_LOCAL_VUE](#export_create_local_vue)
+  - [EXPORT_CREATE_WRAPPER](#export_create_wrapper)
+  - [MOUNT*ARGS_CONTEXT*\*](#mount_args_context_)
+  - [MOUNT_ARGS_LISTENERS](mount_args_listeners)
+  - [MOUNT_ARGS_MOCKS](#mount_args_mocks)
+  - [MOUNT_ARGS_PROVIDE](#mount_args_provide)
+  - [MOUNT_ARGS_SCOPED_SLOTS](#mount_args_scoped_slots)
+  - [MOUNT_ARGS_SCOPED_SLOTS_THIS](#mount_args_scoped_slots_this)
+  - [MOUNT_ARGS_STUBS](#mount_args_stubs)
+  - [WRAPPER_ATTRIBUTES_DISABLED](#wrapper_attributes_disabled)
+  - [WRAPPER_ATTRIBUTES_VALUE](#wrapper_attributes_value)
+  - [WRAPPER_DESTROY](#wrapper_destroy)
+  - [WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED](#wrapper_do_not_include_native_events_in_emitted)
+  - [WRAPPER_FIND_ALL](#wrapper_find_all)
+- 🚧 [Work in progress](#-work-in-progress)
+- ⚠️ [Known issues](#known-issues)
 
@@ -40,2 +41,3 @@ ## ⏩ Quickstart
 **Vue 3**:
+
 ```js
@@ -53,5 +55,6 @@ const VueTestUtils = require('vue@/test-utils');
 **Vue 3 migration build** (in Vue 2 mode):
+
 ```js
-const VueTestUtils = require('vue@/test-utils');
-const Vue = require('vue');
+const VueTestUtils = require("vue@/test-utils");
+const Vue = require("vue");
 let compatH;
@@ -61,12 +64,13 @@ Vue.createApp({
     MODE: 3,
-    RENDER_FUNCTION: 'suppress-warning'
+    RENDER_FUNCTION: "suppress-warning",
   },
   render(h) {
-    compatH = h
-  }
-}).mount(document.createElement('div'))
-installVTUCompat(VTU, fullCompatConfig, compatH)
+    compatH = h;
+  },
+}).mount(document.createElement("div"));
+installVTUCompat(VTU, fullCompatConfig, compatH);
 ```
 
 ## ✔️ Upgrade workflow
+
 This upgrade workflow is demonstrated in [bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue/compare/dev...xanf:vue3-compat-build) migration to Vue 3.
@@ -77,3 +81,4 @@
 1. Make sure your test infrastructure uses `@vue/compat` as `vue` alias.
-Example (using jest - `jest.config.js`):
+   Example (using jest - `jest.config.js`):
+
 ```js
@@ -83,3 +88,3 @@ module.exports = {
   moduleNameMapper: {
-    '^vue$': '@vue/compat',
+    "^vue$": "@vue/compat",
   },
@@ -89,2 +94,3 @@ // ...
 ```
+
 > Hint: it might be a good idea to set up your environment to use Vue 2 or Vue 3 conditionally. It greatly simplifies the migration process.
@@ -97,13 +103,15 @@
 ```js
-  const compatH = new Vue({}).$createElement
-  installVTUCompat(VTU, fullCompatConfig, compatH)
+const compatH = new Vue({}).$createElement;
+installVTUCompat(VTU, fullCompatConfig, compatH);
 ```
 
 4. Run your tests and fix failing ones. Typical failures usually include:
-    * using private Vue API (like `__vue__`) [[example commit]](https://github.com/bootstrap-vue/bootstrap-vue/commit/f068bed68c99ee5f633059e8f098ed4ffced72d2)
-    * wrong usage of `find` vs. `findComponent` [[example commit]](https://github.com/bootstrap-vue/bootstrap-vue/commit/5a6de07225b8963e0b8d5fdd7f3cf08123240cb0)
-    * snapshots (they might differ between Vue 2 and Vue 3)
 
+   - using private Vue API (like `__vue__`) [[example commit]](https://github.com/bootstrap-vue/bootstrap-vue/commit/f068bed68c99ee5f633059e8f098ed4ffced72d2)
+   - wrong usage of `find` vs. `findComponent` [[example commit]](https://github.com/bootstrap-vue/bootstrap-vue/commit/5a6de07225b8963e0b8d5fdd7f3cf08123240cb0)
+   - snapshots (they might differ between Vue 2 and Vue 3)
+
 5. At this point, you (theoretically) have a green suite and can start working on upgrading your code to Vue 3
 6. Switch `fullCompatConfig` from step 3 with the detailed configuration of compat flags. You can copy-paste the full list of flags below or take a look at the source code to figure all flags:
+
 ```js
@@ -133,4 +141,5 @@ const compatConfig = {
   WRAPPER_FIND_ALL: true,
-}
+};
 ```
+
 6. Turn off one compatibility flag. Fix failing tests. Repeat.
@@ -141,8 +150,8 @@ 7. As soon as you turn off the last compatibility flag - throw away and uninstall this package. You are awesome!
 
-* `installCompat(VueTestUtilsModule, compatConfig, vueH)`
-   * `VueTestUtilsModule` - module, which will be patched
-   * `compatConfig: Record<string, boolean>` - list of compatibility flags
-   * `vueH` - function which will be used to create Vue VNodes. Required only if `MOUNT_ARGS_SCOPED_SLOTS_THIS` compatibility flag is used, could be omitted otherwise
-* `compatFlags` - object with all available compatibility
-* `fullCompatConfig` - config object with all compatibility flags enabled
+- `installCompat(VueTestUtilsModule, compatConfig, vueH)`
+  - `VueTestUtilsModule` - module, which will be patched
+  - `compatConfig: Record<string, boolean>` - list of compatibility flags
+  - `vueH` - function which will be used to create Vue VNodes. Required only if `MOUNT_ARGS_SCOPED_SLOTS_THIS` compatibility flag is used, could be omitted otherwise
+- `compatFlags` - object with all available compatibility
+- `fullCompatConfig` - config object with all compatibility flags enabled
 
@@ -154,5 +163,6 @@ ## 🏁 Compatibility flags
 ### EXPORT_CREATE_LOCAL_VUE
+
 Adds `createLocalVue` to `@vue/test-utils` module and support for `{ localVue }` mount option.
 
->⚠️ `localVue` provides `.extend`, which is no-op operation. It is sufficient for most of the code but might require special handling
+> ⚠️ `localVue` provides `.extend`, which is no-op operation. It is sufficient for most of the code but might require special handling
 
@@ -162,2 +172,3 @@ ➡️ Migration strategy: [available in @vue/test-utils v2 docs](https://next.vue-test-utils.vuejs.org/migration/#no-more-createlocalvue)
 ### EXPORT_CREATE_WRAPPER
+
 Adds `createWrapper` to `@vue/test-utils` module
@@ -167,20 +178,24 @@
 
-### MOUNT_ARGS_CONTEXT_*
+### MOUNT*ARGS_CONTEXT*\*
+
 Flags:
-* `MOUNT_ARGS_CONTEXT_ATTRS`
-* `MOUNT_ARGS_CONTEXT_CHILDREN`
-* `MOUNT_ARGS_CONTEXT_CLASS`
-* `MOUNT_ARGS_CONTEXT_ON`
-* `MOUNT_ARGS_CONTEXT_PROPS`
 
+- `MOUNT_ARGS_CONTEXT_ATTRS`
+- `MOUNT_ARGS_CONTEXT_CHILDREN`
+- `MOUNT_ARGS_CONTEXT_CLASS`
+- `MOUNT_ARGS_CONTEXT_ON`
+- `MOUNT_ARGS_CONTEXT_PROPS`
+
 Enable support for `context` field in `mount` args of `@vue/test-utils` (used to test functional components)
 
->⚠️ `MOUNT_ARGS_CONTEXT_CHILDREN` converts `context.children` to the default slot of the component. It is not a complete implementation of old `context.children` behavior but should be sufficient for most cases.
+> ⚠️ `MOUNT_ARGS_CONTEXT_CHILDREN` converts `context.children` to the default slot of the component. It is not a complete implementation of old `context.children` behavior but should be sufficient for most cases.
 
 ➡️ Migration strategy: rewrite your mount args as follows:
-  * `context.props`, `context.attrs`, and `context.class` go directly to `props`
-  * `children` are replaced with `slots.default`
-  * `context.on` become corresponding `props`: (`click` → `onClick`, etc.)
 
+- `context.props`, `context.attrs`, and `context.class` go directly to `props`
+- `children` are replaced with `slots.default`
+- `context.on` become corresponding `props`: (`click` → `onClick`, etc.)
+
 ### MOUNT_ARGS_LISTENERS
+
 Allow passing `{ listeners }` field in `mount` arguments
@@ -191,2 +206,3 @@
 ### MOUNT_ARGS_MOCKS
+
 Enable passing `mocks` to the component from `mount` arguments
@@ -197,8 +213,11 @@
 ### MOUNT_ARGS_PROVIDE
+
 Allow passing relevant `provide` to the component
->⚠️ `@vue/test-utils` v2 does not support passing `provide` as function. It means that your `provide()` function might be invoked earlier than you think
 
+> ⚠️ `@vue/test-utils` v2 does not support passing `provide` as function. It means that your `provide()` function might be invoked earlier than you think
+
 ➡️ Migration strategy: move `provide` mount arg to `global.provide`. If your `provide` is a function - replace it with an object.
 
 ### MOUNT_ARGS_SCOPED_SLOTS
+
 Enable `scopedSlots` support in mount args
@@ -209,10 +228,13 @@
 ### MOUNT_ARGS_SCOPED_SLOTS_THIS
+
 Allows `scopedSlots` declared as functions to receive `this` which contains `$createElement` and `$set`
->⚠️⚠️⚠️  Requires `MOUNT_ARGS_SCOPED_SLOTS` to be enabled and third argument (`vueH` ) a for `installCompat` call
 
->️⚠️`$createElement` provided by this flag is not context-aware and will not be able to render components as a string. Refer to [Vue docs](https://v3.vuejs.org/guide/migration/render-function-api.html#registered-component) for details
+> ⚠️⚠️⚠️ Requires `MOUNT_ARGS_SCOPED_SLOTS` to be enabled and third argument (`vueH` ) a for `installCompat` call
 
-➡️ Migration strategy: ❌  rewrite such slots in your tests
+> ️⚠️`$createElement` provided by this flag is not context-aware and will not be able to render components as a string. Refer to [Vue docs](https://v3.vuejs.org/guide/migration/render-function-api.html#registered-component) for details
 
+➡️ Migration strategy: ❌ rewrite such slots in your tests
+
 ### MOUNT_ARGS_STUBS
+
 Enable `stubs` to be passed to mount arguments
@@ -223,2 +245,3 @@
 ### WRAPPER_ATTRIBUTES_DISABLED
+
 Adds special handling when retrieving the `disabled` attribute on `wrapper`. Previously Vue always normalized such values ([Vue 3 migration guide](https://v3.vuejs.org/guide/migration/attribute-coercion.html) has more details on this)
@@ -229,7 +252,9 @@
 ### WRAPPER_ATTRIBUTES_VALUE
+
 Adds special handling when retrieving the `value` attribute on `wrapper`. Previously Vue always set `value` as DOM node attribute, which is no more the case
 
-➡️ Migration strategy: ❌  rewrite   your value retrieval in another way
+➡️ Migration strategy: ❌ rewrite your value retrieval in another way
 
 ### WRAPPER_DESTROY
+
 Enables `wrapper.destroy` calls and `enableAutoDestroy` calls
@@ -240,2 +265,3 @@
 ### WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED
+
 Makes sure that native events will not be captured in `.emitted()`
@@ -246,2 +272,3 @@
 ### WRAPPER_FIND_ALL
+
 Implements old behavior of `.findAll` / `.findAllComponents` when results were wrapped with special object with `.wrappers` field and various methods (`.at`, `.filter`, `.trigger`, etc.)
@@ -251,12 +278,16 @@
 
+### WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS (added in v0.0.2)
+
+Implements old behavior of `.find` / `.findAll` when results will be Vue components if they matches. So potentially, you can receive mixed array of DOM/Vue wrappers when using `.findAll` with this compat flag
+
+➡️ Migration strategy: replace `.find` with `.findComponent` and `.findAll` with `.findAllComponents` where appropriate. Please take a note that if your tests rely on having a mixed array of DOM/Vue wrappers - you need to rewrite them
+
 ## 🚧 Work in progress
+
 These compat rules are a work in progress and will be included soon
 
-### WRAPPER_FIND_BY_REF
-Allows finding DOM node by ref
+## Known issues
 
-## Known issues
 This package monkey-patches `@vue/test-utils` package. Depending on your setup this might not work (for example you are using real imports). In that case you can create a mutable wrapper around VTU and replace all your imports from `@vue/test-utils` to this helper module:
 
-
 ```js
@@ -263,0 +294,0 @@ import * as VueTestUtils from '@vue/test-utils';

src/compats/wrapper-find-all.js

 function wrapResults(results) {
   return {
+    ...results,
     wrappers: results,
@@ -26,3 +27,3 @@ at(i) {
 
-export function install(VTU) {
+export function install(VTU, config) {
   [VTU.config.plugins.DOMWrapper, VTU.config.plugins.VueWrapper].forEach((pluginHost) =>
@@ -32,4 +33,21 @@ pluginHost.install((wrapper) => {
       return {
-        findAll: (...args) => wrapResults(findAll.call(wrapper, ...args)),
-        findAllComponents: (...args) => wrapResults(findAllComponents.call(wrapper, ...args)),
+        findAll: (...args) => {
+          const results = findAll.call(wrapper, ...args);
+
+          if (config.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS) {
+            const componentResults = findAllComponents.call(wrapper, ...args);
+            results.forEach((v, i) => {
+              const matchingComponent = componentResults.find((w) => w.element === v.element);
+              if (matchingComponent) {
+                results[i] = matchingComponent;
+              }
+            });
+          }
+
+          return config.WRAPPER_FIND_ALL ? wrapResults(results) : results;
+        },
+        findAllComponents: (...args) => {
+          const results = findAllComponents.call(wrapper, ...args);
+          return config.WRAPPER_FIND_ALL ? wrapResults(results) : results;
+        },
       };
@@ -36,0 +54,0 @@ })

src/index.js

 import { install as installWrapperAttributesCompat } from "./compats/wrapper-attributes.js";
 import { install as installWrapperFindAllCompat } from "./compats/wrapper-find-all.js";
+import { install as installWrapperFindCompat } from "./compats/wrapper-find.js";
 import { createLocalVue } from "./utils/create-local-vue.js";
@@ -37,2 +38,3 @@ import { normalizeMountArgs } from "./utils/normalize-mount-args.js";
   WRAPPER_FIND_ALL: "WRAPPER_FIND_ALL",
+  WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS: "WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS",
 });
@@ -99,6 +101,10 @@
 
-  if (compatConfig.WRAPPER_FIND_ALL) {
+  if (compatConfig.WRAPPER_FIND_ALL || compatConfig.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS) {
     installWrapperFindAllCompat(VTU, compatConfig);
   }
 
+  if (compatConfig.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS) {
+    installWrapperFindCompat(VTU, compatConfig);
+  }
+
   if (compatConfig.WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED) {
@@ -126,16 +132,2 @@ // eslint-disable-next-line no-param-reassign
   }
-
-  // VTU.config.plugins.DOMWrapper.install((wrapper) => {
-  //   const { find } = wrapper;
-
-  //   return {
-  //     find(selector) {
-  //       if (wrapper.element.matches(selector)) {
-  //         return wrapper;
-  //       }
-
-  //       return find.call(wrapper, selector);
-  //     },
-  //   };
-  // });
 }

No alert changes

Improved metrics

Total package byte prevSize

67439

increased by6.79%

Number of package files

34

increased by6.25%

Lines of code

1439

increased by6.83%

Number of lines in readme file

280

increased by12.45%

No dependency changes