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

Comparing version 0.0.2 to 0.0.3

CHANGELOG.md

@@ -0,1 +1,11 @@
+# 0.0.3
+
+- Added flags:
+  - MOUNT_ARGS_COMPONENTS
+  - MOUNT_ARGS_DIRECTIVES
+  - WRAPPER_DO_NOT_INCLUDE_HOOK_EVENTS_IN_EMITTED
+  - WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM
+  - WRAPPER_SET_VALUE_DOES_NOT_TRIGGER_CHANGE
+  - WRAPPER_VUE_SET_VALUE_USES_DOM
+
 # 0.0.2
@@ -2,0 +12,0 @@

package.json

 {
   "name": "vue-test-utils-compat",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Compat layer for @vue/test-utils@2.x",
@@ -59,4 +59,4 @@ "main": "src/index.js",
     "@jest/globals": "^27.3.1",
-    "@vue/compiler-dom": "^3.2.22",
-    "@vue/test-utils": "^2.0.0-rc.16",
+    "@vue/compiler-dom": "^3.2.23",
+    "@vue/test-utils": "^2.0.0-rc.17",
     "cross-env": "^7.0.3",
@@ -69,6 +69,6 @@ "eslint": "^8.2.0",
     "lint-staged": "^12.0.2",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.0",
     "simple-git-hooks": "^2.7.0",
-    "vue": "^3.2.22"
+    "vue": "^3.2.23"
   }
 }

README.md

