-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathinput-file.html
More file actions
181 lines (152 loc) · 8.85 KB
/
Copy pathinput-file.html
File metadata and controls
181 lines (152 loc) · 8.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uploading files to the InputFile component | bUnit </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Uploading files to the InputFile component | bUnit ">
<meta name="description" content="bUnit is a unit testing library for Blazor Components. You can easily define components under test in C# or Razor syntax and verify outcome using semantic HTML diffing/comparison logic. You can interact with and inspect components, trigger event handlers, provide cascading values, inject services, mock IJsRuntime, and perform snapshot testing.">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="../../public/docfx.min.css">
<link rel="stylesheet" href="../../public/main.css">
<meta name="docfx:navrel" content="../../toc.html">
<meta name="docfx:tocrel" content="../toc.html">
<meta name="docfx:rel" content="../../">
<meta name="docfx:docurl" content="https://github.com/bUnit-dev/bUnit/blob/stable/docs/site/docs/test-doubles/input-file.md/#L1">
<meta name="loc:inThisArticle" content="In this article">
<meta name="loc:searchResultsCount" content="{count} results for "{query}"">
<meta name="loc:searchNoResults" content="No results for "{query}"">
<meta name="loc:tocFilter" content="Filter by title">
<meta name="loc:nextArticle" content="Next">
<meta name="loc:prevArticle" content="Previous">
<meta name="loc:themeLight" content="Light">
<meta name="loc:themeDark" content="Dark">
<meta name="loc:themeAuto" content="Auto">
<meta name="loc:changeTheme" content="Change theme">
<meta name="loc:copy" content="Copy">
<meta name="loc:downloadPdf" content="Download PDF">
</head>
<script type="module" src="./../../public/docfx.min.js"></script>
<script>
const theme = localStorage.getItem('theme') || 'auto'
document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme)
</script>
<body class="tex2jax_ignore" data-layout="" data-yaml-mime="">
<header class="bg-body border-bottom">
<nav id="autocollapse" class="navbar navbar-expand-md" role="navigation">
<div class="container-xxl flex-nowrap">
<a class="navbar-brand" href="../../index.html">
<img id="logo" class="svg" src="../..//images/bunit-logo.png" alt="bUnit">
bUnit
</a>
<button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navpanel" aria-controls="navpanel" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-three-dots"></i>
</button>
<div class="collapse navbar-collapse" id="navpanel">
<div id="navbar">
<form class="search" role="search" id="search">
<i class="bi bi-search"></i>
<input class="form-control" id="search-query" type="search" disabled="" placeholder="Search" autocomplete="off" aria-label="Search">
</form>
</div>
</div>
</div>
</nav>
</header>
<main class="container-xxl">
<div class="toc-offcanvas">
<div class="offcanvas-md offcanvas-start" tabindex="-1" id="tocOffcanvas" aria-labelledby="tocOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#tocOffcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<nav class="toc" id="toc"></nav>
</div>
</div>
</div>
<div class="content">
<div class="actionbar">
<button class="btn btn-lg border-0 d-md-none" style="margin-top: -.65em; margin-left: -.8em" type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas" aria-controls="tocOffcanvas" aria-expanded="false" aria-label="Show table of contents">
<i class="bi bi-list"></i>
</button>
<nav id="breadcrumb"></nav>
</div>
<article data-uid="input-file">
<h1 id="uploading-files-to-the-inputfile-component">Uploading files to the <code>InputFile</code> component</h1>
<p>bUnit comes with integrated support for the <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=server"><code>InputFile</code></a> component and makes it easy to simulate uploading files.</p>
<p>To upload a file, first find the <code>InputFile</code> component in the component under test. Afterward, call the method <code>UploadFile</code>:</p>
<pre><code class="lang-csharp">// Create an InputFileContent with string content
InputFileContent fileToUpload = InputFileContent.CreateFromText("Text content", "Filename.txt");
// Render the component under test which contains the InputFile component as a child component
RenderedComponent<ComponentUnderTest> cut = Render<ComponentUnderTest>();
// Find the InputFile component
RenderedComponent<InputFile> inputFile = cut.FindComponent<InputFile>();
// Upload the file to upload to the InputFile component
inputFile.UploadFile(fileToUpload);
// Assertions...
</code></pre>
<p>To upload binary content, create an <code>InputFileContent</code> with the <code>InputFileContent.CreateFromBinary()</code> method.</p>
<h2 id="known-limitations">Known limitations</h2>
<p>bUnit's support for the <code>InputFile</code> component is limited when uploading and resizing images (using the provided stream).</p>
<pre><code class="lang-razor"><InputFile OnChange="Upload" />
<img src="@imageBase64">
@code {
private string imageBase64 = string.Empty;
private async Task Upload(InputFileChangeEventArgs args)
{
var file = args.File;
var preview = await file.RequestImageFileAsync("image/png", 100, 100);
await using var stream = preview.OpenReadStream();
var buffer = new byte[stream.Length];
await using var memoryStream = new MemoryStream(buffer);
await stream.CopyToAsync(memoryStream);
var base64 = Convert.ToBase64String(buffer);
imageBase64 = $"data:image/png;base64,{base64}";
}
}
</code></pre>
<p>When using the <code>RequestImageFileAsync</code> method, the <code>UploadFiles</code> method will not be able to upload the file inside a test. Blazor has some internal checks, bUnit can not overcome easily. So the following test will fail:</p>
<pre><code class="lang-csharp">[Fact]
public void UploadFileTest()
{
var cut = Render<ComponentThatUsesInputFile>();
cut.FindComponent<InputFile>().UploadFiles(InputFileContent.CreateFromBinary([1,2], "test.png"));
cut.Find("img").GetAttribute("src").Should().NotBeNullOrEmpty(); // Will fail
Renderer.UnhandledException.Should().BeNull(); // Will fail
}
</code></pre>
<p>To work around this limitation, refactoring the logic into a service that is injected into the component and then mocking the service in the test is a possible solution.</p>
</article>
<div class="contribution d-print-none">
<a href="https://github.com/bUnit-dev/bUnit/blob/stable/docs/site/docs/test-doubles/input-file.md/#L1" class="edit-link">Edit this page</a>
</div>
<div class="next-article d-print-none border-top" id="nextArticle"></div>
</div>
<div class="affix">
<nav id="affix"></nav>
<div class="border-top text-center pt-4">
<a class="d-block" href="https://dotnetfoundation.org" title=".NET Foundation">
<img width="150" src="/sponsors/dotnetfoundation_v4_purple.svg" alt=".NET Foundation">
</a>
<p class="pt-1"><small>Supported by the <a href="https://dotnetfoundation.org">.NET Foundation</a>.</small></p>
</div>
</div>
</main>
<div class="container-xxl search-results" id="search-results"></div>
<footer class="border-top text-secondary bg-body-tertiary">
<div class="container-xxl">
<div class="flex-fill">
<small>Documentation updated on 2026-08-10T12:54:03.0000000+00:00 in commit d4d81d9e5b</small>
</div>
</div>
</footer>
</body>
</html>