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;
    }))
  ]