nixite/testing/style.test.nix

let
  style = import ../nixite/style.nix;
  html = import ../nixite/html.nix;
  it = import ./it.nix;

  my =
    (style.styled "p" "p" {style = {
      some-style = "some value";
    };})
    (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" {
      __child = child:
        assert builtins.isList child; (map (html.tag "li" {}) child);
    });
in [
  (it "makes a p component" {
    expected = html.tag "p" {class = ["p"];} "yes";
    actual = my.p {} "yes";
    asString = true;
  })
  (it "does not error without attrs" {
    expected = html.tag "p" {class = ["p"];} "yes";
    actual = my.p "yes";
    asString = true;
  })
  (it "makes a component" {
    expected = html.tag "div" {class = ["something"];} "foobar";
    actual = my.div {} "foobar";
    asString = true;
  })
  (it "makes special components" {
    expected = html.tag "div" {
      id = "s";
      class = ["something"];
    } "foobar";
    actual = my.s {} "foobar";
    asString = true;
  })
  (it "works on many classes" {
    expected = html.tag "div" {class = ["foo" "bar"];} "foobar";
    actual = my.foobar {} "foobar";
    asString = true;
  })
  (it "does custom behavour" {
    expected = (html.tag "ul" {
        __ = "";
        class = ["list"];
      } [
        (html.tag "li" {} "1")
        (html.tag "li" {} "2")
      ]);
    actual = (my.list {} ["1" "2"]);
    asString = true;
  })
  (it "combines attrs" {
    expected = html.tag "div" {
      id = "foo";
      class = ["something"];
    } "foobar";
    actual = my.div {id = "foo";} "foobar";
    asString = true;
  })
  (it "makes a style" {
    expected = ''
      p.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;
  })
]