Unit testing pages with Blazorise.RichTextEdit

[BadgerTaming]

Hi,

Has anyone got unit tests of pages with Blazorise.RichTextEdit?

I managed to get bunit tests running with basic Blazorise components by copying the BlazoriseConfig from the Blazorise test project, but once I add Blazorise.RichTextEdit the tests are not happy:

Message: System.InvalidOperationException : Cannot provide a value for property 'RteJsInterop' on type 'Blazorise.RichTextEdit.RichTextEdit'. There is no registered service of type 'Blazorise.RichTextEdit.RichTextEditJsInterop'. Stack Trace: <>c__DisplayClass5_0.<CreateInitializer>g__Initialize|2(IServiceProvider serviceProvider, IComponent component) ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance) ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType) Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId) RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex) RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex) RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex) RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl) RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange'1 oldTree, ArrayRange'1 newTree) ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment) Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry) Renderer.ProcessRenderQueue() --- End of stack trace from previous location where exception was thrown --- TestRenderer.AssertNoUnhandledExceptions() line 283 TestRenderer.Render[TResult](RenderFragment renderFragment, Func'2 activator) line 166 TestRenderer.RenderFragment(RenderFragment renderFragment) line 38 TestContextExtensions.RenderInsideRenderTree[TComponent](TestContextBase testContext, RenderFragment renderFragment) line 20 TestContext.Render[TComponent](RenderFragment renderFragment) line 61 TestContext.RenderComponent[TComponent](ComponentParameter[] parameters) line 36 ArticleTest.TestBasicArticle() line 76

Looking at https://bunit.egilhansen.com/docs/test-doubles/emulating-ijsruntime.html suggests I would need to write responses from the various JS functions and inject them, but I'm not sure how that would work with quill.

Alternatively, https://www.meziantou.net/automated-ui-tests-an-asp-net-core-application-with-playwright-and-xunit.htm suggests we might need to do some sort of selenium test or similar which sounds complicated...

I'm a bit of a web novice (hence why I was delighted to find Blazorise...), so any suggestions gratefully accepted. Has anyone managed to get this running?

Thanks in advance,

Ian

[stsrki]

The problem with the unit testing blazor components is that it cannot call any javascript code through JSInterop. Meaning, you need to mock them. And since RichTextEdit is basically entirely done in JS I don't see any way to make it done.

You could test some very basic functions through mock, I guess. If you want to have a look at it, see our unit tests and especially tests for the button, as they have some mocks already: https://github.com/stsrki/Blazorise/tree/master/Tests/Blazorise.Tests

[BadgerTaming]

Thank you. I was afraid that might be the answer...

Quill already has a test suite, so I can test my editor extensions through that, but I want to be able to check my data flow from files to pages. I'll look at what it would take to either disable or mock sufficient of the javascript bit that I can test the rest of the page around it.