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
  bd8f2f99_1f00_0f39_9b0f_0d1b47050471["delimiters.spec.ts"]
  db9e7bef_009d_3918_6e7d_543a36a38d75["vue"]
  bd8f2f99_1f00_0f39_9b0f_0d1b47050471 --> db9e7bef_009d_3918_6e7d_543a36a38d75
  style bd8f2f99_1f00_0f39_9b0f_0d1b47050471 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