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

components.spec.ts — vue Source File

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

File typescript CompilerSFC 4 imports

Entity Profile

Dependency Diagram

graph LR
  5f9d37fc_8c80_970e_0c59_4de99bf2b199["components.spec.ts"]
  4ef3cec1_7e9c_23bb_5e9b_f118e8ebdf99["test-object-option.ts"]
  5f9d37fc_8c80_970e_0c59_4de99bf2b199 --> 4ef3cec1_7e9c_23bb_5e9b_f118e8ebdf99
  830d85be_ea2f_f50c_75f1_dd6812fb608f["testObjectOption"]
  5f9d37fc_8c80_970e_0c59_4de99bf2b199 --> 830d85be_ea2f_f50c_75f1_dd6812fb608f
  c5601857_7faf_30c6_efca_20de90db006c["vue"]
  5f9d37fc_8c80_970e_0c59_4de99bf2b199 --> c5601857_7faf_30c6_efca_20de90db006c
  b1eb2bb2_8774_a6f3_1b5c_854efafa7ee6["env"]
  5f9d37fc_8c80_970e_0c59_4de99bf2b199 --> b1eb2bb2_8774_a6f3_1b5c_854efafa7ee6
  style 5f9d37fc_8c80_970e_0c59_4de99bf2b199 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Vue from 'vue'
import { UA } from 'core/util/env'
import testObjectOption from '../../../helpers/test-object-option'

describe('Options components', () => {
  testObjectOption('components')

  it('should accept plain object', () => {
    const vm = new Vue({
      template: '<test></test>',
      components: {
        test: {
          template: '<div>hi</div>'
        }
      }
    }).$mount()
    expect(vm.$el.tagName).toBe('DIV')
    expect(vm.$el.textContent).toBe('hi')
  })

  it('should accept extended constructor', () => {
    const Test = Vue.extend({
      template: '<div>hi</div>'
    })
    const vm = new Vue({
      template: '<test></test>',
      components: {
        test: Test
      }
    }).$mount()
    expect(vm.$el.tagName).toBe('DIV')
    expect(vm.$el.textContent).toBe('hi')
  })

  it('should accept camelCase', () => {
    const myComp = {
      template: '<div>hi</div>'
    }
    const vm = new Vue({
      template: '<my-comp></my-comp>',
      components: {
        myComp
      }
    }).$mount()
    expect(vm.$el.tagName).toBe('DIV')
    expect(vm.$el.textContent).toBe('hi')
  })

  it('should accept PascalCase', () => {
    const MyComp = {
      template: '<div>hi</div>'
    }
    const vm = new Vue({
      template: '<my-comp></my-comp>',
      components: {
        MyComp
      }
    }).$mount()
    expect(vm.$el.tagName).toBe('DIV')
    expect(vm.$el.textContent).toBe('hi')
  })

  it('should warn native HTML elements', () => {
    new Vue({
      components: {
        div: { template: '<div></div>' }
      }
    })
    expect(
      'Do not use built-in or reserved HTML elements as component'
    ).toHaveBeenWarned()
  })

  it('should warn built-in elements', () => {
    new Vue({
      components: {
        component: { template: '<div></div>' }
      }
    })
    expect(
      'Do not use built-in or reserved HTML elements as component'
    ).toHaveBeenWarned()
  })

  // the HTMLUnknownElement check doesn't work in Android 4.2
  // but since it doesn't support custom elements nor will any dev use it
  // as their primary debugging browser, it doesn't really matter.
  if (!(UA && /android 4\.2/.test(UA))) {
    it('warn non-existent', () => {
      new Vue({
        template: '<test></test>'
      }).$mount()
      expect('Unknown custom element: <test>').toHaveBeenWarned()
    })
  }
})

Domain

Dependencies

Source

Frequently Asked Questions

What does components.spec.ts do?
components.spec.ts is a source file in the vue codebase, written in typescript. It belongs to the CompilerSFC domain.
What does components.spec.ts depend on?
components.spec.ts imports 4 module(s): env, test-object-option.ts, testObjectOption, vue.
Where is components.spec.ts in the architecture?
components.spec.ts is located at test/unit/features/options/components.spec.ts (domain: CompilerSFC, 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