@gitlab/eslint-plugin 19.3.0 → 19.4.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [19.4.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v19.3.0...v19.4.0) (2024-01-10)
+
+
+### Features
+
+* **vtu-no-wrapper-vm:** Improve reporting with $nextTick ([0cb92b8](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/0cb92b870feeea8d889ceec68bb30145b584c823))
+* **vtu-no-wrapper-vm:** Prevent saving off a reference to wrapper.vm ([96a59b0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/96a59b066bed3cca5bc62dcfaeb7c26160eda92a))
+
 # [19.3.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v19.2.0...v19.3.0) (2023-12-05)
 
 

package/docs/rules/vtu-no-wrapper-vm.md

@@ -0,0 +1,53 @@
+# @gitlab/vtu-no-wrapper-vm
+
+Prevent direct access to `vm` internals for `@vue/test-utils` wrappers.
+This is helpful for writing maintainable Vue tests.
+
+See https://docs.gitlab.com/ee/development/testing_guide/frontend_testing.html#what-and-how-to-test
+
+## Rule Details
+
+### Examples of **incorrect** code for this rule
+
+```javascript
+it('calls spy when foo-ed', () => {
+  // !! Direct access to `vm` properties !!
+  wrapper.vm.onFoo();
+
+  expect(spy).toHaveBeenCalled();
+});
+```
+
+### Examples of **correct** code for this rule
+
+```javascript
+it('calls spy when foo-ed', () => {
+  wrapper.find('button').trigger('click');
+
+  expect(spy).toHaveBeenCalled();
+});
+```
+
+## Options
+
+```json
+{
+  "@gitlab/vtu-no-wrapper-vm": [
+    "error",
+    {
+      "allow": ["$emit"]
+    }
+  ]
+}
+```
+
+- `allow` contains a list of allowable property names that can be directly
+  accessed under a vm.
+
+## Related Rules
+
+N/A.
+
+## When Not To Use It
+
+Don't use it if you don't want it.

package/docs/rules.md

@@ -9,6 +9,7 @@ Available rules:
 - [require-i18n-strings](./rules/require-i18n-strings.md): Detect a string which has been hard coded and requires externalization.
 - [require-valid-i18n-helpers](./rules/require-valid-i18n-helpers.md): Enforces valid usage of translation helpers in JavaScript.
 - [vtu-no-explicit-wrapper-destroy](./rules/vtu-no-explicit-wrapper-destroy.md): Prevents redundant destroy calls and null asignment
+- [vtu-no-wrapper-vm](./rules/vtu-no-wrapper-vm.md): Prevent direct access to `vm` internals for `@vue/test-utils` wrappers.
 - [vue-no-data-toggle](./rules/vue-no-data-toggle.md): Restrict the use of `data-toggle` bootstrap behaviors within Vue templates
 - [vue-no-new-non-primitive-in-template](./rules/vue-no-new-non-primitive-in-template.md): Prevents non-primitive values from being declared in templates
 - [vue-prefer-dollar-scopedslots](./rules/vue-prefer-dollar-scopedslots.md): Prefer $scopedSlots over $slots for Vue 2.x.

package/lib/index.js

@@ -8,6 +8,7 @@ module.exports = {
     'require-i18n-strings': require('./rules/require-i18n-strings.js'),
     'require-valid-i18n-helpers': require('./rules/require-valid-i18n-helpers.js'),
     'vtu-no-explicit-wrapper-destroy': require('./rules/vtu-no-explicit-wrapper-destroy.js'),
+    'vtu-no-wrapper-vm': require('./rules/vtu-no-wrapper-vm.js'),
     'vue-no-data-toggle': require('./rules/vue-no-data-toggle.js'),
     'vue-no-new-non-primitive-in-template': require('./rules/vue-no-new-non-primitive-in-template.js'),
     'vue-prefer-dollar-scopedslots': require('./rules/vue-prefer-dollar-scopedslots.js'),

package/lib/rules/vtu-no-wrapper-vm.js

@@ -0,0 +1,111 @@
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+const { DOCS_BASE_URL } = require('../constants');
+
+// ------------------------------------------------------------------------------
+//   Helpers
+// ------------------------------------------------------------------------------
+
+const getMemberName = (node) => {
+  if (node.type === 'Identifier') {
+    return node.name;
+  }
+  if (node.type === 'Literal') {
+    return node.value;
+  }
+
+  return null;
+};
+
+const isMemberName = (node, name) => {
+  return getMemberName(node) === name;
+};
+
+const isVmReference = (node) => {
+  if (node.type === 'MemberExpression') {
+    return isMemberName(node.property, 'vm');
+  }
+
+  return false;
+};
+
+const isAllowableVmProperty = (node, allowable) => {
+  const name = getMemberName(node);
+
+  if (!name) {
+    return true;
+  }
+
+  return allowable.has(name);
+};
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+/**
+ *
+ * @param {Set} allowable
+ */
+const getErrorMessage = (property, allowable) => {
+  if (getMemberName(property) === '$nextTick') {
+    return `Do not access \`vm\` internals directly. For \`$nextTick\`, import \`nextTick\` directly from the Vue package.`;
+  }
+  if (allowable.size) {
+    const part = Array.from(allowable).join(', ');
+
+    return `Do not access \`vm\` internals directly. Only the following properties are allowed: ${part}`;
+  }
+
+  return 'Do not access `vm` internals directly.';
+};
+
+module.exports = {
+  meta: {
+    type: 'error',
+    docs: {
+      description: 'Prevent direct access to `vm` internals for `@vue/test-utils` wrappers.',
+      category: undefined,
+      url: DOCS_BASE_URL + '/vtu-no-wrapper-vm.md',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const allowable = new Set(options.allow);
+
+    return {
+      AssignmentExpression(node) {
+        if (isVmReference(node.right)) {
+          context.report({
+            node: node.right,
+            message:
+              'Do not access `vm` internals directly or work around this by saving a reference to `vm`.',
+          });
+        }
+      },
+      MemberExpression(node) {
+        if (isVmReference(node.object) && !isAllowableVmProperty(node.property, allowable)) {
+          context.report({
+            node,
+            message: getErrorMessage(node.property, allowable),
+          });
+        }
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/eslint-plugin",
-  "version": "19.3.0",
+  "version": "19.4.0",
   "description": "GitLab package for our custom eslint rules",
   "main": "lib/index.js",
   "scripts": {