Integrate the test project alongside the plugin (#79)

utarwyn · web-flow · commit e4ce6f18aab3 · 2025-05-19T00:05:31.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   [#51](https://github.com/green-code-initiative/creedengo-javascript/pull/51) Add ESLint v9 and flat config support
 
+### Changed
+
+-   [#79](https://github.com/green-code-initiative/creedengo-javascript/pull/79) Integrate the test project alongside the plugin
+
 ## [2.1.0] - 2025-03-31
 
 ### Added
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -8,10 +8,11 @@ have the basic information before starting.
 
 ## Structure
 
-The JavaScript plugin is divided into 2 modules:
+The JavaScript plugin is divided into 3 modules:
 
 - `eslint-plugin` contains the ESLint plugin part
 - `sonar-plugin` contains the SonarQube plugin implementation
+- `test-project` contains a project to test the rules on SonarQube
 
 The ESLint plugin **can be standalone** and is packed inside SonarQube plugin during the build phase.
 
@@ -96,6 +97,12 @@ To display tests coverage, use `yarn run test:cov`.
 
 > ℹ You don't need to add a test in the Sonar plugin, the class will be tested automatically.
 
+### Add an integration test
+
+It is also necessary to add an example of non-compliant code to the test project in the
+repository. This allows to check that the plgin works correctly with a real
+SonarQube instance. A README is present in `test-project` directory to help running a local analysis.
+
 ### Generate rule documentation
 
 A tool called [eslint-doc-generator](https://github.com/bmish/eslint-doc-generator) is used in the project to update
@@ -110,9 +117,17 @@ Two npm scripts are available:
 All the generated code is between commented lines with "auto-generated" in the text.\
 **Please run update script** after a rule creation.
 
-## End of development?
+## What else?
+
+You should be ready to open a PR on GitHub with all your code!
+
+Check one last time that you have respected the following points:
 
-The last step is to open a PR on this project with the implementation of the rule, and a second one on the test
-project with an exemple of a code not following rule needs. Keep an eye on the coverage of your rule implementation 👀
+- [ ] My rule implementation covers the use case without false-positive
+- [ ] My code is explicit or well documented
+- [ ] I have provided unit tests
+- [ ] I have added a non-compliant example code inside the test project
+- [ ] The coverage of my code is greather than 80%
+- [ ] I have modified the CHANGELOG with my change
 
 This is the end of this guide, thank you for reading this far and contributing to the project 🙏.
diff --git a/eslint-plugin/.yarn/releases/yarn-4.6.0.cjs b/eslint-plugin/.yarn/releases/yarn-4.6.0.cjs
diff --git a/eslint-plugin/.yarn/releases/yarn-4.9.1.cjs b/eslint-plugin/.yarn/releases/yarn-4.9.1.cjs
diff --git a/eslint-plugin/.yarnrc.yml b/eslint-plugin/.yarnrc.yml
@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.9.1.cjs
diff --git a/eslint-plugin/package.json b/eslint-plugin/package.json
@@ -55,5 +55,5 @@
   "peerDependencies": {
     "eslint": ">= 7 < 10"
   },
-  "packageManager": "yarn@4.6.0"
+  "packageManager": "yarn@4.9.1"
 }
diff --git a/test-project/.gitignore b/test-project/.gitignore
@@ -0,0 +1,14 @@
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+node_modules
+
+# Auto-generated files
+*-report.json
+.nyc_output
+.scannerwork
diff --git a/test-project/.yarn/releases/yarn-4.9.1.cjs b/test-project/.yarn/releases/yarn-4.9.1.cjs
diff --git a/test-project/.yarnrc.yml b/test-project/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.9.1.cjs
diff --git a/test-project/README.md b/test-project/README.md
@@ -0,0 +1,35 @@
+A sample project to test SonarQube and ESLint plugins of **creedengo-javascript**.
+
+👉 See [creedengo-javascript README](../README.md) to have more information.
+
+## Purpose of this project
+
+This project allows to test the rules edited by the ecoCode project for the JavaScript language.\
+The files in this repository contain both compliant and non-compliant code.
+
+### 1. Setup local environment
+
+First, follow [this complete guide](https://github.com/green-code-initiative/creedengo-common/blob/main/doc/HOWTO.md#installing-local-environment-local-sonarqube) to install your local SonarQube development environment. \
+Then, check that _creedengo_ rules are enabled in the quality profile that will be used during the analysis.
+
+You will also need some JavaScript tools installed on your computer:
+
+- A supported version of Node.js
+- Yarn (install it globally with `npm install -g yarn`)
+
+### 2. Send Sonar metrics to local SonarQube
+
+Use the following Shell script which will do the job for you:
+
+```sh
+./tool_send_to_sonar.sh MY_SONAR_TOKEN
+```
+
+Or you can manually run these commands:
+
+- Install dependencies: `yarn install`
+- Start Sonar Scanner: `yarn sonar -Dsonar.token=MY_SONAR_TOKEN`
+
+### 3. Check errors
+
+On your SonarQube instance, check if each JavaScript file contains the rule error defined for this class (you can search for tag `eco-design` rule on a special file).
diff --git a/test-project/eslint.config.mjs b/test-project/eslint.config.mjs
@@ -0,0 +1,18 @@
+import creedengo from "@creedengo/eslint-plugin";
+import eslint from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  creedengo.configs["flat/recommended"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  }
+);
diff --git a/test-project/package.json b/test-project/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "creedengo-javascript-test-project",
+  "version": "1.0.0",
+  "description": "JavaScript project to test ESLint and SonarQube plugins of creedengo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/green-code-initiative/creedengo-javascript-test-project.git"
+  },
+  "license": "GPL-3.0",
+  "author": "Green Code Initiative",
+  "scripts": {
+    "lint": "eslint src/.",
+    "lint:report": "eslint src/. -f json -o eslint-report.json",
+    "sonar": "sonar-scanner"
+  },
+  "devDependencies": {
+    "@creedengo/eslint-plugin": "../eslint-plugin",
+    "@eslint/js": "^9.25.0",
+    "@nestjs/common": "^11.0.20",
+    "eslint": "^9.25.0",
+    "globals": "^16.0.0",
+    "sonarqube-scanner": "^4.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1"
+  },
+  "packageManager": "yarn@4.9.1"
+}
diff --git a/test-project/sonar-project.properties b/test-project/sonar-project.properties
@@ -0,0 +1,3 @@
+sonar.exclusions=node_modules
+sonar.sources=src
+sonar.projectKey=creedengo-javascript-test-project
diff --git a/test-project/src/avoid-autoplay.js b/test-project/src/avoid-autoplay.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+function AudioComponent() {
+    return (
+        <div>
+            {/* Compliant */}
+            <audio preload="none"><track kind="captions"/></audio>
+            {/* Non-compliant */}
+            <video autoPlay><track kind="captions"/></video>
+            {/* Non-compliant */}
+            <video preload="auto"><track kind="captions"/></video>
+        </div>
+    );
+}
+
+export default AudioComponent;
diff --git a/test-project/src/avoid-brightness-override.js b/test-project/src/avoid-brightness-override.js
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import * as Brightness from 'expo-brightness';
+
+export default function App() {
+  useEffect(() => {
+    (async () => {
+      const { status } = await Brightness.requestPermissionsAsync();
+      if (status === 'granted') {
+        Brightness.setSystemBrightnessAsync(1);
+      }
+    })();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text>Brightness Module Example</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
diff --git a/test-project/src/avoid-high-accuracy-geolocation.js b/test-project/src/avoid-high-accuracy-geolocation.js
@@ -0,0 +1,26 @@
+import * as Location from 'expo-location';
+
+// Web
+function success(pos) {
+  console.log(pos.coords);
+}
+
+function error(err) {
+  console.warn(err);
+}
+
+// Non-compliant: enableHighAccuracy set to true
+const invalidOptions = { enableHighAccuracy: true, timeout: 5000 };
+navigator.geolocation.getCurrentPosition(success, error, invalidOptions);
+
+// Compliant: enableHighAccuracy is false by default, so its valid
+navigator.geolocation.getCurrentPosition(success);
+
+// Compliant: explicit enableHighAccuracy set to false
+const validOptions = { enableHighAccuracy: false, maximumAge: 0 };
+navigator.geolocation.getCurrentPosition(success, error, validOptions);
+
+// React Native
+Location.enableNetworkProviderAsync(); // Non-compliant
+
+Location.requestPermissionsAsync(); // Compliant
diff --git a/test-project/src/avoid-keep-awake-react-native-fn.js b/test-project/src/avoid-keep-awake-react-native-fn.js
@@ -0,0 +1,25 @@
+import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
+import React from 'react';
+import { Button, View } from 'react-native';
+
+export default class KeepAwakeExample extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Button onPress={this._activate} title="Activate" />
+        <Button onPress={this._deactivate} title="Deactivate" />
+      </View>
+    );
+  }
+
+  _activate = () => {
+    // Non-compliant
+    activateKeepAwake();
+    alert('Activated!');
+  };
+
+  _deactivate = () => {
+    deactivateKeepAwake();
+    alert('Deactivated!');
+  };
+}
diff --git a/test-project/src/avoid-keep-awake-react-native-hook.js b/test-project/src/avoid-keep-awake-react-native-hook.js
@@ -0,0 +1,13 @@
+import { useKeepAwake } from 'expo-keep-awake';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default function KeepAwakeExample() {
+  // Non-compliant
+  useKeepAwake();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>This screen will never sleep!</Text>
+    </View>
+  );
+}
diff --git a/test-project/src/import-all-from-library.js b/test-project/src/import-all-from-library.js
@@ -0,0 +1,5 @@
+import lodash from "lodash"; // Non-compliant: lodash is entirely loaded
+import * as _ from "underscore"; // Non-compliant: underscore is entirely loaded
+
+lodash.isEmpty("");
+_.isEmpty("");
diff --git a/test-project/src/limit-db-query-results.js b/test-project/src/limit-db-query-results.js
@@ -0,0 +1,22 @@
+import mysql from "mysql2";
+
+// Compliant
+let query = "SELECT * FROM customers LIMIT 10";
+query = "SELECT TOP 5 * FROM products";
+query = "SELECT * FROM orders FETCH FIRST 20 ROWS ONLY";
+query =
+  "WITH numbered_customers AS (SELECT *, ROW_NUMBER() OVER (ORDER BY customer_id) AS row_num FROM customers) SELECT * FROM numbered_customers WHERE row_num <= 50";
+
+// Non-compliant
+query = "SELECT id FROM bikes";
+
+// Sample to execute the query
+const connection = mysql.createConnection({
+  host: "localhost",
+  user: "root",
+  database: "test",
+});
+connection.query(query, function (_, results, fields) {
+  console.log(results);
+  console.log(fields);
+});
diff --git a/test-project/src/modular-import-from-library.js b/test-project/src/modular-import-from-library.js
@@ -0,0 +1,3 @@
+import isEmpty from "lodash/isEmpty"; // Compliant
+
+isEmpty("");
diff --git a/test-project/src/no-css-animations.js b/test-project/src/no-css-animations.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+function AnimatedComponent() {
+  return (
+    <div>
+      {/* Compliant */}
+      <div style={{ border: "5px solid red" }}></div>
+      <div class="my-awesome-element"></div>
+
+      {/* Non-compliant */}
+      <div style={{ animation: "background 0.3s ease" }}></div>
+    </div>
+  );
+}
+
+export default AnimatedComponent;
diff --git a/test-project/src/no-empty-image-src-attribute.js b/test-project/src/no-empty-image-src-attribute.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+function ImageComponent() {
+  return (
+    <div>
+      {/* Compliant */}
+      <img src="logo.svg" alt="This is a SVG image" />
+
+      {/* Non-compliant */}
+      <img alt="This is an empty image" />
+    </div>
+  );
+}
+
+export default ImageComponent;
diff --git a/test-project/src/no-multiple-access-dom-element.js b/test-project/src/no-multiple-access-dom-element.js
@@ -0,0 +1,15 @@
+// Non-compliant: same dom element accessed multiple times
+function invalidShowCard() {
+  document.querySelector("#card").style.backgroundColor = "red";
+  document.querySelector("#card").innerHTML = "Hello world!";
+}
+
+// Compliant: dom element is stored in a variable
+function validShowCard() {
+  const card = document.querySelector("#card");
+  card.style.backgroundColor = "red";
+  card.innerHTML = "Hello world!";
+}
+
+invalidShowCard();
+validShowCard();
diff --git a/test-project/src/no-torch.js b/test-project/src/no-torch.js
@@ -0,0 +1,3 @@
+import Torch from "react-native-torch"; // Non-compliant: torch should not be enabled
+
+Torch.switchState(true);
diff --git a/test-project/src/prefer-collections-with-pagination.ts b/test-project/src/prefer-collections-with-pagination.ts
diff --git a/test-project/src/prefer-lighter-formats-for-image-files.js b/test-project/src/prefer-lighter-formats-for-image-files.js
diff --git a/test-project/src/prefer-shorthand-css-notations.js b/test-project/src/prefer-shorthand-css-notations.js
diff --git a/test-project/src/provide-print-css.js b/test-project/src/provide-print-css.js
diff --git a/test-project/src/rule-no-multiple-style-changes.js b/test-project/src/rule-no-multiple-style-changes.js
diff --git a/test-project/tool_send_to_sonar.sh b/test-project/tool_send_to_sonar.sh
diff --git a/test-project/tsconfig.json b/test-project/tsconfig.json
diff --git a/test-project/yarn.lock b/test-project/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ enableGlobalCache: false`
`4`	`4`
`5`	`5`	`nodeLinker: node-modules`
`6`	`6`
`7`		`-yarnPath: .yarn/releases/yarn-4.6.0.cjs`
	`7`	`+yarnPath: .yarn/releases/yarn-4.9.1.cjs`
Original file line number	Diff line number	Diff line change
`@@ -55,5 +55,5 @@`
`55`	`55`	`"peerDependencies": {`
`56`	`56`	`"eslint": ">= 7 < 10"`
`57`	`57`	`},`
`58`		`- "packageManager": "yarn@4.6.0"`
	`58`	`+ "packageManager": "yarn@4.9.1"`
`59`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+nodeLinker: node-modules`
	`2`	`+`
	`3`	`+yarnPath: .yarn/releases/yarn-4.9.1.cjs`