Skip to content

Commit

Permalink
Add custom option for the HtmlElement type (#106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Freymaurer
Freymaurer authored Apr 14, 2022
1 parent 9102720 commit 75d0fde
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/Fornax.Core/Model.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -973,6 +973,8 @@ type CSSProperties =
| Text of props: HtmlProperties list * children: HtmlElement list
| Tspan of props: HtmlProperties list * children: HtmlElement list
| String of string
// https://github.com/ionide/Fornax/issues/104
| Custom of tagName: string * props: HtmlProperties list * children: HtmlElement list

static member ToString tag =
let rec format tag (props : HtmlProperties list) (children : HtmlElement list) level =
Expand Down Expand Up @@ -1129,6 +1131,7 @@ type CSSProperties =
| Text (props, children) -> format "text" props children level
| Tspan (props, children) -> format "tspan" props children level
| String str -> str
| Custom (name, props, children) -> format name props children level

helper 1 tag

Expand Down Expand Up @@ -1266,6 +1269,7 @@ type CSSProperties =
let tspan (props : HtmlProperties list) (children: HtmlElement list) = HtmlElement.Tspan(props,children)
let string str = HtmlElement.String str
let (!!) str = HtmlElement.String str
let custom (tagName : string) (props : HtmlProperties list) (children : HtmlElement list) = HtmlElement.Custom(tagName,props,children)



Expand Down
48 changes: 48 additions & 0 deletions test/Fornax.Core.UnitTests/Tests.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,36 +42,72 @@ let modelTests =
"Html element with no properties and no children"
|> Expect.equal actual expected

testCase "Custom Html element - empty" <| fun _ ->
let actual = Html.custom "test" [] [] |> HtmlElement.ToString
let expected = "<test></test>"
"Custom Html element with no properties and no children"
|> Expect.equal actual expected

testCase "Html element - one property" <| fun _ ->
let actual = Html.a [ Href "index.html" ] [] |> HtmlElement.ToString
let expected = "<a href=\"index.html\"></a>"
"Html element with one property and no children"
|> Expect.equal actual expected

testCase "Custom Html element - one property" <| fun _ ->
let actual = Html.custom "test" [ Href "index.html" ] [] |> HtmlElement.ToString
let expected = "<test href=\"index.html\"></test>"
"Custom Html element with one property and no children"
|> Expect.equal actual expected

testCase "Html element - multiple properties" <| fun _ ->
let actual = Html.a [ Href "index.html"; Hidden true ] [] |> HtmlElement.ToString
let expected = "<a href=\"index.html\" hidden=\"true\"></a>"
"Html element with multiple properties and no children"
|> Expect.equal actual expected

testCase "Custom Html element - multiple property" <| fun _ ->
let actual = Html.custom "test" [ Href "index.html"; Hidden true ] [] |> HtmlElement.ToString
let expected = "<test href=\"index.html\" hidden=\"true\"></test>"
"Custom Html element with multiple properties and no children"
|> Expect.equal actual expected

testCase "Html element - one child" <| fun _ ->
let actual = Html.a [] [ Html.span [] [] ] |> HtmlElement.ToString
let expected = "<a>\n <span></span>\n</a>"
"Html element with no properties and one child"
|> Expect.equal actual expected

testCase "Custom Html element - one child" <| fun _ ->
let actual = Html.custom "test" [] [ Html.span [] [] ] |> HtmlElement.ToString
let expected = "<test>\n <span></span>\n</test>"
"Custom Html element with no properties and one child"
|> Expect.equal actual expected

testCase "Html element - multiple children" <| fun _ ->
let actual = Html.a [] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
let expected = "<a>\n <span></span>\n <div></div>\n</a>"
"Html element with no properties and multiple children"
|> Expect.equal actual expected

testCase "Custom Html element - multiple children" <| fun _ ->
let actual = Html.custom "test" [] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
let expected = "<test>\n <span></span>\n <div></div>\n</test>"
"Custom Html element with no properties and multiple children"
|> Expect.equal actual expected

testCase "Html element - multiple properites and children" <| fun _ ->
let actual = Html.a [ Href "index.html"; Hidden true] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
let expected = "<a href=\"index.html\" hidden=\"true\">\n <span></span>\n <div></div>\n</a>"
"Html element with multiple properties and multiple children"
|> Expect.equal actual expected

testCase "Custom Html element - multiple properites and children" <| fun _ ->
let actual = Html.custom "test" [ Href "index.html"; Hidden true] [ Html.span [] []; Html.div [] [] ] |> HtmlElement.ToString
let expected = "<test href=\"index.html\" hidden=\"true\">\n <span></span>\n <div></div>\n</test>"
"Custom Html element with multiple properties and multiple children"
|> Expect.equal actual expected

testCase "Html element - void element as child" <| fun _ ->
let actual = Html.div [ ] [ Html.br [ ] ] |> HtmlElement.ToString
let expected = "<div>\n <br/>\n</div>"
Expand All @@ -84,6 +120,18 @@ let modelTests =
"Html element with one void element as child"
|> Expect.equal actual expected

testCase "Custom Html element - mutliple properties and children (void and normal element)" <| fun _ ->
let actual = Html.custom "test" [ HtmlProperties.Style [ Display "block" ] ] [ Html.br [ ]; Html.p [ ] [ ]; Html.img [ Src "https://dummyimage.com/128x128/" ] ] |> HtmlElement.ToString
let expected = "<test style=\"display: block;\">\n <br/>\n <p></p>\n <img src=\"https://dummyimage.com/128x128/\"/>\n</test>"
"Custom Html element with one void element as child"
|> Expect.equal actual expected

testCase "Custom Html element - as child with property and child" <| fun _ ->
let actual = Html.div [] [ Html.custom "test" [ HtmlProperties.Style [ Display "block" ] ] [ Html.span [] [] ] ] |> HtmlElement.ToString
let expected = "<div>\n <test style=\"display: block;\">\n <span></span>\n </test>\n</div>"
"Custom Html element with one void element as child"
|> Expect.equal actual expected

testCase "Html void element - empty" <| fun _ ->
let actual = Html.br [ ] |> HtmlElement.ToString
let expected = "<br/>"
Expand Down

0 comments on commit 75d0fde

Please sign in to comment.