Skip to content

Commit 5ecdb34

Browse files
martinbryantmartinbryant
authored
Merge pull request #329 from Larocceau/test-the-client
Add "test the client" to v5 recipes
2 parents 45189b4 + 3c2037b commit 5ecdb34

File tree

2 files changed

+146
-0
lines changed

2 files changed

+146
-0
lines changed

‎docs/recipes/developing-and-testing/testing-the-client.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# How do I test the client?
2+
3+
Testing on the client is a little different than on the server.
4+
5+
This is because the code which is ultimately being executed in the browser is JavaScript, translated from F# by Fable, and so it must be tested in a JavaScript environment.
6+
7+
Furthermore, code that is shared between the Client and Server must be tested in both a dotnet environment _and_ a JavaScript environment.
8+
9+
The SAFE template uses a library called Fable.Mocha which allows us to run the same tests in both environments. It mirrors the Expecto API and works in much the same way.
10+
11+
## **I'm using the standard template**
12+
****
13+
If you are using the standard template then there is nothing more you need to do in order to start testing your Client.
14+
15+
In the tests/Client folder, there is a project named `Client.Tests` with a single script demonstrating how to use Mocha to test the TODO sample.
16+
17+
>Note the compiler directive here which makes sure that the Shared tests are only included when executing in a JavaScript (Fable) context. They are covered by Expecto under dotnet as you can see in `Server.Tests.fs`.
18+
19+
#### 1. Launch the test server
20+
21+
In order to run the tests, instead of starting your application using
22+
```powershell
23+
dotnet run
24+
```
25+
you should instead use
26+
```powershell
27+
dotnet run Runtests
28+
```
29+
30+
#### 2. View the results
31+
32+
Once the build is complete and the website is running, navigate to `http://localhost:8081/` in a web browser. You should see a test results page that looks like this:
33+
34+
<img src="../../../img/mocha-results.png"/>
35+
36+
> This command builds and runs the Server test project too. If you want to run the Client tests alone, you can simply launch the test server using `npm run test:live`, which executes a command stored in `package.json`.
37+
38+
## **I'm using the minimal template**
39+
40+
If you are using the minimal template, you will need to first configure a test project as none are included.
41+
42+
#### 1. Add a test project
43+
Create a `.Net` library called `Client.Tests` in the `tests/Client` subdirectory using the following commands:
44+
45+
```powershell
46+
dotnet new classlib -lang F# -n Client.Tests -o tests/Client
47+
dotnet sln add tests/Client
48+
```
49+
50+
#### 2. Reference the Client project
51+
Reference the Client project from the Client.Tests project:
52+
53+
```powershell
54+
dotnet add tests/Client reference src/Client
55+
```
56+
57+
#### 3. Add the Fable.Mocha package to Test project
58+
Run the following command:
59+
60+
```powershell
61+
dotnet add tests/Client package Fable.Mocha
62+
```
63+
64+
#### 4. Add something to test
65+
66+
Add this function to Client.fs in the Client project
67+
68+
```fsharp
69+
let sayHello name = $"Hello {name}"
70+
```
71+
72+
#### 5. Add a test
73+
Replace the contents of `tests/Client/Library.fs` with the following code:
74+
75+
```fsharp
76+
module Tests
77+
78+
open Fable.Mocha
79+
80+
let client = testList "Client" [
81+
testCase "Hello received" <| fun _ ->
82+
let hello = Client.sayHello "SAFE V3"
83+
84+
Expect.equal hello "Hello SAFE V3" "Unexpected greeting"
85+
]
86+
87+
let all =
88+
testList "All"
89+
[
90+
client
91+
]
92+
93+
[<EntryPoint>]
94+
let main _ = Mocha.runTests all
95+
```
96+
97+
#### 6. Add Test web page
98+
99+
Add a file called `index.html` to the tests/Client folder with following contents:
100+
```html
101+
<!DOCTYPE html>
102+
<html>
103+
<head>
104+
<title>SAFE Client Tests</title>
105+
</head>
106+
<body>
107+
<script type="module" src="/output/Library.js"></script>
108+
</body>
109+
</html>
110+
```
111+
112+
#### 7. Add test Vite config
113+
114+
Add a file called `vite.config.mts` to `tests/Client`:
115+
116+
```
117+
import { defineConfig } from "vite";
118+
119+
// https://vitejs.dev/config/
120+
export default defineConfig({
121+
server: {
122+
port: 8081
123+
}
124+
});
125+
126+
```
127+
128+
#### 8. Install the client's dependencies
129+
130+
```powershell
131+
npm install
132+
```
133+
134+
#### 9. Launch the test website
135+
136+
```powershell
137+
cd tests/Client
138+
dotnet fable watch -o output --run npx vite
139+
```
140+
141+
142+
Once the build is complete and the website is running, navigate to `http://localhost:8081/` in a web browser. You should see a test results page that looks like this:
143+
144+
<img src="../../../img/mocha-min-results.png"/>

‎mkdocs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ nav:
7575
- Create a docker image: "recipes/build/docker-image.md"
7676
- Remove FAKE: "recipes/build/remove-fake.md"
7777
- Package my SAFE app for deployment: "recipes/build/bundle-app.md"
78+
- Dev / Test:
79+
- Test the Client: "recipes/developing-and-testing/testing-the-client.md"
7880
- UI:
7981
- Add Tailwind support: "recipes/ui/add-tailwind.md"
8082
- Add daisyUI support: "recipes/ui/add-daisyui.md"

0 commit comments

Comments
 (0)