vue Architecture Docs
Home / File/ delimiters.spec.ts — vue Source File

delimiters.spec.ts — vue Source File

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

File typescript 1 imports

Entity Profile

Dependency Diagram

graph LR
  0e53f875_4014_4911_26ec_38a8e43d46c9["delimiters.spec.ts"]
  c5601857_7faf_30c6_efca_20de90db006c["vue"]
  0e53f875_4014_4911_26ec_38a8e43d46c9 --> c5601857_7faf_30c6_efca_20de90db006c
  style 0e53f875_4014_4911_26ec_38a8e43d46c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Vue from 'vue'

describe('Delimiters', () => {
  it('default delimiters should work', () => {
    const vm = new Vue({
      data: {
        a: 1
      },
      template: '<div>{{ a }}</div>'
    }).$mount()
    expect(vm.$el.textContent).toEqual('1')
  })

  it('custom delimiters should work', () => {
    const vm = new Vue({
      delimiters: ['[[', ']]'],
      template: '<div>[[ a ]]</div>',
      data: {
        a: 1
      }
    }).$mount()

    expect(vm.$el.textContent).toEqual('1')
  })

  it('default delimiters should be ignored when custom delimiters defined', () => {
    const vm = new Vue({
      delimiters: ['[[', ']]'],
      template: '<div>{{ a }}</div>',
      data: {
        a: 1
      }
    }).$mount()

    expect(vm.$el.textContent).toEqual('{{ a }}')
  })

  it('delimiters should only affect vm', () => {
    const Component = Vue.extend({
      data: function () {
        return {
          b: 2
        }
      },
      template: '<span>[[ b ]]</span>'
    })

    const vm = new Vue({
      delimiters: ['[[', ']]'],
      template: '<div>[[ a ]] - <test-component></test-component></div>',
      data: {
        a: 2
      },
      components: {
        'test-component': Component
      }
    }).$mount()

    expect(vm.$el.textContent).toEqual('2 - [[ b ]]')
  })

  it('delimiters defined globally should work on all vms', () => {
    Vue.options.delimiters = ['[[', ']]']

    const Component = Vue.extend({
      template: '<span>[[ a ]]</span>',
      data: function () {
        return {
          a: 2
        }
      }
    })

    const vm = new Vue({
      data: {
        b: 1
      },
      template: '<div>[[ b ]] - <test-component></test-component></div>',
      components: {
        'test-component': Component
      }
    }).$mount()

    expect(vm.$el.textContent).toEqual('1 - 2')
    // restore default options
    delete Vue.options.delimiters
  })

  it('component specific delimiters should override global delimiters', () => {
    Vue.options.delimiters = ['[[', ']]']

    const Component = Vue.extend({
      delimiters: ['@{{', '}}'],
      template: '<span>@{{ a }}</span>',
      data: function () {
        return {
          a: 2
        }
      }
    })

    const vm = new Vue({
      data: {
        b: 1
      },
      template: '<div>[[ b ]] - <test-component></test-component></div>',
      components: {
        'test-component': Component
      }
    }).$mount()

    expect(vm.$el.textContent).toEqual('1 - 2')
    // restore default options
    delete Vue.options.delimiters
  })
})

Dependencies

  • vue

Source

Frequently Asked Questions

What does delimiters.spec.ts do?
delimiters.spec.ts is a source file in the vue codebase, written in typescript.
What does delimiters.spec.ts depend on?
delimiters.spec.ts imports 1 module(s): vue.
Where is delimiters.spec.ts in the architecture?
delimiters.spec.ts is located at test/unit/features/options/delimiters.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