Skip to content

Commit 8e78062

Browse files
egilegil
committed
Docs: cascading values
1 parent 5cf67f0 commit 8e78062

4 files changed

Lines changed: 178 additions & 3 deletions

File tree

‎docs/samples/components/CascadingParams.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@code
2+
{
3+
[CascadingParameter]
4+
public bool IsDarkTheme { get; set; }
5+
6+
[CascadingParameter(Name = "LoggedInUser")]
7+
public string UserName { get; set; }
8+
9+
[CascadingParameter(Name = "LoggedInEmail")]
10+
public string Email { get; set; }
11+
}

‎docs/samples/tests/razor/AllKindsOfParamsTest.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,4 +121,32 @@
121121
<ComponentUnderTest>
122122
<UnmatchedParams some-unknown-param="a value" />
123123
</ComponentUnderTest>
124+
</Fixture>
125+
126+
<Fixture Test="f => {}">
127+
<ComponentUnderTest>
128+
<CascadingValue Value="true"> @* isDarkMode *@
129+
<CascadingParams />
130+
</CascadingValue>
131+
</ComponentUnderTest>
132+
</Fixture>
133+
134+
<Fixture Test="f => {}">
135+
<ComponentUnderTest>
136+
<CascadingValue Name="LoggedInUser" Value=@("Egil Hansen")>
137+
<CascadingParams />
138+
</CascadingValue>
139+
</ComponentUnderTest>
140+
</Fixture>
141+
142+
<Fixture Test="f => {}">
143+
<ComponentUnderTest>
144+
<CascadingValue Value="true"> @* isDarkMode *@
145+
<CascadingValue Name="LoggedInUser" Value=@("Egil Hansen")>
146+
<CascadingValue Name="LoggedInEmail" Value=@("egil@example.com")>
147+
<CascadingParams />
148+
</CascadingValue>
149+
</CascadingValue>
150+
</CascadingValue>
151+
</ComponentUnderTest>
124152
</Fixture>

‎docs/samples/tests/xunit/AllKindsOfParamsTest.cs‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,11 +275,77 @@ public void UnmatchedParamsTest()
275275
var cut1 = ctx.RenderComponent<UnmatchedParams>(
276276
("some-unknown-param", "a value")
277277
);
278-
278+
279279
// Using parameter builder
280280
var cut2 = ctx.RenderComponent<UnmatchedParams>(parameters => parameters
281281
.AddUnmatched("some-unknown-param", "a value")
282282
);
283283
}
284+
285+
[Fact]
286+
public void UnnamedCascadingParamsTest()
287+
{
288+
using var ctx = new TestContext();
289+
var isDarkTheme = true;
290+
291+
// Using factory method
292+
var cut1 = ctx.RenderComponent<CascadingParams>(
293+
CascadingValue(isDarkTheme)
294+
);
295+
296+
// Using parameter builder
297+
var cut2 = ctx.RenderComponent<CascadingParams>(parameters => parameters
298+
.Add(isDarkTheme)
299+
);
300+
301+
// Using parameter builder and selecting unnamed cascading parameter
302+
var cut3 = ctx.RenderComponent<CascadingParams>(parameters => parameters
303+
.Add(p => p.IsDarkTheme, isDarkTheme)
304+
);
305+
}
306+
307+
[Fact]
308+
public void NamedCascadingParamsTest()
309+
{
310+
using var ctx = new TestContext();
311+
312+
// Using factory method
313+
var cut1 = ctx.RenderComponent<CascadingParams>(
314+
CascadingValue("LoggedInUser", "Egil Hansen")
315+
);
316+
317+
// Using parameter builder
318+
var cut2 = ctx.RenderComponent<CascadingParams>(parameters => parameters
319+
.Add(p => p.UserName, "Egil Hansen")
320+
);
321+
}
322+
323+
[Fact]
324+
public void UnnamedAndNamedCascadingParamsTest()
325+
{
326+
using var ctx = new TestContext();
327+
var isDarkTheme = true;
328+
329+
// Using factory method
330+
var cut1 = ctx.RenderComponent<CascadingParams>(
331+
CascadingValue(isDarkTheme),
332+
CascadingValue("LoggedInUser", "Egil Hansen"),
333+
CascadingValue("LoggedInEmail", "egil@example.com")
334+
);
335+
336+
// Using parameter builder
337+
var cut2 = ctx.RenderComponent<CascadingParams>(parameters => parameters
338+
.Add(isDarkTheme)
339+
.Add(p => p.UserName, "Egil Hansen")
340+
.Add(p => p.Email, "egil@example.com")
341+
);
342+
343+
// Using parameter builder and selecting unnamed cascading parameter
344+
var cut3 = ctx.RenderComponent<CascadingParams>(parameters => parameters
345+
.Add(p => p.IsDarkTheme, isDarkTheme)
346+
.Add(p => p.UserName, "Egil Hansen")
347+
.Add(p => p.Email, "egil@example.com")
348+
);
349+
}
284350
}
285351
}

