test: add test cases to prevent regression, some exposing exisiting issues

Author: blyedev

src/parser-styles.js

@@ -1,4 +1,4 @@
-import postcss from "postcss";
+import postcss, { CssSyntaxError } from "postcss";
 
 /**
  * Represents a parser that adjusts the positions of nodes within the source code.
@@ -18,16 +18,25 @@ export class StyleParser {
   /**
    * Modifies a position object to be relative to the input file instead of the parsed CSS.
    *
-   * @param {postcss.Position} position - The position object that requires adjustment.
+   * @param {postcss.Position | postcss.FilePosition | postcss.CssSyntaxError} object - The position object that requires adjustment.
    */
-  _adjustPosition(position) {
+  _adjustPosition(object) {
     const { col, line } = this.input.fromOffset(this.styleLiteral.getStart());
-
-    if (position.line === 1) {
-      position.column += col;
+    if (object) {
+      if (object.line === 1) {
+        object.column += col;
+      }
+      object.line += line - 1;
+      if (typeof object.offset === "number") {
+        object.offset += this.styleLiteral.getStart() + 1;
+      }
+      if (typeof object.endLine === "number") {
+        if (object.endLine === 1) {
+          object.endColumn += col;
+        }
+        object.endLine += line;
+      }
     }
-    position.line += line - 1;
-    position.offset += this.styleLiteral.getStart() + 1;
   }
 
   /**
@@ -38,6 +47,8 @@ export class StyleParser {
   _adjustNode(node) {
     this._adjustPosition(node.source.start);
     this._adjustPosition(node.source.end);
+
+    // End position on source is inclusive but the function is generic for both position and ranges
     node.source.end.column -= 1;
     node.source.end.offset -= 1;
   }
@@ -57,8 +68,8 @@ export class StyleParser {
   /**
    * Modifies error positions to reflect the context of the input file accurately.
    *
-   * @param {any} error - The error object that needs positional adjustment.
-   * @returns {any} The error object with updated position information.
+   * @param {CssSyntaxError} error - The error object that needs positional adjustment.
+   * @returns {CssSyntaxError} The error object with updated position information.
    */
   _adjustError(error) {
     if (error && error.name === "CssSyntaxError") {
@@ -68,6 +79,8 @@ export class StyleParser {
         /:\d+:\d+:/,
         `:${error.line}:${error.column}:`,
       );
+      error.source = this.input.css;
+      error.input.source = this.input.css;
     }
     return error;
   }

test/e2e/stylelint.js

@@ -3,7 +3,7 @@ import stylelint from "stylelint";
 import stylelintConfig from "stylelint-config-standard";
 import customSyntax from "../../src/index.js";
 import { getAllFixtureFilenames, getFixtureCode } from "../utils.js";
-import * as assert from "uvu/assert";
+import { equal, is, not, ok, snapshot } from "uvu/assert";
 
 const stylelintRun = (content, path, opts) => {
   return stylelint.lint({
@@ -36,14 +36,18 @@ autofixFiles.forEach(({ fixable, fixed }) => {
     const result = await stylelintRun(fixture.code, fixture.path, {
       fix: true,
     });
-    assert.is(result.code, getFixtureCode(fixed).code);
+    snapshot(result.code, getFixtureCode(fixed).code);
   });
 });
 
 const noSourceFixture = getFixtureCode("no-style.component.ts");
 test(`Test if stylelint considers this empty source: ${noSourceFixture.filename}`, async () => {
   const result = await stylelintRun(noSourceFixture.code, noSourceFixture.path);
-  assert.equal(result.results[0].warnings, []);
+  equal(
+    result.results[0].warnings.length,
+    0,
+    `Expected no warnings but the following warnings were raised: ${result.results[0].warnings}`,
+  );
 });
 
 const emptySourceFixture = getFixtureCode("empty-style.component.ts");
@@ -52,17 +56,32 @@ test(`Test if stylelint considers this empty source: ${emptySourceFixture.filena
     emptySourceFixture.code,
     emptySourceFixture.path,
   );
+  ok(result);
+  ok(result.results[0]);
 
-  assert.equal(result.results[0].warnings[0], {
-    line: 6,
-    column: 11,
-    endLine: 6,
-    endColumn: 12,
-    rule: "no-empty-source",
-    severity: "error",
-    text: "Unexpected empty source (no-empty-source)",
-    url: undefined,
-  });
+  const warnings = result.results[0].warnings;
+  not.equal(warnings, [], "Expected warnings not to be empty");
+  ok(
+    warnings.map((w) => w.rule).includes("no-empty-source"),
+    `Expected a warning about empty source. Warnings: ${warnings}`,
+  );
+});
+
+const whitespaceFixture = getFixtureCode("whitespace.component.ts");
+test(`Test if stylelint considers this empty source: ${whitespaceFixture.filename}`, async () => {
+  const result = await stylelintRun(
+    whitespaceFixture.code,
+    whitespaceFixture.path,
+  );
+  ok(result);
+  ok(result.results[0]);
+
+  const warnings = result.results[0].warnings;
+  not.equal(warnings, [], "Expected warnings not to be empty");
+  ok(
+    warnings.map((w) => w.rule).includes("no-empty-source"),
+    `Expected a warning about empty source. Warnings: ${warnings.toString()}`,
+  );
 });
 
 test.run();

test/fixtures/syntax-error.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-example",
+  template: "<div></div>",
+  styles: ".example  color: red; }",
+})
+export class ExampleComponent {}

test/fixtures/whitespace.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-example",
+  template: "<div></div>",
+  styles: [" ", "  ", "\n", "\r\n"],
+})
+export class ExampleComponent {}

test/integration/byte-to-byte.js

@@ -2,9 +2,20 @@ import { test } from "uvu";
 import * as assert from "uvu/assert";
 import postcss from "postcss";
 import customSyntax from "../../src/index.js";
-import { getAllFixtureFilenames, getFixtureCode } from "../utils.js";
+import { getFixtureCode } from "../utils.js";
 
-getAllFixtureFilenames().forEach((filename) => {
+const testCases = [
+  "empty-style.component.ts",
+  "fixable.component.ts",
+  "fixed.component.ts",
+  "multi-style.component.ts",
+  "no-style.component.ts",
+  "one-style.component.ts",
+  "real.component.ts",
+  "whitespace.component.ts",
+];
+
+testCases.forEach((filename) => {
   const fixture = getFixtureCode(filename);
 
   test(`CustomSyntax byte-to-byte transformation on: ${fixture.filename}`, async () => {

test/unit/parse.js

@@ -2,9 +2,20 @@ import { test } from "uvu";
 import * as assert from "uvu/assert";
 import { parse } from "../../src/index.js";
 import postcss from "postcss";
-import { getAllFixtureFilenames, getFixtureCode } from "../utils.js";
+import { getFixtureCode } from "../utils.js";
 
-getAllFixtureFilenames().forEach((filename) => {
+const testCases = [
+  "empty-style.component.ts",
+  "fixable.component.ts",
+  "fixed.component.ts",
+  "multi-style.component.ts",
+  "no-style.component.ts",
+  "one-style.component.ts",
+  "real.component.ts",
+  "whitespace.component.ts",
+];
+
+testCases.forEach((filename) => {
   const fixture = getFixtureCode(filename);
 
   test(`Parse runs error free for: ${fixture.filename}`, () => {

test/unit/parser-styles.js

@@ -1,11 +1,11 @@
 import { test } from "uvu";
 import { getFixtureCode } from "../utils.js";
 import { TypescriptParser } from "../../src/parser-typescript.js";
-import { Input } from "postcss";
+import { CssSyntaxError, Input } from "postcss";
 import { StyleParser } from "../../src/parser-styles.js";
-import { equal } from "uvu/assert";
+import { equal, throws } from "uvu/assert";
 
-const testCases = [
+const positionTestCases = [
   {
     filename: "empty-style.component.ts",
     sources: [
@@ -71,7 +71,7 @@ const testCases = [
   },
 ];
 
-testCases.forEach(({ filename, sources }) => {
+positionTestCases.forEach(({ filename, sources }) => {
   const fixture = getFixtureCode(filename);
 
   test(`Ensure strings have correct position: ${fixture.filename}`, () => {
@@ -89,4 +89,47 @@ testCases.forEach(({ filename, sources }) => {
   });
 });
 
+const syntaxErrFixture = getFixtureCode("syntax-error.component.ts");
+
+test(`Ensure syntax error has correct position: ${syntaxErrFixture.filename}`, () => {
+  const opts = { from: syntaxErrFixture.path };
+  const input = new Input(syntaxErrFixture.code, opts);
+
+  const tsParser = new TypescriptParser(input);
+  const styleLiterals = tsParser.parse();
+
+  const styleParser = new StyleParser(input, styleLiterals[0]);
+
+  throws(
+    () => styleParser.parse(opts),
+    (/** @type {Error} */ err) => {
+      if (!(err instanceof CssSyntaxError)) return false;
+
+      const expectedPos = {
+        file: syntaxErrFixture.path,
+        line: 6,
+        column: 22,
+        endLine: 7,
+        endColumn: 27,
+        source: syntaxErrFixture.code,
+      };
+
+      const expectedInput = {
+        url: "file:///home/blyedev/Projects/postcss-angular-inline/test/fixtures/syntax-error.component.ts",
+        ...expectedPos,
+      };
+      const expectedErrorProperties = {
+        name: "CssSyntaxError",
+        reason: "Unknown word",
+        ...expectedPos,
+        input: expectedInput,
+      };
+
+      equal({ ...err }, { ...expectedErrorProperties });
+
+      return true;
+    },
+  );
+});
+
 test.run();