test: integ tests for eslint on jsx files

Author: abose

.eslintignore

@@ -22,5 +22,5 @@ test/temp/**
 test/thirdparty/**
 test/**/node_modules/**/*.js
 test/virtual-server-test.js
-
+test/spec/ESLintExtensionTest-files
 

src-node/ESLint/runner.js

@@ -67,6 +67,16 @@ async function getESLinter() {
     // when caching, make sure that a new eslint object is created when any of the eslint config file changes!!!.
 }
 
+async function _getConfigDetails(eslinter, filePath) {
+    try{
+        const config = await eslinter.calculateConfigForFile(filePath);
+        return JSON.parse(JSON.stringify(config)); // ensure that this is stringify able
+    } catch (e) {
+        console.error("Failed to compute config", e);
+        return null;
+    }
+}
+
 async function lintTextWithPath(text, fullFilePath) {
     // Create an ESLint instance
     const eslinter = await getESLinter();
@@ -94,7 +104,8 @@ async function lintTextWithPath(text, fullFilePath) {
     // Return the results as an array
     delete result.source;
     return {
-        result
+        result,
+        config: await _getConfigDetails(eslinter, fullFilePath)
     };
 }
 

src/extensions/default/JSLint/ESLint.js

@@ -38,6 +38,7 @@ define(function (require, exports, module) {
         StringUtils        = brackets.getModule("utils/StringUtils"),
         ProjectManager     = brackets.getModule("project/ProjectManager"),
         FileSystem         = brackets.getModule("filesystem/FileSystem"),
+        LanguageManager    = brackets.getModule("language/LanguageManager"),
         NodeUtils          = brackets.getModule("utils/NodeUtils");
 
     let prefs = PreferencesManager.getExtensionPrefs("ESLint"),
@@ -125,6 +126,18 @@ define(function (require, exports, module) {
         });
     }
 
+    function _isEslintSupportsJSX(config) {
+        if(!config){
+            return false;
+        }
+        let parserOptions = config.parserOptions; // es 7, 8
+        if(!parserOptions && config.languageOptions && config.languageOptions.parserOptions){
+            // this is for es9 and later
+            parserOptions = config.languageOptions.parserOptions;
+        }
+        return parserOptions && parserOptions.ecmaFeatures && parserOptions.ecmaFeatures.jsx;
+    }
+
     /**
      * Run JSLint on the current document. Reports results to the main UI. Displays
      * a gold star when no errors are found.
@@ -136,7 +149,10 @@ define(function (require, exports, module) {
                 return;
             }
             NodeUtils.ESLintFile(text, fullPath, ProjectManager.getProjectRoot().fullPath).then(esLintResult =>{
-                if (esLintResult.result && esLintResult.result.messages && esLintResult.result.messages.length) {
+                const language = LanguageManager.getLanguageForPath(fullPath).getId();
+                if(language === "jsx" && !_isEslintSupportsJSX(esLintResult.config)){
+                    resolve({isIgnored: true});
+                } else if (esLintResult.result && esLintResult.result.messages && esLintResult.result.messages.length) {
                     esLintServiceFailed = false;
                     resolve({ errors: _getErrors(esLintResult.result.messages) });
                 } else if(esLintResult.isError) {

test/spec/CodeInspection-integ-test.js

@@ -1108,6 +1108,48 @@ define(function (require, exports, module) {
                 expect(fixPos(EditorManager.getActiveEditor().getCursorPos())).toEqual(fixPos({line: 1, ch: 3}));
             });
 
+            it("should not show providers that returns isIgnored", async function () {
+                var codeInspector1 = createCodeInspector("javascript linter x", {
+                    isIgnored: true
+                });
+                const linterName = "javascript linter y";
+                var codeInspector2 = createCodeInspector(linterName, {
+                    errors: [
+                        {
+                            pos: { line: 0, ch: 2 },
+                            message: "Different error",
+                            type: CodeInspection.Type.WARNING
+                        }
+                    ]
+                });
+                CodeInspection.register("javascript", codeInspector1);
+                CodeInspection.register("javascript", codeInspector2);
+
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles(["errors.js"]), "open test file");
+
+                const $problemPanelTitle = $("#problems-panel .title").text();
+                expect($problemPanelTitle).toBe(StringUtils.format(Strings.SINGLE_ERROR, linterName, "errors.js"));
+
+                var $statusBar = $("#status-inspection");
+                expect($statusBar.is(":visible")).toBe(true);
+            });
+
+            it("should not show no error if all isIgnored", async function () {
+                var codeInspector1 = createCodeInspector("javascript linter x", {
+                    isIgnored: true
+                });
+                const linterName = "javascript linter y";
+                var codeInspector2 = createCodeInspector(linterName, {
+                    isIgnored: true
+                });
+                CodeInspection.register("javascript", codeInspector1);
+                CodeInspection.register("javascript", codeInspector2);
+
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles(["errors.js"]), "open test file");
+
+                expect($("#status-inspection").hasClass("inspection-disabled")).toBeTrue();
+            });
+
             it("should handle missing or negative line numbers gracefully (https://github.com/adobe/brackets/issues/6441)", async function () {
                 var codeInspector1 = createCodeInspector("NoLineNumberLinter", {
                     errors: [

test/spec/ESLintExtensionTest-files/es8_module/react.jsx

@@ -0,0 +1,14 @@
+function formatName(user) {
+    return user.firstName + ' ' + user.lastName;
+}
+
+const user = {
+    firstName: 'Harper',
+    lastName: 'Perez'
+};
+
+const element = (
+    <h1 id="dd">
+        Hello, {formatName(user)}!
+    </h1>
+);

test/spec/ESLintExtensionTest-files/es8_react_jsx/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}
+

test/spec/ESLintExtensionTest-files/es8_react_jsx/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "misc",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {},
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2"
+  }
+}

test/spec/ESLintExtensionTest-files/es8_react_jsx/react.jsx

@@ -0,0 +1,14 @@
+function formatName(user) {
+    return user.firstName + ' ' + user.lastName;
+}
+
+const user = {
+    firstName: 'Harper',
+    lastName: 'Perez'
+};
+
+const element = (
+    <h1 id="dd">
+        Hello, {formatName(user)}!
+    </h1>
+);

test/spec/Extn-ESLint-integ-test.js

@@ -68,7 +68,8 @@ define(function (require, exports, module) {
 
         const JSHintErrorES6Error_js = "Missing semicolon. jshint (W033)",
             ESLintErrorES7Error_js = "Parsing error: Unexpected token ; ESLint (null)",
-            ESLintErrorES8Error_js = "Expected '===' and instead saw '=='. ESLint (eqeqeq)";
+            ESLintErrorES8Error_js = "Expected '===' and instead saw '=='. ESLint (eqeqeq)",
+            ESLintReactError_js = "'element' is assigned a value but never used. ESLint (no-unused-vars)";
 
         async function _createTempProject(esLintSpecSubFolder) {
             return await SpecRunnerUtils.getTempTestDirectory(testRootSpec + esLintSpecSubFolder);
@@ -204,6 +205,27 @@ define(function (require, exports, module) {
             }, 5000);
         });
 
+        describe("ES8 with react js support project", function () { // this should cover es7 too
+            let reactProjectPath;
+
+            beforeAll(async function () {
+                reactProjectPath = await _createTempProject("es8_react_jsx");
+                await _npmInstallInFolder(reactProjectPath);
+                await SpecRunnerUtils.loadProjectInTestWindow(reactProjectPath);
+            }, 30000);
+
+            it("should ESLint jsx reactjs in v8 work as expected", async function () {
+                await _openProjectFile("react.jsx");
+                await _waitForProblemsPanelVisible(true);
+                await awaitsFor(()=>{
+                    return $("#problems-panel").text().includes(ESLintReactError_js);
+                }, "ESLint jsx error to be shown");
+            }, 5000);
+        });
+
+        // we should have an es9 test too as above, but es9 currently doesnt support jsx
+        // https://github.com/facebook/react/pull/28773  do when available.
+
         describe("ES8 module project", function () {
             let es7ProjectPath;
 
@@ -225,6 +247,13 @@ define(function (require, exports, module) {
                 await _loadAndValidateES8Project();
             }, 5000);
 
+            it("should not lint jsx file as ESLint v8 is not configured for react lint", async function () {
+                await _openProjectFile("react.jsx");
+                await awaits(100); // Just wait for some time to prevent any false linter runs
+                await _waitForProblemsPanelVisible(false);
+                expect($("#status-inspection").hasClass("inspection-disabled")).toBeTrue();
+            }, 5000);
+
             it("should not show JSHint in desktop app if ESLint is active", async function () {
                 await _loadAndValidateES8Project();
                 await awaits(100); // give some time so that jshint has time to complete if there is any.