Nx After Dark: Adding a CI GitHub workflow to the Tour of Heroes Angular workspace

there we go welcome to nx after dark i'm just fiddling around with things it's been a while since i did this so i can't figure it out anymore anyways i just had a long day but now it's time to relax enjoy some of my favorite tools we're going to be adding a ci workflow using github actions and workflows for an nx mono repo it's an angular workspace there's only one app but yeah but it won't be angular specific it will be just a basic ci setup for nx but for example taking making use of the nx affected commands to optimize the workflows and in pull requests so let's see if i can figure this out i'm working on this it says nx angular 2 of heroes is on github my handle on github is lazydk should be able to find it almost everything i do is open source even at my daytime job so hey oscar you're also up late i was up 5 a.m this morning i went to work then i and i took a first aid course for the first time in 15 years so now i'm ready to save lives and do some teaching by the way i had a really great teacher for that first aid course you can you can feel when a person is passionate about the topic they're teaching uh i'm on the main branch let's switch to let's say a ci feature branch and call it ci workflow okay first thing for github workflow we create a dot github folder in the root of our repository and inside of that we will create a subfolder called workflows and every yaml file in here it's called ci dot dmo or ci dot yml doesn't matter and we can call it nana but yml everything will be considered a github workflow but let's call it ci and yml because it's it's for continuous integration at this point there's no deployment yet so okay i have to brush up on my skills now uh let's see i think i'll give it a name it's the two of heroes ci i think we could get a description but we won't bother with that let's add some triggers so we'll say on and then on a pull request this workflow flow will be triggered this is uh this is one of the things to be aware of about github workflows they are not automatically triggered on pushes to a branch or commits being pushed to a pull request branch you have to state that as a trigger in the workflow because github workflows is about much more than just ci and cd and deployment pipelines you can use it to automate all kinds of things and as a javascript developer you're in luck because javascript is a first-class citizen in creating custom github actions which are the steps of each job and each workflow um so there's three types of actions and one of them is a node.js script one is the docker container action where you can use any technology as you might imagine and then third one is the composite actions where you can combine run steps or action calls with parameters that are you use between many jobs or many workflows so yeah it's really um oh is this the repo from emilio martinez no it's my repo uh it started out as i downloaded the two of heroes router tutorial um from the angle i o website and then i split it into an nx repo let's just have a quick look uh i've been doing a lot of offline work and i started out on this stream but now it has evolved quite a lot because i'm i was preparing a talk for ng poland which has unfortunately been postponed now but i was experimenting uh with some something for that talk so i was using this repo so now it's split into grouping folder a domain grouping folder called heroes that has all these libraries in them the entry point is a feature shell a shell library the two of your lab of course which has very little logic the admin domain with the shell library some shared libraries and the crisis center domain with another shell library and features data access the domain library authentication authorization domain with a shell a login feature then some logging with messages component and some data access so some state so that's the two of heroes app the router tutorial one and i added additional features from the original two of heroes tutorial uh yeah so i should i should share my stream when i explain things sorry we'll take that one more time yeah yeah let's see okay so there's one app project it used to have all the code now it has very little code um all the logic is in libraries there's all these domain grouping folders admin auth crisis center heroes logging and the shared grouping folder and some stuff and in the dependency grab it looks like so we have heroes grouping folder which is the main grouping folder the entry point is a shell library which then routes to features that have some data access and there's a presentational library for the heroes page and there's a domain library shared between them and we have the admin feature or domain as well with the shell and some features have the shared stuff then we have a crisis center domain with the shell some features data access a domain library we have off the shell that routes to a login feature and we have some logging over here so that's the architectural layout of this this workspace it used to be just this one project i split it into all these things which is what exactly what nx enables okay back to the workflow cool yeah thank you oscar okay so now this will be triggered by a pull request but you can automate anything there's triggers for you can do it on a schedule so every hour or every day whatever you can do it on every event in a git repo or github repo there are action flows actions so you can trigger a workflow based on rss feed or the weather api or something that happens on social media or yeah there's all tons of things you can do anyways now we have a trigger for a pull request we will also trigger it for what's called the workflow dispatch event which is a manual trigger through the ui github.com and finally on push but this will only be on the main branch so this means after when when our pr is merged it will also be triggered and we will have special uh some some steps only being run for merge and some only being run for a pull request okay that's the triggers now we need some jobs and first one i don't know let's try let's try a build build and this will what is it called runs on i think ubuntu latest and then we'll have some steps so first we need to use this i have a step that uses a github action this will be actions forward slash checkout version two i think i'm doing this from memory so we'll see whether it works um so yeah because in some like azure pipelines it checks out the code into the ci runner automatically here we have to do it explicitly saying we need the code to perform this this job uh we also need node.js there's already a node.js installed on these runners but we don't know which version so we'll um we'll set up a specific version here i think this is also version two and then we say width which means some parameters uh node version then we'll have an uh environment variable called node version and we'll specify that up here in the top i don't think the order matters much but this this is uh yaml syntax so it's basically similar to json objects but with some fancy or not so fancy syntax depending on your preference all right so no version is 16.x because then we can reuse that across jobs then we'll say we have we want to cache the node modules folder and we are using let's see we're using yarn so i'll say cash yarn and it will set up caching mechanisms and the github runners automatically which will speed up the installation process significantly you can tweak the cache key but this is a good starting point especially since it's very low effort okay so once we have the code checked out and we have node.js installed what's the next thing to do i guess now we'll do a build so now before we use the user syntax that means we're running an action bit of action and this would mean that we're going to github.com forward slash actions for slash setup if we go to this address we would see a github repo and that's actually where the action is being loaded from so that's where nice has to be available it has to be in a repo has to have some configuration files and then github actions runners figure out the rest okay so these were action steps these two first ones now we'll have a run step which is a terminal command so anything goes uh let's start by uh okay so this this repo is for the build command there's only one app right now so there's no reason to use an nx run many commands so we'll just say let's see if we can reuse if i set up scripts here um yeah nx build i mean ng works as well it's it's patched patched by this decorate angular cli script so this one might work yeah it probably does so we'll say yarn build and this is our first job so let's actually commit this switch it we'll find the repo in a second uh here it is and let me zoom in a lot there okay so now there's i can create a pull request here let's do that and see if i create this pull request what happens because oh nice yeah so i definitely failed the trigger here because push should only be triggered on the main branch and that that should happen after merging the pr and then there's some kind of failure but let's first probably branches instead push that see what's happening then okay now it's only the pull request event triggering a run and then something fails so let's see what that is github runners are really really fast and they are free for open source projects so yeah success in this setup we checked out the code we set up node.js yeah and then build something happened here oh and you're not fun okay so i actually forgot to run uh yarn install so small dependencies oh look at that that's github co-pilot by the way um adding suggestions here so if i press tab boom that's code to ride and it's really brilliant it's this thing down here a github co-pilot that's currently in uh technical preview you can sign up for a waiting list it will be a paid product in the end but i will never live without it from now on and i've only been using it for a week or so oh you love copilot too yeah man i yeah i'm just very amazed by this pro product i mean sometimes it adds a little extra syntax which which breaks things but most of the time it's working really well so i'm very happy and i'm going to demand a license from any future employer and my current one once this becomes a stable paid product anyways so we need to install the dependencies as well of course and then call the build command so let's see fix build job hopefully let's commit and push go to the where's my browser there it is so let's go back to the pull request and uh let's refresh yeah there we go okay let's see how fast it is this time now we're installing dependencies and let's see what's your guess this is a nx an angular repo i'll say 53 seconds this is without a cache and using yarn version one then again there's ngcc so that might be another minute damn you angular compatibility compiler and look at that there's something here called ng worker spectacular i wonder what that is okay we're at 44 seconds oh so already ngc is running so i figured 53 seconds for the whole thing uh before ngc now we're at 53 with ngcc it was around 42 seconds when this started oh so that wasn't too bad 14 seconds but also because i'm not using any angular libraries like angular material that would be a performance killer for the angular compatibility compiler for sure yeah okay so now it's running build and by the way 58 seconds for dependencies that was the first time next time it will be cached and then it will be like 15 seconds or so yeah now it's yeah okay so it was a success 26 seconds to do a production build but it's also a medium small not the tiny but a small app at this point with many chunks okay so the setup node action was the one that also cached so let's see here cash successful 221 megabytes that's the node modules folder or rather now it's probably even the yarn cache folder yeah this one and then the node modules folder will be installed from that which is the best way to do it so it has defined this cache key which is based on the package the yarn lock file so if you install another dependency operator version the cache will be busted [Music] usually i add several layers of fallbacks so that okay so maybe a dependency change but it's still the same angular version it's still the same node version so we can rely on on [Music] restoring some of the dependencies and other ones will be overwritten and then saved to the uh the cache with the key yeah this is a good start especially since we the only thing we did was use the setup node action and then tell it we're using yarn please cache the dependencies okay that's our first job and um i actually didn't think that the action would be run when opening a pull request with that workflow for the first time but that might have changed i was sure earlier it didn't trigger a workflow until it was merged initially that means we can build a job means we can add more jobs so let's let's try that what else do we need we uh we definitely need let's say a lint job right so give it a name oh thank you github co-pilot lint it runs on ubuntu yeah thank you github co-pilot what do we need now oh steps oh what's this oh look at that wow let's try that github co pilot told me to do it so let's push that and see if github copilot understands github actions and workflows let's check this out here we go boom restoring the cache wow that was fast that was okay eight seconds for the cache and node.js and then how much for dependencies ten eleven 13 14 a bit more than 15 seconds and then comes the angular compatibility compiler which we probably even don't even need here yeah so yeah so this i would i would remove this post install hook for the jobs that don't really need it because now we're just wasting 20 seconds on something we don't even need i think i don't think we need now for linting jobs we shouldn't need angular libraries okay so something uh broke but hopefully it's a lint gone wrong ah no that's not it okay so well okay uh oscar you have some questions no comments i'll look at that in a second okay so actually it's called the lint script but this is just what angular cli created initially so let's make this work oh oh you know what this is correct the problem is my projects don't have any lint targets so if we go to any project there's no lint because this was initially using tslint i removed that and i haven't added angular eslint yet so we will um we'll remove this for now but github copilot generated all the code code we needed and it was working to the point that there were no limp targets okay something else we need okay we need here we need oh test how about test thank you github co-pilot boom okay now i want to make sure that this commands actually runs um so let's try yarn test locally see what happens i think i'm using karma in this project because it's an angular workspace i migrated and i wanted to see what's the karma experience like and it's not it's not even using headless chrome right now i think i wonder which project this is oh it's also not finishing okay so it was working at least but i think we need to do nx run mini target test all projects and run it in parallel then let's go into nx json and or wanna watch this option called here max parallel i'll set it to uh let's see i'll set it to six because that works well locally for uh a hexa core machine even though it has 12 logical cores i found that more than six parallel operations doesn't really work that doesn't improve anything so six is good for local and then [Music] in ci oh run manu no run many then in ci we will also add uh max parallel is two that works well for the github cr runners and the default ones yeah so let's try adding this see i add test java there's a typo in the script for test oh that was probably run manu yeah let's see if this works i can also try it locally now but i might not have set it up well for karma um i'm not sure it ever finishes for for every project or if it just keeps running oh wow karma in parallel i didn't think that was possible i thought that used this same part but no it's using a different part interesting i was unaware of this working out of the box now it's spinning up many browsers i should definitely use chrome headless but it does seem to finish at some point and then it moves on although there are not many if any tests right now i'm working on those in a branch instead all right oscar let's look at your comments while this is running after running npm install on the project got the following error nx error could not find nx modules in this workspace nx modules what's in the next module yeah that doesn't tell me anything um here next error decoration of the angular cry did not complete successfully so that is the if we see here in mr post install script here somewhere there it is it's calling node decorate angular cli so that's this file it goes in and does so that every time you run an ng command within this repository it will call nx behind the scenes instead uh so this is the error message here that you saw um oh man i should share my screen okay here's the post install script it calls decorate angular 0.js which has this error message in the button [Music] the bottom of the file the creation of the angular cli did not complete successfully so it's failing on the sim link ng cli to nx cli i don't know what could cause that to fail oh i have some failing tests here that's interesting that's why we need the ci setup right okay okay things are running here let's try to go back to github and back to the pull request and now that's built what about should have a test job now as well yeah build when well test let's look at test it's running ah that's strange might be yeah might be karma um i haven't really done nx parallel with karma before i might need some additional setup for that so i will remove the parallel option say make a parallel one first no actually yeah this is let's remove it all together i don't i don't really like it it's opening a ton of tabs here as well i don't really like that so let's remove the parallel option run them sequentially instead and i'm really getting tired of not using headless chrome oh that's probably also ah that might actually be the reason why it's failing yeah we should use headless chrome so what's the easiest way to do that um observers from headless maybe is that the right command for karma let's see yeah chrome headless okay that might work better for also for the ci server which makes running in parallel apparently it can work so even for karma so let's go back to their repo here and the new run of this test job luckily it's pretty fast right all the ngcz is slow get on to the good part and now for ngcc oh error was solved when you run the installation with yarn okay great great stuff it might also be if you accidentally upgraded to npm version 7 because angular cli or ngcc doesn't support modern package layouts so it doesn't support p npm very easily it doesn't support yarn 2 with plug and play and doesn't support npm 7. so we're stuck on old versions yarn one and npm six or lower when using angular currently unless every library is partially iv compiled so we don't need the ngcc compiler okay now tests are running well yeah it's complaining about something with ngcc man ntcc sucks okay things are running they are coming like they're yeah they're showing up out of order or some like in between several test runs but at least it will finish a bit faster hopefully karma is slow just would be a lot faster but i just wanted to karma experience to see what it's like in a nx repo not very good but it works yeah i wonder if it will finish oh there were some more tests oh you can see it running like batches of two because we have max parallel set to two on the github ci did it ever finish with me no luckily it didn't finish yet still running okay assuming that works what's the next thing we need this github work uh pile um deploy is suggested by github copilot that would be a good one uh how about end to end i think i removed end-to-end testing from this repo so yeah that's going to have to work uh wait for some other time but yeah deploy we don't have a place to deploy right now but so we're we're actually finished this workflow at least that's the basic commands but then now we should consider uh using the nx affected commands and this is where it gets interesting so uh yeah that that makes sense for tests it makes sense for linting so let's see we need some kind of environment variable saying is main branch and it could be github ref thank you github co-pilot no not master me and let's prefer single i think it's main branch okay is pull request wow thank you github co-pilot that looks correct and now do single quotes oh great okay so we can use those conditions let's keep this thing running in the background um so now we want to say now we need yeah to use the affected command i think nx has a new github action for that so i'll copy that in from here it's called the action is called novel and i can set chars and i don't know if there are any parameters i could check i could just go to this address but let's just see if this works this sets up so that you can use the nx affected command so let's check check here we want to affect the test so test we also want parallel parallel is not working well but we want browsers from headless yeah okay so um merge will be now we need a quote because we're using this colon character most of the time you don't need to put strings in quotes in yaml which is kind of nice if you add a colon you will need to put it in quotes can be single quotes of double quotes so merge test all projects that's the command we already have what if we do [Music] er test affected projects one hmm that might work but we have a affected test at parallel 2 yeah okay so now we need if this works we now need the conditions so if wow good guess github co-pilot to the rescue unless what can you say unless i don't know but anyways what i want is if um is pull request yeah that's the one github co-pilot thank you hello nacho i'm using all my favorite technologies angular annex github workflows github co-pilot github actions all the good stuff setting up an nx workflow cr workflow or an angular workspace right now and github co-pilot is helping me okay so add er test step uh before committing that or before pushing that let's see if it ever finished up here okay so parallel might not work very well for karma because it's been running and running and running um there might be a better plug-in for running things in parallel many projects i don't know i'll try to yeah i'll try to disable parallel from um at least in the ci so mac parallel one or even can even be parallel walls because i do want to run parallel locally no i actually don't want that when using karma it didn't seem to work very well let's just remove the parallel parameter from the test scripts never even finished here locally and i have a pretty powerful machine remove parallel or stable test parallelisation close enough i don't know if that's built a hundred percent okay let's check here why wait that's not the latest do i not push no apparently not there we go are you using the new nx github action yes i am the one that enables nx affected without having to do manual things which i have been doing for a while okay come on actions uh let's see if some are left running in our repo yeah so we should we can just cancel these we're not really interested in them anymore and apparently it's taking a long time with karma parallel without i don't know maybe there's a parallel plug-in for karma that would be better i don't know yeah so this should finish up in a minute then we can get some runners again oh here we go let's look at test now it should what's this operation was cancelled oh man i cancelled the the one i needed oh that sucks can i do oh yeah this is what i'm unable to do i can't run it manually before it has been merged one time so now i have to i don't know i basically have to add another commit to trigger so i'm going to maybe move this post install hook up here workflow uh github co-pilot has surprised me a lot lately yeah i've been using it for about a week and i'm i'm amazed it really supports my work well i tried tap nine and it sucked on my machine at least it was giving me snippets from other languages and irrelevant snippets even so i uninstalled it tried it a few times didn't work and then github interviewed me for tooling because i had been used using intellicode for a while which is intelligent autocompletion um and they were asking me what would be great about like imagine the best version of something like that that's possible and i said well it should be able to understand angular code for example because giving me javascript or typescript snippets doesn't help me much when most of the boilerplate is related to angular and they were like oh well yeah this would we're working on something and that might be interesting and then here we are later this year and now they have github co-pilot and it's it's really yeah you'd be surprised the things that it suggests and and how accurate they are a lot of the time okay so installing dependencies that did work and then the nx action what failed not a valid object name origin main okay so there might be something else we need to do let's go to the repository we probably need to have the fetch depth or something github.com slash novel slash set shots and let's look at the documentation here oh yeah fetch that zero okay because we need uh history oh yeah we i forgot something else as well [Music] i forgot yeah okay going back um we definitely need here and check out we need to add some parameters heroes leave this comment and then one more thing is in the in the affected job [Music] the base is in the environment that nx had and that should be set now why would it be head should be base right yeah that's the type i'm looking at an article from the novel blog and this must definitely be a typo in the github version so this is it and head i mean i shouldn't have to add the head no this should be good let's try this they have an example yeah there was an example in documentation i was looking at an article by miroslav jonas the normal blog but let's look at this i forgot that parameter first github see if it's working can you share that documentation sure here's the action repo here now in the youtube comment and here's this blog post uh from the now all um blog about which mentions this action there's also whatever it's called for circle ci or something there's also one available there let's look at how it's going now yeah okay nx bass nx head some commit okay no merge merge shouldn't be run should be pr something went wrong i blame it on github co-pilot ref hmm oh should do it like so yeah this has messed me up many times you have to specifically compare to the true value evaluates to false about it to true how would it know that oh let's see here let's see another run and now we should see see this merge test all projects this step should be skipped there will be a kind of a slash in this icon then it should perform the pr test affected projects step after angular compatibility compiler okay not sure you try to share the url unfortunately youtube doesn't allow that so you were other people were not able to see it only i can add urls so sorry about that here we go okay so now it's running serially one project at a time with karma no two still i thought i disabled parallel you can create the entrant project as follows yeah so there's probably generator for that i just don't care too much about end-to-end tests i only use them for very specific things then integration feature tests component tests or things like that for the rest seems like there's still some parallelization going on i thought i disabled parallel let's look here at oh oh so nx is actually picking up the nx head environment variable by default that's interesting so i might not even have to add this base parameter at all cool wait seems like it's still running in parallel so i'll try to turn it up off explicitly so not so far affected and let's try it out locally one at a time please okay it's a pain with authentication and twin tests yeah there are ways to get around that depending on your strategy one way is to have a fake authentication server if possible another way is to have to call and like call the http requests rather than logging in in every test of course have an end-to-end test for the full login flow but all the other tests can then get an access code token or whatever using http requests if you want the full flow like the full experience of user actually being logged in if or if you can't fake it in the fake authentication server or something okay so question is it running serially now it might too okay you assumed something from ci monoreposi a github action stock page what is that no idea what that is you use puppeteer to run as task for end time tests okay for authentication true entrances for critical authentication flow than the other tests can have marked off yeah that's one option definitely or maybe you can make an http request to get an access token quickly without having to go through all the login pages and so on that's a few of the options but yeah the login and logout is good example of what should be done using end-to-end tests i also just wrote one for making sure that translation like language selection works in an app because it's difficult to set up everything uh we're using trends loco there's a testing module for that and so on but i haven't figured it out yet but the the assets are split into different libraries in the nx repo so that's just difficult to get it all working i mean yeah i could import it from that library as the json file then i have to set up additional typescript configuration and i didn't bother to do that yet so the entrance test that language selection works is also great to have anyways okay so karma sucks let's agree on that and uh i don't know if i just want this test at this job to complete come on table parallel tests hopefully or i'll end up switching to chest at some point because this sucks like six minutes for almost zero tests what's going on this is ridiculous ciao can you help us get a better karma experience with nx that would be great or we can just use jest let's try it out this time yeah okay so while this is running let me show you something uh what i did at work uh well first i actually did it for ng workers monorepo um now i'm using it at work see if i can find it here it is our work is open source so we go to our workflows and we find the one for my team's app i created let's see here i created an nx affected job so it outputs a boolean value whether something is affected or not and then i can reuse that value for the other job so i only have to run it once if i created an action i would have to run the same action for every step so i figured this could be faster i don't know yeah so fetch depth 0 and some other things fetching the base branch and then some caching for yarn disabling that stupid ngcc installing dependencies and now i can finally run i created an affected actions so here is where i'm asking is this project affected and then the name of my app the project name and the base if i'm on the main branch it will be the next to latest commit it will compare against otherwise it will be the base branch for the the pull request yeah so after all this finishes then in the other steps i can do if is affected is true then this job will run because this is a monorepo we have two apps and a design system and we have a dot-net back-end or back-end for front-end an api gateway so i don't want other teams stuff to affect my app so this this workflow is for my app and then we have a common one for the nx run many commands and so on that's always being run but here this workflow is is only being run whenever which will build and deploy my app it will only be run when this app is affected so that would be a nice idea for an idea from for an official action from now on an affected action the action is in here the one doing the stuff is here's the configuration has some input parameters project and base and it has an output is affected which will be true or false so it's running um a node.js script uh i should probably have created a javascript action instead but that's running on node 12 and i wanted to use es modules so basically the logic is in here so it's running nx affected apps the plain format output and it's running index affected lips and then it's basically combining those two so it would check that it's a valid project name and then it will calculate all the affected projects and then it will check is does the affected project names include the ones you're asking about then it will log that to the output which will be processed back as an output parameter in the end here this one so yeah that's it and that works um that works well so far allows us to have a monorepo with a workflow separately per app for building and deploying and then we have a common one for the nx workspace where all these things are being done like building entwined tests formatting linting testing yeah that's all the common tasks so it's also doing conditional runs based on pr or main branch then it has an optimized caching for the yarn cache and but here we see a similar thing right that's what we're creating right now okay i wonder if it's done no not yet karma is karma sucks uh at least for many projects i don't know i wonder no combining it in one karma project would also defeat the purpose of nx and splitting out into the libraries okay i see some comments but ciao let's see book is great thank you i've been recommending it thank you again uh and that book is called accelerating angular development with ivy and you can find it on amazon and packed and lots of local vendors as well what does the script do i i guess you're that's the affected one you're asking about pretty comprehensive you use tj actions change files for now okay well i use nx affected but it should be built in okay so okay but this is this is the last thing we need uh we could also add formatting checks don't want to do that right now if testing works let's close this pr and then some other time we can add linting and maybe end to end tests eventually so this is taking forever how about locally still not done there either that really sucks if you have any tips for speeding this up please let me know so let's keep that running i don't know i really want to have it finish let's waste some time until then let's look at the other branch i'm working on i had some stashed work so oh no now i messed up the tests now i'm on a different branch or whatever okay so let's fire up wallaby that's my test tool that gives inline feedback quickly on tests let's see if it can run in this repo oh this is the one it has an issue with uh it can't figure out nx and karma wallaby so i should submit an issue for that um yeah that sucks it's my favorite tool and then combine that with github profile and then you have really powerful tool chain okay so let's look at the tests if i can find some this one is interesting i'm using testing library uh the angular one by tim disdriver and the uservent one which is a generic one for testing library and this this test suite is for testing all my lazy loaded routes for this two of heroes app so i'm navigating to each one of them and making sure i can see the title on each page and this runs in there's one that has to wait for a few seconds because there's a simulated uh delay for logging in it's using a fake in-memory web api or something so i cannot get that time down without removing that delay but the other ones are running fast like 15 milliseconds a piece or something like that that's pretty quick for loading and testing an entire or at least the entry point of each lazy loaded chunk so now i know that all the main routes are working just based on this test suite and um yeah it's even like testing libraries using accessible semantic html queries and so on or so or dom queries so also testing that it's accessible at least to some degree so that was one interesting one working on other ones let's see what do we have here this might be the usual the normal ones from angular yeah just a very one that doesn't do much there are one that i wrote this one maybe these are also ones from angular documentation how about this one this is one is using testing library and spectacular for this page feature lazy loaded feature module so we're using render from angular testing library we're returning the view normally you would use the screen export from testing library like so but in karma you should use the returned view instead otherwise it gets confused with what's the jasmine dom or the karma dom and what's the the app dom okay so we're using the spectacular app component that comes with spectacular then we're importing spectacular feature testing module with the feature we're telling you which feature module we want to test and the path it's using which comes from a different variable and then we're adding uh some yeah the route for this one this feature is really complicated because it's the routing tutorial uh so we have many many aliases or top-level routes and they don't share a common prefix so that's pretty special and they're redirects as well and then we have a page not found as well so we can go to the default route and it will list all the heroes um these are the tests that were already a part of them i don't know a testing tutorial something an angle io and then i converted them to using testing library and spectacular so they're not that interesting so i guess that's what i'm working on is more of integration or feature tests i guess these tests they they suck they don't test too much yeah but anyways they are testing as a user we don't see any components or services being uh mentioned and we're not faking anything so it's actually testing all our code as it is in the app nothing's knocked out or stopped so that that's great even the routes are being tested even the http client is being tested there's only a fade fake back and that's the only fake thing about this and it's not spinning up the entire app it's only testing this one module which is the interesting part about using spectacular feature tests yeah and you'll have to wait with the other one for the better test for some other time let's see if it finished it didn't oh well that sucks i'm i'm going to close this stream for now hopefully it finishes and then i'll merge this pr good job disabled limp job because of no event targets and test jobs and have anything else i guess oh that that would be it for today maybe i can just take another look at the workflow we ended up creating here it is so it has a name which shows up in the github ui right here and also if we go directly to the actions tab we show up here so we can filter on that name and see the ones currently running and previously running and let's cancel these ones wow karma might really have messed up github workflows for being so slow that's annoying anyways uh we had a few variables to determine is this a uh triggered on the main branch or is it a merge to main and second one is is this a pull request yes or no in our node.js version 16x are we on angular 13 no we're not so that's not officially supported by angular 12 but it seems to work for for now we're triggering on every pull request on every branch we're triggering manually with the workflow dispatch event we allow that we're allowing a merge to the main branch to trigger this workflow as well we have a build job runs on ubuntu and the github runners check out the code set up node.js we enable yarn caching then we install the dependencies and then we run the build script so we have a lint job here but we don't have any lint configurations yet so it's not enabled and we have a test job similar thing runs on ubuntu checks out the code but now to use nx affected we're using fetch depth 0. we're done setting up node.js 16 yarn caching installing the dependencies as before and then this now was nx set shias so that we can use nx affected for our merge run we'll test all the projects just to make sure but for pr we will test only the affected projects so that was it and i don't know it'll be finished tomorrow sometime there's a lot of projects at this point look 27 projects and i have no idea which one is being run right now oh two of heroes app test hmm where was that in the list here okay what was running before that admin feature shell test hmm okay i don't know it's definitely not 27 projects here so there's a lot still to go i'll keep it running and thank you for today see you some other time you

Channel: Lars Gyrup Brink Nielsen

Views: 88

Keywords:

Id: xzOI7P0lrD4

Length: 79min 6sec (4746 seconds)

Published: Thu Nov 11 2021