Merge pull request #8 from green-code-initiative/no-css-animations

Add test file for "No css animations" rule

src/avoid-high-accuracy-geolocation.js

@@ -6,13 +6,13 @@ function error(err) {
   console.warn(err);
 }
 
-// NOK: enableHighAccuracy set to true
+// Non-compliant: enableHighAccuracy set to true
 const invalidOptions = { enableHighAccuracy: true, timeout: 5000 };
 navigator.geolocation.getCurrentPosition(success, error, invalidOptions);
 
-// OK: enableHighAccuracy is false by default, so its valid
+// Compliant: enableHighAccuracy is false by default, so its valid
 navigator.geolocation.getCurrentPosition(success);
 
-// OK: explicit enableHighAccuracy set to false
+// Compliant: explicit enableHighAccuracy set to false
 const validOptions = { enableHighAccuracy: false, maximumAge: 0 };
 navigator.geolocation.getCurrentPosition(success, error, validOptions);

src/import-all-from-library.js

@@ -1,5 +1,5 @@
-import lodash from "lodash";
-import * as _ from "underscore";
+import lodash from "lodash"; // Non-compliant: lodash is entirely loaded
+import * as _ from "underscore"; // Non-compliant: underscore is entirely loaded
 
 lodash.isEmpty("");
 _.isEmpty("");

src/limit-db-query-results.js

@@ -1,9 +1,22 @@
-//OK
-let query = "SELECT * FROM customers LIMIT 10;";
-query = "SELECT TOP 5 * FROM products;";
-query = "SELECT * FROM orders FETCH FIRST 20 ROWS ONLY;";
+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;";
+  "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";
 
-//NOK
-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);
+});

src/modular-import-from-library.js

@@ -1,3 +1,3 @@
-import isEmpty from "lodash/isEmpty";
+import isEmpty from "lodash/isEmpty"; // Compliant
 
 isEmpty("");

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;

src/no-empty-image-src-attribute.js

@@ -3,10 +3,10 @@ import React from "react";
 function ImageComponent() {
   return (
     <div>
-      {/* OK */}
+      {/* Compliant */}
       <img src="logo.svg" alt="This is a SVG image" />
 
-      {/* NOK */}
+      {/* Non-compliant */}
       <img alt="This is an empty image" />
     </div>
   );

src/no-multiple-access-dom-element.js

@@ -1,10 +1,10 @@
-// NOK: same dom element accessed multiple times
+// Non-compliant: same dom element accessed multiple times
 function invalidShowCard() {
   document.querySelector("#card").style.backgroundColor = "red";
   document.querySelector("#card").innerHTML = "Hello world!";
 }
 
-// OK: dom element is stored in a variable
+// Compliant: dom element is stored in a variable
 function validShowCard() {
   const card = document.querySelector("#card");
   card.style.backgroundColor = "red";