UI Testing Blazor Components WITHOUT A Browser!

all right in this video we're going to get back into B unit and Blazer and look at some different functionality within B unit that allows us to simulate interacting with our interface in the previous videos that I have in this series I was walking through some really simple functionality with B unit and the latest changes we looked at were extracting things into something like a view model The View model approach allowed us to inject that and then be able to simulate what we wanted on The View model in order to be able to set up the user interface to reflect that but in this video we're going to walk through an example of being able to interact with the user interface and therefore not have to rely on something like a view model because B unit is able to do all of that interaction for us and just a quick reminder before I jump over to the code is that my refactoring for C devs course is live now I'll have a link to that in the pin comments below all right let's check out some Blazer code so on my screen I have the code from the previous video that we looked at where we were using a view model to accomplish being able to test more effectively so if you haven't watched that video yet I'll put a link to that above right now and you can check that out in the come right back here what we could do with the view model was inject it into the component and then that way within the different parts of the component we could go leverage the properties of that view model this meant that when we were creating the component what we could do is create the view model in the current state that we want to have it and therefore when we render the component we have it in a state that reflects what we want to test now I'm going to jump back over to another version of this page and what we'll be able to see here is that this very closely reflects our initial State I've gone ahead and just updated the title in the counter but if we scroll down a little bit lower the current count I've left this private and that was one of the challenges we had in the first place when it came to being able to test this component when we're dealing with things that are private and this method is also private it means that we're not able to call either this method or set this field because we don't have access to them from the test class so the view model approach effectively allowed us to pull this constraint out we could set up the view model in the state we want and therefore test what we're looking for but if if we don't want to do that and we'd like to leave this code just as it is not explore using view models how can we make sure that we can test the different functionality that we have on this page then if we look at this page it's pretty simple right we're just able to click a button and this onclick event is going to call this method down here and we will increment this count and essentially the only other thing that we have to look at is that this status is updated to reflect this current count and as I mentioned B unit does allow us to sim imate clicks so if we combine the click simulation and we're able to click this button here therefore triggering this method that will mean that we will get a count increased and therefore we should be able to get that state off of this component and see the current count sounds nice and simple and it is so let's go check out the test code all right so on my screen I just have a copy and paste version of the test and then the last test is updated a little bit so the first test that we had was just looking at getting that header and you can see that we're just using B and it to get that render component created from there looking for the header and pulling off the counter which is now updated till three so that's great this is a really simple one nothing new there this test is also not unique I just wanted to prove that with the changes we have we're still able to test this initial State personally I think this is a great type of test to have if you're just looking for the default state with no one's touching stuff on the component if you had a more complicated component you'd want to be able to check the other things and just ensure that if you haven't modified anything then you have the state that you expect in this case the default should mean that we don't have any count so having zero here isn't that exciting but this is what we expect to get and now the more interesting part we're going to be able to simulate the clicks and then what I have set up here as well is using a theory in xunit and this xunit theory is going to provide one three or five for the different number of clicks that we want to try out sometimes for tests like this I like to be able to have a little bit of variation to illustrate that if we have a single click that there is isn't a different behavior when we start looking at multiple clicks now of course this counter example is extremely trivial so it may not warrant having different scenarios like this a single click might be enough but I wanted to talk about this because I think it's important that when you're testing user interfaces or other systems for that matter that if you think you might have different Behavior around the one versus many for a different variable then it's worth giving that a shot in testing if we look at the body of this test we're starting off with the exact same thing in the beginning we're getting that rendered component but the next steps are a little bit different but they're extremely simple which is great all that we're going to be doing is asking that render component for the button that it has so we can just use the find method on that rendered component and from there we store that in the button element variable and because I'm simulating a different number of clicks I just have a for Loop and if we think about what this code will do essentially because I only have a one three or five that can get passed in here for a number of Clicks in the first test it's just going to do a single click because we're just going to have one here as the condition and that will only call this line once if we do three it we'll do three iterations of the loop and five of course we'll do five and now the rest of the test is very similar in terms of looking at that markup that we have the only difference is that I'm providing a parameter into this string through string interpolation to see that we have the right number of clicks and to pause for a moment what's interesting about this right is that we don't have a view model that we're setting up we're assuming that default state by this behavior that we tested up here right that we're starting at zero so that should make sense and therefore if we create a new counter and start clicking on the button which B unit allows us to do with this rate here then we should be able to go from 0 + 1 which would give us 1 0 + 3 is three and as you might guess 0 + 5 is going to be five in terms of the count that we'd have so we don't have to mock anything out we don't have to create a new you know state that we want to pass into this counter we can simply create the new counter and then from there interact with the button I go ahead and run these tests we should go from a little red X over here into a green check mark and there we go we get a little green check mark and that means that with this Theory all three variations of this test pass and that's just going to be a super quick video for us to look at beun and how we can interact with user interface elements the big call out here if you've watched the other videos that I mentioned and then you've come to watch this one is that we're going from having to refactor some code out to make it more testable to skipping that all together because we're able to interact with the user interface without actually having to spin up a browser and have something essentially move a cursor to go click on things in other user interface Frameworks and other testing Frameworks as well you have this type of you know replay or this interaction where a browser that's not headless necessarily will spin up you'll see it on your screen um these types of tests in my opinion they can serve a purpose but it's my almost like last resort that I want want to go to because of things like in this case we have B unit and I've used other test methods where we're able to kind of get a lot of coverage without having to go as far as clicking through a user interface but all of these are tools right there's no one right way to test there's all these different options that you have to play with and you can pick the best one or a combination of different options to give you the confidence that you need if you want to hear more Thoughts From Me on different testing approaches and how I think a lot of people that are talking about this on the internet are really making it one-sided you can check this video out next thanks and we'll see you next time