Diagram Tests (VERY Experimental)


Surprisingly many developers use ASCII art to create useful representations of complex data structures. IcuBlazor takes this idea to the next level with high-resolution diagrams.

The following code uses <VisNetGraph> to create the simple interactive diagram above. That diagram is then used as an IcuBlazor UI test.

@inherits IcuBlazor.IcuTestSuite

@using IcuBlazor.Graphs

<IcuTestDiv Suite="@this" Width="600" style="border:1px solid red">
    <VisNetGraph @ref="gref" Data="@visData"></VisNetGraph>

@code {

    VisNetGraph gref;
    VisNetData visData;

    // wait for graph layout & animation to stabilize
    async Task render_graph<T>(Graph<T> graph)
        await this.RenderNow();
        visData = VisNetData.FromGraph(graph);
        await this.InvokeAsync(StateHasChanged);
        await gref.LayoutDone();      

    public async Task Test_SimpleGraph()
        var graph = new Graph<string>();
        graph.Filename = "simple";
        graph.Tree = true;
        graph.TopDownFlow = true;

        graph.AddEdge("A", "B");
        graph.AddEdge("A", "C");
        graph.AddEdge("B", "Cool!");

        await render_graph(graph);
        await Check().Div("simple_graph");

An error has occurred. This application may no longer respond until reloaded. Reload 🗙