directives.spec.ts — vue Source File

Architecture documentation for directives.spec.ts, a typescript file in the vue codebase. 2 imports, 0 dependents.

File typescript 2 imports

Entity Profile

Dependency Diagram

graph LR
  c97b7f8a_a99a_a0d1_0dc0_c4bf5850401a["directives.spec.ts"]
  c7fbd7f1_e080_f33c_4dc6_acfb8c6719db["vitest"]
  c97b7f8a_a99a_a0d1_0dc0_c4bf5850401a --> c7fbd7f1_e080_f33c_4dc6_acfb8c6719db
  db9e7bef_009d_3918_6e7d_543a36a38d75["vue"]
  c97b7f8a_a99a_a0d1_0dc0_c4bf5850401a --> db9e7bef_009d_3918_6e7d_543a36a38d75
  style c97b7f8a_a99a_a0d1_0dc0_c4bf5850401a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { SpyInstanceFn } from 'vitest'
import Vue from 'vue'

describe('Options directives', () => {
  it('basic usage', done => {
    const bindSpy = vi.fn()
    const insertedSpy = vi.fn()
    const updateSpy = vi.fn()
    const componentUpdatedSpy = vi.fn()
    const unbindSpy = vi.fn()

    const assertContext = (el, binding, vnode) => {
      expect(vnode.context).toBe(vm)
      expect(binding.arg).toBe('arg')
      expect(binding.modifiers).toEqual({ hello: true })
    }

    const vm = new Vue({
      template:
        '<div class="hi"><div v-if="ok" v-test:arg.hello="a">{{ msg }}</div></div>',
      data: {
        msg: 'hi',
        a: 'foo',
        ok: true
      },
      directives: {
        test: {
          bind(el, binding, vnode) {
            bindSpy()
            assertContext(el, binding, vnode)
            expect(binding.value).toBe('foo')
            expect(binding.expression).toBe('a')
            expect(binding.oldValue).toBeUndefined()
            expect(el.parentNode).toBeNull()
          },
          inserted(el, binding, vnode) {
            insertedSpy()
            assertContext(el, binding, vnode)
            expect(binding.value).toBe('foo')
            expect(binding.expression).toBe('a')
            expect(binding.oldValue).toBeUndefined()
            expect(el.parentNode.className).toBe('hi')
          },
          update(el, binding, vnode, oldVnode) {
            updateSpy()
            assertContext(el, binding, vnode)
            expect(el).toBe(vm.$el.children[0])
            expect(oldVnode).not.toBe(vnode)
            expect(binding.expression).toBe('a')
            if (binding.value !== binding.oldValue) {
              expect(binding.value).toBe('bar')
              expect(binding.oldValue).toBe('foo')
            }
          },
          componentUpdated(el, binding, vnode) {
            componentUpdatedSpy()
            assertContext(el, binding, vnode)
          },
          unbind(el, binding, vnode) {
            unbindSpy()
// ... (321 more lines)

Dependencies

vitest
vue

Source

View on GitHub

Frequently Asked Questions

What does directives.spec.ts do?

directives.spec.ts is a source file in the vue codebase, written in typescript.

What does directives.spec.ts depend on?

directives.spec.ts imports 2 module(s): vitest, vue.

Where is directives.spec.ts in the architecture?

directives.spec.ts is located at test/unit/features/options/directives.spec.ts (directory: test/unit/features/options).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free