eslint-plugin-crisp 1.5.13 → 1.6.0

package/tests/rules/vue-header-check.test.js

@@ -0,0 +1,49 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import rule from "../../rules/vue-header-check.js";
+import { createVueRuleTester } from "../rule-tester.js";
+
+const ruleTester = createVueRuleTester();
+const fixturesDirectory = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "../fixtures/vue-header-check"
+);
+
+function fixture(directory) {
+  const filename = path.join(fixturesDirectory, directory, "TestComponent.vue");
+
+  return {
+    filename,
+    code: fs.readFileSync(filename, "utf8")
+  };
+}
+
+ruleTester.run("vue-header-check", rule, {
+  valid: [
+    fixture("valid")
+  ],
+
+  invalid: [
+    {
+      ...fixture("missing-template"),
+      errors: [
+        {
+          message: "The '<template>' section must be preceded by the 'TEMPLATE' header comment."
+        }
+      ]
+    },
+    {
+      ...fixture("missing-script-style"),
+      errors: [
+        {
+          message: "The '<script>' section must be preceded by the 'SCRIPT' header comment."
+        },
+        {
+          message: "The '<style>' section must be preceded by the 'STYLE' header comment."
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-html-indent.test.js

@@ -0,0 +1,77 @@
+import rule from "../../rules/vue-html-indent.js";
+import { createVueRuleTester } from "../rule-tester.js";
+
+const ruleTester = createVueRuleTester();
+const filename = "TestComponent.vue";
+
+ruleTester.run("vue-html-indent", rule, {
+  valid: [
+    {
+      filename,
+      code: `<template>
+  <button
+    type="button"
+  >
+    Save
+  </button>
+</template>`
+    },
+    {
+      filename,
+      code: `<template>
+  <span>Ready</span>
+</template>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename,
+      code: `<template>
+  <button
+      type="button"
+  >
+    Save
+  </button>
+</template>`,
+      output: `<template>
+  <button
+    type="button"
+  >
+    Save
+  </button>
+</template>`,
+      errors: [
+        {
+          message: "Expected attribute indentation of 4 spaces but found 6"
+        }
+      ]
+    },
+    {
+      filename,
+      code: `<template>
+   <span>Ready</span>
+</template>`,
+      errors: [
+        {
+          message: "Expected element indentation of 2 or 4 spaces but found 3"
+        }
+      ]
+    },
+    {
+      filename,
+      code: `<template>
+  <button
+    type="button"
+    >
+    Save
+  </button>
+</template>`,
+      errors: [
+        {
+          message: "Expected closing tag indentation of 2 spaces but found 4"
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-html-quotes.test.js

@@ -0,0 +1,71 @@
+import rule from "../../rules/vue-html-quotes.js";
+import { createVueRuleTester } from "../rule-tester.js";
+
+const ruleTester = createVueRuleTester();
+const filename = "TestComponent.vue";
+
+ruleTester.run("vue-html-quotes", rule, {
+  valid: [
+    {
+      filename,
+      code: `<template>
+  <button title="Save" :aria-label="label">Save</button>
+</template>
+
+<script setup>
+const label = "Save";
+</script>`
+    },
+    {
+      filename,
+      options: ["single"],
+      code: `<template>
+  <button title='Save'>Save</button>
+</template>`
+    },
+    {
+      filename,
+      options: [
+        "single",
+        {
+          avoidEscape: true
+        }
+      ],
+      code: `<template>
+  <p title="It's ready">Ready</p>
+</template>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename,
+      code: `<template>
+  <button title='Save'>Save</button>
+</template>`,
+      errors: [
+        {
+          messageId: "expected",
+          data: {
+            kind: "double quotes"
+          }
+        }
+      ]
+    },
+    {
+      filename,
+      options: ["single"],
+      code: `<template>
+  <button title="Save">Save</button>
+</template>`,
+      errors: [
+        {
+          messageId: "expected",
+          data: {
+            kind: "single quotes"
+          }
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-methods-separator.test.js

@@ -0,0 +1,55 @@
+import rule from "../../rules/vue-methods-separator.js";
+import createRuleTester from "../rule-tester.js";
+
+const ruleTester = createRuleTester();
+
+ruleTester.run("vue-methods-separator", rule, {
+  valid: [
+    {
+      code: "export default { methods: {} };"
+    },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+            save() {}
+          }
+        };
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      code: "export default { methods: { save() {} } };",
+      errors: [
+        {
+          message:
+            "Methods block must contain at least one separator comment: " +
+            "'// --> ACTIONS <--', '// --> HELPERS <--', " +
+            "or '// --> EVENT LISTENERS <--'."
+        }
+      ]
+    },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> HELPERS <--
+            help() {},
+            // --> OTHER <--
+            run() {}
+          }
+        };
+      `,
+      errors: [
+        {
+          message:
+            "Invalid separator comment. Must be '// --> ACTIONS <--', " +
+            "'// --> HELPERS <--', or '// --> EVENT LISTENERS <--'."
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-name-prop.test.js

@@ -0,0 +1,59 @@
+import rule from "../../rules/vue-name-prop.js";
+import { createVueRuleTester } from "../rule-tester.js";
+
+const ruleTester = createVueRuleTester();
+const filename = "TestComponent.vue";
+
+ruleTester.run("vue-name-prop", rule, {
+  valid: [
+    {
+      filename,
+      code: `<template>
+  <field-input name="user_name" />
+  <field-select :name="fieldName" />
+  <custom-input name="UserName" />
+</template>
+
+<script setup>
+const fieldName = "user_name";
+</script>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename,
+      code: `<template>
+  <field-input name="UserName" />
+</template>`,
+      output: `<template>
+  <field-input name="user_name" />
+</template>`,
+      errors: [
+        {
+          messageId: "invalidFormName",
+          data: {
+            nameValue: "UserName"
+          }
+        }
+      ]
+    },
+    {
+      filename,
+      code: `<template>
+  <field-select name="billing-address" />
+</template>`,
+      output: `<template>
+  <field-select name="billing_address" />
+</template>`,
+      errors: [
+        {
+          messageId: "invalidFormName",
+          data: {
+            nameValue: "billing-address"
+          }
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-no-component-class-shorthand.test.js

@@ -0,0 +1,49 @@
+import rule from "../../rules/vue-no-component-class-shorthand.js";
+import { createPugRuleTester } from "../rule-tester.js";
+
+const ruleTester = createPugRuleTester();
+const filename = "TestComponent.vue";
+
+ruleTester.run("vue-no-component-class-shorthand", rule, {
+  valid: [
+    {
+      filename,
+      code: `<template lang="pug">
+  div.panel
+  UserCard(class="panel")
+  user-card(class="panel")
+</template>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename,
+      code: `<template lang="pug">
+  UserCard.panel
+</template>`,
+      errors: [
+        {
+          messageId: "useClassAttribute",
+          data: {
+            name: "UserCard"
+          }
+        }
+      ]
+    },
+    {
+      filename,
+      code: `<template lang="pug">
+  user-card.panel
+</template>`,
+      errors: [
+        {
+          messageId: "useClassAttribute",
+          data: {
+            name: "user-card"
+          }
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-no-mixed-class.test.js

@@ -0,0 +1,56 @@
+import rule from "../../rules/vue-no-mixed-class.js";
+import { createVueRuleTester } from "../rule-tester.js";
+
+const ruleTester = createVueRuleTester();
+const filename = "TestComponent.vue";
+
+ruleTester.run("vue-no-mixed-class", rule, {
+  valid: [
+    {
+      filename,
+      code: `<template>
+  <section class="panel">Static</section>
+  <section :class="{ active }">Bound</section>
+  <section class="panel" :id="sectionId">Other binding</section>
+</template>
+
+<script setup>
+const active = true;
+const sectionId = "details";
+</script>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename,
+      code: `<template>
+  <section class="panel" :class="{ active }">Mixed</section>
+</template>
+
+<script setup>
+const active = true;
+</script>`,
+      errors: [
+        {
+          message: "Cannot use both \"class\" and \":class\" on the same element, merge them into \":class\"."
+        }
+      ]
+    },
+    {
+      filename,
+      code: `<template>
+  <section class="panel" v-bind:class="classes">Mixed</section>
+</template>
+
+<script setup>
+const classes = ["active"];
+</script>`,
+      errors: [
+        {
+          message: "Cannot use both \"class\" and \":class\" on the same element, merge them into \":class\"."
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-no-name-option.test.js

@@ -0,0 +1,44 @@
+import rule from "../../rules/vue-no-name-option.js";
+import createRuleTester from "../rule-tester.js";
+
+const ruleTester = createRuleTester();
+
+ruleTester.run("vue-no-name-option", rule, {
+  valid: [
+    {
+      code: "export default defineComponent({ name: \"Utility\" });",
+      filename: "/project/utility.js"
+    },
+    {
+      code: "export default defineComponent({ props: {} });",
+      filename: "/project/Panel.vue"
+    },
+    {
+      code: "export default { name: \"Legacy\" };",
+      filename: "/project/Legacy.vue"
+    }
+  ],
+
+  invalid: [
+    {
+      code: "export default defineComponent({ name: \"Panel\", props: {} });",
+      filename: "/project/Panel.vue",
+      output: "export default defineComponent({  props: {} });",
+      errors: [
+        {
+          message: "Vue single-file components must rely on their inferred filename."
+        }
+      ]
+    },
+    {
+      code: "export default Vue.defineComponent({ props: {}, \"name\": \"Panel\" });",
+      filename: "/project/Panel.vue",
+      output: "export default Vue.defineComponent({ props: {} });",
+      errors: [
+        {
+          message: "Vue single-file components must rely on their inferred filename."
+        }
+      ]
+    }
+  ]
+});

package/tests/rules/vue-no-regex-data.test.js

@@ -0,0 +1,39 @@
+import rule from "../../rules/vue-no-regex-data.js";
+import createRuleTester from "../rule-tester.js";
+
+const ruleTester = createRuleTester();
+
+ruleTester.run("vue-no-regex-data", rule, {
+  valid: [
+    {
+      code: "const pattern = /ok/; export default { data() { return { pattern }; } };"
+    },
+    {
+      code: "export default { data() { return { value: \"text\" }; } };"
+    }
+  ],
+
+  invalid: [
+    {
+      code: "export default { data() { return { pattern: /ok/i }; } };",
+      errors: [
+        {
+          message: "Do not use regex in Vue data object. Please move it outside, as a constant."
+        }
+      ]
+    },
+    {
+      code:
+        "export default { data() { return { first: new RegExp(\"a\"), " +
+        "second: /b/ }; } };",
+      errors: [
+        {
+          message: "Do not use regex in Vue data object. Please move it outside, as a constant."
+        },
+        {
+          message: "Do not use regex in Vue data object. Please move it outside, as a constant."
+        }
+      ]
+    }
+  ]
+});