styled components

testing/html.test.nix

@@ -13,6 +13,11 @@ in
       };
     })
 
+    (it "concatinates classes" {
+      actual = toString (tag "p" {class = ["class1" "class2"];} "Hello");
+      expected = ''<p class="class1 class2">Hello</p>'';
+    })
+
     (it "applies style" (let
       page = tag "html" {} [(tag "head" {} ["foo"])];
     in {

testing/style.test.nix

@@ -0,0 +1,64 @@
+let
+  style = import ../nixite/style.nix;
+  html = import ../nixite/html.nix;
+  it = import ./it.nix;
+
+  my =
+    (style.styled "p" "p" {} {
+      some-style = "some value";
+    })
+    (style.styled "div" "div" { class = ["something"]; } {
+      this = "that";
+    })
+    (style.styled "s" "div" { id = "s"; class = ["something"]; } {
+      s = "yes";
+    })
+    (style.styled "foobar" "div" { class = ["foo" "bar"]; } {
+      something = "something";
+    })
+    (style.style "body" {
+      foo = "bar";
+    });
+
+in [
+    (it "makes a p component" ({
+      expected = (html.tag "p" {} "yes");
+      actual = my.p {} "yes";
+    }))
+    (it "makes a component" ({
+      expected = (html.tag "div" { class = ["something"]; } "foobar");
+      actual = my.div {} "foobar";
+    }))
+    (it "makes special components" ({
+      expected = (html.tag "div" { id = "s"; class = ["something"]; } "foobar");
+      actual = my.s {} "foobar";
+    }))
+    (it "works on many classes" ({
+      expected = (html.tag "div" { class = ["foo" "bar"]; } "foobar");
+      actual = my.foobar {} "foobar";
+    }))
+    (it "combines attrs" ({
+      expected = (html.tag "div" { id = "foo"; class = ["something"]; } "foobar");
+      actual = my.div { id = "foo"; } "foobar";
+    }))
+    (it "makes a style" ({
+      expected = ''
+        p {
+          some-style: some value;
+        }
+        div.something {
+          this: that;
+        }
+        div.something#s {
+          s: yes;
+        }
+        div.foo.bar {
+          something: something;
+        }
+        body {
+          foo: bar;
+        }
+      '';
+      actual = my.style;
+    }))
+  ]