‎docs/site/docs/providing-input/passing-parameters-to-components.md‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,6 @@ In the follow examples, we will pass a unmatched parameter to the following comp
343343
344344
[!code-csharp[UnmatchedParams](../../../samples/components/UnmatchedParams.cs#L10-L14)]
345345
346-
347346
# [C# test code](#tab/csharp)
348347
349348
[!code-csharp[](../../../samples/tests/xunit/AllKindsOfParamsTest.cs#L272-L282)]
@@ -358,7 +357,78 @@ This is just regular Blazor parameter passing, which is the same for both `Fixtu
358357
359358
***
360359
361-
## Cascading Value Parameters
360+
## Cascading Parameters and Cascading Values
361+
362+
Cascading parameters are properties with the `[CascadingParameter]` attribute. There are two variants, **named** and **unnamed** cascading parameters. In Blazor, the `<CascadingValue>` component is used to provide values to cascading parameters, which we also do in Razor based tests. However, in C# based tests, we need to do it a little differently.
363+
364+
The following examples will pass cascading values to the `<CascadingParams>` component listed below:
365+
366+
[!code-csharp[CascadingParams.razor](../../../samples/components/CascadingParams.razor)]
367+
368+
### Passing Unnamed Cascading Values
369+
370+
To pass the unnamed `IsDarkTheme` cascading parameter to the `<CascadingParams>` component, do the following:
371+
372+
# [C# test code](#tab/csharp)
373+
374+
[!code-csharp[](../../../samples/tests/xunit/AllKindsOfParamsTest.cs#L288-L304)]
375+
376+
These examples do the same thing, i.e. pass in variable `isDarkTheme` to the cascading parameter `IsDarkTheme`.
377+
378+
1. The first example uses the `CascadingValue` factory method in <xref:Bunit.ComponentParameterFactory> to pass the unnamed parameter value.
379+
2. The second example uses the `Add` method on the <xref:Bunit.ComponentParameterBuilder`1> to pass the unnamed parameter value.
380+
3. The last example uses the `Add` method on the <xref:Bunit.ComponentParameterBuilder`1> with the parameter selector to explicitly select the desired cascading parameter and pass the unnamed parameter value that way.
381+
382+
# [Razor test code](#tab/razor)
383+
384+
[!code-html[](../../../samples/tests/razor/AllKindsOfParamsTest.razor#L126-L132)]
385+
386+
This is just regular Blazor cascading value parameter passing, which is the same for both `Fixture` and `SnapshotTest` razor tests. In this case, the `<CascadingValue>` component is used to pass the unnamed parameter value.
387+
388+
***
389+
390+
### Passing Named Cascading Values
391+
392+
To pass a named cascading parameter to the `<CascadingParams>` component, do the following:
393+
394+
# [C# test code](#tab/csharp)
395+
396+
[!code-csharp[](../../../samples/tests/xunit/AllKindsOfParamsTest.cs#L310-L320)]
397+
398+
These examples do the same thing, i.e. pass in value `Egil Hansen` to the cascading parameter with the name `LoggedInUser`. Note that the name of the parameter is not the same as the property of the parameter, e.g. `LoggedInUser` vs. `UserName`.
399+
400+
1. The first example uses the `CascadingValue` factory method in <xref:Bunit.ComponentParameterFactory> to pass the named parameter value, specifying the cascading parameters name and a value (not the property name).
401+
2. The second example uses the `Add` method on the <xref:Bunit.ComponentParameterBuilder`1> with the parameter selector to select the cascading parameter property and pass the parameter value that way.
402+
403+
# [Razor test code](#tab/razor)
404+
405+
[!code-html[](../../../samples/tests/razor/AllKindsOfParamsTest.razor#L134-L140)]
406+
407+
This is just regular Blazor cascading value parameter passing, which is the same for both `Fixture` and `SnapshotTest` razor tests. In this case, the `<CascadingValue>` component is used to pass a named parameter value, since both the `Name` and `Value` parameters are specified.
408+
409+
***
410+
411+
### Passing Multiple, Named and Unnamed, Cascading Values
412+
413+
To pass all cascading parameter to the `<CascadingParams>` component, do the following:
414+
415+
# [C# test code](#tab/csharp)
416+
417+
[!code-csharp[](../../../samples/tests/xunit/AllKindsOfParamsTest.cs#L326-L348)]
418+
419+
These examples do the same thing, i.e. pass both the unnamed `IsDarkTheme` cascading parameter, and the two named cascading parameters (`LoggedInUser`, `LoggedInEmail`).
420+
421+
1. The first example uses the `CascadingValue` factory method in <xref:Bunit.ComponentParameterFactory> to pass the unnamed and named parameter values.
422+
2. The second example uses the `Add` method on the <xref:Bunit.ComponentParameterBuilder`1> without a parameter to pass the unnamed parameter value, and `Add` method with the parameter selector to select each of the named parameters to pass the named parameter values.
423+
3. The last example uses the `Add` method on the <xref:Bunit.ComponentParameterBuilder`1> with the parameter selector to select both the named and unnamed cascading parameters and pass values to them that way.
424+
425+
# [Razor test code](#tab/razor)
426+
427+
[!code-html[](../../../samples/tests/razor/AllKindsOfParamsTest.razor#L142-L152)]
428+
429+
This is just regular Blazor cascading value parameter passing, which is the same for both `Fixture` and `SnapshotTest` razor tests. In this case, multiple `<CascadingValue>` components is used to pass the unnamed and named cascading parameter values to the component.
430+
431+
***
362432
363433
## Render Component Test inside other Components
364434

0 commit comments

Comments
 (0)