@@ -19,6 +19,9 @@ # vue-test-utils-compat
 - 🏁 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_COMPONENTS](#mount_args_components-added-in-v003)
+  - [MOUNT_ARGS_CONTEXT\_\*](#mount_args_context_)
+  - [MOUNT_ARGS_DIRECTIVES](#mount_args_directives-added-in-v003)
+  - [MOUNT_ARGS_LISTENERS](#mount_args_listeners)
   - [MOUNT_ARGS_MOCKS](#mount_args_mocks)
@@ -33,4 +36,9 @@ - [MOUNT_ARGS_PROVIDE](#mount_args_provide)
   - [WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED](#wrapper_do_not_include_native_events_in_emitted)
+  - [WRAPPER_DO_NOT_INCLUDE_HOOK_EVENTS_IN_EMITTED](#wrapper_do_not_include_hook_events_in_emitted-added-in-v003)
   - [WRAPPER_FIND_ALL](#wrapper_find_all)
-- 🚧 [Work in progress](#-work-in-progress)
+  - [WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS](#wrapper_find_by_css_selector_returns_components-added-in-v002)
+  - [WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM](#wrapper_find_component_by_ref_returns_dom-added-in-v003)
+  - [WRAPPER_SET_VALUE_DOES_NOT_TRIGGER_CHANGE](#wrapper_set_value_does_not_trigger_change-added-in-v003)
+  - [WRAPPER_VUE_SET_VALUE_USES_DOM](#wrapper_vue_set_value_uses_dom-added-in-v003)
+
 - ⚠️ [Known issues](#known-issues)
@@ -167,4 +175,10 @@
 
-### MOUNT*ARGS_CONTEXT*\*
+### MOUNT_ARGS_COMPONENTS (added in v0.0.3)
 
+Enable support for `components` field in `mount` args of `@vue/test-utils`
+
+➡️ Migration strategy: Move `components` mount arg to `global.components`
+
+### MOUNT_ARGS_CONTEXT\_\*
+
 Flags:
@@ -188,2 +202,8 @@
 
+### MOUNT_ARGS_DIRECTIVES (added in v0.0.3)
+
+Enable support for `components` field in `mount` args of `@vue/test-utils`
+
+➡️ Migration strategy: Move `directives` mount arg to `global.directives`
+
 ### MOUNT_ARGS_LISTENERS
@@ -255,2 +275,8 @@
 
+### WRAPPER_DO_NOT_INCLUDE_HOOK_EVENTS_IN_EMITTED (added in v0.0.3)
+
+Makes sure that `hook:` events (which happen when using `@vue/compat`) will not be captured in `.emitted()`
+
+➡️ Migration strategy: rewrite your event-related assertions to take into account that such events are also captured, or just upgrade to Vue 3 build without compat
+
 ### WRAPPER_FIND_ALL
@@ -268,6 +294,20 @@
 
-## 🚧 Work in progress
+### WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM (added in v0.0.3)
 
-These compat rules are a work in progress and will be included soon
+Implements old behavior when using `.findComponent` with `ref` will return DOM wrapper if ref is pointing to one.
 
+➡️ Migration strategy: replace `.findComponent` with `.find` by ref (when https://github.com/vuejs/vue-test-utils-next/pull/1110 will be merged)
+
+### WRAPPER_SET_VALUE_DOES_NOT_TRIGGER_CHANGE (added in v0.0.3)
+
+Implements old behavior when using `.trigger` on DOM Wrapper did not trigger `change` event, so you should trigger it manually (important for lazy v-models)
+
+➡️ Migration strategy: rewrite relevant tests
+
+### WRAPPER_VUE_SET_VALUE_USES_DOM (added in v0.0.3)
+
+Implements old VTU v1 behavior when using `.setValue` on Vue component actually used same logic, as setting value on DOM node (checking element type of Vue component, etc.)
+
+➡️ Migration strategy: fix your components to use new `setValue` (which respects `v-model`) or rewrite relevant tests
+
 ## Known issues
@@ -274,0 +314,0 @@

src/compats/wrapper-find.js

@@ -24,2 +24,14 @@ export function install(VTU, config) {
         },
+        findComponent(selector) {
+          const result = findComponent.call(wrapper, selector);
+          if (
+            !result.exists() &&
+            selector.ref &&
+            config.WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM &&
+            wrapper.vm.$refs?.[selector.ref]
+          ) {
+            return new VTU.DOMWrapper(wrapper.vm.$refs?.[selector.ref]);
+          }
+          return result;
+        },
       };
@@ -26,0 +38,0 @@ })

src/index.js

@@ -21,2 +21,3 @@ import { install as installWrapperAttributesCompat } from "./compats/wrapper-attributes.js";
 
+  MOUNT_ARGS_COMPONENTS: "MOUNT_ARGS_COMPONENTS",
   MOUNT_ARGS_CONTEXT_ATTRS: "MOUNT_ARGS_CONTEXT_ATTRS",
@@ -27,2 +28,3 @@ MOUNT_ARGS_CONTEXT_CHILDREN: "MOUNT_ARGS_CONTEXT_CHILDREN",
   MOUNT_ARGS_CONTEXT_PROPS: "MOUNT_ARGS_CONTEXT_PROPS",
+  MOUNT_ARGS_DIRECTIVES: "MOUNT_ARGS_DIRECTIVES",
   MOUNT_ARGS_LISTENERS: "MOUNT_ARGS_LISTENERS",
@@ -39,4 +41,8 @@ MOUNT_ARGS_MOCKS: "MOUNT_ARGS_MOCKS",
   WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED: "WRAPPER_DO_NOT_INCLUDE_NATIVE_EVENTS_IN_EMITTED",
+  WRAPPER_DO_NOT_INCLUDE_HOOK_EVENTS_IN_EMITTED: "WRAPPER_DO_NOT_INCLUDE_HOOK_EVENTS_IN_EMITTED",
   WRAPPER_FIND_ALL: "WRAPPER_FIND_ALL",
   WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS: "WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS",
+  WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM: "WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM",
+  WRAPPER_SET_VALUE_DOES_NOT_TRIGGER_CHANGE: "WRAPPER_SET_VALUE_DOES_NOT_TRIGGER_CHANGE",
+  WRAPPER_VUE_SET_VALUE_USES_DOM: "WRAPPER_VUE_SET_VALUE_USES_DOM",
 });
@@ -107,3 +113,6 @@
 
-  if (compatConfig.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS) {
+  if (
+    compatConfig.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS ||
+    compatConfig.WRAPPER_FIND_COMPONENT_BY_REF_RETURNS_DOM
+  ) {
     installWrapperFindCompat(VTU, compatConfig);
@@ -117,2 +126,23 @@ }
 
+  if (compatConfig.WRAPPER_DO_NOT_INCLUDE_HOOK_EVENTS_IN_EMITTED) {
+    VTU.config.plugins.VueWrapper.install((wrapper) => {
+      const { emitted } = wrapper;
+      return {
+        emitted(event) {
+          const result = emitted.call(this, event);
+          if (arguments.length === 1) {
+            return result;
+          }
+
+          Object.keys(result).forEach((k) => {
+            if (k.startsWith("hook:")) {
+              delete result[k];
+            }
+          });
+          return result;
+        },
+      };
+    });
+  }
+
   if (needsNormalization(compatConfig)) {
@@ -135,2 +165,34 @@ const originalMount = VTU.mount;
   }
+
+  if (compatConfig.WRAPPER_VUE_SET_VALUE_USES_DOM) {
+    VTU.config.plugins.VueWrapper.install((wrapper) => ({
+      setValue(value) {
+        return new VTU.DOMWrapper(wrapper.element).setValue(value);
+      },
+    }));
+  }
+
+  if (compatConfig.WRAPPER_SET_VALUE_DOES_NOT_TRIGGER_CHANGE) {
+    let blockTriggerringChange = false;
+    VTU.config.plugins.DOMWrapper.install((wrapper) => {
+      const { trigger, setValue } = wrapper;
+      return {
+        trigger(event, ...args) {
+          if (blockTriggerringChange && event === "change") {
+            return null;
+          }
+
+          return trigger.call(wrapper, event, ...args);
+        },
+        setValue(...args) {
+          blockTriggerringChange = true;
+          try {
+            return setValue.call(wrapper, ...args);
+          } finally {
+            blockTriggerringChange = false;
+          }
+        },
+      };
+    });
+  }
 }

src/utils/normalize-mount-args.js

@@ -117,2 +117,4 @@ function smartMerge(...args) {
     stubs,
+    components,
+    directives,
 
@@ -137,3 +139,8 @@ // VTU v2 props
 
-  const localVueConfig = localVue?.getLocalVueConfig() ?? {};
+  const {
+    plugins,
+    directives: localVueDirectives,
+    components: localVueComponents,
+    mixins,
+  } = localVue?.getLocalVueConfig() ?? {};
   const computedArgs = normalizeConfigOption({
@@ -160,3 +167,6 @@ props: smartMerge(
           provide: config.MOUNT_ARGS_PROVIDE ? normalizeProvide(provide) : null,
-          ...localVueConfig,
+          plugins,
+          mixins,
+          components: smartMerge(localVueComponents, config.MOUNT_ARGS_COMPONENTS ? components : null),
+          directives: smartMerge(localVueDirectives, config.MOUNT_ARGS_DIRECTIVES ? directives : null),
         },
@@ -163,0 +173,0 @@ global

tests/flags/mount-args/mount-args-scoped-slots-this.test.js

@@ -20,2 +20,7 @@ import { jest, describe, afterEach, beforeEach, it, expect } from "@jest/globals";
     wrapper = VTU.mount(FakeComponent, {
+      global: {
+        config: {
+          warnHandler: () => {},
+        },
+      },
       slots: {
@@ -22,0 +27,0 @@ default: "<div>default</div>",

tests/flags/wrapper/wrapper-find-by-css-selector-returns-components.test.js

@@ -53,3 +53,3 @@ import { jest, describe, beforeEach, it, expect } from "@jest/globals";
     it("find/findAll returns components", () => {
-      installCompat(VTU, { [compatFlags.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS]: true });
+      installCompat(VTU, { [compatFlags.WRAPPER_FIND_BY_CSS_SELECTOR_RETURNS_COMPONENTS]: false });
       wrapper = VTU.mount(FakeComponent);
@@ -60,9 +60,5 @@ results = wrapper.findAll(".foo");
       expect(results).toHaveLength(4);
-      expect(results[0]).toBeInstanceOf(VTU.VueWrapper);
-      expect(results[1]).toBeInstanceOf(VTU.DOMWrapper);
-      expect(results[2]).toBeInstanceOf(VTU.DOMWrapper);
-      expect(results[3]).toBeInstanceOf(VTU.VueWrapper);
-      expect(result).toBeInstanceOf(VTU.VueWrapper);
+      expect(results.every((x) => x instanceof VTU.DOMWrapper)).toBe(true);
     });
   });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79595

increased by18.03%

Number of package files

39

increased by14.71%

Lines of code

1709

increased by18.76%

Number of lines in readme file

320

increased by14.29%

No dependency changes