2023-12-31 03:08:05 +00:00
|
|
|
let
|
|
|
|
style = import ../nixite/style.nix;
|
|
|
|
html = import ../nixite/html.nix;
|
|
|
|
it = import ./it.nix;
|
|
|
|
|
2023-12-31 21:33:42 +00:00
|
|
|
p = style.styled "generic" "p" {
|
|
|
|
foo = "bar";
|
|
|
|
forgetme = "nothing";
|
|
|
|
};
|
|
|
|
|
|
|
|
my = (style.styled "p" "p" { style = { some-style = "some value"; }; })
|
|
|
|
(style.styled "classless" "div" { class = [ ]; })
|
|
|
|
(style.styled "quote" p.generic {
|
|
|
|
baz = "baz";
|
|
|
|
forgetme = "forgotten";
|
|
|
|
}) (style.styled "div" "div" {
|
|
|
|
class = [ "something" ];
|
|
|
|
style = { this = "that"; };
|
|
|
|
}) (style.styled "s" "div" {
|
|
|
|
id = "s";
|
|
|
|
class = [ "something" ];
|
|
|
|
style = { s = "yes"; };
|
|
|
|
}) (style.styled "foobar" "div" {
|
|
|
|
class = [ "foo" "bar" ];
|
|
|
|
style = { something = "something"; };
|
|
|
|
}) (style.style "body" { foo = "bar"; }) (style.styled "list" "ul" {
|
2023-12-31 03:41:46 +00:00
|
|
|
__child = child:
|
2023-12-31 21:33:42 +00:00
|
|
|
assert builtins.isList child;
|
|
|
|
(map (html.tag "li" { }) child);
|
2023-12-31 17:51:21 +00:00
|
|
|
});
|
2023-12-31 03:08:05 +00:00
|
|
|
in [
|
2023-12-31 21:33:42 +00:00
|
|
|
(it "extends existing components" {
|
|
|
|
expected = html.tag "p" {
|
|
|
|
forgetme = "forgotten";
|
|
|
|
baz = "baz";
|
|
|
|
foo = "bar";
|
|
|
|
class = [ "generic" "quote" ];
|
|
|
|
} "yes";
|
|
|
|
actual = my.quote { } "yes";
|
|
|
|
asString = true;
|
|
|
|
})
|
2023-12-31 03:08:41 +00:00
|
|
|
(it "makes a p component" {
|
2023-12-31 21:33:42 +00:00
|
|
|
expected = html.tag "p" { class = [ "p" ]; } "yes";
|
|
|
|
actual = my.p { } "yes";
|
|
|
|
asString = true;
|
|
|
|
})
|
|
|
|
(it "makes a component with no class" {
|
|
|
|
expected = html.tag "div" { class = [ ]; } "yes";
|
|
|
|
actual = my.classless { } "yes";
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 03:08:41 +00:00
|
|
|
})
|
2023-12-31 04:27:09 +00:00
|
|
|
(it "does not error without attrs" {
|
2023-12-31 21:33:42 +00:00
|
|
|
expected = html.tag "p" { class = [ "p" ]; } "yes";
|
2023-12-31 04:27:09 +00:00
|
|
|
actual = my.p "yes";
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 04:27:09 +00:00
|
|
|
})
|
2023-12-31 03:08:41 +00:00
|
|
|
(it "makes a component" {
|
2023-12-31 21:33:42 +00:00
|
|
|
expected = html.tag "div" { class = [ "div" "something" ]; } "foobar";
|
|
|
|
actual = my.div { } "foobar";
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 03:08:41 +00:00
|
|
|
})
|
|
|
|
(it "makes special components" {
|
|
|
|
expected = html.tag "div" {
|
|
|
|
id = "s";
|
2023-12-31 21:33:42 +00:00
|
|
|
class = [ "s" "something" ];
|
2023-12-31 03:08:41 +00:00
|
|
|
} "foobar";
|
2023-12-31 21:33:42 +00:00
|
|
|
actual = my.s { } "foobar";
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 03:08:41 +00:00
|
|
|
})
|
|
|
|
(it "works on many classes" {
|
2023-12-31 21:33:42 +00:00
|
|
|
expected = html.tag "div" { class = [ "foobar" "foo" "bar" ]; } "foobar";
|
|
|
|
actual = my.foobar { } "foobar";
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 03:08:41 +00:00
|
|
|
})
|
2023-12-31 03:41:46 +00:00
|
|
|
(it "does custom behavour" {
|
2023-12-31 21:33:42 +00:00
|
|
|
expected = html.tag "ul" {
|
|
|
|
__ = "";
|
|
|
|
class = [ "list" ];
|
|
|
|
} [ (html.tag "li" { } "1") (html.tag "li" { } "2") ];
|
|
|
|
actual = my.list { } [ "1" "2" ];
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 03:41:46 +00:00
|
|
|
})
|
2023-12-31 03:08:41 +00:00
|
|
|
(it "combines attrs" {
|
|
|
|
expected = html.tag "div" {
|
|
|
|
id = "foo";
|
2023-12-31 21:33:42 +00:00
|
|
|
class = [ "div" "something" ];
|
2023-12-31 03:08:41 +00:00
|
|
|
} "foobar";
|
2023-12-31 21:33:42 +00:00
|
|
|
actual = my.div { id = "foo"; } "foobar";
|
2023-12-31 17:51:21 +00:00
|
|
|
asString = true;
|
2023-12-31 03:08:41 +00:00
|
|
|
})
|
|
|
|
(it "makes a style" {
|
|
|
|
expected = ''
|
2023-12-31 06:59:23 +00:00
|
|
|
p.p {
|
2023-12-31 03:08:41 +00:00
|
|
|
some-style: some value;
|
|
|
|
}
|
|
|
|
div.something {
|
|
|
|
this: that;
|
|
|
|
}
|
|
|
|
div.something#s {
|
|
|
|
s: yes;
|
|
|
|
}
|
|
|
|
div.foo.bar {
|
|
|
|
something: something;
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
foo: bar;
|
|
|
|
}
|
|
|
|
'';
|
|
|
|
actual = my.style;
|
|
|
|
})
|
|
|
|
]
|