test(hiccup-css): add/update tests

thi-ng · Mar 4, 2018 · cbb9b7f · cbb9b7f
1 parent a623117
commit cbb9b7f
Showing 1 changed file with 65 additions and 2 deletions.
diff --git a/packages/hiccup-css/test/index.ts b/packages/hiccup-css/test/index.ts
@@ -1,11 +1,12 @@
 import * as assert from "assert";
 
-import { css, PRETTY } from "../src";
+import { css, PRETTY, at_import, at_keyframes, at_media } from "../src";
 
 const rules = {
     a: { color: "red" },
     b: { border: 0 },
-    f: { foo: (rules) => rules.bar, bar: 1 }
+    c: { font: [["14px", "Inconsolata"], "monospace"] },
+    f: { foo: (rules) => rules.bar, bar: 1 },
 };
 
 describe("hiccup-css", () => {
@@ -14,6 +15,8 @@ describe("hiccup-css", () => {
         assert.equal(css("a"), undefined);
         assert.equal(css({}), "");
         assert.equal(css(rules.a), "color:red;");
+        assert.equal(css(rules.b), "border:0;");
+        assert.equal(css(rules.c), "font:14px Inconsolata,monospace;");
         assert.equal(css(rules.f), "foo:1;bar:1;");
     });
 
@@ -65,4 +68,64 @@ describe("hiccup-css", () => {
             "#id h1 {\n    color: red;\n    border: 0;\n}\n\n#id h2 div, #id h3 div {\n    border: 0;\n}\n\n#id h2[attr] span, #id h3[attr] span {\n    color: red;\n}\n"
         );
     });
+
+    it("@import", () => {
+        assert.equal(
+            css(at_import("foo.css")),
+            "@import url(foo.css);"
+        );
+        assert.equal(
+            css([at_import("foo.css"), /* will be ignored */["div", {}]]),
+            "@import url(foo.css);"
+        );
+        assert.equal(
+            css([[at_import("foo.css")], ["div", {}]]),
+            "@import url(foo.css);div{}"
+        );
+        assert.equal(
+            css(at_import("foo.css", "screen", "print")),
+            "@import url(foo.css) screen,print;"
+        );
+    });
+
+    it("@keyframes", () => {
+        assert.equal(
+            css(at_keyframes("fadein", { 0: { opacity: 0 }, 100: { opacity: 1 } })),
+            "@keyframes fadein{0%{opacity:0;}100%{opacity:1;}}"
+        );
+        assert.equal(
+            css(at_keyframes("fadein", { opacity: 0 }, { opacity: 1 })),
+            "@keyframes fadein{0%{opacity:0;}100%{opacity:1;}}"
+        );
+    });
+
+    it("@media", () => {
+        assert.equal(
+            css(at_media({ screen: true }, [])),
+            "@media screen{}"
+        );
+        assert.equal(
+            css(at_media({ screen: false }, [])),
+            "@media not screen{}"
+        );
+        assert.equal(
+            css(at_media({ screen: false, print: true }, [])),
+            "@media not screen and print{}"
+        );
+        assert.equal(
+            css(at_media({ screen: "only" }, [])),
+            "@media only screen{}"
+        );
+        assert.equal(
+            css(at_media({ "min-width": "10rem" }, ["div", [".foo", rules.a]])),
+            "@media (min-width:10rem){div .foo{color:red;}}"
+        );
+        assert.equal(
+            css(at_media({ screen: true, print: true }, [
+                ["div", [".foo", rules.a]],
+                [at_media({ print: true, "max-width": "20rem" }, ["div", rules.b])]
+            ])),
+            "@media screen and print{div .foo{color:red;}@media print and (max-width:20rem){div{border:0;}}}"
+        );
+    });
 });