Unit test for tabs

[Juan Francisco Miranda Aguilar]

Hi,

I have a component with some tabs, but when I use bUnit for test this component, the content for the tab, which is another component, is not rendered when rendering the parent component.

How could I create some unit tests to interact with the content from several tabs?

Regards.

[Swathi Ravi]

Hi Juan,

Thank you for contacting us.

To address your query on unit testing tabs using bUnit, we suggest using the LoadOn mode as ContentLoad.Init when rendering the tab component. By default, only the first tab's content is rendered initially, but this approach ensures that all tab contents are rendered from the start, making them accessible for unit tests.

Below is a sample implementation:

[index.razor]

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Schedule

<SfTab LoadOn="ContentLoad.Init">

    <TabItems>

        <TabItem>

            <HeaderTemplate>Calendar</HeaderTemplate>

            <ContentTemplate>

                <SfCalendar TValue="DateTime" @bind-Value="@SelectedDate"></SfCalendar>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <HeaderTemplate>Scheduler</HeaderTemplate>

            <ContentTemplate>

                <SfSchedule TValue="AppointmentData" Height="450px" @bind-SelectedDate="@SelectedDate">

                    <ScheduleViews>

                        <ScheduleView Option="View.Day"></ScheduleView>

                    </ScheduleViews>

                </SfSchedule>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

@code {

    private DateTime SelectedDate { get; set; } = new DateTime(2020, 1, 10);

    public class AppointmentData

    {

        public int Id { get; set; }

        public string Subject { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

    }

}

[UnitTest1.cs]

using Bunit;

using NUnit.Framework;

using BlazorApp1.Components;

using Syncfusion.Blazor;

using Syncfusion.Blazor.Calendars;

using Syncfusion.Blazor.Navigations;

using Syncfusion.Blazor.Schedule;

using BlazorApp1.Components.Pages;

using Microsoft.Extensions.DependencyInjection;

namespace TabTest

{

    public class TabPageTests : Bunit.TestContext

    {

        [SetUp]

        public void Setup()

        {

            // Register Syncfusion services in the Bunit test context

            Services.AddSyncfusionBlazor();

        }

        [Test]

        public async Task CalendarTab_ShouldRenderCalendarComponent()

        {

            var cut = RenderComponent<Home>(); // Replace with the actual component name

            await Task.Delay(500);

            Assert.NotNull(cut.Find(".e-tab").QuerySelector(".e-content"));

            Assert.True(cut.Find(".e-content").Children[0].Children[0].ClassList.Contains("e-calendar"));

        }

        [Test]

        public async Task SchedulerTab_ShouldRenderSchedulerComponent()

        {

            var cut = RenderComponent<Home>();

            await Task.Delay(500);

            Assert.NotNull(cut.Find(".e-tab").QuerySelector(".e-content"));

            Assert.True(cut.Find(".e-content").Children[1].Children[0].ClassList.Contains("e-schedule"));

        }

    }

}

For further details on configuring bUnit with Syncfusion Blazor components, please refer to the following documentation:

• Configure Blazor component in bUnit testing
• Unit testing Blazor components

I've also attached a sample project in a zip file for your reference.

Regards,

Swathi

Attachment: blazortabunittestcase_fc2f122b.zip