@gitlab/eslint-plugin 19.3.0 → 19.5.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [19.5.0](https://gitlab.com/gitlab-org/frontend/eslint-plugin/compare/v19.4.0...v19.5.0) (2024-03-27)
+
+
+### Features
+
+* **require-valid-i18n-helpers:** lint against string interpolation ([268d858](https://gitlab.com/gitlab-org/frontend/eslint-plugin/commit/268d858f8bd02cab06ea74f2c6844166489d0d89))
+
+# [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/require-valid-i18n-helpers.md

@@ -5,6 +5,8 @@ following:
 
 - All helpers should be called with string-literal arguments to ensure the strings are properly
   collected by the `gettext:regenerate` script.
+- The helpers' arguments should not use string interpolation as this also prevents the strings from
+  being collected.
 - `__` should not be called with a namespace.
 - `s__` requires a translation namespace to be provided.
 - `n__` should use the same namespace, or no namespace at all, for both the singular and plural forms.
@@ -21,6 +23,11 @@ const description = __(getDescription());
 // Extraneous namespace
 const globalTranslation = __('Global|Translation');
 
+// String interpolation
+const withStringInterpolation1 = __(`String ${interpolation}`);
+const withStringInterpolation2 = s__("SomeContext", `String ${interpolation}`);
+const withStringInterpolation3 = n__("%d apple", `%d ${apples}`, appleCount);
+
 // Missing translation namespace
 const namespacedTranslation = s__('NamespacedTranslation');
 

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/vue-require-valid-i18n-helpers.md

@@ -13,6 +13,11 @@ This rule is like [require-valid-i18n-helpers](./require-valid-i18n-helpers.md)
     {{ __(LABEL) }}
     {{ __(getDescription()) }}
 
+    <!-- String interpolation -->
+    {{ __(`String ${interpolation}`) }}
+    {{ s__("SomeContext", `String ${interpolation}`) }}
+    {{ n__("%d apple", `%d ${apples}`, appleCount) }}
+
     <!-- Missing translation namespace -->
     {{ s__('NamespacedTranslation') }}
   </div>

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/lib/utils/i18n-utils.js

@@ -10,6 +10,8 @@ const P_GETTEXT = 's__';
 const N_GETTEXT = 'n__';
 
 const ERROR_MESSAGE_STRING_LITERAL = 'Translation helpers must be called with a string literal.';
+const ERROR_MESSAGE_STRING_INTERPOLATION =
+  'Translation helpers should not use string interpolation.';
 const ERROR_MESSAGE_EXTRANEOUS_NAMESPACE =
   '__ should not be used with a translation namespace, consider using s__ instead.';
 const ERROR_MESSAGE_MISSING_NAMESPACE = 's__ requires a translation namespace to be provided.';
@@ -38,6 +40,16 @@ const mustBeCalledWithStringLiteralArguments = (context, node) => {
   }
 };
 
+const mustNotHaveStringInterpolation = (context, node) => {
+  const [arg1, arg2] = node.arguments;
+  if ([arg1, arg2].some((arg) => arg?.expressions?.length)) {
+    context.report({
+      node,
+      message: ERROR_MESSAGE_STRING_INTERPOLATION,
+    });
+  }
+};
+
 const mustHaveNamespace = (context, node) => {
   if (node.arguments.length === 2) {
     return;
@@ -94,9 +106,21 @@ const namespacesMustMatch = (context, node) => {
 };
 
 const VALIDATORS = {
-  [GETTEXT]: [mustBeCalledWithStringLiteralArguments, mustNotHaveNamespace],
-  [P_GETTEXT]: [mustBeCalledWithStringLiteralArguments, mustHaveNamespace],
-  [N_GETTEXT]: [mustBeCalledWithStringLiteralArguments, namespacesMustMatch],
+  [GETTEXT]: [
+    mustBeCalledWithStringLiteralArguments,
+    mustNotHaveStringInterpolation,
+    mustNotHaveNamespace,
+  ],
+  [P_GETTEXT]: [
+    mustBeCalledWithStringLiteralArguments,
+    mustNotHaveStringInterpolation,
+    mustHaveNamespace,
+  ],
+  [N_GETTEXT]: [
+    mustBeCalledWithStringLiteralArguments,
+    mustNotHaveStringInterpolation,
+    namespacesMustMatch,
+  ],
 };
 
 const validateI18nHelperCallFactory = (context) => (node) => {
@@ -113,6 +137,7 @@ const validateI18nHelperCallFactory = (context) => (node) => {
 module.exports = {
   validateI18nHelperCallFactory,
   ERROR_MESSAGE_STRING_LITERAL,
+  ERROR_MESSAGE_STRING_INTERPOLATION,
   ERROR_MESSAGE_EXTRANEOUS_NAMESPACE,
   ERROR_MESSAGE_MISSING_NAMESPACE,
   ERROR_MESSAGE_NAMESPACES_MISMATCH,

package/package.json

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