Blazor testing using bUnit - or something something testing Blazor

[Music] uh [Music] oh [Music] [Music] oh [Music] oh [Music] um [Music] [Music] oh [Music] [Music] e welcome to coding after work stream we are live we are yeah and happy holidays we're uh dressed accordingly yep yeah at least some nerd references there you're much nicer than i well i'm a crazy cat lady so i thought it was appropriate i would definitely not not look as good in dress so that's something we yeah that's something we should look into the next year so happy holidays to everyone it seems that every time we stream we have something to celebrate and speaking about uh streaming and also celebrating it couldn't be possible or it wouldn't be possible without our amazing sponsors yeah so the first one we have is progress telerik and telric supports the development community with for example sponsoring streams like these and they also have amazing blazer components and chances are that they have what you need currently they have more than 60 truly native components and to clarify that means that instead of just taking their javascript libraries and adding blazer containers around them they're written written in c sharp and blazer or forblazer and we also have another sponsor uh which is a knowledge driven consultancy company compassy composing a company that specializes in innovative custom-built software solutions and they're also very um active in the community which we like so thank you so much for helping us do things like this but now let's bring in our guests welcome egil hansen thank you very much and uh thank you for having me are you ready for christmas well uh i don't know how it is where you live but here in iceland it's it's been snowing since uh i think two months ago so uh i think if white christmas is something you get ready for then we definitely are here it's it's nice it's it's dark and snowy and beautiful up here in the northern parts of iceland where i'm currently at nice we had one day of almost snow there was snow falling but it didn't stick so it's still autumn temperature i would say okay well sweden to me seems like it should be snowing in sweden right it's part of the fairy tales at least definitely well if you go up there i think they will have a little bit snow at least more than we do how is it uh in at least in scandinavia we celebrate saint lucia or lucia is that something you celebrate on iceland uh so i my uh my i'm fairly new up here my wife is from up here i know we did it in denmark um where i'm from uh but in in iceland i haven't actually seen anything but i haven't been part of the the the traditional things they have in in daycare and and school by my kids i had right now so so i don't think i don't think so but they we have a lot of we up here they they their christmas traditions involve like a 13 or 11 elves and and you know uh like an old mother of those guys that eat children so and there's a lot of you know uh so and if you don't get socks in in a christmas gift uh then you you know when you you get get eaten by by by the evil uh uh christmas mother i guess it's called english so so so the the christmas fairy tales up here a bit more rough than than everest but well if you look at fairy tales in general the original versions are really savage and and horrible really it's the rewritten disney versions that we can master i think yeah yeah i well i was listening to some just audiobooks of of the old anderson fairy tales and and you know people die in those stories yeah it's you know it's just and then and then he died and you know you know there's no happy ending uh all the time so so it's it's a different time i guess we live in now yeah definitely and also we have internet so we can fact check everything did he really die did the wolf actually eat her the red what is the red riding hood yeah yeah so what day do you open gifts in uh in iceland i know in a lot of well not a lot of a few uh of the european countries are opening on the 24th and the rest of the world opens on the 25th so in denmark and iceland uh the tradition is to open in the evening on the 24th after christmas dinner um i'm pushing a bit uh for in our family because we have a three and a six-year-old and that's very hard for them to be up all day looking at all the gifts under the christmas tree and then sitting down quietly eating dinner for one hour or more and then when they are at their most tired in the day they have to sit and then they can open that uh christmas uh gifts so i'm trying to sort of i actually like the maybe does not not on 25 but the american version i i it's the classic where they basically get up in the morning and open the gifts in the morning because when kids have all day to play with their new choice i don't have to go bit goes a bit right away but yeah we'll see if i can challenge tradition a little bit in the family or not that kind of make more sense it does it does i know some countries actually open on midnight so they sit up and wait and open at midnight as well but that would be difficult for a child and they need to behave all day how do we do it in sweden is it also on 24th yeah we we there's a few different uh variations but one thing is common for basically everyone and that we we uh watch um donald duck the um oh yeah yeah holiday special at three and then it's either some people get gifts before some people get gifts right after we we do it after um but we also actually do a christmas lunch instead of a christmas dinner because that's true the days are so long and you need to do the dishes and there's a lot of dishes for christmas for some reason yeah yeah what actually makes sense to do christmas lunch instead well now i think i'll you know settle by challenging one tradition at the time so maybe going for maybe opening opening a presence around to 2 p.m that would be a that's sort of a traditional tradition here in iceland to have they call it a coffee time uh even in daycare but it's just you know around the time where you meet with your grandparents and eat and drink coffee and and eat eat eat cake but i guess the kids don't drink coffee but they could have gifts afterwards so yeah basically you describe swedish fifa i think it's that part of the day you do something and just sit down social yeah yeah exactly and usually it involves some sugary stuff hopefully awesome should we uh dive in yeah if you're ready are you ready yeah uh yes so so you invited me very kindly to come and talk a bit about testing blazer components and i've been on a few things a few podcasts and and and the base of standard community stand up the last few months so i thought instead of just redoing the same presentation again and again we could try something different here and we will still go over the basics but i thought since you jimmy have a library that seems on the surface very testable with b unit uh let's try to do that and i even gave you some homework and and ask you to think about what kind of things we want to verify with your project so i'm starting with the most simple things and just building on top of that so let me finally testing for blossom i know right now do you have something that we could test i do it really okay so um let me jump around here a bit and i am changing much green i think so if you are okay so what i have here um for the folks at home watching this is uh the blossom blossom is that right blossom blossom blossom blossom i really like puns so the name comes from that the company that jessica and i has is called awesome dev so the az-m part is awesome oh yeah and then the awesome zed part is blazer so blossom and it will make your applications blossomed i'm sorry i really like it no it's okay it's okay i i i named b unit which is my library it was called the razer component testing library originally mary microsoft word yeah yeah yeah and and uh and i've you know um at some point when i tried to google that you know i had all the right magic words there but you know those combined meant a lot of other pages were coming up in front of mine because testing and blazer and razer and component that was just generic and then it hit me that b units is a much more obvious name and also actually indicates a little bit actually this should should indicate to people what what's going on it's a unit testing framework for blazer um but anyway as i said we have uh your solution here and this is this is b units website uh i've written quite a lot of documentation and if we go into the getting started we want to start by first creating a test project so you can do that from the command line or you can do it uh through visual studio so let me just show you how to do it for a visual studio and by the way if you are trying to follow this guide down here i just noticed this uh afternoon that there's actually a small bug in my template so uh but that should be fixed uh hopefully in a day or two anyway you might want to re resize the text a little bit uh there we go yeah no even i can read it yeah yeah yeah oh and by the way you know generic is also progress is also you know supporting me so uh like uh additional shout outs to them besides what you already gave them yeah so so uh but anyway so b unit is i call it a library instead of a framework because what it actually does it builds on top of uh a testing framework like x unit or n unit or ms test so uh anywhere you can run one of those testing frameworks and that's basically everywhere where you can run it test the command line tool there you can run b units so so what we will want to add here first is a new project and i i didn't actually ask you if you prefer x unit but i'm gonna do that because that's what i know so hopefully you also like that um and let's find the right place to put it i think in yeah this folder should be fine and called it blossom components.tests and we want 5.0 right yep it is relief so it is released yeah yeah and [Music] so now we need to do a few things to to make this work first we can go in here in dependencies and since we want to test the components in your blasm components uh projects we add a reference to that just like we do with any sort of normal unit testing component library setup or just you know product production code over here and you have unit testing here and you have a pointer from the production uh from from the test project over to the whatever you want to test so nothing special here um another thing we need to tweak is to add the razor here to the product project type you need that if you want to use um like ibn supports a way of writing unit tests using laser syntax that can be adventure advantageous sometimes if for example you have a lot of parameters you want to pass the components so maybe we will switch to that mode at some point later today if that makes sense for the test we're going to write for you but otherwise you can see this is just a regular x-unit project now we need to add a dependency for b units so let's just go browse to that type in b unit and here we have to click include prereleases so b unit is still in in still has has a beta stamp on it i think's fairly stable i am the next release will be a preview which means i will do my very best unless there's really something important i won't change any apis going forward and only do tweaks and performance tweaks and bug fixes if if there are any but it's it's quite uh quite usable already and you can see there's plus uh 50 000 of downloads already so it's in in fairly good use already out in the community so let's install version 11 and just wait a small bit and we talked about before whether you liked fluent assertions or shootly or just the regular issue let me install fluent assertions because that's what i'm using now in day-to-day work so we have some a little bit of help let's just not take the beta just take the final version of that chicken only only yeah you know only beer gets to be in beta right and [Music] so that should be it so now we have uh b units we have fluent assertions we have x unit actually runner and that should be it uh if i remember correctly oh one little trip uh trick i i've learned from microsoft from their coding guidelines is to set the namespace in your test project to be the same as in the project you're testing that way you don't have to add all the using statements in all the files you just get the same you just get the same name space uh setup as you would in in your project your testing so normally the namespace of of the project would be the same as the pri cs brush file which would be plasm.component.tests but in this case we're just going to say well we're just going to keep it as plasma components that's handy okay so yeah we can we can work with this one so to write your a test well that's actually just let's just run this test and see if everything builds and everything compiles and and we have uh green lights so we can go and i can add my test explorer down here and yeah it's sort of lying to us right it says four milliseconds but it clearly did take longer but that would probably build time anyway so um what i usually will recommend people doing is so you can see here there's writing chest in c sharp there's also writing chest and razor syntax and there are a few uh warnings here one of them is that you need to use x unit right now to do that and you also have to make sure that you set the right project timers where it did but if you want to do that then you can write uh write your test in here but i think we're gonna stick with uh just c-sharp just for now is your recommendation to do it in c-sharp or i i right now i would i prefer to do it in c-sharp on this i have something very specific also because this i would consider still uh a sort of experimental uh for now uh i actually have a new version of the next next generation of b that's coming out that was support for for doing this in an even nicer syntax than we have in here right now um so i would uh i think it would be better if uh i think people will would be better to wait a little bit by using this but i also know for example if you know c sharp fritz or of the the i guess he's sort of a famous uh twitch guy for a distant developer community he he is he's using uh this razer syntax more or less exclusively on his projects uh on his uh laser testing projects so it works and it works quite well i just personally prefer this style on this i have a lot of parameters to pass in so what i recommend doing especially if you're using x unit is to take the x unit test context the one we have here that is one that is the one that allows us to render component so and just have your your unit test class inherit from that so test context and we need to add b unit now this is the time i'm gonna ask you uh jimmy what is the first test we want to write what is the most simple thing we can do to test your project i guess the the most simple way would be just to see that that it creates a table if we're not supplying any any parameters at all okay so that would be the blasm grid component we want to test right yeah you have some unnecessary space up here jimmy fern [Laughter] well it's more obvious when you are at a very low resolution with very large funds i've got this one slide yeah so you need to go in and fix the rest of them i had no idea that this was going to be a roast that was the nicest roast ever you have a few few lines if that is a rose to you i'm sorry that's how good i am yeah well you you have you haven't shocked me yet i've seen words so let's rename this class just for good measure to uh blossom grit test and i want to move re redo the namespace actually let's see so this guy is under grid uh but i think you override the namespace in here yeah so let's just keep him like well i like to actually keep the structure the same so let's call this guy grid and by the way what i just did there is a small nifty plugin called add new file where you can just type in the things you want like folders or files and it will just create it for you without having going to the file new uh the new file dialogue which can sometimes be slow okay so now things are structured seriously one of the best plugins ever yeah especially when working with blazer i think um yep yeah because how you have to create a lot of razer files right so um so so this test should be called something about like um uh will what's it called render columns um what was it again we wanted to test we wanted to only be the table so basically just trigger the component to see if something blows okay so we'll render empty table right without anything in it yes okay so in b units parlor uh i have the term component under test or c-u-t for short so anybody familiar with testing or testing terminology might sort of see the resultants to sut with the system under test which is sort of a general purpose description of anything you want to test but since we're testing components i thought it would be fun to call it cut instead so inside the test context it gives us a few methods that we can use to render component so the question i sometimes get is well why can't i just go new blazer grid no what's it called uh blossom offsprings why can't i just do it like this and you can there's no compilers here and if i run the test it'll even run the test the problem is i only get access to the instance of and you can see we have all your nice properties here and you have some methods in here but this just during the prop the component up doesn't actually test it sorry it doesn't actually render it it doesn't produce any markup so in blazer we have a clear brace of concerns between the components that define what markup should be produced and the thing that produces the markup in our case it's going to be b units test renderer which builds on top of blazer's native test renderer of the native renderer rendering engine and in when you're running in the browser the output of the component would be something that would be rendered into markup and put into uh into the browser uh either be it server side our client-side but so so we need something to help us actually render a component in a testing context and get access to the markup that is produced when we render the component we need a way to control the life cycle methods of the component we want to test so that we can test you know first render and subsequent redness and all sorts of things so that's sort of that's what unit incision essentially does so instead of doing our component we're gonna say render component and we're going to give it the blossom grid now since your component is a template component of source or at least something that takes the type of items you want to show in your table we have to give it something like a you know what what the items in the data would be so we can just give a string for now and so this would just render it out and we can well this would if it doesn't work it'll throw so let's just run this guy and see what what what happens and let me guess four milliseconds well so the problem uh the problem with uh yeah oh no let's not panic but the thing is the blazer compiler which is still in play it takes a little bit of time and then the compiler see sharp compiles of the time so i hope uh and shout out everybody if you can't read what the error message says here is it large enough i don't know if i can zoom in here a little bit small maybe okay let me bring it on this screen let me see if i can i think it's fine okay now it should be better yeah okay so it says can i provide a value for property listener of type grid and let's scroll a bit blah blah blah blah blah okay well okay i'm going to zoom out again and just tell you what what it says so what it's complaining about it says there's there is no regional service for type um laser pro blazer resize razer resize listening listener so laser components they can take the pattern season things they can have things injected into them and i'm guessing that if we go in and have a look uh at your component and we i guess we have to go into the plasm grid dot razor.c as the backend file we will see a few injected services so we have one service that is injected that is the ids runtime and then we have a second service which is also injected and that's the this is the race resize listener and that is so big is complaining now and saying well i can't i can't inject the resource listener because you haven't told me about it so this is exactly the same as you do in your we have your sample app down here you have a startup file and you say uh add grid i guess or yeah or was it use use plasma sorry uh yeah add plasma yeah so so that that's the second burn i haven't updated my sample code okay same api fan off uh jimmy you know self burns are the best kind right so if you haven't updated your documentation so yeah it basically tells us to we need to add we need to call the ad blossom plasma method which will set up the necessary services so you went halfway yep yeah well so because uh x units will run the constructor every time uh we run a test we can just do it in the constructor because we're probably gonna do this in all our test cases so another thing that b unit comes with is a services collection just like you have in your program.cs or anywhere else basically where you're using a microsoft depiction injection type and we have we actually have both ad grid and that blasm so let's let's take do what the documentation tells us to okay so let's try to run again and see if it stops complaining about this so this is an example where we see how we can add services and if you have a service that you need to mock maybe you have a data service in your project or maybe you're testing a base application that that pulls data in from an external service and that is exposed to the component through through a service but injected into them then you can go in and register maybe a mock or fake version of that data service and have more control of that so now we are all green so basically now we can render the component so what should we should we uh should we look a bit at the market that's generated and see that we get a table or what do you want to to to do here should we uh um so i i don't remember exactly what it's supposed to render at this point i believe it's a table and so we can have a look so at the minimum use you're basically telling us well we need a table and we want to have something like this we want to have a table with this property and then you have some column that is being added then you have from group by and and and and so let's start with the saying that what should be rendered is a table tag okay so we're going to find the table tag so if you've worked with jquery before you will recognize this this is the find method it takes a css selector you could also if you wanted to inspect the whole dom tree so the unit doesn't use a browser so if you are thinking this is uh uh ui testing using selenium or something like that there's no there's no browser involved in this at all that also means tests generally run very very fast compared to using something like saline selenium or another headless solution like puppeteer or what have you because there's no browser that needs to spin up in the background and be all instrumented and such but we do use another another great library uh called angle sharp that basically can take the raw markup we have and turn that into a dom tree and it has the full html5 apis you know from the browser available inside it so you can go into nodes and then you have you have your query selector all and all of those methods are available to you if you want to just traverse with dom tree i've made some of them more easily available by having a find and a find all method but we're going to assume that that's going to be a single table in here hopefully put it in hopefully yes and if we want to uh should we verify something about that table besides that it is there should we we can for example check that it has the right um something like this i guess something like that maybe so so one and we can say well there's does something called a classlist in a table and we can say should contains [Applause] and here we can contains and what should contain table and should be true let's see if i can get fluence versions to work yep and we also want to have table script in there we could also just use git attribute there's many ways to you know and say give me the class attribute and say that it's do i get here i get a string and that should be so let's short circuit a bit here and say that should be equal to table something like that and if we run our test again this is super exciting it's gonna be green so we we went green again so we were able to find the table with that uh class attribute so one thing i could show you um because i'm we might actually i don't know if you just render anything else that's another thing we can do we can say table and we can say markup matches markup matches is a special assertion method i bring in with a b unit it will do a semantic comparison of the markup of the table in this case and all its children and by semantic it means semantic from a html browser perspective so in html and in the browser insignificant white space like the like the ones we moved up here they don't matter so the browser will still print out a table and it will look exactly the same to the end user uh it doesn't it also doesn't matter if we change the order of these um you know the table will still look the same so when i say it does a semantic comparison it will it knows to ignore the order of class attributes it knows to ignore the order of attributes in general it knows how to know it knows you know how to ignore the the order of uh um oh sorry attributes i said did i say that already yeah well you know i went into a loop i guess so what we can do is we can say well i expect there to be a table that looks let me just get my copy paste right here that looks a bit like this and so now this is not right so obviously we don't have an id uh that looks that has we have an id that has something like this in it a table with something else and that's something that's generated so that's generally kind of hard to work with but what we also support is modifiers in our code but let me just comment out this here and let me run it again because i'm pretty sure we're going to see this fail now and we can look at the error message so we're going to go a little bit slow now and see uh see a few options we have for assertion sorting and and and understand a bit of what's going on here so let me let me actually do something else let me pull this out so have it have it like this as its own window and then i can zoom in again so as you see here what we are getting in our search and era it's telling us that the actual html we are getting is this and the expected html was obviously not quite there so you are basically rendering out a table that looks like this with a few you know actually two table bodies and one table head and a tr um if that's not important to us initially we can and i do hope i remember uh all the syntax but we can say so the first thing we want to fix is the well we are obviously not gonna get this right because i assume this is something you generate dynamically every time you render something or at least the first time we're in the table so we can't really assert against that but what we can do is uh we can say well just treat this as a regex and then we can go in here and say well anything from here and out that shouldn't be a problem and that will mean that it will make sure that the id attribute starts with table but the rest of it if my regular skills are somewhere if they're still okay maybe it should be not i don't want to catch a group like something like that then that should you know match our match any other text that comes after that basically we could also just say well i don't really care about this uh this is just you know something i have in there for for some use so i cannot say just ignore this attribute and i won't you know we don't wanna we don't wanna show it against that um so let me jump back here to this to the donation and show show uh what other options we have so under here customize the semantic html comparer we can see the different options we have so we can just div ignore which will ignore the attribute we'll ignore the entire element that's not really what we want in this case this this guy will just ignore the the the class attribute and then we can also change how the white space is is sort of matched we can change different changes to different uh styles if you want to for example if you for example dealing with a p tag sorry a pre-tag pi uh then you normally want it actually to assert on the white space because then that's important like if you're showing code on screen then you want the right indentations there so then you want then it actually so by default it actually changes it out uh it it understands also the markup matches also understands that now we're looking at a pretext so now the advice base is significant but if you want to change it over so it's not a significant you can control that like this you can also say tell it to ignore case if you don't want to be case sensitive and and so on and so forth so so that's the first part and if we run the test again i can just go in here and click run we should see hopefully if i get my regex right that it at least stops complaining about the attribute so so you might be wondering what is the advantage of of uh of doing something like this and using markup matches and being so precise with your markup and saying i want exactly this as the output and well the advantage is that you obviously you are very certain that things don't change but the things i haven't broken what micromax just gives you is a way to be sh to be as loose as you can while still being strict meaning that if i go in and change change this around and run the test then it shouldn't start complaining about there's something wrong with the class attribute uh it should still continue to work uh and so let's just cheat a little bit and copy paste from the copy paste in here from from our results oh i need to uh can i just do it like this so it's trying to be helpful and formatting things for me uh-huh and at least they tried yeah i have a plug-in called smart paster which helps quite a lot [Music] but not always as you see okay so now we are i guess quite strict but we still uh loose enough that we are ignoring some things in here and obviously this doesn't match exactly what you have in uh in your component because we have a lot of white space here to the uh to the left which you obviously don't have here but since markup matches already sort of understands that now we should be now we should have our test passing um so this is sort of how our hello world for for plasm that uh sort of asserts that this is what we always want to have and and uh when we do basic uh when we do basic uh just render basic blossom component so i guess that is the first test jimmy are you happy with this um i am yeah so what should we take next speed yeah that's the most important thing i like those small green check marks and so you can also ask what is the workflow right now we're sort of cheating a bit because you can just render your markup and use markup messages and and then copy paste in the what you uh what you what you sort of get when you are because you already built the component if you want to do this test run development style this actually also works out quite nicely maybe you have a designer that has already uh done all the hardware of figuring out what the markup should look like and maybe provide some css as well and some javascript for you and you just have to you know make everything actually come to life then uh test run development becomes quite easy in b units because then you can plug in your markup like we just did here and then you can start writing a component and you know create the create a code code on it until you get the markup you expect out uh for the scenario you want to uh now we're doing it in the opposite direction and that's fine as well and and then i think it's also quite fine to cheat well not not cheap but basically just copy paste the the actual marker out and say well this is what we currently expect so if you at some point in a little bit later go you know uh changes something uh somewhere else in blasm grid uh and you certainly start seeing test break then you will know well okay i changed something that might maybe should have shouldn't have broken and then you can go in and either fix the test or change the test or you can you will be alerted that that's something that's broken now so that also makes this very good for regression testing catching things like this so so the next test so there are three different ways to add columns or it's actually the same way of adding columns but there are three different ways of of getting the name of the columns so one way is getting it with the display attribute so on the class you would have a display attribute and you would get the name from there oh yeah okay uh is it ah here we go yeah so this is the yes yeah so you have some sort of test class with some data in it and you say comes from attribute okay and there were two others yeah and uh you can set the title uh attribute or the property of course on the grid uh grid column or you can just leave it out and you would get the default name which is the name of the property okay so should we we can test all three that should be interesting so which one do you want to start with let's start with the display attribute okay so for that we will need a uh renders uh column name based on display attribute something like that you know maybe it's hard yeah yeah we're up to a good start okay so i'm guessing we're gonna need some test data so let's create a class down here called uh data and i believe you had one in here we can just steal or at least just keep things very very simple so [Music] you even call it chest class [Laughter] here we go it's like you knew yeah and the names of the properties are are really imaginative the string is called wait for it string yeah okay then how would i know what it is yeah so display is it the system component model data annotation uh yeah yes okay good so um so we still need a cut we're gonna say render component same component gonna be plasm grid and this time we're gonna put in some data in case you're wondering and we need so now it's actually now we get to show off another thing that that buried helps with so now we need to pass in some test data um so because i'm lazy i'm gonna go ahead and add a dependency for a library called auto fixture that will help us just generate some data based on the types we need so let's install this guy do you know auto fixture already no no so auto fixture is just something that will you can ask to say i'm going to need some some data so create create some instances of data and give this some random data in it and that's just what it does so let's add a private fixture and uh call it fixture already new go so that's gonna be that's gonna be auto fixture dot fixture ah so we gotta have some naming classes here interesting so i also have something in b would call the fixture but also picture has has a type called fixture so we're going to use that one and um so here we can have our test data and we just tell it to tell the fixture to create i guess we would want to pass in a list if of uh data yeah so yeah we need some connections in here as well and i need to include i need to add i actually haven't used also fixture before uh with uh with the unit so this is gonna be interesting see if everything goes up in my face okay so this will give us a list of uh data items with some random content in the string created by autofixture so now we need to pass in that data to our component so normally you do this um where do we have an example you do this by setting the data property so we'll do the same thing and so how we do that in there's a few ways to do that a few ways of doing that in b units one of them is using a stronger type builder pattern which i prefer because then i can refactor my components without having my test break so basically you pass in something that looks like this a lambda that takes a parameter builder it has some methods on it one of them is called add and that method that add method takes two parameters it takes a parameter selector so in our case we want to select the i the data property so p right now refers to the type of component we're trying to render and i call it i call it parameters a p for parameters i guess um and then you say well we want to pass data into the data property uh uh well i guess in laser parlor that's a parameter the data parameter and what do we want to pass into it we want to pass in our test data and then it's happy so we now we want to go ahead and we want to inspect the head right of of our we wanted to see if we we get uh it's just one column inside the table head and that column should be named that should have a value so if we go cuts dot find and let's say we want to find a t hit we want to find the table row and we want to find do you use t h for the table heads do i use th for the table head that should be a question that i could answer one would think oh you do yeah yeah so you are semantically correct [Laughter] we'll get so many birds today this time you are semantically correct so that's good so we're gonna exp so i'm i'm gonna use find so find will find the the single th we have and we're going to expect that to be one if we did find all it will result as a connection and then we could take the first one but since we are going to be very surprised if there's more than one column because we only have one you know property in our data type we can safely say t-h-t-r-t t-h and for everybody who's been playing with css you will recognize this as just a random just a classic css selector now what do we want do we want to look at the text context the text content of the th that's the one that things should be reasonable yeah so that is not surprisingly a test text context property and we can say that should be and i'm going to copy this up here because that's is what i assume we we expect it to be right i i do too yeah okay should uh should we have a drum roll uh let me while this builds let me go in and remove target framework and just have the class name because we are not multi-targeting okay okay so this is good this is interesting so this test requires a js ids runtime to be supplied because the component on the test invokes the idea is runtime during the test and then it tells us the invoke method was blazard.internal.virtualize.init oh interesting so um this is uh this is a now we gotta really gonna dig a little bit on the edge so you're using the virtualized component under yep yeah um this version of b unit doesn't support visualize but the nightly builds up on github does so i'm gonna you know walk out here on a very big limp and let's wish for that so we can continue and this is uh let's see let's see i just need to be sure that i'm in the right folder and i'm gonna change that to something like that okay so if you dear listeners or viewers want to help out with testing b units every time i push something to my dev channel there is a new version of b unit being created that pushes i guess the nightly build of that with the latest changes to to the github packet repository so to be able to download look at packages from that you need to do a little do a few things i've added a small guide to that here in the top of the discussion for us on b units website uh beerus github repository so and when you've set that up you can go into the releases down here and oh sorry not releases packages and here we will find the latest let's see here we will find the latest version of the preview one which has this thing this git commit hash attached to it so we know that it's it's very very early beta put that in here it's a preview of the preview of the preview or something like that okay well let's be honest jimmy would probably prefer using that from anything actually released okay so let's just talk now this is double testing we're testing blossom and pre-pre-released okay so it's it's pulled down everything it needs so well let's just run the tests again and see what happens come on yeah drum roll oh do i want to use a telling code sure enable it and okay so uh now we are rendering uh but it isn't finding any elements um right all right okay so why are we not finding any elements could well we we did supply data right yeah so let's see let me try to understand what is going on here well your head is actually being rendered without virtualized right and yeah yes so so so so let's see let's see this is the part i like what do you do when things go wrong yeah yeah so how do we run the absolutely latest thing possible yeah so yeah so let's have a quick look and see what do we actually get out so now we rendered something and what you can do if you find yourself in this kind of situation is that you can debug and then you can go and inspect your component on the test and i'm going to zoom in a bit for you guys at home and you can see here we have some of the different properties that are available to us we have uh something called the markup which is just the raw markup that is being produced and we can see we have indeed produced some markup but not a lot and we can see here we have our th but it doesn't have a column inside it yet so what's up with that yeah so let me try something so what it could be is that when are we actually getting the data assigned and when are we actually rendering out the data and are we doing this asian closely so we we're using the items provide result uh with the uh um with the um thingy i'm totally blanking oh yeah yeah in the meanwhile we do have a suggestion from the audience yeah go ahead i don't see the chat anywhere a column yes we haven't defined a column there you go we need to define a column as well oh i think actually i know what don't we need to set it to automatically generate the columns doesn't it yeah that would work as well yeah nice catch okay so um how do we define a column in let's go back here into our oh so you have to specify grid columns okay but wouldn't would is that still needed if we if we um if we use a oh so it's just a naming yeah but but what you can do you can do uh what you suggested you can do the uh auto generate the columns let's try that all to generate columns and we're gonna set this guy to true yeah okay okay now now we're testing the documentation as well so it's a triple test yeah awesome oh wait a minute let me go in here and so the guest speaker and the chat room room knows my component better better than i do yeah well you know have a tab room for right okay so so now we get a failure but we get a failure we can understand so it says card find text content we expected that to be comes from attribute uh with links 20 but string but it has yeah so basically apparently it's not picking up um it's not picking up uh the the attribute uh so am i doing something wrong because i'm not entirely sure if the auto generate columns uh will uh will use the display attribute or not i'm not sure that i have tested that okay actually that is probably true it looks like it yeah so let's uh let's try and and uh add a column as well then okay so let me um let me this this might be a good place for for me at least to to get to know your project a bit better by going into a razor test and just seeing how it behaves with if we do it like that so we're just gonna call it blasum grid razer test dot razer and have i lost my trade of fort here oh uh i thought we're gonna need uh so if we go to b units and we're gonna say right in laser test syntax we're gonna need an imports just like you do when you're writing when you're writing um regular razor tests uh and because we want to we want to have x unit we want to be unit in there we want to have angle sharp and let's just throw in everything for good measure okay close this guy down and now we can go into our razor fan and say it should inherit from test inherits test component base so instead of inheriting from component page which is which is the usual default one we have in blazer we have something called a test component base and now we can say fixture and component on the test and our component on the test is the um blah blah some grit and this guy wants to have something for input i think data and we can just put our data down here code code and private list data oh let me just go and grab our find class here and put it in here and test data new oh and i'm gonna need my because i'm lazy i'm gonna need my well okay no let's just say we're all lazy yeah well let's just make it a bit more obvious what's going on so we can say new data oh and it's complaining because it needs we need this guy we put that into our where do we have him here did we check the output the last time so that yeah sorry no sorry go ahead i did i was thinking because i'm looking at the code and i think it should be rendering the uh the names with with autogenerate as well okay yeah we can have a look uh and no it should be fine come on rachel we have from the chatroom that it shouldn't be date it should be data ah you're a fire today that room requires me to spell correctly as well thank you okay so we want to pass in our test data and we will want to so in here you have something called grid yep yeah like show and then you have now now i'm um it sounds like i know what i'm talking about but i'm okay we're gonna have to check it out yep great column great column okay and what should i put on this uh just a field so uh yeah exactly and whatever we called it yeah okay okay so uh this is our sort of our setup so we can write something in here called uh now i'm not going to spend time trying to name this because but so the fixture up here it takes a test and it has it takes a test method as input so and you can also give it a nice description so users display attribute to name column and in here that's just for for parameters sake no okay so in here instead of saying render component we can say fixture dot get component under test so that gives us the same thing we had before where we render it and pass in parameters like this but if you have param if you have if you want to pass in multiple parameters or maybe like in this case where we might have to actually pass in templates listed things it might actually be easier and faster to just write it out in razer and get the help from the editor but we can jump back then we can go in here and we can move our assertion in again and this is gonna complain because we are missing this guy and let's put him into our using statement again here like so and here we go so now if i go to my test explorer i have my test here as well and if we just run everything we can see if that changes the output come on and you can see it even picks up the name of the of the oh that's nice oh oh of course and and in in in this test again we also need to add our listener so um so obviously let's just add a void well let's just have it in line doesn't he have enough unnecessary spacing there hey uh let's see so we get a fixture in here and the fixture has the services collection and that has the add plasm to it so that should be it obviously if you have multiple of these in the same razer file you can just put this and you want to have the same setup as if all of them you can just put that into a method you for example put up with a code block up here so you can have multiple code blocks and you can even have code blocks inside of text as i have it here i just have it in here because it all belongs sort of to this test but you can have multiple code blocks in your in your code anyway let's jump back here and run it again and see what happens so and we're spinning and we're waiting and uh no it still doesn't want to pick up that name but it might not be you let's have a let's have a look here and and we can we can step into this and and debug a little bit i'm going to go back here because it's a little less code to look at so the reason why i default to writing c sharp based test is because they are more dense they're more compact you can basically have more on screen at the same time so let's step over here and here here we can step in and have a look at our markup i'm gonna zoom in for the rest of you guys so ah actually let's hear it i thought string here's all string let me see if we can have it shown as xml instead so it's going to be a little bit easy no no it's not valid that was not easier to read no that was nothing there okay let's let's just see so yeah it well now we don't see the marker but we see how it would look as as well let's go back to i think what what is happening is that it's adding some extra markup for the uh sorting as well perhaps yeah but but yeah so but we do see the name string here uh and then you have uh but that that should be fine that should that shouldn't actually be part of it so the problem is more that we are actually not getting what we expect we're not getting the as the test right through the cells we are not getting we're not getting the expected um oh i'm trying to zoom out multiple different ways at the same time so so uh how do we want to go about this should we go in and figure out why why it's actually doing this or if it's not using this display attribute or because it is clearly generating the columns but it's just not picking up the name all right they should um for some reason i thought it was supposed to print out string but that's not the case of course uh no i guess it should it should be it should be this right yes yes yeah absolutely okay so i wonder why it isn't so let's assume that that part of the component is broken for now sure i think uh apparently i have uh well so you talked about test driven development so now you have written the test and tomorrow i'm going to do the development for that test right that's that's what the demo was all about what we were doing right now okay oh yeah you guys planned this yeah so one thing uh that could be um so if you are actually first so we can try one short thing here because something that could happen in in blaze and something you might be doing i i haven't looked into your code specifically but what you might what might be happening is that you are first just using the string name picking that up but then you are re-rendering uh a second render where it updates updates to the to the to the right sorry to to the to the right expected name is does that ring a bill don't think i do but let's just we can do something like this so because sometimes um we run into an issue like this where we have uh we have something in our component that does something asynchronously maybe it's waiting for data from somewhere before it actually performs a render or maybe it it renders something and then there's some timer or something else that triggers the component asynchronously to re-render itself again the problem is this test runs in its own thread and it runs runs in in the test context of sorry in the synchronization context of x unit which is just a fancy word for saying that it has its own thread running in and the b unit renderer which runs the which runs runs the blazer render runs the component rendering life cycle in a different thread and we need to have two threads going at the same time because some components and it's not not an uncommon thing in blazer we have two components where one of the component while the component on a test is doing something asynchronously it might be having a yeah that might have a timer for 30 milliseconds before it does something maybe to to sort of work with animations in the front it knows that i have a css animation i just triggered by rendering some class and then i want to wait and then i want to do something you know it could be something like that it could also just be that you are waiting for some data to come in uh the the weather forecast fetch uh fetch data that is coming in asynchronously so first it's just rendering the loading text on screen and then it's rendering the table afterwards so if something like that if you have something in the components that that sort of for some reason or another has to do something asynchronously we can tell b units of the test thread to wait for this assertion to pass and what it will do is that every time the blazer renderer tells b unit now now i've rendered something then it will rerun our assertion and try it see if it pass and by default it will it will wait up to one second which is normally more than enough normally you don't in a test setting don't have that uh have have need for maybe one maybe two to five to ten milliseconds because the rendering cycle is so fast when you're just running in in in test mode and you don't have necessarily a real web service you're waiting for for example so let's just try this and see if it's just because you do something some asynchronous magic behind the scenes um and we are running might be the problem is that it's so i'm checking the code and it has a title so it's getting the title based on the field so the field uh can't be null and the type can't be null as well so i wonder if it might be that you have to set the type as well on the grid column as you can hear i'm not using this feature a lot okay on the grid column sorry yeah yeah so if you type there type uh to string well that uh no it should be the um let's see it should be uh data i assume that perhaps uh type of data i didn't have a sample of this so we will there we go yeah let's try that let's try let's try running this guy up here and see mint cookie i think you just say mint oh maybe but hey cookies and men don't no dice all right but but we can come to the drawing board tomorrow yeah back to the jungle but we can we can write the next test because i think you have a a way to specify the name explicitly so we would want to have that so not how to generate columns but uh based on uh i don't know uh column uh uh based on name have no well okay what's the hardest part okay so so how do we well actually let's um let's leave this let's go in here uh because it might be easier so how do i do i say name here title title title and i'm just gonna just for for fun just gonna name it foo and see what happens see if we actually get to see something other than string yeah okay so now we are actually getting something now we're getting foo that's good so now we can jump into autistic and and we can something about the component that's working well okay well that's the point of testing uh dvd that's that's for finding box right um or at least uh figuring out how to to use the component correctly so here we see how to pass in this this is basically a child component you're passing into the blazer grid and we see how to do that in our uh in in in razer syntax uh let's jump back in here and and do it here as well just for people just so people can contrast so i have some extra methods here i have one called add child content and the first one we want to add is uh and now i already forgot um blazing columns right yep in the columns he oh grid columns is not a object by itself it's the name of the child content ah okay so it's actually just a parameter p dot uh grid columns and what does he take for input he takes a render fragment i assume that sounds reasonable yeah so we can actually do it like this we can say you're gonna take you're gonna add now i can't remember my own work oh yeah so what we're gonna pass into him is gonna be a uh what's it called a grit column yeah i think that works no no no oh man so i just created something that actually was supposed to be quite nice this is a this is a template um yeah the problem is this is still this is the newest bits and i haven't documented it yet a couple months since i last wrote those test board i'm pretty sure we're like pushing this really really pushing it okay um um okay well that's the fun part yeah okay so so for the folks at home uh at template no no um ah here we go we can say at child content ah here we go so our grid columns he needs something inside him as well let's call him gtc gcs now i'm starting to remember and he he needs a great column i hope no no can't do no can do so so while you're figuring that out uh for those who you have who haven't worked with blazer a lot maybe so the the blossom components has a render fragment and in that render fragment you would put in grid columns and those will render i'll er out um will render on the page and at the same time register on the parent components so that's how that works together and now i need to find my let's say let's see let's see no oh wait a minute it's not under it's under here i really want to show this off because i work so hard on it let's see [Music] let's see see nope it's in the builder tests and we want to find the child component now so this is a parameter and and that's a render fragment of t right nested object builder ah so i probably need to do something like this yeah so this is gonna be a grid column okay hmm yeah no complaining yeah so uh this is sort of where we get into that territory where it's not particularly uh as you can see this this quickly becomes it's more more more dense but it's yeah and here we here we go on to even for this charcoal we want to pass in more parameters right so we want to pass in um dot add for this guy we want to give it a um we want to give it a what was it we wanted to give it a title uh title yes so let me just say oh yeah fields should this be necessary uh yeah yeah okay so in this case for this particular component it feels like the eraser syntax is going to be a lot easier yeah you you quickly get into something where you kind of want to um yeah this is easily a bit more tedious but let's just uh push through right string so this is uh this is the field for the grid column and you can sort of if you squint a little bit you can actually see sort of a little bit of markup structure here and we also want to have and also with these nested lambdas you have to make sure you don't have like you can you can reuse p and we also want to part in title and that should be comes from attribute as we settled oh we can just call it foo because now we have that and if we can yeah and we can move this out of the way we don't need that so and here we expect it to be foo and let me just reformat everything ah and visual studio i don't know i mean not even on the preview but it you know no point i exception from visual studio that's uh oh well that's business as usual these days yeah unfortunately i think it's the new analyzers they've introduced in visual studio in 2017 and and they're sort of iterating over the code and i guess they're not built stable enough that they actually the component does not have a child content ah so ah let's see so i probably ah wait a minute oh can i just go like so that that might make it a bit yeah that's true right so the triggers uh jimmy once you start writing your documentation for your library then you actually remember how to work how it works [Laughter] and and this is a new thing ah so here we go now we're passing uh okay so it wasn't actually as bad as it looked like but but basically it's as a way to say for grit for the greek columns i want to pass in something that renders a single grid column and i guess if we want to render more columns we can just go do it one more time and say we're gonna add two grid columns that would be equivalent to duplicating this line but as you see at this point it's probably easier just to stay in in razor mode yeah for for our case here so let me let me make this file a little bit easier to work with and move this out here so we just have some common test data and we can even have foo and bar here you know okay and oh need something here okay so it's this is very minimal uh and that makes sense when you want to test you don't you could if you for example have something special that happens when you have more than one grid column then you would obviously maybe want to add that maybe for example if you want to test sorting at some point yeah let me also move my data class up here so it's a bit sort of this is just common code we have and okay so this is our first test i guess um and if you want to should we continue i guess we we continue in here for now um let's write a second test or more tests let's call this guide test one just one and we can have a test two here okay so what is the next test so now we confirm that at least we can you know get a title out in our component yeah so the next test would be uh leaving the title out leaving the title just rendering the uh that would hopefully it would render string then yeah should we actually uh test the alto and we can do that at this point so that would be uh because because i think it then it's just very simple true if i could spell that would be okay and we will see what it actually does yeah i mean i already know but i'm starting to have my doubts i don't know you know something like that that's a good description right yeah okay so let me show off another if we for example now this is um this is not very strict right this is uh we we're basically going in and finding the first uh th so i guess that's actually a pretty decent way for this because there's no way that this would break what we could do instead though if for example you started if for example you started rendering so right now you are basically writing your th like this where you have your value in here right but if at some point you go in and refactor your code so that it renders out like this now you have it like this uh and where do we have that up here at the very top i believe it's in the grid um it's in the um grid com the grid column yeah look at column component it's rendering grid column well yeah so here you have a lot of things going on but if you decided uh well i actually want to break it out in multiple lines because that's going to make my component easier to read you know when i develop that would be completely fair to do and it wouldn't change the output in the browser for the user the user could see the same thing but um if we and i want someone to make check actually you can just have random markup here because it's just a razor file doesn't really care um but here we expect it to be string right string or even better we can say name off data dots to make our test refactor when friendly but if we run now we will have some test that breaks because we changed the order of your markup in your components so that is even though we are not asserting against the entire output of the component like we did in the first test the hello world just rendering an empty table we are oh we need to unpack these guys um oh interesting is it just it did run the test so okay it's working don't touch it yeah well it i think it's just the razer razor engine in visual studio that's complete so actually this was a very bad example because apparently this white spade space wasn't a problem at all in this case so but what i would generally recommend you do if you want to write tests that don't get affected by stuff like that is that you just say well i want it to be it should markup match with this or you can and then then you just when you are absolutely sure that even if you change the indentation but i think in this case with test context it actually didn't it already trimmed it down and removed any uh white space around it oh no i think i know what it is it's um it's our friend fluence version that helps us out so if we use assert.equals here and say i expect i expect string and then go like right you're not helping visual studio like so our friendly neighborhood well i i i know i i'm blaming visual studio when this meal can't hit the right key right but then i would be surprised if this doesn't break otherwise there's some trimming going on behind the scenes that i'm not aware of uh off of the display uh it takes test context attribute i'll be damned well yeah yeah yeah okay i guess um so but yeah in theory if if um if we have had a lot of extra spaces in here or if we had other insignificant white space then uh then we would have i'm just gonna undo my changes to your code but then we might have something we want to to to consider i think it's because it's an insignificant white space that in in and i'm only getting the text content on out it's not a problem but if if you have so if you run into these things and you have tests that become unstable because you are basically just reformatting your document when video editing then doing something like like this using markup matches will will make sure you don't have any problems with that regard right okay and hey it's caught up to us so that's good okay so so at least it's uh behaving now like we expected to this is a sort of test that i would you know that's the kind of test i would actually probably want to write in in c sharp because it doesn't have a lot of things going on so let's uh let's try another thing um jimmy what so i'm a little bit curious what what are the upsides of doing it in c sharp uh i mean it's you you talked about it it's more compact but this feels easier i yeah so in more recent i think that yeah yeah i guess and um for me the upside is that the editor here is just better hopefully with the new razer editor which is still in experimental mode uh microsoft is working on will improve a lot on editing experience like there are some issues where if you have uh like or formatting things or having um the the the dot helpers you can get like like these guys uh what's called the the the the refactoring tools those kind of things doesn't work particularly well in in razor files at least not in this uh this version of the razer editor so yeah and now that we are in here i can actually show off a new version which is in the preview bits that we've just switched to which allows me to do um well actually i need to create a new component but so let's call that plasm grid [Music] the razer testing 2 chest 2 the razor so in here in this version we can write a mix that is more close to what we have uh sort of get a mix of basically both the best of both worlds i guess so in here we just inherit from test context like we normally do instead of just we have our code block uh and here we can then create our effects so if i jump back in here and copy paste a little bit uh we can take this fairly ugly example uh and put it in here and so this will just run like a regular unit test uh it'll show up in your test explorer so right now the only problem i have is that the navigate to it doesn't always work so here um i'm missing something in my copy paste am i not oh i'm missing auto fixture that's what it's complaining about let's just add this guy again would you have a comment in the chat as well yeah no please interrupt me there we go there was a pr yesterday for the new lsp what's lsp that improved auto formatting 20 times that's a lot i i guess that the lsp might be the the new razer editor i don't know if that's short for that i hope so because that sounds really awesome [Laughter] the language server protocol for the new monitor right okay angle okay we're getting educated yeah yeah that's great okay so um i just want to say that that we are kind of running out of time but i still want to see this uh so if the chat doesn't have anything here doesn't mind i i would love to continue yeah okay so right now we still have the aucklandness of the still fairly intuitive parameter builder uh but it's still not easy to work with so what we can do instead is well here we have our our datagrid and i actually haven't tried this out myself so exciting yeah so the chat room stay at continue yeah good okay so what we have is a new method called render and we need to pass written in a render fragment so in the razer editor we can actually have inline render fragments so this method expects a render fragment and record fragment is just some markup that starts with an add sign so yeah and formatting is not a am i it's 20 times faster yeah wait isn't this right oh is it so i tweeted about this once isn't that always the case you find it in your own blog if you're googling something no no let me let me actually so if you are like we are doing right now we are we are on the bleeding edge of what vineyard can offer and uh you are trying out the nightlys always if there's something that surprises you go and check out the changelog so so i have one rule i never commit a new version to the 90s on this i've documented what i'm in in the changelog and there will be the unreleased section you will have to look at under and here you see we add the virtualized support anyway let's jump down here and see oh yeah so it should be this should be okay maybe it's just the editor that is still catching up to us so maybe if i put it up in one line here oh oh oh oh oh oh oh oh hang on oh there we go yeah yeah okay so um so the question is test data do i need to do it like this oh i need to say test data yeah so this is not light all right and oh and and the title will not match i'm going to have to change that to foo kind of the best of both worlds yeah and if we so you can see there are some small hiccups like uh in in um in normal c-sharp i have the small tingle here i can click and what's it called no small icon and then i can click run and debug and i have you know the the yeah the the test product on visual studio doesn't know that you know it's completely foreign to it that i'm all of a sudden have a unit test in my uh razer file but i can find it in here and i can run it and oh there's a build error so where did i go ah yeah okay so we can't have ultra fixture in here because there are something called a fixture in in oh and see this is what happens okay so undo yeah okay and save save and just to prove to everybody we're actually running let me just hit the keyboard yeah it's not just black magic you're not just taking it no okay no compile errors and building and building a building into debug mode and we are hitting our break point there so let's step over getting a test data and just to show off what if ultrafixture does for us let me zoom in for you guys whoops here we go so auto fixture has created a array of three components with some goblet glue in the properties okay so so that's just a quick way to get some test data and here we call the render this is a new method that is part of the next release render method and it's oh wait what's complaining about it's complaining about the resize service we forgot to register our reside service okay no problem so we can do the same trick as we did in the other class we can write cto constructor we go and add our services to that okay and this debug again so sometimes uh yeah so we still need some something in here that's uh like like for example the deep integration with the test runner but other than that i think this is very cool way of passing in data stepping over rendering and now we have our component on the cyst again with markup inside it and sumi sumi we see we have a tea body with three table rows in it we haven't written any assertion any test for that but you can sort of i guess gather where we're going with this that would be something like going in and asserting that we are actually generating three table rows um in our t body tag and we have our header and now our assertion here should pass as well and let me zoom out one more wrong way so this is something that still needs to be refined but um this looks i think uh it looks to be maybe the the best way of writing b unit components uh when we maybe hit version one um because it's as soon as you get into a component like this where there are quite a bit of sub components and templates and things you want to pass in and all sorts of stuff going on then this becomes much easier to to write it that way compared to to this and this version up here which was my sort of first attempt or on this where you catch where i use the this sub component here to capture what you are actually testing and then getting that through the test method it also has all the benefits of having this um you get the razer uh visual studio uh typing experience and uh also if you are if you have a camera component that you know takes markup in all of that just is much easier to to work with work with than having to deal with escaping stuff in you know in in strings like this so that just works much much better we could even if you i don't know so i can keep going all night i know you have a deadline uh oh so do stop me um but i want to if you quickly show how this could work as well for this this test here so we copy paste this guy in here and just show that you can mix and match as you will so we can still use the render component method here and just say well uh this is gonna be easier for me just to do it like this instead of using the render method so render method will just render whatever you give it uh whereas render component will render this component for you it's so that's where the naming is a bit different and that's also something i'm looking for feedback on here i can have anything and it can be any component any component tree here when i say render component it will actually builds it will actually create a render fragment that contains uh this for you so you don't have to type that out anyway so what i wanted to show off was that if we want to not have to write this markup as a as a c-sharp string well this uh the the inline window fragment functionality also works very well with just strings so we can just go like this and here we have you know all the usual uh no right inside uh c sharp code which is pretty cool i think and here we have our another test so if you run those guys again you will see that it should also pass you shall path now i can you shall not pass oh and it didn't and why did it not pass because jimmy said so [Laughter] you broke it jimmy oh i know i didn't remove my escapes down here so so uh fair enough it actually so this would also be a breaking change in in in html that you had messed up your wells this is still the same so like using if you want to use those um what are you called not not not those guys but those guys [Laughter] you know i'm blanking on the english word for for for those guys and those guys but uh you get what i mean right single quotation i have no clue what they're called quotes and single quotes yeah thank you no it's right it's right it's yeah right you know i couldn't even tell you what it's called in danish so it's not oh we can tell you in swedish actually i think we have it in the chat as well okay try to pronounce this if you want am i going to say something dirty if i say that no no no no it's just basically um yeah a common word for for a single quotation yeah what do you think okay yeah so a few other things i haven't showed up off would be so if you are if you're doing end-to-end testing and you're using something like selenium or test cafe or puppeteer or one of those frameworks where you also made a browser basically you take a headless browser and you set up your your blazer server or whatever you have and you tell it to go to an ul and you get some maga about and you have some javascript or you have some czar that goes in and pokes around like basically like we're doing here but it you know it instead of using angular sharp to represent the dom you have a real browser behind the back uh when you do that what you don't get is you um you don't get access to the component instance the instance of a component you are rendering and sometimes you want that most of the time you're mostly interested in asserting and working with the markup you are generated from component but sometimes you want to actually look into the state of the component itself and you have that available to you through the instance property and the instance property if i zoom in is as you can see it's the blasm grid type here and it's encapsulated inside the render component which is what we have out here we have a rendered component which contains this so this is our way to go in and inspect the if we have some properties we want to for example make sure that after we do something that some field has been changed or uh you know selected data select the data changed you can also we can listen to those by the way that's a way to do that as well but you have access to everything if you have if you have javascript that your component uses and we actually never got around because you've sort of uh you don't really have a heart dependency teams on javascript in your component but if you have a javascript interrupt this two-way you can have javascript called in javascript sorry you could have your csr component called javascript you have javascript called back to us if you have a method in your component where you want to emulate that javascript is calling you well you just go and call call that method directly and i'm going to zoom out because it's messing me up so i think you were telling me that you have something called export export data async that would do something right that is triggered by javascript a people users click on click on a button somewhere and yeah so then let me take a look here let me remind myself of what is actually doing but for the sake of example then instead of having to then you could basically emulate that click from the user another thing we haven't showed off either is in general it's quite common to have something that is user triggerable like for example your columns so in this case we are generating a column uh and this guy here our tr a th it's clickable right you have an on click event handle on on him if i remember correctly yeah it's yeah we have the unclick event here so and that that should single signal to to the plasm grid that now we want to sort by this column exactly so how do we do that well it's quite easy you just call the click method and that would trigger the click event handler you most likely have in here somewhere sort columns where elsie it's his down here or it i guess we shouldn't use pronouns for code so sort column would be called and can sort and it would call something i guess this would trigger a render somewhere up in the container that would so this container guy up here he has and i guess it's this our friend here he will have something in here that would cause data has changed uh probably not this guy but but somewhere else you have state has changed and that causes render and that would so when you're clicking that that would cause a render and afterwards there would probably be something in our and for good measure we could just instead of having to query for this every time we can just say our column column equals this then we would say column dot click and then we would have an assertion on our column and i guess there might be something you want to look into that so maybe you would say okay so you have something going on in here related to sorting maybe you have some sort of icon that points up or down depending on the sort yeah so that would be a great test for you to write where you say okay well after i've clicked my uh click my column and has something that has changed then you can go in and say well now i expect to have i don't know what we should find maybe we have a sub component under column called span that has an attribute on it of some kind now or well that all seems reasonable yeah yeah so we can write that system right now if you want i don't know how much time we have left i don't want to keep everybody up uh i think we should round off a little bit so let's do that but this was super interesting yeah definitely and and it seems that i have some uh test driven development going on some documentation some removing of the spacing yeah [Laughter] uh no so if i can leave the viewers with um so uh for the current beta 11 version all the documentation is up here and that is hopefully a good getting started section that will take you through the basics and if you want to live on the edge um there's nightly bills there's nightly bills uh the you know i'm written quite a few tests so hopefully they're quite stable and and there shouldn't be any issues but anyway if you want to have access to the latest version of the razer based test we saw here at the end and if you want to test the converter that you use the virtualized component from microsoft then you probably want to use the nightly um but so other than that i i think it should be fairly stable to use that i i haven't haven't had any complaints about it uh yet so hopefully that should be okay and and other than that you can go and ask questions in the discussion forum here if you have a question you can come in and raise issues if you think you've found a bug or if you have a good idea or something if you just have something that might be hard to test you want to make it want being to make it easier for you to test then um you know either raise an issue or start a discussion and we can talk about it if you want sort of more uh live um support i do hang out in here and answer a question in the gita channel and there's also other community members who are hanging out in here and and can help out if you run into problems and if you just want to follow along on and follow along on what i do i'm on twitter at eagle hanson perfect yeah so thank you so much for uh joining us yeah this was great yeah and the chat room seems uh seems excited about this as well that's great thank you everybody for for for for your patience and your attention it's uh i really love doing these things and uh and we even get to see some live debugging uh error handling error finding uh yeah so awesome yeah look at that let me know if you have very injured problems jimmy and i i'll be happy to airport a bit with you on on this and if you need more i can even send a pull request for for you know for the first steps we've done here if you like i would love to nice awesome let's remove that one and talk to you soon yes bye everybody thank you you

Channel: Coding After Work

Views: 751

Keywords:

Id: FpsCI3l6bxs

Length: 121min 27sec (7287 seconds)

Published: Thu Dec 10 2020