Split replace value symbols test

Author: TrySound

test/replaceSymbols.test.js

@@ -1,111 +1,39 @@
-const postcss = require('postcss')
-const { replaceSymbols } = require('../src')
-
-const run = (input, replacements, expected) => {
-  return postcss([css => replaceSymbols(css, replacements)])
-    .process(input)
-    .then(result => {
-      expect(result.css).toEqual(expected)
+/* eslint-env jest */
+import postcss from "postcss";
+import { replaceSymbols } from "../src";
+
+const replace = (input, replacements) => {
+  const ast = postcss.parse(input);
+  replaceSymbols(ast, replacements);
+  return ast.toString();
+};
+
+test("return empty CSS unchanged", () => {
+  expect(replace("", {})).toEqual("");
+});
+
+test("not change class names", () => {
+  expect(replace(".foo { color: red }", { foo: "bar" })).toEqual(
+    ".foo { color: red }"
+  );
+});
+
+test("not change property names", () => {
+  expect(replace(".foo { color: red }", { color: "background" })).toEqual(
+    ".foo { color: red }"
+  );
+});
+
+test("change declaration values", () => {
+  expect(replace(".foo { color: red }", { red: "blue" })).toEqual(
+    ".foo { color: blue }"
+  );
+});
+
+test("should change media queries", () => {
+  expect(
+    replace("@media small { .foo { color: red } }", {
+      small: "(max-width: 599px)"
     })
-}
-
-describe('replace-symbols', () => {
-  it('should return empty CSS unchanged', () => {
-    return run('', {}, '')
-  })
-
-  it('should not change unless there are translations', () => {
-    return run('.foo { color: red }', {}, '.foo { color: red }')
-  })
-
-  it('should not change class names', () => {
-    return run('.foo { color: red }', { foo: 'bar' }, '.foo { color: red }')
-  })
-
-  it('should not change property names', () => {
-    return run(
-      '.foo { color: red }',
-      { color: 'background' },
-      '.foo { color: red }'
-    )
-  })
-
-  it('should change declaration values', () => {
-    return run('.foo { color: red }', { red: 'blue' }, '.foo { color: blue }')
-  })
-
-  it('should change symbols within declaration values', () => {
-    return run(
-      '.foo { box-shadow: 0 0 0 4px red }',
-      { red: 'blue' },
-      '.foo { box-shadow: 0 0 0 4px blue }'
-    )
-  })
-
-  it('should change multiple symbols within declaration values', () => {
-    return run(
-      '.foo { box-shadow: top left blur spread color }',
-      { top: '1px', left: '2px', blur: '3px', spread: '4px', color: 'red' },
-      '.foo { box-shadow: 1px 2px 3px 4px red }'
-    )
-  })
-
-  it('should change complex symbols, if you feel like trolling yourself', () => {
-    return run(
-      '.foo { box-shadow: 1px 0.5em 3px $sass-a #f00 }',
-      {
-        '1px': '1rem',
-        '0.5em': '10px',
-        '3px': '$sass-b',
-        '$sass-a': '4px',
-        '#f00': 'green'
-      },
-      '.foo { box-shadow: 1rem 10px $sass-b 4px green }'
-    )
-  })
-
-  it('should be able to rewrite variables', () => {
-    return run(
-      '.foo { color: var(--red) }',
-      { '--red': '--blue' },
-      '.foo { color: var(--blue) }'
-    )
-  })
-
-  it('should not replace half a variable', () => {
-    return run(
-      '.foo { color: colors.red; background: red.blue; }',
-      { red: 'green', blue: 'white' },
-      '.foo { color: colors.red; background: red.blue; }'
-    )
-  })
-
-  it('should not replace a replacement', () => {
-    return run(
-      '.foo { background: blue; color: red }',
-      { red: 'blue', blue: 'green' },
-      '.foo { background: green; color: blue }'
-    )
-  })
-
-  it('should not get trolled by me', () => {
-    return run(
-      '.foo { color: white }',
-      { white: 'lightblue', blue: 'green' },
-      '.foo { color: lightblue }'
-    )
-    return run(
-      '.foo { color: white }',
-      { white: 'light blue', blue: 'green' },
-      '.foo { color: light blue }'
-    )
-  })
-
-  it('should change media queries', () => {
-    return run(
-      '@media small { .foo { color: red } }',
-      { small: '(max-width: 599px)' },
-      '@media (max-width: 599px) { .foo { color: red } }'
-    )
-  })
-})
+  ).toEqual("@media (max-width: 599px) { .foo { color: red } }");
+});

test/replaceValueSymbols.test.js

@@ -0,0 +1,58 @@
+/* eslint-env jest */
+import { replaceValueSymbols as replace } from "../src";
+
+test("not change empty css", () => {
+  expect(replace("", {})).toEqual("");
+});
+
+test("not change unless there are translations", () => {
+  expect(replace("red", {})).toEqual("red");
+});
+
+test("change symbols within values", () => {
+  expect(replace("0 0 0 4px red", { red: "blue" })).toEqual("0 0 0 4px blue");
+});
+
+test("change multiple symbols within values", () => {
+  expect(
+    replace("top left blur spread color", {
+      top: "1px",
+      left: "2px",
+      blur: "3px",
+      spread: "4px",
+      color: "red"
+    })
+  ).toEqual("1px 2px 3px 4px red");
+});
+
+test("change complex symbols, if you feel like trolling yourself", () => {
+  expect(
+    replace("1px 0.5em 3px $sass-a #f00", {
+      "1px": "1rem",
+      "0.5em": "10px",
+      "3px": "$sass-b",
+      "$sass-a": "4px",
+      "#f00": "green"
+    })
+  ).toEqual("1rem 10px $sass-b 4px green");
+});
+
+test("rewrite custom properties", () => {
+  expect(replace("var(--red)", { "--red": "--blue" })).toEqual("var(--blue)");
+});
+
+test("not replace half a variable", () => {
+  expect(
+    replace("colors.red red.blue", {
+      red: "green",
+      blue: "white",
+      colors: "weights"
+    })
+  ).toEqual("colors.red red.blue");
+});
+
+test("not replace a replacement", () => {
+  expect(replace("blue red", { red: "blue", blue: "green" })).toEqual(
+    "green blue"
+  );
+});