@dimailn/vuetify 2.7.2-alpha32 → 2.7.2-alpha33

package/src/components/VTooltip/__tests__/VTooltip.spec.ts

@@ -27,7 +27,7 @@ describe('VTooltip', () => {
         top: true,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -49,7 +49,7 @@ describe('VTooltip', () => {
         left: true,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -71,7 +71,7 @@ describe('VTooltip', () => {
         bottom: true,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -93,7 +93,7 @@ describe('VTooltip', () => {
         right: true,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -114,7 +114,7 @@ describe('VTooltip', () => {
         eager: true,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -128,7 +128,7 @@ describe('VTooltip', () => {
         modelValue: true,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -145,7 +145,7 @@ describe('VTooltip', () => {
         maxWidth: 200,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
@@ -197,18 +197,19 @@ describe('VTooltip', () => {
     jest.useRealTimers()
   })
 
-  it(`should warn if activator isn't scoped`, () => {
-    mountFunction({
+  it(`should work with normal activator slot`, () => {
+    const wrapper = mountFunction({
       props: {
         openDelay: 0,
       },
       slots: {
-        activator: () => h('span', 'activator'),
+        activator: function({ on }: any) { return h('span', { ...on }, 'activator') },
         default: () => h('span', 'content'),
       },
     })
 
-    expect(`[Vuetify] The activator slot must be bound, try '<template v-slot:activator="{ on }"><v-btn v-on="on">'`).toHaveBeenWarned()
+    // In Vue 3, all slots are functions and should work correctly
+    expect(wrapper.html()).toContain('activator')
   })
 
   it(`should open and close`, () => {

package/src/components/VTreeview/__tests__/__snapshots__/VTreeview.spec.ts.snap

@@ -122,8 +122,8 @@ exports[`VTreeView.ts should handle initial active/open/selected values when usi
     <div class="v-treeview-node__root">
       <div class="v-treeview-node__level">
       </div>
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light accent--text v-treeview-node__checkbox"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons accent--text v-treeview-node__checkbox"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -138,13 +138,13 @@ exports[`VTreeView.ts should handle initial active/open/selected values when usi
        aria-expanded="true"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+              aria-hidden="false"
               type="button"
       >
       </button>
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__checkbox"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__checkbox"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -163,8 +163,8 @@ exports[`VTreeView.ts should handle initial active/open/selected values when usi
           </div>
           <div class="v-treeview-node__level">
           </div>
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__checkbox"
+          <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__checkbox"
+                  aria-hidden="false"
                   type="button"
           >
           </button>
@@ -290,13 +290,13 @@ exports[`VTreeView.ts should load children when selecting, but not render 1`] =
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+              aria-hidden="false"
               type="button"
       >
       </button>
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__checkbox"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__checkbox"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -316,13 +316,13 @@ exports[`VTreeView.ts should load children when selecting, but not render 2`] =
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+              aria-hidden="false"
               type="button"
       >
       </button>
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light accent--text v-treeview-node__checkbox"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons accent--text v-treeview-node__checkbox"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -359,8 +359,8 @@ exports[`VTreeView.ts should open all children when using open-all prop 1`] = `
        aria-expanded="true"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -377,8 +377,8 @@ exports[`VTreeView.ts should open all children when using open-all prop 1`] = `
         <div class="v-treeview-node__root">
           <div class="v-treeview-node__level">
           </div>
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+          <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+                  aria-hidden="false"
                   type="button"
           >
           </button>
@@ -434,8 +434,8 @@ exports[`VTreeView.ts should react to open changes 1`] = `
        aria-expanded="true"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -452,8 +452,8 @@ exports[`VTreeView.ts should react to open changes 1`] = `
         <div class="v-treeview-node__root">
           <div class="v-treeview-node__level">
           </div>
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+          <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+                  aria-hidden="false"
                   type="button"
           >
           </button>
@@ -509,8 +509,8 @@ exports[`VTreeView.ts should react to open changes 2`] = `
        aria-expanded="true"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -527,8 +527,8 @@ exports[`VTreeView.ts should react to open changes 2`] = `
         <div class="v-treeview-node__root">
           <div class="v-treeview-node__level">
           </div>
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+          <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+                  aria-hidden="false"
                   type="button"
           >
           </button>
@@ -565,8 +565,8 @@ exports[`VTreeView.ts should react to open changes 3`] = `
        aria-expanded="true"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -583,8 +583,8 @@ exports[`VTreeView.ts should react to open changes 3`] = `
         <div class="v-treeview-node__root">
           <div class="v-treeview-node__level">
           </div>
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--open"
+          <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--open"
+                  aria-hidden="false"
                   type="button"
           >
           </button>
@@ -640,8 +640,8 @@ exports[`VTreeView.ts should react to open changes 4`] = `
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -661,8 +661,8 @@ exports[`VTreeView.ts should recalculate tree when loading async children using
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle v-treeview-node__toggle--loading"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle v-treeview-node__toggle--loading"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -762,8 +762,8 @@ exports[`VTreeView.ts should render items 1`] = `
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -783,8 +783,8 @@ exports[`VTreeView.ts should render items in dense mode 1`] = `
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+              aria-hidden="false"
               type="button"
       >
       </button>
@@ -921,8 +921,8 @@ exports[`VTreeView.ts should show expand icon when children is empty and load-ch
        aria-expanded="false"
   >
     <div class="v-treeview-node__root">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+      <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+              aria-hidden="false"
               type="button"
       >
       </button>

package/src/components/VTreeview/__tests__/__snapshots__/VTreeviewNode.spec.ts.snap

@@ -52,8 +52,8 @@ exports[`VTreeViewNode.ts should not be able to have active children with empty
      aria-expanded="false"
 >
   <div class="v-treeview-node__root">
-    <button aria-hidden="false"
-            class="v-icon--link v-icon notranslate material-icons theme--light v-treeview-node__toggle"
+    <button class="v-icon--link v-icon notranslate theme--light material-icons v-treeview-node__toggle"
+            aria-hidden="false"
             type="button"
     >
     </button>

package/src/directives/click-outside/__tests__/click-outside-shadow-dom.spec.ts

@@ -14,7 +14,7 @@ function bootstrap (args?: object) {
       ...args,
     },
   } as any
-  const vnode = { context: { _uid: 1 } } as any
+  const vnode = { ctx: { uid: 1 } } as any
 
   let shadowClickHandler
   let outsideClickHandler
@@ -38,7 +38,7 @@ function bootstrap (args?: object) {
   jest.spyOn(window.document, 'removeEventListener')
   jest.spyOn(shadowRoot, 'removeEventListener')
 
-  ClickOutside.inserted(shadowEl as HTMLElement, binding, vnode)
+  ClickOutside.mounted(shadowEl as HTMLElement, binding, vnode)
 
   return {
     binding,
@@ -59,7 +59,7 @@ describe('click-outside.js within the Shadow DOM', () => {
     const { outsideClickHandler, shadowEl, binding, vnode } = bootstrap()
     expect(window.document.addEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
 
-    ClickOutside.unbind(shadowEl, binding, vnode)
+    ClickOutside.unmounted(shadowEl, binding, vnode)
     expect(window.document.removeEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
   })
 
@@ -67,7 +67,7 @@ describe('click-outside.js within the Shadow DOM', () => {
     const { shadowClickHandler, shadowRoot, shadowEl, binding, vnode } = bootstrap()
     expect(shadowRoot.addEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
 
-    ClickOutside.unbind(shadowEl, binding, vnode)
+    ClickOutside.unmounted(shadowEl, binding, vnode)
     expect(shadowRoot.removeEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
   })
 

package/src/directives/click-outside/__tests__/click-outside.spec.ts

@@ -11,7 +11,7 @@ function bootstrap (args?: object) {
       ...args,
     },
   } as any
-  const vnode = { context: { _uid: 1 } } as any
+  const vnode = { ctx: { uid: 1 } } as any
 
   let clickHandler
   let mousedownHandler
@@ -21,7 +21,7 @@ function bootstrap (args?: object) {
   })
   jest.spyOn(window.document, 'removeEventListener')
 
-  ClickOutside.inserted(el as HTMLElement, binding, vnode)
+  ClickOutside.mounted(el as HTMLElement, binding, vnode)
 
   return {
     binding,
@@ -38,7 +38,7 @@ describe('click-outside', () => {
     const { clickHandler, el, binding, vnode } = bootstrap()
     expect(window.document.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
 
-    ClickOutside.unbind(el, binding, vnode)
+    ClickOutside.unmounted(el, binding, vnode)
     expect(window.document.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
   })
 

package/src/directives/color/__tests__/color.spec.ts

@@ -1,5 +1,5 @@
 // Vue
-import Vue from 'vue'
+import { h, defineComponent } from 'vue'
 
 // Directives
 import Color from '../'
@@ -7,33 +7,53 @@ import Color from '../'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('color.ts', () => {
-  let mountFunction: () => Wrapper<Vue>
+  let mountFunction: (directive?: any) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (directive = {}) => {
-      return mount(Vue.component('test', {
+      const TestComponent = defineComponent({
         directives: { Color },
         data: () => ({
           color: '',
         }),
-        render (h) {
-          return h('div', {
-            directives: [{
-              ...directive,
-              value: this.color,
-            }],
-          })
-        },
-      }), {
-        mocks: {
-          $vuetify: {
-            theme: {
-              currentTheme: {
-                primary: '#1976d2',
+        template: `<div v-color${directive.arg ? `:${directive.arg}` : ''}${Object.keys(directive.modifiers || {}).length ? '.' + Object.keys(directive.modifiers).join('.') : ''}="color"></div>`,
+      })
+
+      return mount(TestComponent, {
+        global: {
+          config: {
+            globalProperties: {
+              $vuetify: {
+                theme: {
+                  currentTheme: {
+                    primary: '#1976d2',
+                  },
+                },
+              },
+            },
+          },
+          mocks: {
+            $vuetify: {
+              theme: {
+                currentTheme: {
+                  primary: '#1976d2',
+                },
+              },
+            },
+          },
+          provide: {
+            $vuetify: {
+              theme: {
+                currentTheme: {
+                  primary: '#1976d2',
+                },
               },
             },
           },
@@ -47,23 +67,23 @@ describe('color.ts', () => {
       name: 'color',
     })
 
-    wrapper.setData({ color: '#01f' })
+    await wrapper.setData({ color: '#01f' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(0, 17, 255)')
     expect(wrapper.element.style.borderColor).toEqual('#01f')
 
-    wrapper.setData({ color: 'rgb(255, 255, 0)' })
+    await wrapper.setData({ color: 'rgb(255, 255, 0)' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(255, 255, 0)')
     expect(wrapper.element.style.borderColor).toEqual('rgb(255, 255, 0)')
 
-    wrapper.setData({ color: 'red' })
+    await wrapper.setData({ color: 'red' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(244, 67, 54)')
     expect(wrapper.element.style.borderColor).toEqual('#f44336')
 
-    wrapper.setData({ color: 'red lighten-1' })
+    await wrapper.setData({ color: 'red lighten-1' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(239, 83, 80)')
     expect(wrapper.element.style.borderColor).toEqual('#ef5350')
 
-    wrapper.setData({ color: 'primary' })
+    await wrapper.setData({ color: 'primary' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(25, 118, 210)')
     expect(wrapper.element.style.borderColor).toEqual('#1976d2')
   })
@@ -74,23 +94,23 @@ describe('color.ts', () => {
       arg: 'text',
     })
 
-    wrapper.setData({ color: '#01f' })
+    await wrapper.setData({ color: '#01f' })
     expect(wrapper.element.style.color).toEqual('rgb(0, 17, 255)')
     expect(wrapper.element.style.caretColor).toEqual('#01f')
 
-    wrapper.setData({ color: 'rgba(0, 1, 2, 0.5)' })
+    await wrapper.setData({ color: 'rgba(0, 1, 2, 0.5)' })
     expect(wrapper.element.style.color).toEqual('rgba(0, 1, 2, 0.5)')
     expect(wrapper.element.style.caretColor).toEqual('rgba(0, 1, 2, 0.5)')
 
-    wrapper.setData({ color: 'red' })
+    await wrapper.setData({ color: 'red' })
     expect(wrapper.element.style.color).toEqual('rgb(244, 67, 54)')
     expect(wrapper.element.style.caretColor).toEqual('#f44336')
 
-    wrapper.setData({ color: 'red lighten-1' })
+    await wrapper.setData({ color: 'red lighten-1' })
     expect(wrapper.element.style.color).toEqual('rgb(239, 83, 80)')
     expect(wrapper.element.style.caretColor).toEqual('#ef5350')
 
-    wrapper.setData({ color: 'primary' })
+    await wrapper.setData({ color: 'primary' })
     expect(wrapper.element.style.color).toEqual('rgb(25, 118, 210)')
     expect(wrapper.element.style.caretColor).toEqual('#1976d2')
   })
@@ -101,19 +121,19 @@ describe('color.ts', () => {
       arg: 'border',
     })
 
-    wrapper.setData({ color: '#01f' })
+    await wrapper.setData({ color: '#01f' })
     expect(wrapper.element.style.borderColor).toEqual('#01f')
 
-    wrapper.setData({ color: 'rgb(255, 255, 0)' })
+    await wrapper.setData({ color: 'rgb(255, 255, 0)' })
     expect(wrapper.element.style.borderColor).toEqual('rgb(255, 255, 0)')
 
-    wrapper.setData({ color: 'red' })
+    await wrapper.setData({ color: 'red' })
     expect(wrapper.element.style.borderColor).toEqual('#f44336')
 
-    wrapper.setData({ color: 'red lighten-1' })
+    await wrapper.setData({ color: 'red lighten-1' })
     expect(wrapper.element.style.borderColor).toEqual('#ef5350')
 
-    wrapper.setData({ color: 'primary' })
+    await wrapper.setData({ color: 'primary' })
     expect(wrapper.element.style.borderColor).toEqual('#1976d2')
   })
 
@@ -124,7 +144,7 @@ describe('color.ts', () => {
       modifiers: { top: true, right: true, left: true },
     })
 
-    wrapper.setData({ color: '#fff' })
+    await wrapper.setData({ color: '#fff' })
     expect(wrapper.element.style.borderTopColor).toEqual('#fff')
     expect(wrapper.element.style.borderRightColor).toEqual('#fff')
     expect(wrapper.element.style.borderLeftColor).toEqual('#fff')

package/src/directives/color/index.ts

@@ -73,7 +73,11 @@ function updateColor (
   binding: VNodeDirective,
   node: VNode
 ) {
-  const currentTheme = node.context!.$vuetify.theme.currentTheme
+  const vuetify = (binding as any).instance?.$vuetify ||
+                  node.appContext?.config?.globalProperties?.$vuetify ||
+                  node.appContext?.provides?.$vuetify
+
+  const currentTheme = vuetify?.theme?.currentTheme
 
   if (binding.arg === undefined) {
     setBackgroundColor(el, binding.value, currentTheme)
@@ -97,8 +101,8 @@ function update (
 }
 
 export const Color = {
-  bind: updateColor,
-  update,
+  mounted: updateColor,
+  updated: update,
 }
 
 export default Color

package/src/directives/intersect/__tests__/intersect.spec.ts

@@ -2,25 +2,25 @@
 import Intersect from '../'
 
 describe('intersect', () => {
-  it('should bind event on inserted', () => {
+  it('should bind event on mounted', () => {
     const callback = jest.fn()
     const el = document.createElement('div')
     document.body.appendChild(el)
 
-    Intersect.inserted(el, {
+    Intersect.mounted(el, {
       value: callback,
       modifiers: { quiet: true },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect((el as any)._observe).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Intersect.unbind(el, {
+    Intersect.unmounted(el, {
       value: callback,
       modifiers: { quiet: true },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect((el as any)._observe[1]).toBeFalsy()
   })
@@ -32,10 +32,10 @@ describe('intersect', () => {
 
     const callback = jest.fn()
 
-    Intersect.inserted(el, {
+    Intersect.mounted(el, {
       value: callback,
       modifiers: { once: true },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect(callback).toHaveBeenCalledTimes(0)
     expect((el as any)._observe[1]).toBeTruthy()