dot-files/vim/bundle/vue/test/test_syntax.vader

#
# HTML
#
Given vue (HTML template without lang attribute):
  <template>
    <div></div>
  </template>

Execute:
  AssertEqual 'htmlTag', SyntaxAt(2, 3)
  AssertEqual 'htmlTag', SyntaxAt(1, 1)
  AssertEqual 'htmlSpecialTagName', SyntaxAt(1, 2)


Given vue (Template tag inside a template):
  <template>
    <div>
      <template v-if="loading">
        Loading...
      </template>
    </div>
  </template>

Execute (Syntax doesn't stop at the first closing template tag):
  AssertEqual 'htmlEndTag', SyntaxAt(6, 3)

#
# JavaScript
#
Given vue:
  <script>
  //
  </script>

Execute:
  AssertEqual 'javaScriptLineComment', SyntaxAt(2, 1)
  AssertEqual 'htmlScriptTag', SyntaxAt(1, 1)


Given vue (Script tag with misc. attributes and newline):
  <script type="text/babel"
          lang="babel"
  >
  //
  </script>

Execute:
  AssertEqual 'javaScriptLineComment', SyntaxAt(4, 1)
  AssertEqual 'htmlArg', SyntaxAt(2, 9)
  AssertEqual 'htmlScriptTag', SyntaxAt(1, 1)

#
# CSS
#
Given vue (CSS region without lang attribute):
  <style>
  /**/
  </style>

Execute:
  AssertEqual 'cssComment', SyntaxAt(2, 1)
  AssertEqual 'htmlTag', SyntaxAt(1, 1)

#
# Pug
#
Given vue (Pug template):
  <template lang="pug">
  p #{name}'s Pug source code!
  </template>

Execute:
  AssertEqual 'htmlTagName', SyntaxAt(2, 1)
  AssertEqual 'pugInterpolationDelimiter', SyntaxAt(2, 3)
  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)


Given vue (Pug template using their former name):
  <template lang="jade">
  p #{name}'s Pug source code!
  </template>

Execute:
  AssertEqual 'htmlTagName', SyntaxAt(2, 1)
  AssertEqual 'pugInterpolationDelimiter', SyntaxAt(2, 3)

#
# SCSS
#
Given vue (SCSS region):
  <style lang="scss">
  $green: #42b983;

  button {
    background-color: $green;
  }
  </style>

Execute:
  AssertEqual 'scssVariable', SyntaxOf('$green', 1)
  AssertEqual 'scssVariable', SyntaxOf('$green', 2)
  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)


Given vue (SCSS region with newline after tag name):
  <style
    lang="scss"
  >
  $green: #42b983
  </style>

Execute:
  AssertEqual 'scssVariable', SyntaxOf('$green')
  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)

#
# Sass
#
Given vue (Sass region):
  <style lang="sass">
  $green: #42b983
  </style>

Execute:
  AssertEqual 'sassVariable', SyntaxAt(2, 1)
  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)


Given vue (Sass region with modifier):
  <style lang="sass?indentedSyntax">
  $green: #42b983
  </style>

Execute:
  AssertEqual 'sassVariable', SyntaxAt(2, 1)

#
# Stylus
#
Given vue (Sass region):
  <style lang="stylus">
  @import 'variables'

  body
    font: 12px Helvetica, Arial, sans-serif
  </style>

Execute:
  AssertEqual 'stylusImport', SyntaxAt(2, 1)
  AssertEqual 'cssTagName', SyntaxAt(4, 1)
  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)


#
# TypeScript
#
Given vue (Typescript region using "ts" as name):
  <script lang="ts">
  @Component({})
  </script>

Execute:
  AssertEqual 'typescriptDecorators', SyntaxAt(2, 1)
  AssertEqual 'vueSurroundingTag', SyntaxAt(1, 1)


Given vue (Typescript region using "typescript" as name):
  <script lang="typescript">
  @Component({})
  </script>

Execute:
  AssertEqual 'typescriptDecorators', SyntaxAt(2, 1)


Given vue (Typescript region using "ts" attribute):
  <script ts>
  @Component({})
  </script>

Execute:
  AssertEqual 'typescriptDecorators', SyntaxAt(2, 1)
  AssertEqual 'htmlArg', SyntaxAt(1, 9)