How to test ViewData in Razor page

Question

Do you know how I can test that view data is set to "Page d'accueil"? Here is my frontend code:

@page
@model IndexModel
@{
    ViewData["Title"] = "Page d'accueil";
}

<div class="container col-xxl-8 px-4 py-5">
    ....
</div>

Here is my backend code:

public class IndexModel : PageModel
    {

        public IndexModel() 
        { 
        }

        public void OnGet()
        {
        }
    }

Here is a try in a unit test:

public class IndexTest
    {
        [Test]
        public void GivenPage_WhenLoad_TitleOfPageIsRight()
        {
            // Arrange
            var indexModel = new IndexModel();

            // Act
            indexModel.OnGet();
            var result = indexModel.ViewData["Title"];

            // Assert
            Assert.AreEqual("Page d'accueil", result);
        }
    }

The error is :

Expected: "Page d'accueil" But was: null

Answer 1

Do you know how I can test that view data is set to "Page d'accueil"? Here is my frontend code.

In order to test razor page, you have to mock ViewData["Title"] in your OnGet method within IndexModel because ViewData value usually passed by the framework at runtime. Thus, you cannot access it directly in your Test method, you would need additional configuration in arrange area.

In other words, the test method requires EmptyModelMetadataProvider which need to pass within ViewDataDictionary instance and finally, we have to mock Index page model along with above instance value.

Let's have a look in practice, how to do that,

Index Page Model:

public class IndexModel : PageModel
    {
        public IndexModel()
        {
        }

        public void OnGet()
        {
            ViewData["Title"] = "Page d'accueil";
        }
    }

Unit Test Class:

    [TestClass]
    public class IndexTest
    {
        [TestMethod]
        public void GivenPage_WhenLoad_TitleOfPageIsRight()
        {
            // Arrange
            var modelMetadataProvider = new EmptyModelMetadataProvider();

            //Creating View data instance
            var viewData = new ViewDataDictionary(modelMetadataProvider, new ModelStateDictionary());
            //Binding viewData in page model
            var indexModel = new IndexModel()
            {
                PageContext = new PageContext
                {
                    ViewData = viewData
                },
                MetadataProvider = modelMetadataProvider,
            };


            // Act
            indexModel.OnGet();
            var result = (string) indexModel.ViewData["Title"];

            // Assert
            Assert.AreEqual("Page d'accueil", result);
        }

Razor Page Unit Test Config:

Output:

Note: You can refer to this sample. If you would like to know more details on Razor page unit testing you could check our official document here.