Add a few tests & fix the macros-order rule

lib/rules/component-api-style.js

@@ -162,7 +162,7 @@ function buildAllowedPhrase(allowsOpt) {
     phrases.push('Options API')
   }
   return phrases.length > 2
-    ? `${phrases.slice(0, -1).join(',')} or ${phrases.slice(-1)[0]}`
+    ? `${phrases.slice(0, -1).join(', ')} or ${phrases.slice(-1)[0]}`
     : phrases.join(' or ')
 }
 

lib/rules/define-macros-order.js

@@ -137,7 +137,7 @@ function create(context) {
 
           // need move only second
           if (secondStatement !== shouldSecondNode) {
-            reportNotOnTop(order[1], shouldSecondNode, shouldFirstNode)
+            reportNotOnTop(order[1], shouldSecondNode, secondStatement)
           }
 
           return

tests/lib/rules/component-api-style.js

@@ -817,6 +817,31 @@ tester.run('component-api-style', rule, {
           column: 9
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        data () {
+          return {
+            msg: 'Hello World!',
+            // ...
+          }
+        },
+        // ...
+      }
+      </script>
+      `,
+      options: [['script-setup', 'composition', 'composition-vue2']],
+      errors: [
+        {
+          message:
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use `<script setup>`, Composition API or Composition API (Vue 2) instead.',
+          line: 4,
+          column: 9
+        }
+      ]
     }
   ]
 })

tests/lib/rules/define-macros-order.js

@@ -128,6 +128,26 @@ tester.run('define-macros-order', rule, {
       parserOptions: {
         parser: require.resolve('@typescript-eslint/parser')
       }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          'use strict';
+          defineProps({
+            test: Boolean
+          })
+          defineEmits(['update:test'])
+        </script>
+      `,
+      options: optionsPropsFirst
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+        </script>
+      `
     }
   ],
   invalid: [
@@ -454,6 +474,52 @@ tester.run('define-macros-order', rule, {
           line: 2
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          console.log('test1')
+          defineProps({ test: Boolean })
+        </script>
+      `,
+      output: `
+        <script setup>
+          defineProps({ test: Boolean })
+          console.log('test1')
+        </script>
+      `,
+      options: optionsEmitsFirst,
+      errors: [
+        {
+          message: message('defineProps'),
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          defineEmits(['update:test'])
+          console.log('test1')
+          defineProps({ test: Boolean })
+        </script>
+      `,
+      output: `
+        <script setup>
+          defineEmits(['update:test'])
+          defineProps({ test: Boolean })
+          console.log('test1')
+        </script>
+      `,
+      options: optionsEmitsFirst,
+      errors: [
+        {
+          message: message('defineProps'),
+          line: 5
+        }
+      ]
     }
   ]
 })

tests/lib/rules/max-attributes-per-line.js

@@ -113,6 +113,27 @@ job="Vet"></component></template>`,
       options: [{ singleline: 3, multiline: 1 }],
       output: `<template><component
         name="John Doe"
+age="30"
+        job="Vet">
+        </component>
+      </template>`,
+      errors: [
+        {
+          message: "'age' should be on a new line.",
+          type: 'VAttribute',
+          line: 2
+        }
+      ]
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet">
+        </component>
+      </template>`,
+      options: [{ multiline: { max: 1 } }],
+      output: `<template><component
+        name="John Doe"
 age="30"
         job="Vet">
         </component>