parent
c7cee2996b
commit
2379d2d2c1
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,2 +1,7 @@
|
||||
**/bin
|
||||
**/obj
|
||||
|
||||
.fake
|
||||
.ionide
|
||||
.idea
|
||||
*.user
|
||||
|
66
README.md
66
README.md
@ -1,2 +1,66 @@
|
||||
# Giraffe.Htmx
|
||||
Extensions for Giraffe to support development with Htmx
|
||||
|
||||
[Giraffe](https://giraffe.wiki) is a library that sits atop ASP.NET Core, and enables developers to create applications in a functional style (vs. the C# / object-oriented style of the base library). The Giraffe View Engine enables production of HTML views in a strongly-typed and fully-integrated-with-source fashion.
|
||||
|
||||
[htmx](https://htmx.org) is a library that embraces the idea of HTML as a programming language, where any element can fire off a request, and portions of the page can be swapped out dynamically. It does all these with a tiny, dependency-free JavaScript library.
|
||||
|
||||
htmx uses attributes and HTTP headers to attain its interactivity; the libraries here contain extensions to both Giraffe and Giraffe View Engine to enable strongly-typed development of htmx applications.
|
||||
|
||||
## Installation
|
||||
|
||||
`Giraffe.Htmx` provides extensions that facilitate using htmx on the server side, primarily reading and setting headers. `Giraffe.ViewEngine.Htmx` provides attributes and helpers to produce views that utilize htmx. Both can be installed from NuGet via standard methods.
|
||||
|
||||
TODO: NuGet links
|
||||
|
||||
## Server-Side (`Giraffe.Htmx`)
|
||||
|
||||
In addition to the regular HTTP request payloads, htmx sets [one or more headers](https://htmx.org/docs/#request_headers) along with the request. Once `Giraffe.Htmx` is opened, these are available as properties on `HttpContext.Request.Headers`. These consist of the header name, translated to a .NET name (ex. `HX-Current-URL` becomes `HxCurrentUrl`), and a strongly-typed property based on the expected value of that header. Additionally, they are all exposed as `Option`s, as they may or may not be present for any given request.
|
||||
|
||||
A server may want to respond to a request that originated from htmx differently than a regular request. One way htmx can provide the same feel as a Single Page Application (SPA) is by swapping out the `body` content (or an element within it) instead of reloading the entire page. In this case, the developer can provide a partial layout to be used for these responses, while returning the full page for regular requests. The `IsHtmx` property makes this easy...
|
||||
|
||||
```fsharp
|
||||
// "partial" and "full" are handlers that return the contents;
|
||||
// "view" can be whatever your view engine needs for the body of the page
|
||||
let result view : HttpHandler =
|
||||
fun next ctx ->
|
||||
match ctx.Request.IsHtmx && not ctx.Request.IsHtmxRefresh with
|
||||
| true -> partial view
|
||||
| false -> full view
|
||||
```
|
||||
|
||||
htmx also utilizes [response headers](https://htmx.org/docs/#response_headers) to affect client-side behavior. For each of these, this library provides `HttpHandler`s that can be chained along with the response. As an example, if the server returns a redirect response (301, 302, 303, 307), the `XMLHttpRequest` handler on the client will follow the redirection before htmx can do anything with it. To redirect to a new page, you would return an OK (200) response with an `HX-Redirect` header set in the response.
|
||||
|
||||
```fsharp
|
||||
let theHandler : HttpHandler =
|
||||
fun next ctx ->
|
||||
// some interesting stuff
|
||||
withHxRedirect "/the-new-url" >=> Successful.OK
|
||||
```
|
||||
|
||||
Of note is that the `HX-Trigger` headers can take either one or more events. For a single event with no parameters, use `withHxTrigger`; for a single event with parameters, or multiple events, use `withHxTriggerMany`. Both these have `AfterSettle` and `AfterSwap` versions as well.
|
||||
|
||||
## htmx with Giraffe View Engine (`Giraffe.ViewEngine.Htmx`)
|
||||
|
||||
As htmx uses [attributes](https://htmx.org/docs/#attributes) to extend HTML, the primary part of this library defines attributes that can be used within Giraffe views. Simply open `Giraffe.ViewEngine.Htmx`, and these attributes, along with support modules, will be visible.
|
||||
|
||||
As an example, creating a `div` that loads data once the HTML is rendered:
|
||||
|
||||
```fsharp
|
||||
let autoload =
|
||||
div [ _hxGet "/lazy-load-data"; _hxTrigger "load" ] [ str "Loading..." ]
|
||||
```
|
||||
|
||||
_(As `hx-boost="true"` is the usual desire for boosting, `_hxBoost` implies true. To disable it for an element, use `_hxNoBoost` instead.)_
|
||||
|
||||
Some attributes have known values, such as `hx-trigger` and `hx-swap`; for these, there are modules with those values. For example, `HxTrigger.Load` could be used in the example above, to ensure that the known values are spelled correctly. `hx-trigger` can also take modifiers, such as an action that only responds to `Ctrl`+click. The `HxTrigger` module has a `Filter` submodule to assist with defining these actions.
|
||||
|
||||
```fsharp
|
||||
let shiftClick =
|
||||
p [ _hxGet = "/something"; _hxTrigger (HxTrigger.Filter.Shift HxTrigger.Click) ] [
|
||||
str "hold down Shift and click me"
|
||||
]
|
||||
```
|
||||
|
||||
## Feedback / Help
|
||||
|
||||
The author hangs out in the #htmx-general channel of the [htmx Discord server](https://htmx.org/discord) and the #web channel of the [F# Software Foundation's Slack server](https://fsharp.org/guides/slack/).
|
||||
|
34
src/Htmx.Tests/Giraffe.Htmx.Tests.fsproj
Normal file
34
src/Htmx.Tests/Giraffe.Htmx.Tests.fsproj
Normal file
@ -0,0 +1,34 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net6.0</TargetFramework>
|
||||
|
||||
<IsPackable>false</IsPackable>
|
||||
<GenerateProgramFile>false</GenerateProgramFile>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Compile Include="Tests.fs" />
|
||||
<Compile Include="Program.fs" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Giraffe" Version="5.0.0" />
|
||||
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.11.0" />
|
||||
<PackageReference Include="NSubstitute" Version="4.2.2" />
|
||||
<PackageReference Include="xunit" Version="2.4.1" />
|
||||
<PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
|
||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||
<PrivateAssets>all</PrivateAssets>
|
||||
</PackageReference>
|
||||
<PackageReference Include="coverlet.collector" Version="3.1.0">
|
||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||
<PrivateAssets>all</PrivateAssets>
|
||||
</PackageReference>
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\Htmx\Giraffe.Htmx.fsproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
1
src/Htmx.Tests/Program.fs
Normal file
1
src/Htmx.Tests/Program.fs
Normal file
@ -0,0 +1 @@
|
||||
module Program = let [<EntryPoint>] main _ = 0
|
318
src/Htmx.Tests/Tests.fs
Normal file
318
src/Htmx.Tests/Tests.fs
Normal file
@ -0,0 +1,318 @@
|
||||
module Giraffe.Htmx.Tests
|
||||
|
||||
open System
|
||||
open Giraffe.Htmx
|
||||
open Microsoft.AspNetCore.Http
|
||||
open NSubstitute
|
||||
open Xunit
|
||||
|
||||
/// Tests for the IHeaderDictionary extension properties
|
||||
module IHeaderDictionaryExtensions =
|
||||
|
||||
[<Fact>]
|
||||
let ``HxBoosted succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxBoosted |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxBoosted succeeds when the header is present and true`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Boosted", "true")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxBoosted |> Assert.True
|
||||
Option.get ctx.Request.Headers.HxBoosted |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxBoosted succeeds when the header is present and false`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Boosted", "false")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxBoosted |> Assert.True
|
||||
Option.get ctx.Request.Headers.HxBoosted |> Assert.False
|
||||
|
||||
[<Fact>]
|
||||
let ``HxCurrentUrl succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxCurrentUrl |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxCurrentUrl succeeds when the header is present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Current-URL", "http://localhost/test.htm")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxCurrentUrl |> Assert.True
|
||||
Assert.Equal (Uri "http://localhost/test.htm", Option.get ctx.Request.Headers.HxCurrentUrl)
|
||||
|
||||
[<Fact>]
|
||||
let ``HxHistoryRestoreRequest succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxHistoryRestoreRequest |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxHistoryRestoreRequest succeeds when the header is present and true`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-History-Restore-Request", "true")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxHistoryRestoreRequest |> Assert.True
|
||||
Option.get ctx.Request.Headers.HxHistoryRestoreRequest |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxHistoryRestoreRequest succeeds when the header is present and false`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-History-Restore-Request", "false")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxHistoryRestoreRequest |> Assert.True
|
||||
Option.get ctx.Request.Headers.HxHistoryRestoreRequest |> Assert.False
|
||||
|
||||
[<Fact>]
|
||||
let ``HxPrompt succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxPrompt |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxPrompt succeeds when the header is present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Prompt", "of course")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxPrompt |> Assert.True
|
||||
Assert.Equal("of course", Option.get ctx.Request.Headers.HxPrompt)
|
||||
|
||||
[<Fact>]
|
||||
let ``HxRequest succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxRequest |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxRequest succeeds when the header is present and true`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Request", "true")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxRequest |> Assert.True
|
||||
Option.get ctx.Request.Headers.HxRequest |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxRequest succeeds when the header is present and false`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Request", "false")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxRequest |> Assert.True
|
||||
Option.get ctx.Request.Headers.HxRequest |> Assert.False
|
||||
|
||||
[<Fact>]
|
||||
let ``HxTarget succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxTarget |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxTarget succeeds when the header is present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Target", "#leItem")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxTarget |> Assert.True
|
||||
Assert.Equal("#leItem", Option.get ctx.Request.Headers.HxTarget)
|
||||
|
||||
[<Fact>]
|
||||
let ``HxTrigger succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxTrigger |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxTrigger succeeds when the header is present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Trigger", "#trig")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxTrigger |> Assert.True
|
||||
Assert.Equal("#trig", Option.get ctx.Request.Headers.HxTrigger)
|
||||
|
||||
[<Fact>]
|
||||
let ``HxTriggerName succeeds when the header is not present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Option.isNone ctx.Request.Headers.HxTriggerName |> Assert.True
|
||||
|
||||
[<Fact>]
|
||||
let ``HxTriggerName succeeds when the header is present`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Trigger-Name", "click")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Option.isSome ctx.Request.Headers.HxTriggerName |> Assert.True
|
||||
Assert.Equal("click", Option.get ctx.Request.Headers.HxTriggerName)
|
||||
|
||||
|
||||
/// Tests for the HttpRequest extension properties
|
||||
module HttpRequestExtensions =
|
||||
|
||||
[<Fact>]
|
||||
let ``IsHtmx succeeds when request is not from htmx`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Assert.False ctx.Request.IsHtmx
|
||||
|
||||
[<Fact>]
|
||||
let ``IsHtmx succeeds when request is from htmx`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Request", "true")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Assert.True ctx.Request.IsHtmx
|
||||
|
||||
[<Fact>]
|
||||
let ``IsHtmxRefresh succeeds when request is not from htmx`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
ctx.Request.Headers.ReturnsForAnyArgs (HeaderDictionary ()) |> ignore
|
||||
Assert.False ctx.Request.IsHtmxRefresh
|
||||
|
||||
[<Fact>]
|
||||
let ``IsHtmxRefresh succeeds when request is from htmx, but not a refresh`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Request", "true")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Assert.False ctx.Request.IsHtmxRefresh
|
||||
|
||||
[<Fact>]
|
||||
let ``IsHtmxRefresh succeeds when request is from htmx and is a refresh`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
dic.Add ("HX-Request", "true")
|
||||
dic.Add ("HX-History-Restore-Request", "true")
|
||||
ctx.Request.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
Assert.True ctx.Request.IsHtmxRefresh
|
||||
|
||||
|
||||
/// Tests for the HttpHandler functions provided in the Handlers module
|
||||
module HandlerTests =
|
||||
|
||||
open System.Threading.Tasks
|
||||
|
||||
/// Dummy "next" parameter to get the pipeline to execute/terminate
|
||||
let next (ctx : HttpContext) = Task.FromResult (Some ctx)
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxPush succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxPush "/a-new-url" next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Push")
|
||||
Assert.Equal ("/a-new-url", dic.["HX-Push"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxRedirect succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxRedirect "/somewhere-else" next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Redirect")
|
||||
Assert.Equal ("/somewhere-else", dic.["HX-Redirect"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxRefresh succeeds when set to true`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxRefresh true next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Refresh")
|
||||
Assert.Equal ("true", dic.["HX-Refresh"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxRefresh succeeds when set to false`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxRefresh false next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Refresh")
|
||||
Assert.Equal ("false", dic.["HX-Refresh"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxTrigger succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxTrigger "doSomething" next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Trigger")
|
||||
Assert.Equal ("doSomething", dic.["HX-Trigger"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxTriggerMany succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxTriggerMany [ "blah", "foo"; "bleh", "bar" ] next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Trigger")
|
||||
Assert.Equal ("""{ "blah": "foo", "bleh": "bar" }""", dic.["HX-Trigger"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxTriggerAfterSettle succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxTriggerAfterSettle "byTheWay" next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Trigger-After-Settle")
|
||||
Assert.Equal ("byTheWay", dic.["HX-Trigger-After-Settle"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxTriggerManyAfterSettle succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxTriggerManyAfterSettle [ "oof", "ouch"; "hmm", "uh" ] next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Trigger-After-Settle")
|
||||
Assert.Equal ("""{ "oof": "ouch", "hmm": "uh" }""", dic.["HX-Trigger-After-Settle"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxTriggerAfterSwap succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxTriggerAfterSwap "justASec" next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Trigger-After-Swap")
|
||||
Assert.Equal ("justASec", dic.["HX-Trigger-After-Swap"].[0])
|
||||
}
|
||||
|
||||
[<Fact>]
|
||||
let ``withHxTriggerManyAfterSwap succeeds`` () =
|
||||
let ctx = Substitute.For<HttpContext> ()
|
||||
let dic = HeaderDictionary ()
|
||||
ctx.Response.Headers.ReturnsForAnyArgs dic |> ignore
|
||||
task {
|
||||
let! _ = withHxTriggerManyAfterSwap [ "this", "1"; "that", "2" ] next ctx
|
||||
Assert.True (dic.ContainsKey "HX-Trigger-After-Swap")
|
||||
Assert.Equal ("""{ "this": "1", "that": "2" }""", dic.["HX-Trigger-After-Swap"].[0])
|
||||
}
|
||||
|
@ -0,0 +1,33 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net6.0</TargetFramework>
|
||||
|
||||
<IsPackable>false</IsPackable>
|
||||
<GenerateProgramFile>false</GenerateProgramFile>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Compile Include="Tests.fs" />
|
||||
<Compile Include="Program.fs" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Giraffe.ViewEngine" Version="1.4.0" />
|
||||
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.11.0" />
|
||||
<PackageReference Include="xunit" Version="2.4.1" />
|
||||
<PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
|
||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||
<PrivateAssets>all</PrivateAssets>
|
||||
</PackageReference>
|
||||
<PackageReference Include="coverlet.collector" Version="3.1.0">
|
||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||
<PrivateAssets>all</PrivateAssets>
|
||||
</PackageReference>
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\ViewEngine.Htmx\Giraffe.ViewEngine.Htmx.fsproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
1
src/ViewEngine.Htmx.Tests/Program.fs
Normal file
1
src/ViewEngine.Htmx.Tests/Program.fs
Normal file
@ -0,0 +1 @@
|
||||
module Program = let [<EntryPoint>] main _ = 0
|
245
src/ViewEngine.Htmx.Tests/Tests.fs
Normal file
245
src/ViewEngine.Htmx.Tests/Tests.fs
Normal file
@ -0,0 +1,245 @@
|
||||
module Giraffe.ViewEngine.Htmx.Tests
|
||||
|
||||
open Giraffe.ViewEngine
|
||||
open Xunit
|
||||
|
||||
/// Tests for the HxEncoding module
|
||||
module Encoding =
|
||||
|
||||
[<Fact>]
|
||||
let ``Form is correct`` () =
|
||||
Assert.Equal ("application/x-www-form-urlencoded", HxEncoding.Form)
|
||||
|
||||
[<Fact>]
|
||||
let ``MultipartForm is correct`` () =
|
||||
Assert.Equal ("multipart/form-data", HxEncoding.MultipartForm)
|
||||
|
||||
|
||||
/// Tests for the HxParams module
|
||||
module Params =
|
||||
|
||||
[<Fact>]
|
||||
let ``All is correct`` () =
|
||||
Assert.Equal ("*", HxParams.All)
|
||||
|
||||
[<Fact>]
|
||||
let ``None is correct`` () =
|
||||
Assert.Equal ("none", HxParams.None)
|
||||
|
||||
[<Fact>]
|
||||
let ``With succeeds with empty list`` () =
|
||||
Assert.Equal ("", HxParams.With [])
|
||||
|
||||
[<Fact>]
|
||||
let ``With succeeds with one list item`` () =
|
||||
Assert.Equal ("boo", HxParams.With [ "boo" ])
|
||||
|
||||
[<Fact>]
|
||||
let ``With succeeds with multiple list items`` () =
|
||||
Assert.Equal ("foo,bar,baz", HxParams.With [ "foo"; "bar"; "baz" ])
|
||||
|
||||
[<Fact>]
|
||||
let ``Except succeeds with empty list`` () =
|
||||
Assert.Equal ("not ", HxParams.Except [])
|
||||
|
||||
[<Fact>]
|
||||
let ``Except succeeds with one list item`` () =
|
||||
Assert.Equal ("not that", HxParams.Except [ "that" ])
|
||||
|
||||
[<Fact>]
|
||||
let ``Except succeeds with multiple list items`` () =
|
||||
Assert.Equal ("not blue,green", HxParams.Except [ "blue"; "green" ])
|
||||
|
||||
|
||||
/// Tests for the HxSwap module
|
||||
module Swap =
|
||||
|
||||
[<Fact>]
|
||||
let ``InnerHtml is correct`` () =
|
||||
Assert.Equal ("innerHTML", HxSwap.InnerHtml)
|
||||
|
||||
[<Fact>]
|
||||
let ``OuterHtml is correct`` () =
|
||||
Assert.Equal ("outerHTML", HxSwap.OuterHtml)
|
||||
|
||||
[<Fact>]
|
||||
let ``BeforeBegin is correct`` () =
|
||||
Assert.Equal ("beforebegin", HxSwap.BeforeBegin)
|
||||
|
||||
[<Fact>]
|
||||
let ``BeforeEnd is correct`` () =
|
||||
Assert.Equal ("beforeend", HxSwap.BeforeEnd)
|
||||
|
||||
[<Fact>]
|
||||
let ``AfterBegin is correct`` () =
|
||||
Assert.Equal ("afterbegin", HxSwap.AfterBegin)
|
||||
|
||||
[<Fact>]
|
||||
let ``AfterEnd is correct`` () =
|
||||
Assert.Equal ("afterend", HxSwap.AfterEnd)
|
||||
|
||||
[<Fact>]
|
||||
let ``None is correct`` () =
|
||||
Assert.Equal ("none", HxSwap.None)
|
||||
|
||||
|
||||
/// Tests for the HxTrigger module
|
||||
module Trigger =
|
||||
|
||||
[<Fact>]
|
||||
let ``Click is correct`` () =
|
||||
Assert.Equal ("click", HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Load is correct`` () =
|
||||
Assert.Equal ("load", HxTrigger.Load)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.Alt succeeds`` () =
|
||||
Assert.Equal ("click[altKey]", HxTrigger.Filter.Alt HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.Ctrl succeeds`` () =
|
||||
Assert.Equal ("click[ctrlKey]", HxTrigger.Filter.Ctrl HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.Shift succeeds`` () =
|
||||
Assert.Equal ("click[shiftKey]", HxTrigger.Filter.Shift HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.CtrlAlt succeeds`` () =
|
||||
Assert.Equal ("click[ctrlKey&&altKey]", HxTrigger.Filter.CtrlAlt HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.CtrlShift succeeds`` () =
|
||||
Assert.Equal ("click[ctrlKey&&shiftKey]", HxTrigger.Filter.CtrlShift HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.CtrlAltShift succeeds`` () =
|
||||
Assert.Equal ("click[ctrlKey&&altKey&&shiftKey]", HxTrigger.Filter.CtrlAltShift HxTrigger.Click)
|
||||
|
||||
[<Fact>]
|
||||
let ``Filter.AltShift succeeds`` () =
|
||||
Assert.Equal ("click[altKey&&shiftKey]", HxTrigger.Filter.AltShift HxTrigger.Click)
|
||||
|
||||
|
||||
/// Tests for the HtmxAttrs module
|
||||
module Attributes =
|
||||
|
||||
/// Pipe-able assertion for a rendered node
|
||||
let shouldRender expected node = Assert.Equal (expected, RenderView.AsString.htmlNode node)
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxBoost succeeds`` () =
|
||||
div [ _hxBoost ] [] |> shouldRender """<div hx-boost="true"></div>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxConfirm succeeds`` () =
|
||||
button [ _hxConfirm "REALLY?!?" ] [] |> shouldRender """<button hx-confirm="REALLY?!?"></button>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxDelete succeeds`` () =
|
||||
span [ _hxDelete "/this-endpoint" ] [] |> shouldRender """<span hx-delete="/this-endpoint"></span>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxDisable succeeds`` () =
|
||||
p [ _hxDisable ] [] |> shouldRender """<p hx-disable></p>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxEncoding succeeds`` () =
|
||||
form [ _hxEncoding "utf-7" ] [] |> shouldRender """<form hx-encoding="utf-7"></form>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxExt succeeds`` () =
|
||||
section [ _hxExt "extendme" ] [] |> shouldRender """<section hx-ext="extendme"></section>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxGet succeeds`` () =
|
||||
article [ _hxGet "/the-text" ] [] |> shouldRender """<article hx-get="/the-text"></article>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxHeaders succeeds`` () =
|
||||
figure [ _hxHeaders """{ "X-Special-Header": "some-header" }""" ] []
|
||||
|> shouldRender """<figure hx-headers="{ "X-Special-Header": "some-header" }"></figure>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxHistoryElt succeeds`` () =
|
||||
table [ _hxHistoryElt ] [] |> shouldRender """<table hx-history-elt></table>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxInclude succeeds`` () =
|
||||
a [ _hxInclude ".extra-stuff" ] [] |> shouldRender """<a hx-include=".extra-stuff"></a>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxIndicator succeeds`` () =
|
||||
aside [ _hxIndicator "#spinner" ] [] |> shouldRender """<aside hx-indicator="#spinner"></aside>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxNoBoost succeeds`` () =
|
||||
td [ _hxNoBoost ] [] |> shouldRender """<td hx-boost="false"></td>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxParams succeeds`` () =
|
||||
br [ _hxParams "[p1,p2]" ] |> shouldRender """<br hx-params="[p1,p2]">"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxPatch succeeds`` () =
|
||||
div [ _hxPatch "/arrrgh" ] [] |> shouldRender """<div hx-patch="/arrrgh"></div>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxPost succeeds`` () =
|
||||
hr [ _hxPost "/hear-ye-hear-ye" ] |> shouldRender """<hr hx-post="/hear-ye-hear-ye">"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxPreserve succeeds`` () =
|
||||
img [ _hxPreserve ] |> shouldRender """<img hx-preserve="true">"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxPrompt succeeds`` () =
|
||||
strong [ _hxPrompt "Who goes there?" ] [] |> shouldRender """<strong hx-prompt="Who goes there?"></strong>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxPushUrl succeeds`` () =
|
||||
dl [ _hxPushUrl ] [] |> shouldRender """<dl hx-push-url></dl>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxPut succeeds`` () =
|
||||
s [ _hxPut "/take-this" ] [] |> shouldRender """<s hx-put="/take-this"></s>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxRequest succeeds`` () =
|
||||
u [ _hxRequest "noHeaders" ] [] |> shouldRender """<u hx-request="noHeaders"></u>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxSelect succeeds`` () =
|
||||
nav [ _hxSelect "#navbar" ] [] |> shouldRender """<nav hx-select="#navbar"></nav>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxSse succeeds`` () =
|
||||
footer [ _hxSse "connect:/my-events" ] [] |> shouldRender """<footer hx-sse="connect:/my-events"></footer>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxSwap succeeds`` () =
|
||||
del [ _hxSwap "innerHTML" ] [] |> shouldRender """<del hx-swap="innerHTML"></del>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxSwapOob succeeds`` () =
|
||||
li [ _hxSwapOob "true" ] [] |> shouldRender """<li hx-swap-oob="true"></li>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxTarget succeeds`` () =
|
||||
header [ _hxTarget "#somewhereElse" ] [] |> shouldRender """<header hx-target="#somewhereElse"></header>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxTrigger succeeds`` () =
|
||||
figcaption [ _hxTrigger "load" ] [] |> shouldRender """<figcaption hx-trigger="load"></figcaption>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxVals succeeds`` () =
|
||||
dt [ _hxVals """{ "extra": "values" }""" ] []
|
||||
|> shouldRender """<dt hx-vals="{ "extra": "values" }"></dt>"""
|
||||
|
||||
[<Fact>]
|
||||
let ``_hxWs succeeds`` () =
|
||||
ul [ _hxWs "connect:/web-socket" ] [] |> shouldRender """<ul hx-ws="connect:/web-socket"></ul>"""
|
||||
|
@ -18,7 +18,7 @@ module HxParams =
|
||||
/// Include no parameters
|
||||
let None = "none"
|
||||
/// Include the specified parameters
|
||||
let With fields = fields |> List.reduce (fun acc it -> $"{acc},{it}")
|
||||
let With fields = match fields with [] -> "" | _ -> fields |> List.reduce (fun acc it -> $"{acc},{it}")
|
||||
/// Exclude the specified parameters
|
||||
let Except fields = With fields |> sprintf "not %s"
|
||||
|
||||
@ -50,8 +50,8 @@ module HxTrigger =
|
||||
match trigger.Contains "[" with
|
||||
| true ->
|
||||
let parts = trigger.Split ('[', ']')
|
||||
sprintf "%s[%s&&%s]" parts.[0] parts.[1] filter
|
||||
| false -> sprintf "%s[%s]" trigger filter
|
||||
$"{parts.[0]}[{parts.[1]}&&{filter}]"
|
||||
| false -> $"{trigger}[{filter}]"
|
||||
/// Trigger the event on a click
|
||||
let Click = "click"
|
||||
/// Trigger the event on page load
|
||||
@ -81,9 +81,9 @@ module HxTrigger =
|
||||
/// Attributes and flags for HTMX
|
||||
[<AutoOpen>]
|
||||
module HtmxAttrs =
|
||||
/// Progressively enhances anchors and forms to use AJAX requests
|
||||
/// Progressively enhances anchors and forms to use AJAX requests (use `_hxNoBoost` to set to false)
|
||||
let _hxBoost = attr "hx-boost" "true"
|
||||
/// Shows a confim() dialog before issuing a request
|
||||
/// Shows a confirm() dialog before issuing a request
|
||||
let _hxConfirm = attr "hx-confirm"
|
||||
/// Issues a DELETE to the specified URL
|
||||
let _hxDelete = attr "hx-delete"
|
||||
@ -103,6 +103,8 @@ module HtmxAttrs =
|
||||
let _hxInclude = attr "hx-include"
|
||||
/// The element to put the htmx-request class on during the AJAX request
|
||||
let _hxIndicator = attr "hx-indicator"
|
||||
/// Overrides a previous `hx-boost`
|
||||
let _hxNoBoost = attr "hx-boost" "false"
|
||||
/// Filters the parameters that will be submitted with a request
|
||||
let _hxParams = attr "hx-params"
|
||||
/// Issues a PATCH to the specified URL
|
||||
@ -123,10 +125,10 @@ module HtmxAttrs =
|
||||
let _hxSelect = attr "hx-select"
|
||||
/// Establishes and listens to Server Sent Event (SSE) sources for events
|
||||
let _hxSse = attr "hx-sse"
|
||||
/// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
|
||||
let _hxSwapOob = attr "hx-swap-oob"
|
||||
/// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
|
||||
let _hxSwap = attr "hx-swap"
|
||||
/// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
|
||||
let _hxSwapOob = attr "hx-swap-oob"
|
||||
/// Specifies the target element to be swapped
|
||||
let _hxTarget = attr "hx-target"
|
||||
/// Specifies the event that triggers the request
|
||||
|
Loading…
Reference in New Issue
Block a user