Can't build BasicTestApp and run Blazor E2E test

[Regenhardt]

I'm tying to add an E2E test, but I have difficulties getting everything to build. One of the culprits is BasicTestApp and I suspect that there is a general problem with my setup, something I didn't do that I should have done.

The actual change is in JSInterop, which builds fine. JSInterop.Tests is green too. What am I doing wrong?

Visual Studio: VS Community 17.14.0 Preview 1.1
.NET SDK: 10.0.100-preview.2.25109.3
VS started via startvs.cmd file.

Warning:

'..\..\..\Web.JS\dist\Debug\blazor.webview.js' does not exist and won't be included in the build.

VS build error:

System.InvalidOperationException: No file exists for the asset at either location 'C:\Repo\aspnetcore\src\Components\Web.JS\dist\Debug\blazor.webassembly.js' or 'C:\Repo\aspnetcore\src\Components\Web.JS\dist\Debug\blazor.webassembly.js'.
   at Microsoft.AspNetCore.StaticWebAssets.Tasks.StaticWebAsset.ResolveFile(String identity, String originalItemSpec)
   at Microsoft.AspNetCore.StaticWebAssets.Tasks.DefineStaticWebAssets.Execute()

Terminal build output:

BasicTestApp failed with 1 error(s) (6.5s)
    C:\Repo\aspnetcore\.dotnet\sdk\10.0.100-preview.2.25109.3\Sdks\Microsoft.NET.Sdk.BlazorWebAssembly\targets\Microsoft.NET.Sdk.BlazorWebAssembly.6_0.targets(109,5): error :
      System.InvalidOperationException: No file exists for the asset at either location 'C:\Repo\aspnetcore\src\Components\Web.JS\dist\Debug\blazor.webassembly.js' or 'C:\Repo\aspnetcore\src\Components\Web.JS\dist\Debug\blazor.webassembly.js'.
         at Microsoft.AspNetCore.StaticWebAssets.Tasks.StaticWebAsset.ResolveFile(String identity, String originalItemSpec)
         at Microsoft.AspNetCore.StaticWebAssets.Tasks.DefineStaticWebAssets.Execute()

[javiercn]

@Regenhardt thanks for contacting us.

You need nodejs and you need to build the JS bits

[Regenhardt]

Building with npm worked, thanks!

Now it needs java to build Microsoft.AspNetCore.Components.E2ETests, even though I have the Microsoft OpenJDK installed for VS via tools and features' individual components. Should I find that jdk and add it to PATH or create JAVA_HOME?

[javiercn]

@Regenhardt you can put it in your path and JAVA_HOME. I don't remember if the build automatically installs it and sets it up.

Have your run activate.ps1 or activate.cmd? You could check if its setup in the path and environment after you do that. There's also a startvs.cmd script or something like that that you can use to start vs from the cli that will set everything up.

[Regenhardt]

I have JAVA_HOME set and /bin in my path, now the test project starts up. Unfortunately I get a weird ArgumentException fom the server fixture saying that input can't be null. I saw in the optional dependencies that I need Seleniumto run the test project - what do I have to install there?

The page has libraries, browser extension, and grid server.
Library comes as NuGet package so I figued that's gotta be in the project.
Browser extension doesn't make sense to run a test from my IDE.
Grid server? Seems overkill.

Edit: activate just puts the local dotnet into the current shell's environment. startvs is what I use to start visual studio, it puts the local dotnet into VS' environment. Can't find anything about java being added, but I did find the setup readme telling me to add jdk/bin and JAVA_HOME myself.

[javiercn]

@Regenhardt thanks for the additional details.

Have you run eng\build.cmd from the command line?

[Regenhardt]

I just built Components using the build.cmd in that directory, that one worked.

I now called the /eng/build.cmd script on its own. Most of the build ran successfully, until "Sandbox" failed to create some files that were already there.

Running other tests first reveals: It's actually just my new tests that produce this error, others do not. I'm not sure how to further analyze this, I can't find anything in the contrib docs for how to write Blazor tests.

I created a new component in the BasicTestApp that executes the steps that should work and displays the results in ui elements.
Created a new test that inherits from ServerTestBase<BlazorWasmTestAppFixture<Program>>.
Tried both the ctor and InitializeAsyncCore to call MountTestComponent, neither works.

I get an exception about a collection being empty. This could kinda be a version of my test failing, as I check for Browser.NotEqual(string.Empty, () => stringGuidElement.Text), except the message seems to abstract and also when I debug the test it breaks at an exception being thrown due to a timeout, while the call stack points to the line calling MountTestComponent.

Something wrong with the test setup?
Also is this still the right place now that everything is technically running, just not my tests? I definitely appreciate the help figuring this out :)

[javiercn]

@Regenhardt thanks for the additional details.

Our test infrastructure has grown organically over the years and as a result it's a bit too complex. The best way to proceed is to find a test on a similar area and copy/add a test case.

I would probably try and extend this test

https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/E2ETest/Tests/InteropTest.cs

aspnetcore/src/Components/test/testassets/BasicTestApp/InteropComponent.razor

Line 318 in f470910

inProcRuntime.Invoke<object>("jsInteropTests.functionThrowsException");

[dotnet-policy-service]

Hi @Regenhardt. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Regenhardt]

It works, thanks for the help!

For my future reference, how to add a test:

1. Add a test component to BasicTestApp (like InteropComponent).
2. Do the Act part in a new method, not on initialization (unless you're testing initialization) (called InvokeInteropAsync in InteropComponent).
3. Add a button to execute that Act method.
4. Have the method execute the tested functions and write results into UI elements.
5. Add the component as an option to the Index.razor of the BasicTestApp.
6. Create a new test in Microsoft.AspNetCore.Components.E2ETests.Tests. (like InteropTest, inherit from ServerTestBase).
7. Mount the new test component.
8. Write tests that click the button and check the results displayed by the component.