test: css validation unit tests

Author: abose

test/css-worker-task.js

@@ -15,12 +15,19 @@ function getAllSymbols(data) {
     postMessage({type: "getAllSymbols", symbols});
 }
 
+function validateCSS(data) {
+    const cssMode = self.CSSLanguageService.CSS_MODES[data.cssMode];
+    const diag = self.CSSLanguageService.validateCSS(data.text, cssMode, data.filePath, data.lintSettings);
+    postMessage({type: "validateCSS", diag});
+}
+
 self.addEventListener('message', (event) => {
     console.log('Worker received: ', event);
     const command = event.data.command;
     switch (command) {
     case 'workerOK': workerOK(); break;
     case 'getAllSymbols': getAllSymbols(event.data); break;
+    case 'validateCSS': validateCSS(event.data); break;
     default: console.error('unknown worker command: ', command);
     }
 }, false);

test/test-css.worker.js

@@ -1,6 +1,6 @@
 /* global expect*/
 
-describe(`web worker CSS Language tests`, function () {
+describe(`web worker CSS Language tests`, async function () {
     let worker;
     let messageFromWorker = null;
 
@@ -73,4 +73,73 @@ describe(`web worker CSS Language tests`, function () {
         const symbols = output.symbols;
         expect(symbols).to.deep.equal(['.info', '.alert', '#success']);
     });
+
+    /**
+     * - "compatibleVendorPrefixes": Unnecessary vendor prefixes checker.
+     * - "vendorPrefix": Warns on missing vendor prefixes.
+     * - "boxModel": Warns if CSS box model is potentially misused.
+     * - "universalSelector": Warns against the use of the universal selector (*).
+     * - "fontFaceProperties": Ensures necessary properties are included in @font-face declarations.
+     * - "hexColorLength": Enforces consistency in hex color definitions.
+     * - "argumentsInColorFunction": Validates arguments within color functions.
+     * - "unknownProperties": Warns on unrecognized or mistyped CSS properties.
+     * - "ieHack": Warns about CSS hacks for older versions of Internet Explorer.
+     * - "unknownVendorSpecificProperties": Flags vendor-specific properties that might not be universally recognized.
+     * - "propertyIgnoredDueToDisplay": Notifies when CSS properties are ignored due to the `display` setting of an element.
+     * - "important": Warns against the excessive use of `!important`.
+     * - "float": Advises on the use of `float`, recommending modern layout alternatives.
+     * - "idSelector": Advises against using ID selectors for styling.
+     */
+
+    it("should validate css zeroUnits", async function () {
+        const cssValidationData = await (await fetch("test-files/cssValidationData.json")).json();
+        messageFromWorker = null;
+        const text = `.box { width: 0px;}`;
+        worker.postMessage({
+            command: `validateCSS`, text, cssMode: "CSS", filePath: "file:///c.css", lintSettings: {
+                zeroUnits: "warning"
+            }
+        });
+        let output = await waitForWorkerMessage(`validateCSS`, 1000);
+        const symbols = output.diag;
+        expect(symbols).to.deep.equal(cssValidationData["zeroUnits"]);
+    });
+
+    it("should validate css duplicateProperties", async function () {
+        const cssValidationData = await (await fetch("test-files/cssValidationData.json")).json();
+        messageFromWorker = null;
+        const text = `.box { color: red; color: blue; }`;
+        worker.postMessage({
+            command: `validateCSS`, text, cssMode: "CSS", filePath: "file:///c.css", lintSettings: {
+                duplicateProperties: "warning"
+            }
+        });
+        let output = await waitForWorkerMessage(`validateCSS`, 1000);
+        const symbols = output.diag;
+        expect(symbols).to.deep.equal(cssValidationData["duplicateProperties"]);
+    });
+
+    it("should validate css importStatement", async function () {
+        const cssValidationData = await (await fetch("test-files/cssValidationData.json")).json();
+        messageFromWorker = null;
+        const text = `@import "a.css"`;
+        worker.postMessage({command: `validateCSS`, text, cssMode: "CSS", filePath: "file:///c.css", lintSettings: {
+            importStatement: "warning"
+        }});
+        let output = await waitForWorkerMessage(`validateCSS`, 1000);
+        const symbols = output.diag;
+        expect(symbols).to.deep.equal(cssValidationData["importStatement"]);
+    });
+
+    it("should validate css emptyRules", async function () {
+        const cssValidationData = await (await fetch("test-files/cssValidationData.json")).json();
+        messageFromWorker = null;
+        const text = `.box {}`;
+        worker.postMessage({command: `validateCSS`, text, cssMode: "CSS", filePath: "file:///c.css", lintSettings: {
+            compatibleVendorPrefixes: "warning"
+        }});
+        let output = await waitForWorkerMessage(`validateCSS`, 1000);
+        const symbols = output.diag;
+        expect(symbols).to.deep.equal(cssValidationData["compatibleVendorPrefixes"]);
+    });
 });

test/test-files/cssValidationData.json

@@ -0,0 +1,81 @@
+{
+  "duplicateProperties": [{
+    "code": "duplicateProperties",
+    "source": "css",
+    "message": "Do not use duplicate style definitions",
+    "severity": 2,
+    "range": {
+      "start": {
+        "line": 0,
+        "character": 7
+      },
+      "end": {
+        "line": 0,
+        "character": 17
+      }
+    }
+  },{
+    "code": "duplicateProperties",
+    "source": "css",
+    "message": "Do not use duplicate style definitions",
+    "severity": 2,
+    "range": {
+      "start": {
+        "line": 0,
+        "character": 19
+      },
+      "end": {
+        "line": 0,
+        "character": 30
+      }
+    }
+  }],
+  "importStatement": [{
+    "code": "importStatement",
+    "source": "css",
+    "message": "Import statements do not load in parallel",
+    "severity": 2,
+    "range": {
+      "start": {
+        "line": 0,
+        "character": 0
+      },
+      "end": {
+        "line": 0,
+        "character": 15
+      }
+    }
+  }],
+  "compatibleVendorPrefixes": [{
+    "code": "emptyRules",
+    "source": "css",
+    "message": "Do not use empty rulesets",
+    "severity": 2,
+    "range": {
+      "start": {
+        "line": 0,
+        "character": 0
+      },
+      "end": {
+        "line": 0,
+        "character": 4
+      }
+    }
+  }],
+  "zeroUnits": [{
+    "code": "zeroUnits",
+    "source": "css",
+    "message": "No unit for zero needed",
+    "severity": 2,
+    "range": {
+      "start": {
+        "line": 0,
+        "character": 14
+      },
+      "end": {
+        "line": 0,
+        "character": 17
+      }
+    }
+  }]
+}