Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom option for the HtmlElement type #106

Merged
merged 1 commit into from
Apr 14, 2022
Merged

Add custom option for the HtmlElement type #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/Fornax.Core/Model.fs
View file
Open in desktop
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
Open in desktop
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