Fix test for new classCache format

winston0410 · Aug 21, 2021 · 9d7a3ae · 9d7a3ae
1 parent 0f9f0a5
commit 9d7a3ae
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 36 deletions.
diff --git a/test/scope.spec.js b/test/scope.spec.js
@@ -1,6 +1,7 @@
 import createTokenizer from "../src/tokenizer";
 import { getProxiedObject } from "../src/helper";
 import { parse } from "svelte/compiler";
+import path from "path";
 
 describe("when processing multiple components", function () {
   const classCache = getProxiedObject();
@@ -23,27 +24,30 @@ describe("when processing multiple components", function () {
 <p class="foo"></p>`;
 
   const codes = [
-    [componentA, "filenameA"],
-    [componentB, "filenameB"],
+    [componentA, "/src/filenameA"],
+    [componentB, "/src/filenameB"],
   ];
 
   const tokenizer = createTokenizer(classCache, declarationCache);
 
   for (const [code, filename] of codes) {
     const ast = parse(code, { filename });
-    tokenizer.generateToken(ast.css, filename);
+    const parsedPath = path.parse(filename);
+    tokenizer.generateToken(ast.css, parsedPath);
   }
 
   it("should hashing classes of each component with filename in cache", async () => {
     expect(classCache).toEqual(
       expect.objectContaining({
-        filenameA: {
-          //  color:green; is now represented by class a
-          foo: { a: true },
-        },
-        filenameB: {
-          //  font-size:20px; is now represented by class b
-          foo: { b: true },
+        "/src": {
+          filenameA: {
+            //  color:green; is now represented by class a
+            foo: { a: true },
+          },
+          filenameB: {
+            //  font-size:20px; is now represented by class b
+            foo: { b: true },
+          },
         },
       })
     );

diff --git a/test/tokenizer.spec.js b/test/tokenizer.spec.js
@@ -1,6 +1,7 @@
 import createTokenizer from "../src/tokenizer";
 import { getProxiedObject } from "../src/helper";
 import { parse } from "svelte/compiler";
+import path from "path";
 
 describe("when given multiple rules with identical declaration", function () {
   const code = `
@@ -14,19 +15,22 @@ describe("when given multiple rules with identical declaration", function () {
   }
 </style>`;
 
-  const filename = "index.svelte";
+  const filename = "/src/index.svelte";
 
   const classCache = getProxiedObject();
   const declarationCache = getProxiedObject();
 
   const tokenizer = createTokenizer(classCache, declarationCache);
   const ast = parse(code, { filename });
-  tokenizer.generateToken(ast.css, filename);
+  const parsedPath = path.parse(filename);
+  tokenizer.generateToken(ast.css, parsedPath);
 
   it("should share that token of that declaration in cache", function () {
     expect(classCache).toEqual(
       expect.objectContaining({
-        "index.svelte": { "layout-1": { a: true }, "layout-2": { a: true } },
+        "/src": {
+          "index.svelte": { "layout-1": { a: true }, "layout-2": { a: true } },
+        },
       })
     );
   });
@@ -53,20 +57,23 @@ describe("when given multiple components", function () {
     const tokenizer = createTokenizer(classCache, declarationCache);
 
     const list = [
-      [code1, "index.svelte"],
-      [code2, "dummy.svelte"],
+      [code1, "/src/index.svelte"],
+      [code2, "/src/dummy.svelte"],
     ];
 
     for (const [code, filename] of list) {
       const ast = parse(code, { filename });
-      tokenizer.generateToken(ast.css, filename);
+      const parsedPath = path.parse(filename);
+      tokenizer.generateToken(ast.css, parsedPath);
     }
 
     it("should share that token of that declaration in cache", function () {
       expect(classCache).toEqual(
         expect.objectContaining({
-          "index.svelte": { "layout-1": { a: true } },
-          "dummy.svelte": { "layout-2": { a: true } },
+          "/src": {
+            "index.svelte": { "layout-1": { a: true } },
+            "dummy.svelte": { "layout-2": { a: true } },
+          },
         })
       );
     });
@@ -83,18 +90,21 @@ describe("when given a javascript expression as class attribute", function () {
 
 <h1 class={"active"}></h1>`;
 
-  const filename = "index.svelte";
+  const filename = "/src/index.svelte";
 
   const classCache = getProxiedObject();
   const declarationCache = getProxiedObject();
   const tokenizer = createTokenizer(classCache, declarationCache);
   const ast = parse(code, { filename });
-  tokenizer.generateToken(ast.css, filename);
+  const parsedPath = path.parse(filename);
+  tokenizer.generateToken(ast.css, parsedPath);
 
   it("should fill the class cache correctly", function () {
     expect(classCache).toEqual(
       expect.objectContaining({
-        "index.svelte": { active: { a: true } },
+        "/src": {
+          "index.svelte": { active: { a: true } },
+        },
       })
     );
   });
@@ -116,19 +126,22 @@ describe("when given an dynamic javascript expression as class attribute", funct
 
 <h1 class={isActive ? "active" : "inactive"}></h1>`;
 
-  const filename = "index.svelte";
+  const filename = "/src/index.svelte";
 
   it("should fill the class cache correctly", function () {
     const classCache = getProxiedObject();
     const declarationCache = getProxiedObject();
     const tokenizer = createTokenizer(classCache, declarationCache);
     const ast = parse(code, { filename });
-    tokenizer.generateToken(ast.css, filename);
+    const parsedPath = path.parse(filename);
+    tokenizer.generateToken(ast.css, parsedPath);
     expect(classCache).toEqual(
       expect.objectContaining({
-        "index.svelte": {
-          active: { a: true },
-          inactive: { b: true },
+        "/src": {
+          "index.svelte": {
+            active: { a: true },
+            inactive: { b: true },
+          },
         },
       })
     );
@@ -145,13 +158,15 @@ describe("when given a css declaration with psuedo elements", function () {
 
 <h1 class={"title"}></h1>`;
 
-  const filename = "index.svelte";
+  const filename = "/src/index.svelte";
 
   const classCache = getProxiedObject();
   const declarationCache = getProxiedObject();
   const tokenizer = createTokenizer(classCache, declarationCache);
   const ast = parse(code, { filename });
-  tokenizer.generateToken(ast.css, filename);
+
+  const parsedPath = path.parse(filename);
+  tokenizer.generateToken(ast.css, parsedPath);
 
   it("should fill the declaration cache correctly", function () {
     expect(declarationCache).toEqual(
@@ -162,7 +177,9 @@ describe("when given a css declaration with psuedo elements", function () {
   it("should fill the class cache correctly", function () {
     expect(classCache).toEqual(
       expect.objectContaining({
-        "index.svelte": { "title::before": { a: true } },
+        "/src": {
+          "index.svelte": { "title::before": { a: true } },
+        },
       })
     );
   });
@@ -178,13 +195,15 @@ describe("when given a css declaration with psuedo class", function () {
 
 <h1 class={"title"}></h1>`;
 
-  const filename = "index.svelte";
+  const filename = "/src/index.svelte";
 
   const classCache = getProxiedObject();
   const declarationCache = getProxiedObject();
   const tokenizer = createTokenizer(classCache, declarationCache);
   const ast = parse(code, { filename });
-  tokenizer.generateToken(ast.css, filename);
+
+  const parsedPath = path.parse(filename);
+  tokenizer.generateToken(ast.css, parsedPath);
 
   it("should fill the declaration cache correctly", function () {
     expect(declarationCache).toEqual(
@@ -195,7 +214,9 @@ describe("when given a css declaration with psuedo class", function () {
   it("should fill the class cache correctly", function () {
     expect(classCache).toEqual(
       expect.objectContaining({
-        "index.svelte": { "title:hover": { a: true } },
+        "/src": {
+          "index.svelte": { "title:hover": { a: true } },
+        },
       })
     );
   });

diff --git a/test/transformer.spec.js b/test/transformer.spec.js
@@ -1,5 +1,6 @@
 import createTransformer from "../src/transformer.js";
 import { parse } from "svelte/compiler";
+import path from "path";
 
 describe("when transforming html", function () {
   const code = `
@@ -12,16 +13,19 @@ describe("when transforming html", function () {
 <p class="my-long-class-name"></p>
     `;
 
-  const filename = "index.svelte";
+  const filename = "/src/index.svelte";
 
   const classCache = {
-    [filename]: { "my-long-class-name": { a: true } },
-    "dummy.svelte": { "my-long-class-name": { b: true } },
+    "/src": {
+      "index.svelte": { "my-long-class-name": { a: true } },
+      "dummy.svelte": { "my-long-class-name": { b: true } },
+    },
   };
 
   it("should only transformed with classes associated with current component", function () {
     const ast = parse(code, { filename });
-    const transformer = createTransformer(code, filename).transformHtml(
+    const parsedPath = path.parse(filename);
+    const transformer = createTransformer(code, parsedPath).transformHtml(
       ast.html,
       classCache
     );