Guid class name .Find(Guid) not working, throws "The string did not match the expected pattern".

Describe the bug I am testing a toaster component with a randomly generated GUID class name, this is rendered as shown in the markup below:

[Fact]
    public void Should_RenderToast()
    {
        var exampleId = Guid.NewGuid(); // value: 553fa267-942a-418f-9326-fa4debfa7670
        var expectedId = exampleId.ToString().Replace("-", "_"); // value: 553fa267_942a_418f_9326_fa4debfa7670

        var toastModel = new ToastModel()
        {
            Id = exampleId,  //value: 553fa267-942a-418f-9326-fa4debfa7670
            Colour = Enums.Colours.Primary,
            TimeToBurn = DateTime.UtcNow.AddDays(1),
            Message = "Example toast message.",
            Title = "Example toast title."
        };

        ToastService.AddToast(toastModel);

        // this passes....
        Assert.Contains(expectedId, ToastProvider.Markup);

        // this fails to find the id?
        var toast = ToastProvider.Find($".{expectedId}");
    }

Example:

The outputted ToastProvider.Markup which clearly contains the id 553fa267_942a_418f_9326_fa4debfa7670.

<div class="toaster">
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div class="toast show 553fa267_942a_418f_9326_fa4debfa7670" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-header bg-primary text-white"><strong class="me-auto">Example toast title.</strong>
                <small class="bg-primary text-white">posted 0 secs ago</small>
                <button type="button" class="btn-close btn-close-white" aria-label="Close" blazor:onclick="1"></button>
            </div>
            <div class="toast-body">Example toast message.</div>
        </div>
    </div>
</div>

I get the following error message, even though the expected Id and class Id match (shown below).

Expected class name:
553fa267_942a_418f_9326_fa4debfa7670
Outputted class name:
553fa267_942a_418f_9326_fa4debfa7670

Expected behavior:

Version info:

• bUnit version: 1.18.4
• .NET Runtime and Blazor version: .NET 7
• OS type and version: Windows 11 22H2 22621.1413

[Jack278]

Oh lol, thank you for looking into this appreciate it - such a simple solution! 😃

[linkdotnet]

Okay I found the “issue”. The tokenizer does not play well with that. BUT: Css classes are not allowed to start with numbers.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

Here the source: https://www.w3.org/TR/CSS21/syndata.html#characters

That said: The thing you are trying is basically undefined behavior at best. For example if you prefix the whole Guid with a “c” like this:

<p class="toast show @CssClass">GuidComponent</p>

@code {
	[Parameter]
	public Guid Value { get; set; }

	private string CssClass => "c" + @Value.ToString().Replace("-", "_");
}

And this test:

[Fact]
public void GuidReplaceTest()
{
    var guid = Guid.NewGuid();
    var expectedGuid = guid.ToString().Replace("-", "_");

    var cut = RenderComponent<GuidComponent>(
        p => p.Add(c => c.Value, guid));

    var myElement = cut.Find($".c{expectedGuid}");
    myElement.Should().NotBeNull();
}

It works perfectly. Otherwise I would suggest pointing to the guys from AngleSharp about that and opening a ticket on their site. But again, we are outside the specification here, so I don’t want to give you high hopes on this one.

For now I will close the Ticket. Feel free to open it again if I missed something here.