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

  my = (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" (let
    my = (style.styled "para" "p" { style = { some-style = "some value"; }; });
  in {
    expected = html.tag "p" { class = [ "para" ]; } "yes";
    actual = my.para { } "yes";
    asString = true;
  }))

  (it "extends existing components" (let
    my = (style.styled "generic" "p" {
      foo = "bar";
      forgetme = "nothing";
    });
    this = (style.styled "quote" my.generic {
      baz = "baz";
      forgetme = "forgotten";
    });
  in {
    expected = html.tag "p" {
      forgetme = "forgotten";
      baz = "baz";
      foo = "bar";
      class = [ "generic" "quote" ];
    } "yes";
    actual = this.quote { } "yes";
    asString = true;
  }))

  (it "makes a component with no class"
    (let my = (style.styled "classless" "div" { class = [ ]; });
    in {
      expected = html.tag "div" { class = [ ]; } "yes";
      actual = my.classless { } "yes";
      asString = true;
    }))
  (it "does not error without attrs" {
    expected = html.tag "div" { class = [ "div" "something" ]; } "yes";
    actual = my.div "yes";
    asString = true;
  })
  (it "makes a component" {
    expected = html.tag "div" { class = [ "div" "something" ]; } "foobar";
    actual = my.div { } "foobar";
    asString = true;
  })
  (it "makes special components" {
    expected = html.tag "div" {
      id = "s";
      class = [ "s" "something" ];
    } "foobar";
    actual = my.s { } "foobar";
    asString = true;
  })
  (it "works on many classes" {
    expected = html.tag "div" { class = [ "foobar" "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 = [ "div" "something" ];
    } "foobar";
    actual = my.div { id = "foo"; } "foobar";
    asString = true;
  })
  (it "makes a style"
    (let my = (style.styled "para" "p" { style = { foo = "bar"; }; });
    in {
      expected = { "p.para" = { foo = "bar"; }; };
      actual = removeAttrs my.style [ "__toString" ];
    }))

  (it "retains tag"
    (let p = (style.styled "para" "p" { style = { foo = "bar"; }; });
    in {
      expected = "p";
      actual = p.para.tag;
    }))

  (it "retains attrs"
    (let p = (style.styled "para" "p" { style = { foo = "bar"; }; });
    in {
      expected = { foo = "bar"; };
      actual = p.para.attrs.style;
    }))

  (it "retains class" (let p = (style.styled "para" "p" { });
  in {
    expected = [ "para" ];
    actual = p.para.attrs.class;
  }))

  (it "merges styles" (let
    p = (style.styled "para" "p" { style = { foo = "bar"; }; });
    d = (style.styled "para2" p.para { style = { baz = "bar"; }; });
    my = p d;
  in {
    expected = {
      "p.para" = { foo = "bar"; };
      "p.para2.para" = {
        foo = "bar";
        baz = "bar";
      };
    };
    actual = removeAttrs my.style [ "__toString" ];
  }))

]