From 018f25bac373f28205aaa0942c02cc0252d45fde Mon Sep 17 00:00:00 2001 From: Kevin F Date: Sat, 2 Apr 2022 13:11:30 +0200 Subject: [PATCH] Add custom option for the HtmlElement type --- src/Fornax.Core/Model.fs | 4 +++ test/Fornax.Core.UnitTests/Tests.fs | 48 +++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/src/Fornax.Core/Model.fs b/src/Fornax.Core/Model.fs index bf871a4..df7b530 100644 --- a/src/Fornax.Core/Model.fs +++ b/src/Fornax.Core/Model.fs @@ -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 = @@ -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 @@ -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) diff --git a/test/Fornax.Core.UnitTests/Tests.fs b/test/Fornax.Core.UnitTests/Tests.fs index c612967..108c529 100644 --- a/test/Fornax.Core.UnitTests/Tests.fs +++ b/test/Fornax.Core.UnitTests/Tests.fs @@ -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 = "" + "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 = "" "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 = "" + "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 = "" "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 = "" + "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 = "\n \n" "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 = "\n \n" + "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 = "\n \n
\n" "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 = "\n \n
\n" + "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 = "" "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 = "" + "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 = "
\n
\n
" @@ -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 = "\n
\n

\n \n" + "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 = "
\n \n \n \n
" + "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 = "
"