From 6522b6e51b00d944118cff98548f97ac85d5186d Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Mon, 10 Oct 2022 15:11:10 +0300
Subject: [PATCH] Address comments

* fix wording
* fix tests
* improve types
---
 docs/guide/advanced/stubs-shallow-mount.md    |  8 ++++----
 src/mount.ts                                  |  2 +-
 src/utils.ts                                  |  4 ++--
 src/utils/find.ts                             |  4 +---
 .../stubDirectivesTransformer.ts              |  5 ++++-
 tests/mountingOptions/global.stubs.spec.ts    | 19 ++++++++++++++++++-
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/docs/guide/advanced/stubs-shallow-mount.md b/docs/guide/advanced/stubs-shallow-mount.md
index d0aef7d3dc..3319d696de 100644
--- a/docs/guide/advanced/stubs-shallow-mount.md
+++ b/docs/guide/advanced/stubs-shallow-mount.md
@@ -255,7 +255,7 @@ const App = {
 }
 ```
 
-We do not want `Tooltip` directive code to be executed in this test, we just want to assert the message is rendered. In this case, we could use the `stubs`, which appears in the `global` mounting option passing `vTooltip`.
+We do not want the `Tooltip` directive code to be executed in this test, we just want to assert the message is rendered. In this case, we could use the `stubs`, which appears in the `global` mounting option passing `vTooltip`.
 
 ```js
 test('stubs component with custom template', () => {
@@ -268,7 +268,7 @@ test('stubs component with custom template', () => {
   })
 
   console.log(wrapper.html())
-  // <h1>Welcome to Vue.js 3</h1><span></span>
+  // <h1>Welcome to Vue.js 3</h1>
 
   expect(wrapper.html()).toContain('Welcome to Vue.js 3')
 })
@@ -298,7 +298,7 @@ test('stubs component with custom template', () => {
   // 'directive called' logged to console
 
   console.log(wrapper.html())
-  // <h1>Welcome to Vue.js 3</h1><span></span>
+  // <h1 class="with-tooltip">Welcome to Vue.js 3</h1>
 
   expect(wrapper.classes('with-tooltip')).toBe(true)
 })
@@ -307,7 +307,7 @@ test('stubs component with custom template', () => {
 We've just swapped our directive implementation with own one!
 
 ::: warning
-Stubbing directives won't work on functional components due to lack of directive name inside of [withDirectives](https://vuejs.org/api/render-function.html#withdirectives) function. Consider mocking directive module via your testing framework if you need to mock directive used in functional component
+Stubbing directives won't work on functional components or `<script setup>` due to lack of directive name inside of [withDirectives](https://vuejs.org/api/render-function.html#withdirectives) function. Consider mocking directive module via your testing framework if you need to mock directive used in functional component
 :::
 
 ## Default Slots and `shallow`
diff --git a/src/mount.ts b/src/mount.ts
index f8f04a1c66..00efa87b33 100644
--- a/src/mount.ts
+++ b/src/mount.ts
@@ -341,7 +341,7 @@ export function mount(
   }
 
   addToDoNotStubComponents(component)
-  // We've just replaced our component with it's copy
+  // We've just replaced our component with its copy
   // Let's register it as a stub so user can find it
   registerStub({ source: originalComponent, stub: component })
 
diff --git a/src/utils.ts b/src/utils.ts
index c4a3af2131..4bd71604f2 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -170,12 +170,12 @@ export function getComponentsFromStubs(
 
 export function getDirectivesFromStubs(
   stubs: Stubs
-): Record<string, Directive> {
+): Record<string, Directive | true> {
   const normalizedStubs = convertStubsToRecord(stubs)
 
   return Object.fromEntries(
     Object.entries(normalizedStubs)
-      .filter(([key]) => isDirectiveKey(key))
+      .filter(([key, value]) => isDirectiveKey(key) && value !== false)
       .map(([key, value]) => [key.substring(1), value])
   ) as Record<string, Directive>
 }
diff --git a/src/utils/find.ts b/src/utils/find.ts
index b11a1035e5..d0526edc22 100644
--- a/src/utils/find.ts
+++ b/src/utils/find.ts
@@ -43,9 +43,7 @@ export function matches(
   const nodeTypeCandidates: VNodeTypes[] = [
     nodeType,
     getOriginalComponentFromStub(nodeType)
-    // getOriginalVNodeTypeFromStub(nodeType),
-    // getOriginalStubFromSpecializedStub(nodeType)
-  ].filter(Boolean) as VNodeTypes[]
+  ].filter(Boolean)
 
   // our selector might be a stub itself
   const target = getOriginalComponentFromStub(selector) ?? selector
diff --git a/src/vnodeTransformers/stubDirectivesTransformer.ts b/src/vnodeTransformers/stubDirectivesTransformer.ts
index 2e26d32ba2..a5e0b3ffe3 100644
--- a/src/vnodeTransformers/stubDirectivesTransformer.ts
+++ b/src/vnodeTransformers/stubDirectivesTransformer.ts
@@ -3,7 +3,7 @@ import { isObjectComponent } from '../utils'
 import type { VTUVNodeTypeTransformer } from './util'
 
 interface CreateDirectivesTransformerConfig {
-  directives: Record<string, Directive | boolean>
+  directives: Record<string, Directive | true>
 }
 
 const noop = () => {}
@@ -16,6 +16,8 @@ export function createStubDirectivesTransformer({
 
   return function directivesTransformer(type) {
     if (isObjectComponent(type) && type.directives) {
+      // We want to change component types as rare as possible
+      // So first we check if there are any directives we should stub
       const directivesToPatch = Object.keys(type.directives).filter(
         (key) => key in directives
       )
@@ -36,6 +38,7 @@ export function createStubDirectivesTransformer({
         ...type,
         directives: {
           ...type.directives,
+          // let's add replacement directives on top of existing component directives
           ...replacementDirectives
         }
       }
diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts
index 4c47185fc7..9274bedfe3 100644
--- a/tests/mountingOptions/global.stubs.spec.ts
+++ b/tests/mountingOptions/global.stubs.spec.ts
@@ -883,7 +883,7 @@ describe('mounting options: stubs', () => {
       expect(wrapper.classes()).toContain('DirectiveStubAdded')
     })
 
-    it('stubs directive as noop', () => {
+    it('stubs directive as noop when true passed as value', () => {
       const SomeDirective = () => {
         throw new Error('I will blow up!')
       }
@@ -904,6 +904,23 @@ describe('mounting options: stubs', () => {
       expect(wrapper.html()).toBe('<div>text</div>')
     })
 
+    it('does not stub directive as noop when false passed as value', () => {
+      const Component = {
+        template: '<div v-my-directive>text</div>',
+        directives: { MyDirective }
+      }
+
+      const wrapper = mount(Component, {
+        global: {
+          stubs: {
+            vMyDirective: false
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe('<div class="DirectiveAdded">text</div>')
+    })
+
     it('stubs directive on child component', () => {
       const Component = {
         template: '<div v-my-directive>text</div>',