Merge pull request #19 from elisecodedestrucs/image-src-attribute-not…

…-empty

add rule image-src-attribute-not-empty

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [#19](https://github.com/green-code-initiative/ecoCode-javascript/pull/19) add rule `@ecocode/no-empty-image-src-attribute`
 - [#18](https://github.com/green-code-initiative/ecoCode-javascript/pull/18) add rule `@ecocode/limit-db-query-results`
 - [#14](https://github.com/green-code-initiative/ecoCode-javascript/pull/14) Create SonarQube plugin
 - [#12](https://github.com/green-code-initiative/ecoCode-javascript/issues/12) Pack ESLint plugin into SonarQube plugin

eslint-plugin/README.md

@@ -60,6 +60,7 @@ Add `@ecocode` to the `plugins` section of your `.eslintrc`, followed by rules c
 | :------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- |
 | [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)       | Avoid using high accuracy geolocation in web applications. | ✅  |
 | [limit-db-query-results](docs/rules/limit-db-query-results.md)                         | Should limit the number of returns for a SQL query         | ✅  |
+| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)             | Disallow usage of image with empty source attribute        | ✅  |
 | [no-import-all-from-library](docs/rules/no-import-all-from-library.md)                 | Should not import all from library                         | ✅  |
 | [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md)         | Disallow multiple access of same DOM element.              | ✅  |
 | [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md)                   | Disallow multiple style changes at once.                   | ✅  |

eslint-plugin/docs/rules/no-empty-image-src-attribute.md

@@ -0,0 +1,26 @@
+# Disallow usage of image with empty source attribute (`@ecocode/no-empty-image-src-attribute`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Rule Details
+
+This rule aims to prohibit the usage of <img/> without specifying its source attribute because it causes extra and unnecessary http requests. This rule is build for the [react library](https://react.dev/) and JSX.
+
+## Examples
+
+Examples of **non compliant** code for this rule:
+
+```js
+<img src='' />
+<img/>
+```
+
+Examples of **compliant** code for this rule:
+
+```js
+import imgSvg from './img.svg'
+<img src='./img.svg' />
+<img src={imgSvg} />
+```

eslint-plugin/lib/rules/no-empty-image-src-attribute.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (C) 2023 Green Code Initiative
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+"use strict";
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Disallow usage of image with empty source attribute",
+      category: "eco-design",
+      recommended: "warn",
+    },
+    messages: {
+      SpecifySrcAttribute:
+        "Make sure to specify src attribute when using <img/>.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name === "img") {
+          const srcValue = node.attributes.find(
+            (attr) => attr.name.name === "src",
+          );
+          if (srcValue && srcValue.value && srcValue.value.value === "") {
+            //to prevent <img src='' alt='Empty image'/>
+            context.report({
+              node: srcValue,
+              messageId: "SpecifySrcAttribute",
+            });
+          } else if (!srcValue) {
+            //to prevent <img />
+            context.report({
+              node,
+              messageId: "SpecifySrcAttribute",
+            });
+          }
+        }
+      },
+    };
+  },
+};

eslint-plugin/tests/lib/rules/no-empty-image-src-attribute.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (C) 2023 Green Code Initiative
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/no-empty-image-src-attribute");
+const RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+const expectedError1 = {
+  messageId: "SpecifySrcAttribute",
+  type: "JSXAttribute",
+};
+const expectedError2 = {
+  messageId: "SpecifySrcAttribute",
+  type: "JSXOpeningElement",
+};
+
+ruleTester.run("image-src-attribute-not-empty", rule, {
+  valid: [
+    `
+      <img src='logo.svg' alt='This is a SVG image'/>
+    `,
+    `
+      import logoSvg from "../files/logo.svg";
+      <img src={logoSvg} alt='This is a SVG image'/>
+    `,
+  ],
+
+  invalid: [
+    {
+      code: `
+        <img src=''/>
+      `,
+      errors: [expectedError1],
+    },
+    {
+      code: `
+        <img alt='This is an empty image'/>
+      `,
+      errors: [expectedError2],
+    },
+  ],
+});