Angular Spotify #9: NgRx Component Store Unit Testing

hi good morning everyone um welcome back to another live stream uh we will continue uh with some cool stuff i mean interesting stuff for the uh spotify app that i was written with angular before so today we have uh cho we enjoy us and we will go through the testing component store because there's uh i was utilizing component store under some component and the interesting part is over testing and of course i'm not the guy who write a lot of unique text my friend joe you know about it so that's why today to help me uh on that and yeah without further delay let's get started so basically okay let me run the project again so you guys can enhance the uh look into it uh the structural project is the same so we has one app which is spotify there's a web folder i mean the the the leave here it should name angular spotify but i was just too lazy so i just named it web and then there's a lot of feature folder behind under under the web uh directory so there's a few component that was utilizing the component store and if you don't like i mean you haven't used it basically the component store is gonna tie to a component is it life cycle no yes uh not not lives yeah no you can call it life cycle but uh it could be timeline oh yeah so basically when the component it is line the component store is also in it and then when the component is destroyed the data in the the the stored the components also gone so it's not like storing anywhere else yeah that's the whole idea so we will look into the playlist so that is the playlist basically it green has the playlist detail just like let me open this oh we have some drawing easier so always there's a playlist detail and the palette track so there's two pieces of data which is actually i forgot how i saw data but you win you could expect there's two pieces of data i was storing in the component store itself and the component was this one i think like this component yes and you can see there's a play store linked to this playlist component and uh yeah so we can start from this component yeah absolutely and uh we're gonna test the playlist playlist store right yeah this is another 12 right yeah i think it's it's running on angular 2. all right so the first thing we're going to do is uh let's go ahead and create a playlist store all right now we have this file so now the next thing i want you to do is to install a package and that package is this one sent in the private chat oh yeah so uh why do we need this package so testing component store is testing out of observable basically because everything inside component store is stream we work with uh reactive pattern here in component store or utilized utilizing the component source so we're going to be testing a lot of observables and there are many ways to test observables um one of those one of the most i guess popular one is to use the marble marble diagram and marble diagram is hard i mean it's useful but it's hard to use or you can do something like observable observer supply uh observation makes testing observable a lot easier which uh we can we can get into testing it right now so just go ahead and install that you can install it yeah you can install that as a depth dependency so and by the way observable spy is created by a shy so he he's known for i guess angular testing guy so yes i think so he was focusing on testing fun yeah interesting so i think oh just take some time it will take some time yeah so basically you want to look for the ihs test is it ndx testing is it there's a document inside yep so this one is for the store if you expand the component store um on the left hand side components yes there should be testing if not then so basically testing component store and just like testing in the other service so yeah i remember there's a map or somewhere here no yep there's there's one somewhere in here if you look for mobile right there yeah so you can have um you can test with marvel's diagram basically you yeah you describe the marble which is uh so can you look can you look up like rxjs documentation and look for like one operator look for i guess like deep the balance time or map whatever yeah okay yeah go for that and now go to the uh the yep that one actually look for the balance time yeah so that's the marble diagram right there a b c d that's a mobile diagram so think about it this way you want to test let's say you want to test this the bounce operator right and that's your marble diagram ac d in that time frame so you can construct the the marble diagram like the acd like the bottom one and then you test against that so when you run a stream like the input is that a b c d so that's the input and then you have this d debunked operator and you want to test the device operator you would expect the output diagram will be a c d with the value a c d so it requires you to think in terms of like stream on time a lot yeah but this is a marble diagram so the the image in the graphics is a mobile diagram all right so if you look at this online 29 there that's a and then the uh the pipe which means that it emit a and then it completes right and so and they they say a false which means that a that the value of a is false so when you pass in uh you would pass in this mobile diagram with that value you're saying i expect this observable to emit one value false and then it will complete yeah so that's that's what it is okay sure yeah i think yeah get the the idea behind so you need to destroy your stream yep so now i think this is finished of course all right now let's just start with the test now just use it yeah so the first thing we want to write up right is describe right oh okay all right so describe means a name right and a function uh then for the name you can use whatever name you want but i usually use the the name of the class i'm testing okay so you just take back the playlist yep you take that and don't do that um do playlist dot name [Music] and oh okay okay oh i see i see so yeah we import it and then take the name you you gonna have to import it anyway oh yeah that's true but uh somehow it just doesn't like it i don't know is it not gonna play this playlist it should know i mean it's just relatively in the same folder why is that about no time maybe because of the test config for the test maybe let's see ah okay then okay that's so weird so type the name here yeah okay all right so i always do that for for unit testing like what class or what service or what component i'm testing i'm using i'm import that and then use a name instead of it writing the uh hard coded name yeah another interesting tip right so now the next thing is we want to uh i guess declare uh some variables uh the first variable will be that store so i would do just left store okay and the type will be that playlist store that's true oh get a co-pilot yeah of course okay all right now let's take a look at the playlist or to see if it has any dependency go back to play store you has all them what's up constructor i think i put it at the end oh wow okay all right we're gonna have to mark all of that okay so there's playlist player api and playlist yeah api yeah so can you can you do like multi-cursor of course uh like why uh oh that five lines yep and copy the all the classes the class just the class i chose the class yeah let's see okay okay yep and copy those go back to the spec file yep and right left i mean and paste that press that yep and uh do multicultural on these okay do you let mocked more something right yep oh so we just like the first one yeah so now is this chest this is just right yeah so give me one second for just let me see i have adjustment here i'm using jasmine for component store so why is that components oh this is my demo give me one second component store playground looking for it right now what should i have no i think i need to download it sometime uh no i got it it oh okay yeah yeah it should be somewhere here but uh all right yeah is it that component store playground this one i've had it never mind yeah okay maybe it's not elastic anyway yeah that's fine so for uh for chest for jess they have interesting i'm using something else to rage serviced i'm using spine object what is the type uh so for jest do you happen to know what is what is the type of um of something we lock can you can you go back to the spec can you go back to the spec file yes can you do yeah just do one type for this one do jazz stop just and let's let's walk there's a mark or something let's see mark's contact instant maybe uh there's a mark [Music] mark provider spy on spy on mark provider that's not a lot of stuff yeah is there like a spy object spy instant there's a spine stone spies let's let's go back to this later let's let's go back to the type later because i'm i don't know i don't remember what time it is right so now yeah yeah just that all right now go now you're going to have a before each actually you're going to have a setup a setup method a function a function called setup yeah so just do calls like setup no do function i hate that new function setup okay then okay yeah so uh for the mock player api service do mark play api service wow cc it's a little cooler yeah it is oh nice it is cool yeah but that that that's how you're gonna do it in uh with jasmine okay so technically we do the same but we we need to do like with the chest yeah it just doesn't have create spy object suggest doesn't have that so what you can do is do mark player api service now okay then okay what's what i want just this one so i need that uh it's going to be just an object oh okay for jazz it's just going to be an object and for all of these will be just an object oh okay yeah just object for now just object for now but for the player api service now uh what what method or what property are you using from the player api service okay oh like api does something so there's toggle play toggle play and play all right now go back to this so you're going to do toggle play it's going to be a gesture function function that's one yep that's one yeah it is an uh function you call it yep do the same thing for play so this is how you mark a function with just okay all right now let's do the same thing for playlist api service now find what you're using and mark it okay um no again i choose inject for but that's weird ah okay that is the get buy id and what else what do you want there's only one all right just so just get by id all right go ahead and mark that function get my id suggest that function okay all right activate the ground um probably just the firearm it's the frames yeah so just route that yeah all right all right so for params it's going to be a little bit different so go back to the store and just go back to the spec file before the function setup before the function set up let's create a let mock uh activated route params or whatever whatever name you think makes sense for you it's going to be a replay subject subject of type yeah okay i'll never already like import this tie before yeah okay all right is that just just double check that uh that's the type of angular router yeah it's still fine yep all right so now inside of the function setup online 15 like before before you set up your service we're going to do mock activated wrap ram equals a new play replay subject we instantiate that replay subject inside the setup function so this way we make sure that on every test we have a new instance of everything so we play subject of params and we pass in number one one yeah now uh go back to the activated round when i'll go inside activated round i mean online 24 on 924 yep inside that new params yep that's it oh nice oh actually do uh as observable for the params all right so now um did you see what we're doing here we want to have a replace object for any observables that we want to mark and then when we when we want to test something before we actually set up the test we can just say mock activity brow frames next and next whatever you want so that you you get your service in the state that you want to test right you can you can you cannot you you can just not next anything so that it's undefined that params will never fire and then you can test the the case where you don't have the params or you can just next undefined or you can just next whatever you want to get into the state you want to test yeah now the mock store is a little bit different the mock store is the global store so just go ahead and open up documentation of ngx testing all right using a mock store that's what we're going to do uh just go to that oh it's actually here it's already okay uh it's not going to be this just yeah let's store mac store over there so we need to do provide mob store with some indie source that no um that's no uh online we're gonna we're not gonna use provide mock store okay because we're not using the test bed oh okay okay yeah so that that would be your type for your mock store the mod this one yep okay so we just use also uh so we can just put a type here yep but the type of that one mock store doesn't work it's from nj store testing which is too lazy right so instead of provide mock store there's a get mock store i think a function oh yeah that's true okay now inside the setup function instead of the empty array into empty object to get mock store that's wrong though yeah it's just wrong but i mean they know what to expect what is interesting they know that we are going to call the phone yeah call that function that's the function that you're gonna have to call and inside of that uh you i think you have to pass in initial state or something so it's gonna be an object inside that yeah okay so it's gonna be an object with initial state all right now uh the initial state can just be an empty uh yeah for now for now and what what are you using the mock store in here for oh i mean what are you using the store inside playlist store i need to check so i need to select a few stuff and then this part of action uh which one are you so i select the field thing and oh don't uh don't you don't use the pipe select use the select method oh yeah yeah i oh wow i thought the select was duplicated and then the chain it was a pipe they they put back the select method the the reason the reason for it is that it doesn't make sense to pipe select with anything else yeah okay okay so they just look like the select method okay here it's also not very consistent because i was using both okay actually yeah just use select yeah it's gonna work the same yep it worked the same thing in the same way uh now what else do you need i should do select and dispense and no no i mean the dispatch in the select will be available on the mock store what we want to know is we want to mark the selectors okay so i select i don't know so that's your that's your local store all right so that is select this so that you you need that uh get playlist tracks loading all right so go back to the playlist store go back to the playlist store i mean the spec file the test file right uh all right you can go open up the documentation oh look up uh using mock selectors just give me a moment i need to turn off the sound somewhere uh okay just mute it go back to the documentation okay here on the right hand side you will see using a mock selector so that's what we're going to use so we're going to mark the selectors to set the result of the selector into the state that we want okay so here it has the select book and then they just take the book out i think and then they probably need to mark this somehow yeah so go back to um go back to your test um outside of the setup function outside the setup function and by the way add a new line between line 13 and live 14. so we want to like separate the surfaces the dependency injection and the properties so on line 16 add a new line uh add add a new line just a new line okay all right so now do let let mark the name of your selector one is it like this one yeah playlist yeah get the whole thing so we'll grab that i forget the type but we will get back to the type later so inside the setup function yes yeah go down to after all this go to the end of the setup function right before before the store before life 36 yep do mock store dot override selector okay yeah it's gonna be functional so we call it with something we call it with the get list selector the get list selected another mark the the true one the right one yeah get list whatever okay i think you have yeah playlist yep right there get playlist tracks loading right then i need to do now yeah get playlist tracks loading now you don't pass in the mark you're going to pass in the value that you want to override so what is the loading what is the loading return i think it's just uh maybe two and four yeah then that's it for boolean then just do a boolean two or fours instead of an object okay so just uh two then yep and then you need to import that it's gonna work oh nice so let's check what the type of the override selector i mean the return type of that it's going to be a memory selector of boolean so go ahead and type your mark selector this one yep so it's gonna be more a boolean yeah that is imported uh it's not boolean it's not it's something and then boolean so can you do any boolean any any uh boolean no no any and then the second type parameter okay okay so the ending is the uh the state of the store like the app state but we don't really we don't really have that so it's fine right so now go down to that override selector go out the that line assign that override selector to your mark uh watching uh okay place nothing like that yep just like that and now do the same thing with all the selectors we're using [Music] okay so let's select the one the second one is to get playlist uh i don't i'm not sure how to do how to do the uh selector with the parameter oh interesting yeah because i think i stole an array or something or the map and then i'll just give in the id so it's gonna be a function that returns a memory selector yeah i guess um right so we just create a new actually let's just um let's just uh select um let's just mark the actual selector instead of the function to go back to the go back to the store where you use that okay [Music] so so here the get playlist is just a function that returns the actual selector and this function this function takes in the playlist id and the playlist id is actually the params but we we already have the params marked which means that we can just uh we can just mark the actual selector and then whenever we change the mark uh the the branch mark replace subject we will use the same value for for the selector so it is it's fine okay yeah right so go back to the playlist selector.ts we're gonna mark that get playlist map oh we hit this thing yep okay so i go back to the stall and then i need to have the map somewhere and we're gonna mark it uh or are you gonna mark it okay so i'll put it here now yeah yeah we're gonna mark like we're gonna do lab mark playlist map this all right and it's going to be a memoir selector of any and the type will be in the map i forgot maybe it's gonna be oh interesting i think what you want to do no what you want to do that is that that that's that's that's not easy to mock because you need that playlist id anyway right you need that latest id and that's a new selector that's gonna get returned how do we mark that now we mark that interesting of course yeah can we just like has a playlist map which basically just a value and then um let's see let's see let's let's see let's let's worry about that later let's remove light 20. okay yeah all right let's just keep going all right what uh what other selector are you using let's see uh go back to this install oh okay so i need the playlist the whole thing which is weird why didn't i need the whole thing oh okay okay so the playlist that has the map i think so okay you will look into the playlist set is basically i have i mean i'm not sure if it's a good way to do the catching thing but i just have a map of like all of the playlists that i already load on the ui and then when you go back to to the same url i just not call the function again call the api server again so i take the whole thing i check if inside the map there is a playlist and then if there's no playlist and then i start to do the rest like go to server and guess it if not i'll just don't do anything because i do filter and as long as this thing okay have something and then i just read it okay okay right so go ahead and do uh get playlist state mop it's gonna get interesting yeah is it that params is interesting for sure by the way there's some questions maybe we can look into some of them so let's just do this get playlisted and then okay we just do any for now actually i know what the tire is so let's go back to the sideline what this what is big there's too many things so like over here oh inside listed and then what's back from here this thing something like that okay okay i'll do the same okay step which is equal to my store selector what i don't know what i want yeah so instead of an empty object you can you you can use the initial state of your of your playlist state right yes technically yes but i think do you export that i don't think so let's do that inside you have you have that but you don't yeah export it go ahead and export it technically i i don't like um so it's just this is silent i don't like initialize the map with no i i i prefer doing a new map oh so you don't i thought about it you don't have to check for no because i mean a new map is a new map that's true yeah yeah that's why i have this question mark because technically it could be no yeah i mean should it be no though should it be no i mean an empty map you can always check for an empty map right should it be no so like map or set i always initializes with like an empty like uh like a new map or new set same thing for array i always initialize the array with an empty array same thing with a record i always initialize the record with an empty object but that's i know that's i know you can you can go back to you to the test now okay sure yeah actually i thought about it but then i just decided to do it no um why is it so go back to spec file yeah go back to the spec file so we need to do this initial step no no um instead of the object just pass in the initial state yeah make sure you get it from the playlist is it that one i hope so i guess yeah um and one more thing that you can make it clearer is go back to go up to the import of the immersive state oh yeah and change the name of that playlist and necessary yeah do you hate testing now we haven't got to one test yet just setting up the setup file is always take time this setup is taking taking time and actually if your test is efficient or not it really depends on the setup right so now go back to the store again like what else do you use what selector do you sleep like this a lot that's fine i mean it's a real world this always happened cool we we'll get to that later we're getting we're going later we got the uh playlist all right and there's all practically no no we don't need to mark this oh yeah this part is already inside yeah we're going to test the dispatch later but we're not going to mark it so go back to the playlist store spec file what next what else do we need to mark now uh playbook uh the playback store so whatever what do you use on that one yeah so i has this playback thing is that the only thing you're using probably just it's just an observable right so all right just uh so now it is an observable what are you going to use in your in your mark uh high res i think no it's going to be no like i'm talking about marking it it's going to be a replace subject aya is a replacement yeah yeah so go ahead and do that okay okay let's install spike so here inside i need to have something outside which is the replay subject yeah do you know the type of that playback yeah i mean you know it's spotify or something right now it is playback step yeah of course i just uh now it's mainly i was extend the spotify thing [Music] yeah okay yeah i i send the playback state with other stuff just something i need okay okay okay so but it's data so it's going to be that spotify playback state right you grab you grab the data outside of it so online 25 there you grab the data you mean this one yeah so we yeah okay okay yeah we need that type the spotify playback state okay now this is interesting because i'm not sure because you run into issue with importing type from spotify so i don't know if the test file is going to be happy no that's fine i think it's just because the inside the library always they said there was a line inside the ts uh i mean leave there was a tie which is an empty array so for some reason it just doesn't like work well with the other type no i see all right that's fine so okay let's go back to the spike yeah [Music] playback uh do you want to stay or whatever instead maybe yeah spotify api dot it's 45 it's just spotify i think yeah and then playback state yes that's the one yeah nice so initialize this replace object online 25 oh what initialize it oh okay okay oh instantiate it sorry more playback state which is new replay subject yeah one yeah just one yeah it's always gonna be one yeah now use that playback state for your playbooks uh playback store so it's just an object right is it like data is it no just playback with the dollar sign oh okay that one then just do more yeah that's also yep okay all right now you have everything that you need so mostly everything yep now the first thing that you're going to do is to have an uh describe so go go down so so normally normally without co-pilot you're going to instantiate your store online 47 just like that 47. yeah yeah so this is because we have on the mark already we have all the dependencies that this playbook store or playlist store needs so we can just use uh we we set up automark we pass in that all of those dependencies so we don't need a testbed we instantiate we instantiate the playlist store ourselves with a new keyword so without without copilot that's what you're gonna have to do okay and make sure and make sure because you have because you have any type so make sure it instantiate with the right order of the dependencies oh okay okay yep so new player api is api random store all right it's smart okay yeah copy that's good and now online 56 on left 36 we're gonna have a describe okay so and inside the described is going to be initialized in is so like so the the the reason why we have an um an it i mean a describe block for initialize because sometimes in the playlist store inside of your constructor you have stuff like when the store is initialized you do something you caught an effect or you fetch from like brands and stuff like that so something more than just a store being created will happen inside of initialize so that's why we have a describe block so that we can encapsulate all the all of the initialized logic inside of this block all right so the first thing you're going to do is we always we always test if the store has been instantiated correctly so we do it the test name will be should create instance obviously you can use any text test name you would like yeah all right it's going to be a function you like function no like just an arrow function arrow function okay oh nice right now inside here we we're going to call uh setup there after we call it we have the store we can do expect store to be choosing which is saying hey after i call set up basically my store with all of these dependencies it should be instantiated correctly now run it uh oh okay ah that is interesting and i run taxicon go to your package.json i think there's always a command for tesla yeah run that you can actually you can actually um what is the name of the project of the playlist uh where the playlist store is being i think it's like uh inside of what wait what was it project project.json it's going to be web playlist data access so go to your uh go to your emulator json okay go to angular json yes look for that where playlist data access copy that name on like 60 there do npm do ng run that name colon test did you only run run tests of that project actually let me open it in a new one it's not too small i will just open up a new terminal completely like an external terminal outside yeah that's fine it's fine yeah okay and next one is my fail because you have stuff inside of your playlist store constructor there we go yeah so let's see what the error is we're gonna fix it so in the select youtube is not assignable to what is it route url is missing oh wow play this with raw so what is the selector you tell okay kind of confusing so i was calling something in the selector youtube and then basically the time i pass in is not the time that what they were expected is it uh what selected youtube are you using inside your test file no it's not a test file i think we i don't know i'm sorry inside your store yeah uh what selected youtube using this one it's loading yet media price that that's it don't think wait that's confusing though so playlist or speak it's like they do at nine six five sixty nine yeah what is that okay yeah oh sorry 69 uh what is this one get playlist with round okay um when you're using that plastic with brow oh wait it inside the playlist selector oh we don't test this file now but i we're not using that we're not using that inside this store thing uh can you go back to the setup function inside the test file okay maybe we can call something wrong uh yeah um online 46 do mock store not refresh state refresh for this one yep all right now let's wait we run the test this will be a watch um mode but i forgot i i usually run my test from webstorm so there's a window to run the test run yeah it's the same error it's the same one browse url so there's something that is dealing with this there's something wrong with the selected you tell but you're not using that right you're not using yeah you're not using offshore yeah you're not using the selector at all inside your playlist store let's see let's see let me bring this small a bit so that get media playing state that is probably final oh what it's kind of massive so i take in some observable string or playback step no no no no should be fine not this one not the one selected youtube it's loading i think it's probably fine because it just doesn't deal place let's track clothing this one is the one that we mock that's the one we marked let's hope i can see playlists there's too many stuff before i actually go to um go to what what we can do what we can do is go back uh go down to the uh live 46 uh coming out the the store instantiated like formula 48 to like 54 commented out and we run the test so this one to make sure that the error is from uh it's from the store or from the other things so it's not related to all of them that we did let's see yeah let's see no all right so it's not related to this store and let's try to figure this out go to the playlist store again why is it the typing this is the typing error can you go back to the selected util or something yeah go back to go to that file inside okay scroll to the bottom so it's saying get details with round yeah go to that get playlist without url why is that screaming let's say route url return playlist so we give in the list of playlists and then we return can we see the error again because [Music] yep it's missing in type playlist object simplified what is the playlist object simplified why did you use that oh i think is it like the map thing that we were smoking is it so maybe the the mock the map mocking need to have additional stuff i don't know i guess there's only one way to go back to the uh small spike okay so that's all i think there's only one what's the map do we out do we did the map thing no no i think we i okay we we just scrub it is this playlist late oh yeah no like the one it is selecting so what is that get playlist state so go go to that selector uh you mean inside now go to that selector like inside of the store file that you're using go back to the store uh play this door and then this is the playlist yeah what is safe what is that selector it's just like everything from the playlist let's see so in you see that there's a knife there's a map why do you take everything again why do i take everything yeah actually i think i only need the map but uh you only need a map so you take place state say that map and i just try to get it yeah i can just i i can technically take the map only but yeah for some reason screaming the typing is wrong which is kind of weird list of user playlist response is not recyclable to type playlist response with wrapped playlist object simplified it's not assignable to type playlist with brown url yep so please the same but it just has an external url actually worldwide why need all of that oh okay so good play so this one it takes in the list of user i'll play this response let's give bike the this one yeah let me play this week on swift route yeah i'm not sure i'm not sure which is let me use live chat and move around quickly in the same time we can uh yeah some questions so [Music] uh playlist slate here we go to play this state it's that whole state it's kind of weird that you need that whole state [Music] you spy on and also those are play this selector get with this state to create features like to apply this state play this video key that is reducer we have that initial state map that let's use it with this response select the detail get placed with the ground [Music] first the plane is the ground what can go wrong playlist state like this state [Music] mock legislate yeah i'm confused like why because the arrow doesn't seem really related to the thing that we are trying to mock no it's not yeah please like route like so can we know like which line in this spec file was wrong no is it like design like that or do we like uh we can retry we run the command with the verbose flag like that's the rest or that that's what goes that's when we might be able to get more information [Music] all right so nope it's this is the same error say it's not cyborg type playlist response with round why why is why is it screaming that way because you definitely take in the list of user playlist response then you return that but for some reason oh oh i think i i think i understand why i think i understand why it's your code that is wrong okay oh okay go to go to the selected youtube oh wow okay select the youtube yes inside all right so the wrong thing here is that online 58 the playlist is list that user playlist response right so you're saying if i have playlist return this if you don't have playlist then return the playlist which is wrong you should return no instead or you you need to the type let playlist response with route or make the route url undefined or arsenal oh okay okay okay i mean but here they understand that in this uk it's just up then yeah i don't know but yeah that's the you need to return no or you return you make the brow url optional but i would return no here oh interesting i think tashav is like intelligent enough to detect that here it cannot be anything else because it doesn't pass through here okay is it gonna work now uh i think so uh but um yeah maybe okay let's see hopefully if if it fails then it's something that we we can fix all right so now we have a different error let's see wow local okay that one is uh of course five things uh is this inside of this file listen it's what why don't you have a service we don't care about the service the last video wait where are you using it inside the local storage service inside setting that access wait that is where it starts showing all of the area from different different places yeah [Music] i hope all of the people have watched you stay this is kind of weird is this because of [Music] is this because of thai script screaming [Music] i have no idea maybe just we need to no no no is it like we need to provide an environment here like you need to jazz dorm or like note or something ah yeah maybe when i configure the uh like like the library i just didn't pay attention for that uh should uh i have no clue i don't know to be quite honest with you because i said jstorm is like the simulation of dawn local storage right yeah so and if we just do nothing maybe that's two options when we create a library but hold on there should be like a test setup function let you remove it yeah there's a no the the file called test setup so why don't you go ahead and try create a new library yeah this is a test setup function that you might need that do i need it okay so it is all inside all of the angular library okay interesting so let's create a new file is it is your selected util it's not an angular i guess so uh probably i think at the beginning i was like all of the data access was always the most updated data access node library simulates the how how do we see it uh check the angular json oh check the project json right there project.json library uh doesn't really have that information yeah let's see like comparing with the angular yeah let's complain with the angular one you know let's just make it open yeah that doesn't even have a type yeah okay but here's the the thing look different here there's a lean hitting me out but here doesn't help so technically it doesn't seem like it is the angular lift yeah right now how do we pass it let me look it up let's google which is google just local storage and this is thai script oh okay and and what's weird to me is that like we we don't use local storage in the playlist store at all so i don't think we need to mark it yeah that's where i thought like because we only test this library the rest technically it doesn't really matter yeah however let's let's do this let's do this uh find wanna test setup test setup yeah find one of them four yeah for like feature uh yeah let's just copy that file and see how it's see how it's being used go to chess config ins inside this file yeah so there's a test set up right there so just copy the file and copy that line into local storage thing here yeah because that's where we using the jazz config so we just put it inside the source source yep pass the setup inside the source and update the chess config.js okay i think it should be somewhere here and then yep yep grab that one open that one open that one and yeah put it somewhere and now try again doesn't look like let's see yeah so because uh so when i work on angular project um i always create my library with angular library i think it's much easier all right same era so that didn't work jesus christ why can't how can we convert it into an angular right now that's a good question i have no clue um just like this like uh i need to open the game yeah let's see google just google uh yes here how to deal with local storage it cannot be mapped or spot by just jazz type script uh yogurt storage reference oh yeah this is easy inside the setup look like the one let's see that setup this one right you just scrub it [Music] yeah okay there we go all oh see if it right tricky stuff yeah now what i think should it be here or it should be inside the the one that has the look right now you have that certified api error oh no okay but now it's all over the place too that's this is uh annoying play this trick yeah yeah so it's trying to like basically typescript trying to run the test using whatever ts config you have inside of the data access a playlist so now you're going to have to provide a spotify api to the tsconfig.test.json or tsconfig.spec.json or whatever json file is using yeah ts config.spec.json can you add the types of spotify api here do we need it i mean here oh is it the timing this no yeah where you get the spotify api from it is from the thai folder from the thai folder like is it the same like this no it's just spotify no no the types you don't need types there spotify spotify this is it api i mean okay i think it's like sport desk api yeah i don't know what is it what it is yeah damn oh yeah because on the left i just take out the the type maybe the whole array let's see if it doesn't work if it doesn't work i think you can just use that like triple slash inside test setup again yeah right something else now oh i think how was that i'm always right now why is now it's actually the test error oh yeah yeah right so it's saying should create instance is false because component unauthorized motor component is not resolved okay interesting i think that maybe it's not the word all right so now go back to the store why do you use this component whether you use this component in the ui store wait what it's just it shouldn't mess with the ui store why the playlist store do i like i don't really call it somewhere else no like yeah search for it inside the navbar and that's it i mean this doesn't really touch the global solo it should not be touching the playbook can we can we find where is using that okay actually look for playlist playlists uh go back to the playlist store why though that's kind of weird let's store playlist not playback sorry uh plug this yeah yeah right is there anything in here that's touching the ui store at all no chance i will tell you because no chance so let's see what let's let let's see the stack trace you know let's go to the bottom uh go keep going down keep going down does it which one he's using like calling that and that is so good um hold on let you run wait run and wait for resolve component resources don't need that why do we need that package the core testing packages core testing can you go back to the uh um go back to the spec file sure place stop [Music] playlist store ninja store testing it shouldn't mess with these down i don't think that i even touch this thing inside here i mean like there's you shouldn't even like they shouldn't even have to the component thing in here we're not testing the component right yeah it's so weird but uh we only run this file and there's only one file or one test file in the data access playlist and yeah and they should create instances of the stories wrong right let's go down to did we put back the instant shade of the store we did this one ah this yeah why that's just weird of course now now it still failed because it doesn't true to you yeah let's see so if the new thing here is like causing error yeah it shouldn't you shouldn't i hope people still stay inside yeah it always happened kind of fail you have the same thing okay same thing so it doesn't really matter that i have no clue to be quite honest with you i have no clue why um and one thing we can try now one thing we can try before we call it a day and like make an um like part two or something like that yo of course you see try with the engineer spectator package oh so we just go in like install it let's pick that up yeah engineer just go ahead and install it [Music] npm so for all of the questions we will answer it in like 10 minute time i mean that's just a few so in part two and then we have another another session that's why unit testing is it's always something i never get into i mean i just never tried before so we do it maybe like when i start to write component it should be much easier i know but it seems like when we edit later on with a lot of stuff it's making harder yep so right now with the engineer we're going to import so go ahead and have an import statement in this this is file in the spec file so let's just have an empty object there and do farm uh it's gonna be from ng meat spectator it's just just okay yep so we're going to need to create service factory uh we need spectator service oh it's going to be uppercase spectator service yep right now online 15. online 15 instead of instead of the store it's going to be spectator service and then the type of the store the playlist store yeah all right we're gonna have uh instead of function instead of a setup we're gonna have a uh not not instead of just have a cons create service inside outside where you type okay so it's just like a row function no it's going to be create service factory oh yeah and then you pass in an object or something all right there's a service there's a service property it's going to be of type playlist store uh passing playlist store the class right so now uh what you need you you need the providers these providers will be your dependency of the store so you can do in go ahead and import mock provider inside the same thing yep mark provider and new mock provider called mod provider provider yep and it's going to be play playlist api service basically it's the five thing that you're gonna mark yep and you pass in the value is that mark apis that you create in the setup yeah do it for the rest playlist playlist api service oh you have play player yeah playlist twice so one is player one is api service like this then provider of of the store now it's start to be very intelligent yeah right oh wow see ah nice nice i did i guess okay so nice it's wrong now now it's the yeah you need the store you have the playback store already okay actually what do i call it just like not the store no just the store i know what i forgot where do i import it like store like and jax right yep okay um but now the create service basically in your setup function uh you have to bring this car crazy service inside your setup function oh okay we are operating how do i open this no please i also just forgot the whatever yep so uh yeah online city six pass that car create service online 66 basically after everything has been marked okay so just do is it chris service services no no the thing that you just type the cons create service that's it wait where's the gray service you have to bring the create service inside of this inside the setup function oh you need to be inside because you mark everything inside of here uh okay yeah that's one it's on top no no after everything you after you mark everything yeah yeah i oh oh so so it's gonna be the same last if i just okay whatever okay good so now instead of the store you have that service uh what what do you call the spectator right spectator so you have spectator equals great service no echoes equals create service oh service yes this yes and call that function and that's it remove that service yeah and remove the store new playlist store now instead of expect of the expected store you would expect spectator the instance i think or service yes try that if that if if this doesn't work then [Music] we can we're gonna have to take another day and have another store created with the angular library uh schematics yeah no that is so weird yeah that is weird i never ran into this before be quite honest i'll show you why it was like importing stuff from all over places but this should not be here i mean maybe if another issue is gonna be easier to understand instead of this model component okay so uh right so i mean let's just uh can do you have component store playground um project we can just use the github okay here so if you go to the um go to the work workflows folder go to feature go to details source lib store go to the detail store respect not the other one yep so here uh let's just show so here is the uh using the spectator uh with jest so it's the same thing right i have the mock servers i have the route and then i have the create service factory right there and then i mock my workflow servers i'm off my activity activated route so basically what we what what done on your side let's go down to the before each so inside before each we say spectator create service and then we grab the mock servers we grab the route and all that right now keep going go to describe go down to the describe there's an initialize there and they say should create so basically that's what we're doing right there we're saying hey spectator.servers should be created correctly yeah that's right and and then we just say hey on initialize if you go to the details store go to the details store uh in the constructor i call initialize effect so that's what i'm testing as well right now go back to the spec see i say should call sorry it's fine uh where's it uh scroll down let's go down uh scroll up a little bit so right there so in here i'm saying should call service dot item with route workflow id so my route is my params has been marked with a workflow id of one so here to say hey subscribe to this i take one and then i expect the mock service dot item function is called with that workflow id now if you go back to the store go back to detail store again you see that online 101 the this service dot item is called with the workflow id so that's what i'm testing so i'm just testing the item function gets called so that's how you basically test the con the constructor right now go back to the spec now here online 74 again so online 74 after i test like oh service items gets called now as test the vm should emit the initial value so here that's this is where we're using the observer spine so i spy on the vm observable i call the get values and then i expect that values to equal this this object basically my mark vmware oh yeah so let's just return that whole thing it just go up can you scroll up uh scroll up a little bit oh yeah one here right yep see that see this item function i mark that item function to return an observable with id one name foo right and then if you scroll back down to uh to the test right there see online 78 i expect my workflow to have id1 name full so it's exactly what i marked uh to my service call the workflow you pass in where is it like the route around the round here it should be something now you have to pass one in some way and mark it so scroll up scroll up keep going oh here oh okay yeah [Music] yeah so um last i guess let's call it well let's stop here and then we will do it another day and we will prepare better yeah of course i think i mean we we we we on the right track here and i think this is an interesting uh test it's just a bunch of things outside of we don't have time to investigate right now yeah so um so there's a question uh why when you say anything related to authentication maybe a reason to show that it's not really authentication stuff um we unit testing the playlist store so this is this is i'm not sure why it's happening but it's just not really concerned with any other stuff outside of play this store basically here is not it doesn't have anything to do with rendering we're testing a service so that is worth talking about it because i only inject it inside i mean yeah there's there's really no reason why that company but this function may be like oh there's a intercept interceptor so probably i will not yeah there's only two places i'm not injected inside others so yeah it shouldn't it shouldn't be yeah it should be it should be uh so this is retesting the business logic and why you choose just instead of jasmine um nx comes with jest by default i work at work at work and i'm using jasmine so it's kind of thrown me off a little bit too but at work i'm using adjustment if you want to check out testing with jasmine in component store check out the link i'm going to give drunk my link basically it's that youtube live stream i think last week yeah okay yeah last week that's what uh that's i'm using adjustment for that one as in facebook facebook facebook group yeah i think easier but the pipe concept here is what like from observable point of view or angular pipe yeah there's a pipe from observable or the angular pipe right yeah it's two different things yeah right it's gonna fail today uh because we're into these issues but uh hopefully we have something better next time sure maybe maybe maybe you need a new component and then you need a new component store yeah that's that's that's extremely weird like why why don't you why don't you um like push that to the to a branch i'm gonna pull and try to see if if it's like vs code or if it's like webstorm kind of thing okay sure i'll push it yeah push it to the branch and then let me know okay the show i'll do it and the last one so we use phylon and also that's what i have no idea yep so it depends um even though if you if you use spy on the the thing is because in in the test file we don't have that instance yet let's say player api service we don't really have that instance yet right we how do i say this so when when the playlist store is created that's when these instance gets created or get injected by angular inside the store file now in the spec file until we instantiate uh the the the playlist store we don't have those instances that's what we're marking with like function and if you don't have um if you don't mock with just a function you might not be able to spy on later what a new spy on is i usually use spine for like console law like those and you cannot mock those or you you spy on the window you spy on like a static function let's select the util there's some static function in there so you can spy on selected util and then despite the static function because you cannot really mark a static function because it's not it's not being injected so that's why we're using just function um that's that's that's how you spy or mark a function then you spy on later if you're trying to spy a function that is not just that function uh jess will give you an error saying that it cannot be spying or something like that this is a little bit different than um um so inside of uh of jasmine let me change my screen sure inside jasmine let me stop yeah share screen sunscreen screen open store demo and so inside of jasmine you can just create spy object so on some inside in the adjustment object there's a gray spy object and then you pass in an array of methods so on the router we know the router has the navigate method right we could just pass and navigate so if this is this is the equivalent to um i think okay zoom in a bit it's kind of small yeah yeah absolutely that so it's in gentlemen we have great spy object we pass in the name of this of the object and then we pass in an array of method that we want to spy so this will it will be equivalent to this end guest and later on what we can do is spy on oh we don't have to do spy on because this is my brother uh navigate uh like that uh to have been called you can just do that uh which is right here so we can just expect the spine this has already been spined however this is just like this one the dispatch on the mark store because the mock store we're using get mock store like somebody is spying this for us we're using something else that's why we have to after we create a mock store we will spy on the mock store the dispatch function so these two goes hand in hand if okay if we were to do mock store maybe do jasmine don't create spy object with explorer and we want to spine uh the dispatch function so if we were to create the whole mark store ourselves then we can do that then because we can't we don't do that we do use get more store it has more functionality of the global store that's where we get the moxl and then we spy later so this this is when you use spy on or you use uh something like spun on console out there and then you try on the log method so let's say you have a console log or you have a console error right and then you can just do uh expect and this is a new colors five and so on my console error spine also error to have your call with your error message something like that when you use spy on is something that you do not knock or you cannot knock that's when you spy on or you spy on the actor store app you can spy on your phone your dip store we like select user you can spy on that okay and then you can expect that however i very rarely spy on the method of the of the class that we testing because we actually need to test the implementation of that instead of spine [Music] right this is no sense as we're going to pass let's store the select user effect anyway which is right here right there we actually call it with a with an id and then we test what happened when we call select user effect with one two three it doesn't really make sense to spy select user effect so that's it something else to point out yep i hope it answered your question but then you see uh on jasmine you we have a type spy object and stuff like that so when i work with jasmine i worked with jess before adjustment and then they switched to jasmine and i forgot uh chest [Music] okay sure thanks thanks for the input and uh we do another part to you know upcoming weeks yep let's do that or maybe we can we maybe we can just um yeah you need to have a new uh component store or a new feature yeah maybe it's easier but uh when we like test and break the the code the old code and maybe that is the sign for call refactoring or something anyway yeah let's try let's let's pick something we can we can talk offline we let's pick something refactor it let's pick one of the data access and um change that to an angular library and then refactor it yeah yeah good idea yep yep we'll do it then uh thanks everyone for joining uh it's been a long livestream today i thought it's gonna be like an hour or so but yeah setting up takes an hour already yeah so when you like need to build feature and then you need to write tests just uh do an offer a long buffer for your time i mean um testing has helped like me and my team a lot at work because without testing we wouldn't be able to move fast yeah and uh the reason i think testing is helpful if anyone is still wondering why we because if you need to ever refactor some type of code and there's a test coverage yeah you will be confident or you add let's say inside of your inside of your store right the store has to state what if now you add a new state and then you add a new effect that's gonna change the state of of your store you're gonna have to test that effect without a testing you you're not sure if that new effect how it's gonna how it's gonna play nice with the old effects or existing effects that's true it's like there's a lot of users we just keep forgetting it's like if there's no like god anyways we just like introduced bug like without intention or to do it so having testing is really help and uh we do a next one soon thank you guys for joining and happy weekend bye

Channel: Angular Singapore

Views: 423

Keywords:

Id: owwRjxm0zs0

Length: 101min 12sec (6072 seconds)

Published: Sun Jul 11 2021