test(selector-parsing): added tests

Author: marekdedic

package.json

@@ -59,7 +59,8 @@
     "eslint-visitor-keys": "^4.0.0",
     "espree": "^10.0.0",
     "postcss": "^8.4.49",
-    "postcss-scss": "^4.0.9"
+    "postcss-scss": "^4.0.9",
+    "postcss-selector-parser": "^7.0.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

tests/fixtures/parser/selector-parsing/simple-css-input.svelte

@@ -0,0 +1,25 @@
+<script>
+  let a = 10
+</script>
+
+<span class="myClass">Hello!</span>
+
+<b>{a}</b>
+
+<style>
+  .myClass {
+    color: red;
+  }
+
+  b {
+    font-size: xx-large;
+  }
+
+  a:active,
+  a::before,
+  b + a,
+  b + .myClass,
+  a[data-key="value"] {
+    color: blue;
+  }
+</style>

tests/fixtures/parser/selector-parsing/simple-css-output.json

@@ -0,0 +1,20 @@
+<div class="container">
+  <div class="div-class">Hello</div>
+
+  <span class="span-class">World!</span>
+</div>
+
+<style lang="postcss">
+  body {
+    colour: white;
+    background-colour: grey;
+  }
+
+  a:active,
+  a::before,
+  b + a,
+  b + .myClass,
+  a[data-key="value"] {
+    color: blue;
+  }
+</style>

tests/fixtures/parser/selector-parsing/simple-postcss-input.svelte

@@ -0,0 +1,26 @@
+<div class="container">
+  <div class="div-class">Hello</div>
+
+  <span class="span-class">World!</span>
+</div>
+
+<style lang="scss">
+  .container {
+    .div-class {
+      // This is an inline comment
+      color: red;
+    }
+
+    .span-class {
+      font-weight: bold;
+    }
+
+    a:active,
+    a::before,
+    b + a,
+    b + .myClass,
+    a[data-key="value"] {
+      color: blue;
+    }
+  }
+</style>

tests/fixtures/parser/selector-parsing/simple-postcss-output.json

@@ -0,0 +1,56 @@
+import assert from "assert";
+import fs from "fs";
+import path from "path";
+import type { Node } from "postcss";
+import type { Root as SelectorRoot } from "postcss-selector-parser";
+
+import { parseForESLint } from "../../../src/index.js";
+import {
+  generateParserOptions,
+  listupFixtures,
+  selectorNodeToJson,
+} from "./test-utils.js";
+
+const dirname = path.dirname(new URL(import.meta.url).pathname);
+const SELECTOR_PARSING_FIXTURE_ROOT = path.resolve(
+  dirname,
+  "../../fixtures/parser/selector-parsing",
+);
+
+function parse(code: string, filePath: string, config: any) {
+  return parseForESLint(code, generateParserOptions({ filePath }, config));
+}
+
+describe("Check for AST.", () => {
+  for (const {
+    input,
+    inputFileName,
+    outputFileName,
+    config,
+    meetRequirements,
+  } of listupFixtures(SELECTOR_PARSING_FIXTURE_ROOT)) {
+    if (!meetRequirements("parse")) {
+      continue;
+    }
+    describe(inputFileName, () => {
+      let services: any;
+
+      it("most to generate the expected selector AST.", () => {
+        services = parse(input, inputFileName, config).services;
+        if (!meetRequirements("test")) {
+          return;
+        }
+        const styleContext = services.getStyleContext();
+        assert.strictEqual(styleContext.status, "success");
+        const selectorASTs: SelectorRoot[] = [];
+        styleContext.sourceAst.walk((node: Node) => {
+          if (node.type === "rule") {
+            selectorASTs.push(services.getStyleSelectorAST(node));
+          }
+        });
+        const output = fs.readFileSync(outputFileName, "utf8");
+        assert.strictEqual(`${selectorASTs.map(selectorNodeToJson)}\n`, output);
+      });
+    });
+  }
+});

tests/fixtures/parser/selector-parsing/simple-scss-input.svelte

@@ -5,6 +5,7 @@ import type { Linter, Scope as ESLintScope } from "eslint";
 import { LinesAndColumns } from "../../../src/context/index.js";
 import type { Reference, Scope, ScopeManager, Variable } from "eslint-scope";
 import type * as TSESScopes from "@typescript-eslint/scope-manager";
+import type { Node as SelectorNode } from "postcss-selector-parser";
 import type { SvelteNode } from "../../../src/ast/index.js";
 import type { StyleContext } from "../../../src/index.js";
 import { TS_GLOBALS } from "./ts-vars.js";
@@ -480,6 +481,17 @@ export function styleContextToJson(styleContext: StyleContext): string {
   }
 }
 
+export function selectorNodeToJson(node: SelectorNode): string {
+  return JSON.stringify(node, nodeReplacer, 2);
+
+  function nodeReplacer(key: string, value: any): any {
+    if (key === "parent" || key.startsWith("_")) {
+      return undefined;
+    }
+    return value;
+  }
+}
+
 function normalizeScope(scope: Scope | TSESScopes.Scope): any {
   let variables = scope.variables as TSESScopes.Variable[];
   if (scope.type === "global") {