对 Blazor RenderFragment 元素进行单元测试

Question

我已经开始编写动态构建 RenderFragment 元素的方法。因此，我也在尝试在方法旁边编写单元测试。

我从一个非常基本的元素开始，但它失败了。下面是具体的测试方法：

public RenderFragment buildFragment(string element, string elementContent, string[] attribute, string[] attributeContent)
    {
        RenderFragment content = builder => {
            builder.OpenElement(0, element);
            if (attribute != null)
            {
                for (int i = 0; attribute.Length - 1 >= i; ++i)
                {
                    builder.AddAttribute(0, attribute[i], attributeContent[i]);
                }
            }
            if (!string.IsNullOrEmpty(elementContent))
            {
                builder.AddContent(0, elementContent);
            }
            builder.CloseElement();
        };

        return content;
    }

这是我对使用 xUnit 的方法的第一个基本测试：

public void BuildFragmentReturnsOneElement()
        {
            //Arrange
            RenderFragment fragment = builder =>
            {
                builder.OpenElement(0, "p");
                builder.CloseElement();
            };

            //Act
            RenderFragment result = _dynamicContentHelper.buildFragment("p", string.Empty, null, null);

            //Assert
            Assert.Same(fragment, result);
        }

我收到的错误是：

消息：Assert.Same() 预期失败：RenderFragment { Method = Void b__2_0(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder), Target = <>c { } } 实际：RenderFragment { Method = Void b__0(Microsoft.AspNetCore.Blazor .RenderTree.RenderTreeBuilder), Target = <>c__DisplayClass0_0 { attribute = null, attributeContent = null, element = "p", elementContent = "" } }

我不明白为什么目标我的片段对象是从不同目标的结果。

Answer 1

这RenderFragment是一个委托方法，所以当你编写这样的代码时：

RenderFragment fragment = builder =>
            {
                builder.OpenElement(0, "p");
                builder.CloseElement();
            };

您不是在创建物化工件，而是声明可以调用的委托。

因此，代码Assert.Same(fragment, result);正在比较两个委托，这显然不一样 - 它们指向两种不同的方法。

我相信您应该调查 Blazor 源的“test”文件夹

本节可能会有很大帮助

他们应用的技术是检查 RenderTree 的帧

// Act
var frames = GetRenderTree(component);

// Assert
Assert.Collection(
 frames,
 frame => AssertFrame.Component(frame, "Test.RenderChildContent", 2, 0),
 frame => AssertFrame.Attribute(frame, RenderTreeBuilder.ChildContent, 1),
 frame => AssertFrame.Markup(frame, "\n  <div></div>\n", 2));

另外，此部分包含一个 TestRenderer，其中包含此代码

protected RenderTreeFrame[] GetRenderTree(IComponent component)
        {
            var renderer = new TestRenderer();
            renderer.AttachComponent(component);
            component.SetParameters(ParameterCollection.Empty);
            return renderer.LatestBatchReferenceFrames;
        }

看看他们是如何进行测试的，因为我无法在这里重现所有内容，但这些是关键......