Testing Angular Apps | Ilya Bodrov | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Testing Angular Apps

teacher avatar Ilya Bodrov

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (8h 55m)
    • 1. 1 Course Introduction

      3:22
    • 2. 2 Theory and Terminology

      32:22
    • 3. 3 Testing Components and Models

      63:35
    • 4. 4 Testing Forms

      94:25
    • 5. 5 Testing Services

      52:54
    • 6. 6 Testing Routes

      16:39
    • 7. 7 End to End testing

      53:45
    • 8. 8 Angular applications

      217:45
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

436

Students

--

Project

About This Class

Angular is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser.

In this course we will cover the following topics
1 Course Introduction
2 Theory and Terminology
3 Testing Components and Models
4 Testing Forms
5 Testing Services
6 Testing Routes
7 End to End testing

Prerequisite for this course:
1. Basic familiarity with HTML, CSS and JavaScript

Meet Your Teacher

Teacher Profile Image

Ilya Bodrov

Teacher

Hello, I'm Ilya.

See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1 Course Introduction: Hello Today I'd like to present you and you course on adorn its a very school toe angular TDD basics. So this course is in the developers who wish to broaden their knowledge off angular framework and see how to Daystar very Spartz off angular applications. So angular years, you probably know, is a very popular front end framework created by Google. It is open source and has really nice community and used by many people are big companies. In this course, you're going to be learning about testing components services. Mo dels forms how to off you will see how to write and trend deaths in angular etcetera also will be seen how to taste third party services and how toe work with libraries like just Mean karma per tractor faker and some other useful services. So by the end of this course, you alone are all the specifics off Destin angular applications that that should be were helpful on your d two d job as a developer. Also, this course is divided into eight sections, and each section has a number off lectures off wrong. Well, 2 to 7 lectures there, each section Ah, we're going to be focused mostly on practical knowledge, though in section toe, I will give you thumbs theory as well. All the source code will be available for you are on. Get up. So you be ableto alone. Ah, this report you will be able to use of the school in your applications and those I have separated the school into various branches so you can easily dreck what has changed between videos. Now let's see a couple of words about the on courses contents. So in the first section, we're going to lay some foundation, same goon to give you some recommendations. Well, specifically, I'm going to say what editor you might be using the browser that you might be using and some other introductory stuff. Next in section two, we're going to talk about some theory and terminology. Next, we're going to dive into the golden by starting to test components and mortals off. Then, in section four, you will be seen how to test views and Forbes. Next in section five, we're going to be testing services as well as some third party services. Specifically, we were looking at firebase Next in section six, we will be testing rotten events Section seven is all about and to in testing with the help of Protractor, and then in section each, we will summarise what we have learned and conclude that the scores. So hopefully you are as eager as I am to dive into this course. And no, let's not waste any more time and proceeded to learning off the process off testing angular applications. 2. 2 Theory and Terminology: this section we're going toe allay some foundations and talk about some concepts that will allow us to rye tests in the up common videos. So in this lecture, we're going to talk about various types off tests of their two you may encounter. So destiny is off course ever important. Are bro says about this whole field is quite vast because, for example, you can taste of their your application behaves properly that all the features are correct so that your application for fields of their requirement you can also dear star your applications performance. Or you can test, for example, applications security. And so and so and so in this course, we're going to talk about our automated destined. So we're going to write some good that that is going to test our application. So, like instead off testing everything manually, we're going to have, ah distance you'd that is going to do this for us much, much foster and heaven is full distance. You'd we'll make you feel much more confident about change in various parts off your good about before, when somebody factor in already your features. Because of this case, you won't be that afraid that you might to break some part of your application by early, right in some cooled or by aid in something so off of the main thing off that we're going to work on our test cases. So test skis, eyes going to contain over steps or the conditions and all the parameters to death some specific feature off our application or maybe part off some specific feature. Arsu. In our test cases, we're going to have, of course, some backgrounds or some preconditions to turn our application to some desired state. Then we're going toe actually describe our test, so we're going to ride the steps on that we wish to take. So, for example, one of the steps, maybe are looking even to the system. Or maybe posting some comment or aid in, you know, some other record with deep bass, and so so so. And after we make after we check, the application behaves properly, and after the's test skis finishes, we are going to hear some post conditions that is going to turn our application to an initial state. So, for example, we can, before some clean up after our desk keys. He has finished his job or something like that. So that's a taste case, and we're going to write. Main attest. G's is on wild taken of this course. Eso the most are. I think the most popular are type of day. Just ease unit test and probably unit guests are us the simplest once. So such deaths cover, um, some specific component off your system. So, for example, you can write a unit best of the term test a glass or more Jewell or some other component, maybe who may bear out. And so and so so And unit tests are independent and isolated, so one unit test usually covers only some specific arm element off your system. So your unit deaths should not rely on each other and usually the Eireann in a random order so that well, they do know what interfere some home and we will off course, start with the right in some unit tests in our coast are the next die off. Deists is integration test and integration test, as the name implies, makes sure of that individual components off your system beeves work together all as one unit as a group. So, for example, we can cheer there d to base works properly and that the routing works properly as well. So, for example, But you can send an http request we've of the property deed to your application and make sure that this request is actually being handled properly. And they some record, for example, is being created in You did so, for example, you can send a post request. So your application and make sure of the, uh, you record is being created so that this case, we are destined. The route is behaving correctly, the databases behaving correctly as well, and another type of test ease system test. And sometimes it can be called and to end test and such tests. They cheer that the whole system behaves Perper. So, for example, we can't simulate the users behavior and different, quite complex manipulations. Quite complex separations are to our system. So we can virtually like our simulates how user interacts with our application, how he visits Severus pages, how leaks on Barton's fields in forms and so on. So so So we can make sure that the application is working properly from the user's perspective and in this course, wiggle all for ride some ended toe end deaths are in the upcoming videos. No, some important principle serves that you shoot. You will remember all well, my favorite scene. Ease the distinct ensure the presence off bugs but never their reps is also that's a scene by extra. And it means that even if you're testing issued passes, so all the tests are basically green. It doesn't mean that your application has no box basically on well. Also, by the way, remember that exhausting destiny is impossible as well, so you can not dance for each possible keys for each possible. Each possible scenario is quite impossible, basically, so you should develop your own distance strategy and try maybe to death some age cases. There's some errors maybe, and so so so. But you can know you cannot digest all this scenarios. And, of course, it's wearing advised to start right in your tests as early as possible. Ah, well, there is their concept off extreme program and and well, as apart off extreme programming. Some developers, firstly arrived at the tests and only after that, their right of the actual good that makes of these tests. Boss, I don't think we're going to stick with this strategy in the scores off for simplicity, But some developers do. Ah, well, do people full of this concept off extreme programming every well, So you might meet this concept in some off, maybe courses or books? Well, also, it's quite advice to revisit your scenarios on. Try to modify your testing scenarios, according toa system changes. So if you introduce and you feature or if you maybe change some part of your code, try to revisit your scenarios often because otherwise they may not be up to deed. They may not just are all parts off your application eventually, and also there is their full C code absence off errors, which means that I as develop our see that my distance you'd has no errors. But in reality, my application does not fulfill all the requirements. But that was, for example, well, I have probably some person who hired me as it did me as a developer, and he asked that application should full field at least off requirements on And, um, even if my application has no barks, I must make sure that my application actually meets. Their requirements of that were initially set so off course. Don't forget about this as well. So I think this is enough theory for no. In the next lesson, we are going to write Good. See you, TDD in action in angular. And we'll talk more about different types of tests and some best practices. But for novel, let's proceed to the next section. Talk a beach about our types creeped and it was creeped. So see you at the next leader in this lecture, we're going to talk about Atmos creeped and typescript. As you probably know, ECMO script is a specification toe standardized JavaScript. It was initially adopted 20 years ago in 1997 on well before there to job script was much really standardized for Microsoft, maybe could introduce some functions that only supported by Internet Explorer. There were some functions that they had worked at big, differently Netscape. And so developers will sink or some tough times, all right in JavaScript, and we're also back. Their job was gripped with North. Considered as a really serious language, it was considered, like maybe oil language and many people Ah, well, he used it to just greed somewhere. Strange animations of that actually will know what? Introducing any benefit for the user. The thing to just for showing that the developer can actually called of the sky and off animations. But it was really strange. And now, of course, no one actually uses Sergio script for that. And now JavaScript is being used to actually make our website more user friendly and more, uh, comfortable to use, shall we say so? Several additions published since of the adoption off Atmos creeped. So I think Joe's grip to begin toe evolved for quite fast since the year 2000 turned nine. So where the script five was released, Jason Support was introduced. Strict mood was supported. Ah was introduced, and then Eckman script. Sikhs are brought many different changes, some major changes to the language. As you probably know, no new additions are being published Well, basically, every year. So the latest, our tradition at the time Off recorder This video is a Scripture 2000 and 17 are, but unfortunately, not all the browser support new features that are introduced by Acma screen, especially some old browsers like old Internet explorers of that, unfortunately are being used by some people, especially in countries that have problems. We have made the Internet connection, so it's going well. It's quite finally because, like some years ago, our people were still using Internet Explorer six. That's really strange because of this version is not even supported by Microsoft website anymore. Bardwell. Some years ago, the ocean will still used by some people. So if you'd like to support on your features, you can still use a tool like Babel. Well, it's a javascript compilers, so you can write cooled about, ah, full of a new specification off script. And this code will get compiled into the new JavaScript that is supported by all the brothers. So you can utilize Bebel if you'd like to, so it can be installed by using this comment. You can also try it out by clicking this Barton suits. We can say Layup something and as you see, it gets compiled to old version off defining your variables. Because this layer key war was not used before. Oh, well, she can't like preach. Maybe some Kloss. And as you see this glass keyword gets compiled in tothis construct because obviously, in the old version off javascript there no glasses, but well, actually, in your abortions of Joe Strip. There are no classes as well, but we'll wear like me making on those glasses because Joe script is Norton object oriented language. But in your specific Asians try to make this land which look like object oriented language . We can all throw extension this close something they don't. So, as you see, it's quite quite the same. Here we can creature, maybe some function or just like this. See, on next we can say someone, console, log. Hi, Next you can say object on war safe and just look at that. So there are lots lots off. Good of that. We would do need it right to make this work in old nurse in off John scripts or just compare here. I have, like 10 lights off. Good if I removed with those, I think here it's like eight lines of code, and here it's about like 25 lines are good, so the difference is quite major. So Bebel is used quite extensively to support older browsers, and Brother said that can not yet handle than you features for sickness. Screamed off a seeks end later. And also, let's say a couple words about type screen. So types creeped is at type super set off jealous creep. So that's yet another our technology of that allow us to write some good that compiles through jealous tree. This technology was introduced on dis, currently supported by Microsoft Corporation, but it is free and open source. So it is really popular. Are these days off course of these technologies supports Atma script to salve and ar 15 and you're our specifications as well. And the key thing about typescript is we can introduce a static to position to our functions. Also, it enables features like interfaces like mix ins like names, basis, and so on. So on. So so that's a quite powerful technology. Here you can take a look at the documentation you condone lorded it, you can just visit. They played around to just see how typescript looks like. So here you can see that we are actually providing off the tribe for our our variables. So here were saying that the message must be ST. And if the Bost if the past argument is not a string that, then we will end up in an error and so this way we can easily a trace of these kinds off errors because, as you probably know, JAVASCRIPT is a dynamic language, so it has no basically types. It does not allow you to enforce types and does not allow you to a great start aesthetic type on and basically type creature source of these kinds over problems. Well, there are some other examples of that you can take a look at. I'm not going to explain them here because, well, that's not typescript course after all. And I actually hope that you know quite a bit about typescript, because where you're going to use it quite extensively when right in our code. But you can still go to the recommendation sexual and just see some tutorials. There is a quite simple tutorial called typescript in five minutes that you can fool to get this sense off typescript in. There are some Ah, you see, there is a handbook of it talks about where his features off typescript. So just take your tournament started This can book if you'd like to. So I think Let's Noah ramp up off this episode of this video and proceed to the next one where we're going toe curried our new angular application and talk about various folders of that are available for us. Specifically, we're going to talk about folders. Were that the tests? And I'm going to explain what are those folders are for? So hold on tight and see you in the next video. Okay, so if for some reason you don't have angular installed on your PC Yeti, you can fool this quick start guide on angular daughter. I owe that side so specifically, you'll need to run the following comment on PM in store Global angular and obviously you'll need no GS on an old picket man's your own your PC. So specifically you need the full inversions, at least on your PC, and to get no jeez, you can simply visit no JIA's draught work of website and download one off loose our versions. So I already installed angular on my PC. So next I'm going to use of this Injun you, and then I'm going to see, for example, angular Destin. So that's going to be the name for our application. And well, this comment may take quite long. Our time to finish as well as the installation off angular by the way. So let me pose the video for no welcome back. It's really nice that they're ag and try and travel. So the project was a rebel recreated for me Let me changed these newly grated directory and let me also open Etem. So here years our directory and the first director is that we're going to be interested in is called E to E. So this means end, toe end and well, this is the directory that is going to contain and two in tests or system tests as you can also call them. And so we can see three files here. The first file school Jodi's can feed you to Aegis. Um, it contains some configuration are the 2nd 1 is EP Don't be o Doherty s, by the way, your ts mean stripes grouped, if you don't know. So this file is the main class for presenting our application as a test object. So some relatively high level methods for testing will be available here and the last file is schooled. App it to e spec Doherty s and this is of the actual and toe and test. It is quite simple, basically, s so here we are open in the main beach off our website off our simple application and expect of the hitter too equal of these streams he'll welcome toe are now to actually Ron this entrant test. I can see n g e two e and press enter. And what is going to happen? No. Are Chrome browser will be started for us so yeah, You'll need to install room on your PC if you don't have it. And here we go. So now it opened the brother for us. So just like a user do when he visits Sound website and it checks of that of the header off our website. He's correct. So specifically he Reese off this thing. This test that says should display welcome message and which means everything Use working just fine. Let's try to Greek at this test now by opening S R C directory EP then compulsory. I have a component two t s. So here is the part off the title for replication. You can see not working or something like that. We'll see if it no And basically what is going to happen? Ease of this title will be are placed. Ah, right here. So it says, Welcome to some title. And of course, our test will break now because we are expected to have just welcome toe. Well, let's say N g e all once again. And of course, the best are should feel once again. All brother is open and and here ago, So it says expected. Welcome to APP not working to equal. Welcome to Oh, so now what about unit tests? And well, this practice is saying is that unit tests a should seat near your of the cold pieces of the actual death. So, for example, there is a file called App that component spec Dirty yes, and events of the unit Day ist auf for our mean or our start in component. So I'm I've already opened this file and let's see what's kept it in insight. The first line says import and then just bad. Well, that's quite a funny name, but all the no, that's quite an important. Our concept s so it allows us to greet and configure our special testing environment. It provides their methods are the method to greet component and the services. So that's yet well, really, really important thing. Toe import. Also there is in a sink and a sink helps us deal. We some a synchronous school, as you probably guessed. So when you do something a synchronously you want to know where this action actually finished Because you can't predict where the operation is going to finalize. Ah, Sue, A sinker does such chick for us are the next line. We are important this EP component and we're going to taste these component in this unit test basically. And obviously component is defined inside episode component odious file right here. So we're basically important off this component Here are also, by the way, a few words about the general process off unit testing that I've already mentioned in the previous video. So firstly, we have some are set up, so we can figure some prerequisites for our tests of that happen in this book and before each. Then we are right. Some steps Ah, that we want to test our there. Of course, we are doing some verification, so we actually cheer that are the steps leading to some desired result. And the last step is called your down where we basically perform some cleaning. And that's quite important. Don't forget about the step as well, because many Boggs can emerge for home incorrectly. Say it environment off. There was not clean toe after some test finished its job. All right, so next on line three received this describe function. So that's function provided by Justman and Jasmine e as well to that we're going to use to write our tests. Eso describes a district allows ours to structure our test good in more human readable way . So describe our except to arguments as you see a string and the function. So this drink is the name off The component of that were testing Well, it is usually on do so. Next received the important book called before each on this a sink function here. Make sure everything will be set before the execution will actually continue. So before each look does important droop off preparing of the deaths environment for us are probably the contents. So we'll look familiar to you. So it is quite similar toe app door to module door T s so this file are so next after before each, we see three feet functions. Ah. So what's happening here? We are initialized the component were taken some part off the component they it would like to test, and we compare it with some sample. Um, So for example, here we see that we're using our test bed to create the component called EP component that we are actually tasting are so it exposes some information about the guards off this component on we get this fixture basically and next we are cheek in for some condition are to perform. The chicks were using a special DSL or demand specifically language that adjustment provides for us. So here we see that air up is expected to be truthful to make sure that the actually our works eso there are also some author, um, specific chicks like to equal or maybe to contain. There are lots of different helpers that Justin provides for us, and we're going to use of am quite extensively. So as you remember, we've actually broke our test by changing this line of code here dis title. And so, for example, of these lion of this expectation will actually fail you because of the applications. Steidel is not up. It's actually app not working. And the same goes for these expectation here that is going to break as well. Because of the H one header is not going to contain a fists are string. So now let's cheer. Could by saying in G both for and GPS N g test and what's interesting ease of this government will also are on hurl for us and it will. Iran are indefinitely. So you see, this browser here is not closing. So basically, Engy Test is going to moon it or our file four changes and where never something changes of the test will be Iran again. And here we see that we are that we have three are specks, three desk eases on. We have two failures here. We ships we can see actually what this failures are and at the border received the actual try to and are the Quentin's off the main page off our website which is really, really convenient. No, let's are fix out test by Gu here or England is incorrect title. Now I'm saving my file and see what happens, you see So now this line off Good Waas ended, I hear on and now in our browser we see that the rust respects and no failures. So Beth brought too much heat with fixed the desk broken by us. No, we can stop these process here and now. I hopeful. Hopefully, you gear to basic sense off how your tests care look like off course. And the upcoming episodes we're going to took are much more about unit tests about and trend deaths were going to see how to test your components, your routes, and so in some. So So let's wrap up these video for no and proceed to the next section where we're going thru just our components. So hold on tight and see you realism. 3. 3 Testing Components and Models: distant components on mortals. In this lecture, we're going to lay some foundations by creating and you can Poland and you model. And also we're going to write a very simple motile test. But our editor and often let's make sure that our guests are running properly by running engine test Stand as you remember, that is going toe open our home brother for us, which is going to Iran indefinitely. So this script is going to monitor our files. And if something changes at the tastes will be our Iran again in real time, and you can see if the free you one more. Meanwhile, I am going to go to Bootstrap CD and Website and copy this line off good, so I don't want my application to look like a total crap. So let's apply some style and tweet with the help of a boat trip. Four. Who, which is currently in beta bart, It here's wearing nice, very, very nice features on. Hopefully soon it will be released a stable directions. I think we can police, um, trips. Child's so right here. There's going to be a strange toe closely with nature, very upset to this value all that seat we can all see, media media are equal school. So this index dot html is going to be used just like layout for pages off our website soba trip should be included in tow pages now. And also we see that our tests are working just fine. And note also off the off derive saved this layout. This line appeared our second time. So the JSTOR Iran for us all right are No, no. I think we can go here and stoop this group for now and generate and you component used in the school generator. And, for example, that school, uh, let's go to our Suppose we are creating a simple bookstore service which released are some books and the clients will be able to purchase them by age in them to their cart for now and later, we will apply. Maybe some more complex features to thes are application. Yeah, Should I think the circumvent should look like these? Okay, so that's going to Gina. Read a component for us in a separate folder on Also, it is going to tweak the AARP dot model door t s as it's set in the last line So here is that this new folder we are components and all the competent files also note, by the way, that some simple RTs towards created for us here there simply cheeks of that component is expected to be truth e. Also, it creates a test bed and all the stuff that we have disgusting in the previous video. Okey. And also note that some new lines of their edit year. So, for example, we are important component and it is headed here to the declarations attribute, which is quite okay. You know what? Let's also create a new folder are called conformance and move Ah, Books A book Sorry there and also weak the both Like this Also, let's greet in your folder cooled are mortals and its site we're going to hear obviously Andi, a file are cooled Don't spec door two ts that is going to Who's the tastes for our book motor Put out is going to be empty are no the actual motile book Moto Doherty s and it is going to hear an interface an interface gold off course book interface it is going to hear string our image title for string are a description for the ah, well, let's take. I think with the string goes well off, the price is going to be a number and up roots, Please Go sit is going to be number two. So are yes for up boots. We're going to take year off this attribute a bit later, but basically we're going to have a bottom called Upward Forage Book on. So the visitors will be able tow like his book toe upward heat and as long as well, as we have a store, a shop and online from for the books. Of course, each book should have some price because I don't think we want to give all these books for free. Our next we're going to see expert glass total that is going toe implement. Um, I will interface are so it is good to hear a constructor. Um and I think, let me just please thes things here. L do it alike. Thes. Let's also set a default value for their upwards to zero. And that's going to be our constructor. Nice. Well, let's see that now. The next step I want to do is I want to art week. My are Bakich door G's and file are specifically of this day of dependencies are section white because we would like to use a library court fake. Probably have seen it. Well, if you haven't, that's a wary, simple library that is going to Crete some on sample DEET for us because you know our when we're going to do some testing. Obviously, our books will need to have some simple names, simple description, stable, simple prices. And, of course, I could have um, entered that information by hand. But it's much easier to utilize feature and ask you thesis library to generate some random deter are for us instead. So I placed figure inside developing dependencies Andrew and B M in Stool or End. It succeeds. And no, let's our test our mortal. So those two lines to import our book interface and the actual model. And also I'd like to import our feature to see it, some to generate some simple detail. No, let's say describe off motile. So is a convention. We are name and his describe look after earthy gloss off that would like to just and inside . Let's say let image Stringer title is going to be a string of well, description stream, then guess water prices. A number on upwards is a number two, actually are. Of course, that should be seven. Cool are now before each eso before each is going to our peform arm. Very simple action. Basically, it is going to generate or simple data for us. So, for example, we can say that our in which equals to figure Duterte are some think image. So here we are asking this library, please are generate some think image for us on Well, what's interesting figure has lots of different fake religious like images off kids off nature and so insults. So the images are, well, quite beautiful. Actually, our next of let's do a similar stuff for title and for description to generate some worse on and some sentence. Next s for the price we can use. The nurse do put our prize and next up foods, which is going to be some around, um, phone number like this. So as you see the school this well, quite all this what's what's to do, what it it is doing. And so let's proceed to our first or just geese. Let's simply see meat. Here's a village Motile next fit the role next to function and we're going to say, Let book, Let's instead sheet at this book motile now re than e which with the title this creep show Bryce on apples. So we are taking all those values for wrong before each block Those sailors who are already populated for us by faker. So before each test, Keith, we are regenerating those values. So we're using them to Instead she ate and you motile I'm no, let's set some expectations. So, for example, that say that Booker T which are equals image So we're simply chicken that the model was Instead she ate it properly and just those lines and c title here and here of them description, then the price and then Ophuls Oh, sexually should be price. There's pretty much in desperate much eat so we can run and g test. No and it works as you see, So the next step is well for simplicity. I'm going to tweak our app component Doherty s by importing on well looking trophies on and motile for room mortals. Tabouk don't immortal. Well, actually, it's not the best practice. Bardwell for simplicity. Let's do it for now, at least next. We're going to instance sheet on Humoud al. So here, let's say public. He's a Muslim. We went to saying You mortal or which is going to accept some arguments who specifically something like that. So I've just taken some image off this book off Tom Swear For or Mar Wikimedia website. Next of the Titlist on four of them. Some simple description, some simple price and some simple upwards. OK, on next. Next, let's proceed or two. And the file called AARP component. Our daughter HTML and police. Ah, this new book here. So let's I think, removed these things and well, so that's like not need it. Instead, let's utilize our some off bootstraps glasses. Specifically, we're going to define a new container. So the title Let's leave it be for now. Next, let's see the closet through. So, as you probably know, trip provide some rules. Some Greeks see sting for us and so the role will a line. All those things are properly next. We're going to see book equals two on bootleg piece, so we're going to take that motile and display it. Here are there are a couple of other things that we should do before ripping off this video . First of full, I'd like to import book Mortal inside book component. Next, we're going to change this selector to just book. Ah, well, because here were saying simply book. So obviously we need to use this selector here as well. The next thing is, we need an input boss. And also, let's say input here to be able to use it on Lost Lee. I'm going to go to our spec here I am going to say book component on and book component to the least off declarations to the least of our declarations. And now we see that it's a success. No, let me open a browser and we see the words and book works of loose aswell. Some sample, some simple words of it. Who generated for us inside these html r file so we can change it to anything else. Ah, that's pretty much it. So let's rip up of these video and proceed to the next one and talking between more about motile send components. So let's are proceed toe our book component. And here I like to create two methods. The 1st 1 is going to be upward. So here I'm going to see holds plus plus. So this way we're going to basically increment in the number of wounds on and let's do fools count. Or and by the way, that's returned here. And URAS well, say these boots, all boots like these and the Actually it's up rules, not simply worlds, because that's how we've called our motor attribute. Next, let's proceed to component to it html and remove all the quantum clear and instead, let's provide some cost a markup. So specifically, we're going to use to roll are provided with a style and provided Bible trip. Next, we're going to hear the bunch off our columns. So inside the first school, I'd like to discrete the image Oh, with a loss in which, um, I'm name on, that's going to be our image, Eyes for the force. I'm going to bind it to ah, that image just like that. So here we're going to fetch of the books image, treats, attributes and display it right here. Next, Um and not the cooler Ive civically it specifically. And, um, by the way, I've missed righted here. So yet um probably is, you know, a trap provides asked well, for columns to form of our Quinton to layer off four layout. So we have agreed system with the bootstrap. And so when we're saying it like this Poland four, it means they're This content is going toe okay by four parts off our screen. And when we're saying visa means of air, the content inside is going toe Occupy eight parts off our who are screed or well, to be more precise off the Vinto, right? And said we're going to create yet enough the room. I just hope it quickly pieced it later. And here let's see each to with the gloss off our title Ondas for book title were simply going to say nice on inst we're going to hear in h four with a close off for his uncle Off price. Dr Price, of course, are inside. We can simply display the price for this book, but I like to do a bit better here. And former off price with a currency for matter. Um bye bye. Scenic leg These So this pipe here means that we want to format our will. You here with the currency for matter in a form off years D and the price should be prefixed with this simple like this stuff like that. So that's a default for matter that is available for us. You may find it here. So in this speech on at Angular, do what I do. It explains how to use despite and it notifies. Also, that we need to import are the currency pipes. Or let's do know we're going to go more book components do tears and imported here. All right, let's proceed to the next um attribute on the next that ship. It would be upwards. It's for couples. Well, we can see just up foods, display them here and do the same for the description. So let's say description here description here and the thing he's yet in all the room. Oh yeah, not the rule. Let's see, we have bottom all with the click event there should around the world on effect when this bottom escalate. So when I click upward, thes method here are just defined in our components should be called, and the number of what boots will are be incriminated off course. Currently, we do know store off this number anywhere. But for now, it's, I think, would be quite enough. Now let's arrived some tails and I'm going to do it right here. I'm going to say our import, our history as a thinker for all faker are. Then they already here old component, and we're going to see more of you off food that should be modo bordered mortal. All right, so this artist is, well, partly prepared. But we need to do some more preparations first off or will require our book adversely. So let's say motile here. And also I'm going to define Native Element as an HTML element of that. We're going to work with a bit later to be form. Were Squire is on our selectors on the page. Okay, Now, also here are his book component in, Say, declarations that that's fine. So we are interested in V's before each block where we'd like to define as an instance of both book motile cloth as an instance off Uncle Close. So we're going to utilize Thacher once again here to define this book models. So let's say feet the car, then it should be all fiqh or all words then for example we can use Oh, paragraph for the description then that you know, some price. I know that the number of work boots are should be zero for No, Let's see that of the components. Who is going to be these book of that we've just defined. Okay, on Lost Lee, let's greet Needed Element equals two fixture native element here. All right, so the only test of that we have here, let me collapse it. And this is what s So they're on. The test that we have here is well, it should. Great. So we're simply tested that the component is at least being greeted. Well, that's fine, Parton. What? Enough for this. So let's say it shoud, for example, showed that image. Um, I'm going to say let much need to filament, and then we need to acquire it for the selector. So we need to find the selector on the page. That's going to be much so off this one here. So we are searching for the image dig with the gloss off image by using the square is select or the method on. And then we're going to see yet attribute because we're specifically interested in the force attribute off this image, and we're going to save that the image Well, actually, that's an image is off force. It doesn't matter. I think I will cool it right now are but anyway, so that we expected the image to equal of the image off the book or steward inside our variable. So that's a simple Senator Chuck. We are chicken. If the image is being properly displayed on the page, okay, we can do the same off for the book type. True that Take, Let's do pretty much the same. That's the native element query selector. But there's going to be book title in this case and where are interested in our HTML in this case? So we are getting age to take here and where taken, eats our content and just like we've done it previously, let's check that the title is or correct. The same test can be done for the description, so that's going to be description description here, here and here. As for the book price, I'll let's say the book price Rice Native Filament Choir, its electoral price. He'll there's going to be inner HTML as well, but we are interested that the price is actually fermented properly because, well, we cannot simply say, dude rice here because of this, uh, this test will will basically fail. Why? Because, as you remember here, we're using the's pipe to form it. The number that beat differently. So, for example, if our price is this one, we're going to compete and replace it with we the string and say it over. Sign off them. It should be called. And here it should be taught. So that's how I'd like my Bryce is to be format. Okay. Ah, that's it for our initial tests. Let's say N g test you. And by the way, if we'd like to add some taste that is not yet implemented, So I just don't want to forget about the stairs, But I don't want toe ride this just yet. We can use a special our function called X. Let's put exit from our side because we have some field. Just so yeah, I think you know what's the problem? I forgot to remove upwards here from the description. Sorry. And the next thing is that this line we are defining and ary off words and you see it says that it expects that the stream to equal on a range. So here I like this saree to be converted to a stream Goodbye he's enjoying. So let's save the file e of begin. And as you see, it works. And here is how our book looks like well, without in you a real styling. Okay, No, about X each so X eat is a function to denote some tests of there are yet not implement. So we can see in you anything basically And this test will be simply marked as not yet implemented and the whole distance you'd will not fail. So your seats at one ment inspect. All right, so, um, rip up this video. Let's write a couple more tests. Our first of four it should say of the career. A number off awful. And here, let's say let wounds include true component endured towards counter. So we are cooling off this function here once again to get the current number wounds, we can say there is expectations here, for example, we can see that component are foods going to shoot equal on a number of holes? That's a simple sanity check, but we can do more fancy things. For example, we can see that the number foods should be greater than woods minus one. Or for example, we can see No, what then to equal. And for his uncle wounds lost one. For example. We can see to be lius their wounds plus one. So that's how you can do There is Compassion is for your values. And the last test for this lecture is going to be up food in groups, the component function or the component our method like this. So what I like to do is I'd like to great a special are will object called our spy And it is going to spy one hour component so it will detail what are happens to our component. What functions have been called on this component specifically, I am interested in the upper world functions. We're going to define it Borden and say that this bottle equals to meet if element off why re selector? Oh, where we can Fitch simply this bottle because we have only one bottle on the page or we can say upward. It's up to you basically. And next I'm going to say Barton dot Khalid so I'm are well programmatically. Ah, cool Avik leak event on this bottom And what should happen now All these for this spy should be called. So when I run, my tastes are the work expect except for this pay engine off thing here are and well also note that when we're creating despite it basically creates special mook so well under the hoots of this upward function is not being actually called. We are just pretending that the dysfunction was cooled for us. Fool will be declared the number Woods will not increment. It's just like ah, some mook of it was created are for us also No, let's try to see in Jesus Are you open to see if our obligation works correctly? From the user's perspective, it opens the browser for us and he reace our foil often prices for mated number of port zero by when I click this button, you see it goes up and up and up. But of course, if I update the speech, the foods is reset because the number of ports, as we said because we do know what store this veil you anywhere. So let's wrap up this video for now and proceed to the next one where we are going to implement, save and destroy functions. Four. Our were mortal, so hold on tight and see you really soon. So here is a model and let's create a new public are step, tick or find method of that is going to accept a title. Poof. Our end, Obviously, that's going to our search or for these. So that's going to be a nunnery for models. And we're going to your G's and the bars are function here. I think we can stick with local storage to your ceased our data because, well, it's, I think, the simplest solution. We won't need to set up our own database and local floor, which works out of the books and major brown there. So let's simply see, get item. Ah, books, war. If there are no books, we are returning and empty array just like vit. So that's going to be a stream here about where the stream gets past two. Decent or parse, it will be converted to an empty area, so that's the first step where we are simply full of the books. Next Lift Street or there was books and see if title equals to the title. We're going to return and you book motile Where, Um, we have a book image Tyto description for a while, the fields that we have created in the produce in the previous videos that we have worked with in the previous videos. All right, so that's going to be reaching when Lost Lee lost leave are just before this close and our break it read, Let's say return No, if nothing was found. So if no book was found If this return never happened, we will a full back to these return and return. Nothing saying that story, but we cannot find anything at all. Next, let's greet S c U method. I'll see you that we're going to hear the books that's going to be in a re Mortals once again, we're going to see, I think, Jason, don't parse again. Vie cooked in this line of good you and next I'm going to say groups for each off. Then the first argument is going to be item and it's index or well and its index eso there are going to be two arguments. Oh, and then there is going to be this function here. Or there's going to say if fighting toe title equals office. Joe Torito books dotes arse place looks one something that next Let's say books are Don't push to actually add Ah, this new book to an array or books And then we're going toe your ceased off this and you're really works by saying Jesus, string defying books, then retuned. So we are cheek in that we cannot have two books with the same title, and after that we're simply pollution off the book thing. You book toe an existing ary that is created on this line off Good and next we are persistent are when you arrayed to local storage under the he named books. Let's it. And lastly, let's are Do they destroyed video? Twin Method. Once again, I think we can copy this line off court to get all the books so that we have something to work with. At least then we're going to see our books for each, just like we've done in the previous method. And let's simply say that if I two title equals to the title of the provided book, we are good to see books plies give simply see our local storage set item and then Jason String. If I books, then we're going to, well, ritual long, for example, or I know we can return a book that was destroyed. It's up to you. So all the No, the idea is quite simple. We have an array of books. We are su chin of misery for the given title. Then we are destroying. We are removing the sighting from very and set and saved this new Suri in tow. Our local storage. That's pretty much it. And I think we can test it now. Also here, let's are do some tweaks First, a full Let's say that. Let and then let's two week this before each our function by saying this notebook costing you book more. There's going to be much told, Scripps from Bryce. End up holds so like event our next. What I'd like to do is electric reach our mook off our local storage. So in our tests, I don't like I don't want to work with real local storage. I'd like to greet some fake version of it by using some spice. So first of all, let's say that over that storage equals to this are empty old. And then we're going to create a spy and say Please are Look after the local storage over thesis render object. So a spy own at the real local storage. And whenever of this local storage is being called, we've get idea. We would like to call our fiqh function and see that it except a key the string and off to that going to see retune storage key. We're going to simply return? No. So this way we are mimicking how local storage actually works. So instead of working with reward local storage, we are goingto work with our some stub version over off this our technology show. Say next. As for removed item, we're going to hear pretty much this saying is going to be void here. We will simply delete um, something by the G and the function itself is not going to return anything. That's a wife, said wit. Our next let's see sale item. It's for set item we're going to hear are both it you and they you actually sorry. It should be like this. Um that's going to be a string as well. And here we should say that we are retuning as storage. Um, with the value off string and lost Lee. Let's spy on of the function called year. We're going to go freak. Oh, I think, without any arguments. So just empty break. It's We're going to say that storage is empty again. So that's how we're going to clear out our storage to prepare read for the next O. R. All right, full list. We can save it off for each. Are police going here and your of the local storage. And as you understood after this function is actually called, it will be intercepted by the spy and we're going to cool of this fake function. And so we're going toe work without our object instead of working with the real local storage. So you are everything is prepared to write of the tests full. Let's proceed to the next video and the test. Our were our finder safes and destroy function. So see, in a moment, a let's our group back or to the tests that we have written in the previous week gives are specifically to this taste that works with bottom component to click on it, and she took their this upward method was actually called. Where the button is clicked are you may find that you are getting an error similar to this one. Well, that says that bottom doesn't know how. Toe candle of this click our function. And so in this case, you would want to replace it with the full line off code by saying our dispatch eveld so well, it's, um who elaborate way of doing these are. But it should work, at least for you. So let's see n g test and I think when we should be good to go. So you had two x quite some time to prepare everything to compress our essence. I have nowhere when everything is really received that it ends with success, which is quite good. All right, let's return to our boodle Are spec duty s file And here I think we can get rid off this line off coat white because in the previous video, we have created a these line here to prepare the book. So in this, keys of this line can be removed, and we can simply see this in Jordan. So we are using off the object that was greeted are breathing. No are eat Ah, storage work. So that's a simple test that is going to see if anything A is working. It'll, for example, we can see that we expect in local storage, said Item or with some key with Sal value, uh, to be, don't you? So this way we are testing on of these light off. Good. Next, let's I think opiate and see guilt item Seiki and then say to be value Andi. It works as well. So here's local storage. Working is green for us, which is quite nice. So that's a simple sanity chip to make sure of the local storage is working. It'll next. Let's proceed auto the test for the find method and see it. Here's find method walking. We're going to see something like that. Let Well, let's call it like the book from storage, for example, it's It should, of course, book motile, and we're going to say book motile that find off these durable not right. So we are saving our book to the local storage because, as you remember, after each day s local storage is getting cleared out, so we must populate it again on then we are chicken. If the book can be found at all in our storage, you know, fake storage. And of course we to say that we are expecting of these little book threequel book from storage. So once again, we are just checking that the found book is the correct one. No, of the same for, uh, receive method. Once again, we need to use these Nazif and well, we know this just can be quite the sea. My Yes, Well, because, um because what what is meant under are seen it here, save method working simply means that the book should end up in our local storage. So the test can be somewhat similar. Toe what we have written from Balu. So, for example, we can even see it. Here's the find and save methods working because in this test, where chicken both methods on, we are expecting them to work. Correct. It's not the case for the mystery method off course. So here's three method working here. We are going to clear a big, different cooled. We're going to see this book not safe, and we're going to see immediately destroyed and what we would like to do is we'd like to check that this book is no longer present in our storage. So specifically we can see book from storage not to be our truth off course. It's not going to be truthful. If it is, it was really destroyed. Why? Because where we are calling this find method. Here we are going are to this method. And if not, if nothing was found, it's going to be No, Here is the result and no off course is not at Ruthie value. And though so we can, for example, say something like, Oh, you cool? No, that's not well, uh, this is not required, basically. But you can do this way as well. Toe. Make sure the book from storage is actually now are we're having the same problem as before are so the book's title is an array off wards are and would like, of course, it to be a stream north and Ari. So let's proceed to this line where we are creating the title and see Julian like these. So no, our testing suit works. And of course, we kill. Uh, soon our application will actually, we won't see any change. You see, in the user interface, obviously, but let's just make sure that our application is is working at least. And nothing bad happens when we're trying to throw it to me. A real the beach and the absolute everything is working just s r before, that's what Nice. That's quite nice. And I think we can proceed to yet another. We do and our create a car for our on the bookshop. So see, in a moment to our editor and let me open our book component O T s R and hear what I'd like to end years at this line, Let's say out and then you need so a news, too. Um, new libraries are going to be used to creat well, some sort off cart in our application because, after all, we are pretending that that's going to be a book, our shop bookstore. So, of course, that the user we'll need three ability toe aired a book looks to his car. So in this video, we're going to implement this functionality and they had some tests to eat. So here, let's say that the outward and on to Claire and then event you mean are here. We should see motile because, after all, we're still working with the model it should equal in you event. You need to meet this event. Seen that something was added to the card. Next, let's start agreed yet enough there Method here. And as you probably used, it's going to be called our send. But we can call it air to toe card. But I think let's say it's simple car and you meet of these you veiled and say these daughter book eso by Colin Ascent toe cart For some book, we basically you meet an event called Add to Cart. So our next we need to our change our template. So let me open my template. No, here it easy to get some junior external with the help of both shifts were and we want to greed and you bought And here let Nicole at least one and see a theater of these bottom is going to who are send to card setting to guard. Uh, let's give it some course as well. And our change of the text here is Well, nice. Um oh, this is it all. The next thing is, we need to take a year off our application. A component of GS. Okay, so here is our our app component A hero. Let's save public. Kurt Motile, um is going to be an empty eerie So this is going to act like, oh, card eyes for the model itself. We don't need to do any changes and here I I think we can read and method called it to card . Oh, quota! Once again on after that let's say this Do your cart, Lord Wolf. So we are taken of these very well here and pushing and you book to, uh, array this we were getting in your e off all the books in a cart. Our next let's go toe ep that component does html and two week our layout a beat, for example. Here, let's see that that's going to be not just a book, but I had to part and then end two card on you then. So we are making these are a bit more complex by age in thes near than here. Also, we can take a look at what's inside our car by, for example, creating new home, my lease and inside. That's the part. But I'd like to be, um, his data to be for made it in a bit more convenient way. So, for example, let's say G since clear once again way using thesis a pipeline to future our data to form it our date in some way. In the previous video, the used currencies you remember and know we can use Jesus. That's a bute in Parson as well. All next. Let's our goods you don't see in g soup it open and take a look at our application. How it looks like so far are so here. Ease our replication. And as you see those toe square break its mark that our Kurt is currently empty, we can click, add to cart and as you see it gets up, deed it immediately. And so the book is now in the cart on. We can do it as many times as we like. No, let's write some tests by going to book our dot component spec dote at years. And here I'd like to write a two more tests. So all those changes a lot of those before each blocks, they do not require any changes. We should simply they had to do more tests are right away. So, for example, let's say it. Should they have to card you then and insight I'm going to subscribe to and you event so specifically, let's say, end toe card. So that's our were event are created with the Help off event imager. Next, we're going to see which is going to represent our event, and next we'd like to check that equals to them, prevent it equals to the and also we need to see Don to just mark of that of those tests. The this test story he just finished his job because of the event is not processed immediately. It can take some time to process this event, so we need to provide. Done here is an argument and called Don, when our everything is basic curated and next we simply see component. Can we send a car? So we are, um, a running in these method Hugh, which uses in need and process of this dog book. Let's return to our tests again so this test is done. Let's great yet another one before rep in on this episode. So let's say it should forward to function Cento card when our click well something that's who we'd like the chip of that. Well, the button is clicked, Um, basically sent to court. He's being our court once again would like to use spy for the US just like we've done in the previous video. So it sits by own again. But this time I would like to spinal component and s 4. 4 Testing Forms: in the section on in this lecture, we're going to do some preparations before driving to the code. Let's at discuss over briefly the types or forms of that week in Crete in angular, the first type of forms e schooled, a reactive forms or sometimes that they are called motile driven forms. Are they? I used to be formed some complex chicks, complex validations, and that's the first stripe off forms of Ed we're going to discuss in this section. The second type is called template driven forms, but they are much simpler off then reactive. They're fully defined in the template itself, and we're not going to talk away. Raid in well, very detailed about template dream forms in this course, and the less type is called dynamic. They they can be either a reactive or template driven. Now they are defined inside the component itself and later of the surrenders on the fly. Inside the template, we're going to create a dynamic forms as well and hear what I like to do is I like to import some. You stop here so specifically are I think we will require our forms more do, obviously, because we're going to test forms and a reactive forms, but we should require a form and Giller Oh, for like, this are nice are the next step is I'd like to import on it here. I think I'd like to import a Walter more You and rolls are we doing? We're not going to Deke are very deep into routing in the cell video because we'll have a special our section about testing the roads in angular but for no, we need at least some, some basic our routes so that we can hear their ISP Agius with the various forms. So here I am simply a requiring this stuff. Next. What I like to do is I like to create in you construct and see her old's that's going to be our outs and Hugh. We can seize and like off two books I am. Then the title is going to be the variable part. Ah, yes, for the component that should be book component, obviously so that ah, this path here is going to be used to display are some book based on its title. Next, let's say agent so that we can modify our book and that's going to be booked. Added component. We don't have it yet, but we're going to create it. You the next we do, then we're going to hear, um, yet another path to of the books just to display along the books from our some kind of database. For now, where used in local storage. A zit is well instead of a database. But that doesn't natural, so that's going to be a least component. Oh, right. And next, let's offer see both like these we're going to redirect Toe X are both march. Should be full sorts, like our route beach off our application. All right, Next. What I like to do is they like to go to imports and say that we're going to train for trout . Oh, sorry. Are out. Or, um, the more you'll like these all four route for roles. So we're simply taken this story. They think here and pass it to four route. Our function okay, are also I think left import off forms model and a reactive forms are marching. Our next let's do some changes to all AARP dot component door html. And here specifically, I'd like to display our outer outlet. So let's say or alter. Let's clues it. So that's how it it is done inside our HTML file. And next, let's go toe up our component spec all right here and in part, wrong. Do you esteem more deal? It's like for the future, because I don't think we're going to test around in this section. But why don't we import it right now? So that's going to be a fungal rot or destiny Next here off the declarations, let's see imports and see your old or testing model so that we can utilize it. A leader. Also next we can generate in you component eso. We can generate a component called or lift to display, basically at least off our books. Alleged dude by saying Angie generate component book least so is you see all the files bill created for us and a up module tortillas. Waas changed for us as well, so it says book released component here. But I think let's move it to the components directory him specifically I'm going to take this food or and move it right here. So here ease our from book least off three Al. It's double check of that Everything evil right, And indeed it is. So we have some wary where basic structure for our when you component oki aan Lastly water like to do is I'd like to cheer our HTML file so well, let's, I think, remove this one. And instead, let's define Aware is simple. Marco. Ah, here. We're going to use N G four lead book off books. That's going to be our diva right here and neck struggling to see it's going to be a column off three three units and next is going to hear and force Wolf all were you much. And it's going to be a close off image fluid so that they see much years well, somewhat responsive, shall we say or next? Let's close by. It's already closed, so let's move next. We're going to see our Coolum life, for example, Glue Cities one here and next Saybrook type. So we're simply displaying some basic information about this book and then, once a G on call them off. Three like these can weekend display H riff well, for example, let's do some flake, vit. Well, let's see here did here and next. I'm going to see books or than loss Prabhu title. Our loss. It it. So that's the link to edit our book on. We've generated of this both or right here. Off course. We don't hear this component yet, but we're going to create it in the next video. So that's pretty much eat. Ah regard in our view, our template. Next, let's go to book least dude component NOTTs And here let's see, if we have everything in place are specifically I'd like toe change this. Construct a repeat by seeing these notebooks the model in George acquiring our model. Don't query. Obviously we don't have any book model year, so let's important right now by saying Total and it's for form of That should be by the mod ALS. No more Sorry, Booked a mortal All right. Also here we need to see that books He's in a rage off poodle. So I think I'd like to do in this video is greed and you method called quietly because we're using it in our component. But this method is not was not created in our mortal yet. That's going to be a prayer, public static method. I'm going to paste the code now because it will looks where much of the same s of the method off find. So once again, we're getting the array off over the books. Then we are cheek in. We are iterating over the Serie and Bush, each book to our book models array. And then we're simply return in all the book mood ALS like this. So there's pretty much eat for this video. We've done some preparations so that we can proceed to the next. We do Onda start greed and are the book editing component and our flesh in it out. So see you in the next video. So let's are proceed to our terminal and here I'd like to generate and you component Goldberg aided. So the component that's going to take a year off book editing are once again let's let's move this photo folder here on the components go here and the change of the bath beats by seen conformance total are all right on next. Let me open Are this component and here I'd like to import some and usual stuff. Also, that several component of course we are interested in And it or now Sue because before we need activity to trout are for room and gold or older. Next, I like to import off the full in form beautiful foreign group. Our village leaders too. Well informed validations, obviously abstract, uh, control. And for conform, uh, three. Mm. Angular That stood like this. Angular, All forms off course. Nice. And also, we're going to import our book motile. That may just copy the corresponded line off road from this file because, after all, we're going toe work with Brooke here as well. Oh, as for the next line with component, we don't need to do anything that cool. Ah, but next, let's two week of this book aided component are close. So here, let's save now headed form. He's a fun group. Sorry. Book is going to be a book model. And just like before on next fictive form is going to be a string are reactive. Ah, that's going to be used to see well, to check or change or what type or form? Or do we care our next? Next? We're going to a week. Are were constructor here? All right, let's I think collapse of these our component for now. I'm just thinking we need to remove this here And so does this seem for our book least component? Remove this tape part here as well. All right, let's collapse of these and now proceed to all construct. So as for constructor, we're going to hear quite a lot off. Good. But, well, fear not. It's not Ah, that's competent. That conflicts first awful, literally will require a form beautiful. Next, a za private is going to be route activated Road. Next, let's say these notebook look age it form equals to the group. So that's going to be Authors Group, and obviously here I'd like toe least away the fields of that. The book are hairs, so the fields that would like to modify let's see, for example, will it deters not required so that the title well is required. Let's copy this line off good and do the same for the image. Image is required as well. Yes, for description. I think we do want to really require the description, and it's with the price. I don't know. Let's well, it's not your quiet as well. Of course you can required if e. If you'd like to. Next, let's say route adult forums and don't subscribe so we're going to subscribe to sound changes or let's next oh, defined function instead, This function I'm going to police the full of include so specifically we're going to utilize a method called find that was already created in the previous video are Here it is . It's a public static method off that gets in a real for the books and then finds the book by its title war. If nothing was found a now he's returned. So inside of these subscribe I'm look here where? Chicken. If the book is no, then we're just gonna head and creating. And you book motile hokey. No, Let me collapse of this constructor and greed I said meet Look, submit a reactive form and it's inside. We're going to see a layout. All Dita off these doors Prepare Save Nice On next the these equal student you motile I will veto indoor team Which and then all are the fields of that We here for slow on 2345 Here we should see title Then we should see description Then we should see price Okay. And after that we'd like to say safe just like that. Okay, are so next we off course needed to define Prepare save book because we don't hear this method yet. So that dude below by are taping the foreign cooked. We're going to give a constant called for model of these don't book aided form. Not really. So that's going to be all for, and it's going to be retuned for room. Are this method from this method? No. Let's tweak our HTML file for both edit here. I'm going to create our old once again and yes, for the first cool on it occupies the available space we're going to display in each one hit or seen edited book, Our Buddha Tatchell, so that a user I can see what exactly he tries to edit next. I think, Let's define, get another room. I am inside this rule. We're going to hear a one column for now, and that's going to be around for a link. And when this is clicked, I would like, um, the active form to be a real detective so that a user can choose what a type of form are he wishes to use. Well, of course, that that's not something that you were you that you'd often do own well riel world websites because, well, basically, users do not know what is a reactive form or what is that simply dreamin form. But that's going to be done. Only four are starting purposes for us, so that we can change of the tripe or the four that is going to be used. And so this active form here, mystique and for this life, you basically on later, we're going to create more links in this room and, um, greet more types of forms. All right, No, let's agree to form and see in G. Ive 84 is sort of form. He's Richt. So if our we've chosen the reactive form and we're going to have a form group did for then alleged Ung said, Meat, our end off this limb, let's say here said meat or reactive for that's supposed to see Novalee Deed for now. And Kalou's All four so submit reactive form is a method that was created by us and a moment ago looks, let's see, we're going to give a role. We've some margin or the group. Some strange things are happening with indentations, but yeah, all right, Our next let's see that's going to be cool him, That's our reactive form. Next, let's define yet in north the room he your with deep closing. That's going to beat wealth here without any margin talk. But there's going to be a form group, so I'd like to book a trip to do some style. And for us there's going to be a label for try it'll. So here we should see title off course and next we'd like to see are in. And as for the input week in our Be Wary, were specific about how this input a should behave, how it should be validated. So let's do some more code. And for this important alright, so first awful that say form control. Our name is a title, and the type of sticks to the name is a title, and the glass is gitell form control. All right, Next a next we're going to see in geek loss and then we're going to say it some well conditions through specifically What I'd like to do here is I'd like to assign a clause schooled he's invalid, bought only well. Book did it for where the book edit formed on the controls for a title he starched. So if it was mortified somehow and and when we created form are controlled Steidl, let me just go, Pete, I think, uh, dude heroes. So if there are any errors were going to mark of this field as invalid, which is, well, quite office, basically. So this way we can our control, um, What should happen toe our input if something goes wrong. If the usual has provided something correct Input mixed let's add yet another dif and see if they lit off feedback, for example. And here we just will just display ever small or feed bed by saying police provide village title like that. All right, our next I think we can just go ahead and cologne of these former world beast it right, Hugh And see, for example, in which our Eurail Ah, here it should be much image and then pretty much of the same for all other attributes. So image, image, your image here, a villa de much or of illegitimate Eurail even. Let's scope it once again. And here we're going to hear a description. But Willis, what description all thinks are a bit more simple. I guess Yeah. By the way, here it should be image here. It should be description. So it for the image. We don't hear any validation checks because we have specified that the description is an optional field end and doesn't have any other cheeks. So I'm going to destroy school here and safe text area. So as for text area, we're going to display ah, foreign control name Close on and that's pretty much it. Next. Next, let's a display. You, ah, fields to change. Share the prize? I think so. The price here price here and here and here as well are of the type should be a number. And yes, because it's new Marieke after all. And it's for the glass that it's going to be price here. We don't have any validation. See, year for the price soul that's just removed and remove the feedback so that it does not steen away. And lastly, let's display bottom. The type is salute off course because we'd like to submit the form when the button is clicked on the I D should be reactive. Ah, sig meat. What of the gloss should be bought but on our primaries so that it is displayed an offense . The offensive blew off the ground and they attribute Disabled should be saved if the group did it off for these. No, something like that. Then we're going to upset us to see certain it or a did something like that? No. Then what? Also of this way? This way. We've created all first Allah first form, office, reactive form. And as you see, nothing really complex is going on here. So in the next video, I think we can go a hit and write some tests for this form. So see you in a moment. So I've opened book aided component of that speck file, and here I am going to import a some really useful stuff. There is going to be used, you know, this speck or so next. What I like to do is under this fixture. All that's great, a neat if element, just like we've done it before. And that's going to be HTML element are so nothing else should be tweaked. Here are Let's cheer our test beds off. The declarations are correct, I think, but let's old are also edge imports and C or alter testing module all reactive forms more deal and forms module. All right are so compile. Components is okey. So let's collapse. It are now speaking off before each. So the fixture is already created. Our component is greeted. Let's also take year off native element by saying fix journey to filament key. No, we can collapse it as well. And also we need to be from some cleanup Orwell tear down. So we like to destroy a book after each have to reached spec after each death. But I would like to do it only if the component actually here's a book. So if the book, if is there, would like to say component that book to destroy so that we are performing the clean up as as necessary. Okay, so we already here one test there simply checks that the component is truthfully, that's nice, but of course not enough. What I'd like to do know is I'd like to create a special helper function that is going to few a four for us because, after all, in this test, would like to feel in the four and see that it is being submitted are probably so let's say they're going to hear function gold field The form not full, but feels feel the form, image, title description and price for the fields of it. We are working. We've let's see component Dordt age it form. So the form that was created by us and the producing video once again we're going to reference to the controls were going to sell the value off image. So this way we are asking the test. Please go ahead and say some specific value for some field love and really complex, as you see hooky. No, we can Khoury the actual test. As for the test, let's off uselessly eat. Oh, I should here off belong Feels in reactive a form. All right. And here I am expecting that all world he and it form, uh, live you equals, Um I m e much empty title. Empty description. Well, you I think you understand. So we just want to check that initially the fields are blunk. Okay, let's go. Next Eyes for the next test. I'd like to see of that This meat Barton, I should be disabled. If all the required fields are not set or are not field in or what? Here, I'd like to stick with the sink. Oh, like this? That should be a function here, I guess. All right. So that seats and that's his. Break it here. Okay, okay. So here, we're going to create a spy Or maybe even super spy or we're going to spy on our component are specifically we are interested in submit a reactive for oh, Then we're going to fuel the form. They're using the corresponded function and we real Aussie it of the required fields to empty values toe bled blonde curse drinks. Then we can use fiqh or a warm rigor, for example, but to feel in the description on them, they use faker to fuel in the price by using canners commercial Bryce. So we are feeling even of the form and then a little fatigue. The bottom, by using need to filament are wary selector. And as for the ideal weekend, utilize swell of the idea that we already here. All right, you are reactive of meat bottom. Next, we're going to dispatch an event like we've already did in the previous section, and there's going to be in your event off. So we are trying to clear his bottom but we are expecting spine note to hear being called for what it means is basically if even if we are trying to leave the bottom, that the form is not submitted, which basically means that the bottom is disabled so the form can not be submitted or we can also simply check our bottom. Here's a tribute Hard is able to to be far too. So we're chicken that this attribute is actually say it on this bottom. Nothing really complex. Basically, Just don't forget that you need to wrap it with the freak sink because where this section is quite well, it's a synchronous hooky. Next we should a season like it should hips of meat Lynn boat if required fields are Fielden Oh, once again, we're going to hear at this freak think And this you've probably guessed off the stairs toe will be pretty much of the scene properly, dual the indentations. Once again we can greet our spy submit reactive form. But in this case, I'd like toe and cool off for Ruto Actually go ahead and call the a really function the rial method. So even if well so and you're a member of the spy basically prevents their real function from being called. So if I create some spy on this component, if I spy on submit, reactive form are this way. So let's make a little committee for a second. So if I do just this of the submit, reactive form will never get executed. So that's going to be like a stop function if fake function. But if I like the real function to be executed off, then I should say and call fruit. So the spy is being will be invoked, and then the real function will be called. That's the I D. He'll okay next. I'd like to feel in the form, but at this time I like to use some. Really, Whaley's not blank blank ones. So let's say feet freak or you much adored Short. Langley's and Next speaker do world dot for example, sentence or we can use words. But in this case, don't forget to utilize join as well, to turn eat to extreme, you know, to generate All right. Next, let's say fixture are detect changes. A net splits search for all bottom we can use. By the way de bark element Y're and use the boy. See Assis Bottom May development. It's year to another way or for finding the bottom or the page. Next, we can simply say Barton, click Barton Click because well, if we try to find a bottom using the these way, here are the clicker method Doesn't seem to be working. So unfortunately, we need to use this lawn conversion, finding or finance the bottom and getting it, sir need if element and next we are expecting spy too cold to have been called. Okay, Next, let's get from storage. Let's define it and used motile toe actually find of the book by its title. I booked a title in Cynical and Next we are expecting book from Storage two week rule Gift . What component? So we are making sure of the This book was actually placed in the local storage off. That's why we're saying and go through. Because if we don't do this and this case of meat, reactive form wouldn't be called and the book will not end up in our local storage. Okay, are no. When I try to run my tastes, I receive this error from typescript. If you are receiving the same error of these Well, bonus That's strange here are not sure why it started to appear, but in order to fix it, you can go to your are motile spec And here online 59 where you can see any like these and do the same. Four. Line 60 the next week. Unjust R. C. This file is going to build all mortals again and the error should be resolved of the error should be resolved. Now let's see if our other tests are working. And as you see we are having problems. Who ive ah, submit reactive for spy? No, Let's double cheek on Dyear here An hour in G said meat we would like to see submit reactive form Bart are break, its should be specified. Let's see So that's going to be re compiled And now everything is green which means that everything is working just fine. We can even do n g serve See open and there's going toe open off this application for us. We can go here and see how hours aided form all looks like with all the tasting, I'm going to provide some something I hear in this string. This one um here is our empty form, and if I enter nothing here you see, It says police provide a really title. You may ask why east of this work in this way, basically, basically, when this'll input or receives gloss off is invalid. Our boots drop is going to automatically display of this Deve here. So that's our strips job off style in our this form properly and displaying this message. So if the rule is really simple, if our this element this input has a class off, even in Vail, it off then in Vail, it's feedback is displayed. Basically, that's how it works. As soon as I resolved this error of these invalid feedback is gone for good. And the same is for the material we see. So no aunt or something, and it works. It doesn't Well, nothing is happening for description and price. Of course, obviously because we don't have any validations at all. So that's horrible trip are Say it saves the D for us, shall we say? All right, that's quite nice. We have greeted some tests for our worry active form? No, I think we can proceed to the next video and take year off template driven forms. So hold on tight and see in a moment. All right, so we've discussed reactive forms and no, we can create another Coolum here and see that it's going to be template driven. Let's say complete form. Ah, hell, All right. Our next weekend, Kewpie part off this line off court, he'll close the form right way. Let me collapse of this. And next I'll replace it. We've, uh, complete Leven and C R t complete foreign equals two N g for like this. Next. Let me open for a second. Copy this. Well, you know what? Let me just coping with this markup so that I don't need to type it once again. Police it, Hugh close dif close the beef again and say template driven off form. He'll well, next and next. It should be formed group here as well, so we can see charge group here may before some most trial and and let's school it a title to so that we can differentiate between different titles on next under the label. I'm going to create a union put obviously And as for the input we're going to see and judge Immortal it's going to equal to look title off the names going to be, of course, Chai tow, but not just title but title to all. The type is going to be the text, just like before our beacon separated to try toe to and then cloths should be titled for Control and next title to is in Jim Odle. And also let's say that minimum length is three. So events how we can introduce some validations for our inputs. So that's an HTML five attribute, basically. Ah, but angle will also are well, which, with this attribute and if the user does not enter enough symbols, enough characters into this field of this future will be will be marked as invalid. All right. Also, I want this feel to be a required. So this way I'm introducing yet inaudible a day show. Oh, Keys, Nets next left school part through the diva are Yeah, I think let's say ngf are we're going to see North title to village. So you the title you've Northvale it and our title to his duty, meaning that it was judge it meaning that it was changed somehow or if it was starched. Yes, so if the title here's Inexistent Valley or if it was modified and if it is invalid off, then West scene the at this feud should be displayed. It is going to hear with the gloss in a veil. It feed Vic just like before and death for the style we're going to see displayed. Look meaning, um, the meaning of that. It should be a displayed on the screen. Let's double check. I think we've missed with dif subete because of these. TIF should go here. Then we hear that a No, it's quite correct. Likeness. Ah, inside inside we can display once again yet another deal. Yes, that's maybe too many Chiefs were going to say Title is required. Let's see and g e f our title to mirrors. All right, quiet on. Do the same. A little too errors mean length or and say title must be at least are three characters along. So you see what's happening here? Basically, we here are nested are conditions So this is like top level condition and if our the title is invalid and it has some changed value off their okay, way are displaying of this parent deep and then inside the Parenti, we have to child deaths. One is being displayed only if the title he has no value at all. So the validation Ah, this required will addition is being violated. We did. We're saying title is required and if of the title has less of them through each character's we are displaying of this message here. So that's how you can display your are validation how you can define your will Additional rules. OK, so let's double check So this if you and then we hear dif here of energy here. Okay, um nice. We can do pretty much of the same four all or in which by seen image here. Actually, we need the state of group, by the way, Or let's say you much, too, and say a much too. And Mitch of the type of sticks that the i d. E is image Do the classes image our image to? We don't give way. We don't need to specify minimum length, obviously but we'd like to specify are require Well, then, once again in G for image to Valeant image to dirty image toe touched once a gear in village feedback And then I think we can get rid off this one here. What say much to errors required you Much euro Andi mature Oldfield through the validation rules operating March of the same. OK, no, let's a display on description Text area for description that's going to be label full screen description. Legal event is going to be exterior and Jim Auteuil equal to do it description. Schools are 60 really, really quick are. And next description to he's INGE Immortal. Next, What's What's a vet? Our next we are going to say name is description. Toe to here is well on Next Will Kloss is the description. All form control, and we can also say it's going to be required. So it's up to you. You can make it required. You can off this validation she look at I think you know what. Let's, um, meet it for no for breathing. And lastly, let's take a year off the price eyes for the price. We're going to say price you off, then Price, too, for ice you you're and here and here is well, so everything Ripley's replaced Bryce ah is going to be required as well. But our part from a requiring of the price. I'd also like to introduce a Potter so I'd like a these price to fool a given our bottom. But the Parton can be specified as a regular expression. So I'm going to say, beginning off the street off, then any digit. But then there can be cool month. Did you think you we can say three You. So that's how our regular expression they look like you can tweet it is and it next let's g a curve it here with specified everything properly. So that should be dirty touched then invalid Fitbit display bloke are than once again that should be our price he's required and also weekend introduce yet in north. The feedback by Saint Water police are full of the former, for example, something like that. Off course you can specify you in format Barthwell for demonstration purposes. I've specified quite complex format with the coma as limiter between ah here and also his daughter to delimit between our box and sense. All right. Next. Of course, we need a bottom truth. That meat of this form off the bottom is going to have a type of submit off the gloss. Should be BT and Bt and primary. We're going to see it once again. That's going to be on the bottom or this is it. This is it. So I've opened the book aided component to dot Specter tedious foil and here we're going to introduce a couple off new tests. So let's say eat or should have title ever are, if less of them Three symbols are provided. So, as you remember in the previous video, have specified validation rule for our form. And we have said of the minimum length should be through it. So in this test, we're going to check if this validation is actually working, we're going to say freak sink again. There's going to be like event and yes, let's for murder to be differently. Nice. So inside this fake, I think we're going to sail. Have the component active form chutikul through Complete a driven. Why? Because we'd like to utilize thes conditions such be template. It should be template driven. You know what? Let's move. I think this form to the bottom. All this file, like these key on nice or through next, let's say fixture or detect changes what I'd like to do next. Is it like Teoh? Um, get our for moon that beach by using template for But to be able to do this, I need to do some changes to our component specifically here. I'd like to add this line by sea by using and deformed on and same template form like this . Obviously, we need our of your child to be added here and also will require and g form in this import statement in cake. Let's are returned to our tests and see because, Well, after all, all those separations, they are asynchronous, and I like to say teak to actually see toe our on engine, go ahead and apply the separations. Okay, Now we can use this forum to save some values. So as for the values, let's do the full Let's see title to Well, I don't know. Let's say just just like these, so you can use Fiqh or if you'd like next, we're going to see much, too. To which the taste it doesn't really natural. Next, we're going to see description too, equals two non end price to ease 100 for example, G o Neal Yost. We're going to see formed form. Dort controls little to Mark s untouched. So we are going to programmatically touch of these title to field because it's you remember here are in a form. We have this title touched condition turkey. And once again let's detect changes. And Lex, let's set an expectation by seeing four controls total two errors. So the truth e in here, By the way, here we need toe provide only two symbols because otherwise that the title will be correct . So we are providing two singles, some random symbols, and we are expecting that of the error is being displayed because of the title does not contain enough for characters. Next, let's do the full and let six clear to me too. You've element our wiry selector, and it's for this electoral. We're going to see title group um text continent to for contain. To contain our title must be at least three territories long, so we are simply making sure that this message is being displayed for us as you fully understand. Next, let's a write a similar taste bought for the price. I'm going to cope with this close fake sink close, eat and we're going to say it should have price here. E for incorrect. Will you provide for some incorrect value provided now inside Freaky. Think we're going to say it? Active form to template driven again. We're going to say detect changes were going toe pick the form. Elope, form the teak once again said the values and then Mark price is starched, so we're going to do pretty much of the same arm. But as for the title were going to say it, I think that part of the correct value barters for the price we're going to say some incorrect. It's going to be a stream with a dual or sign at the beginning, which is incorrect because it doesn't fool Our were our template off part that we could specified Ah, for this feud on next, we are going to say it some expectations once again. For example, let's do the full when so let's see that the price here's errors and next off to we change value for the price are it should be truthful. So that's yet another way off Chicken of the future ease of whale it by using, forget and then saying to be true, see all roll right? No, that's the engine test to make sure that all the tests are actually working. So, 5. 5 Testing Services: are to get started with fire base. You can just visit firebase google dot com then are here. Just log in or register if you don't have a Google account yet. Ah, there you are going to greet sample project eso I've already greet one. And after this project, if greeted you should never get to deter base section here. Oh, and then And this drop down, you may switch to cloud Fire store. Currently it's in beta Bart Wells. Quite oaky toe work with it, I think. And this is it. So you don't need to press that the said collection button. Ah, barge. Rather, you can go to project over you and click on this big bottom here. All that is going to display some configuration for your application. And this configuration will be used to integrate our app We the fire base. So those are your soft settings? Off course. Don't try to use my savings because they allow the ski said they will be revoked after I recorded the CDO. Ah, but what you should do is you should go to angular and then and your fire to our report on get up and vets and official library for fire ways of that we're going to utilize. So we can all go to installation and set up a section here and next just a copy of these comment here to install of these library. So, a while of these laborers being installed, you can Korpi of these configuration for our environment. Here, go to your editor and open environment duty. Yes, And replace it like this. And next. Of course, you need to feel off these values of that can be simply Corp it for arm Hugh. Excellent. Cope it Let me place it right here. Leg these and that's it. Next off course. And we should make sure off their AARP that module Doherty s actually here's over the next three imports. So let's go to more Jew. Andi. Yeah, that's dude right here. Eso We are important. The angular fire too. And we are important the configuration for our when you database. So after some time my library was installed and the next moment of that I've Iran wars and degenerates serious. And then car you're so service is a special type off. Shall we see class in angular? So the service sees the usually some injectable thing and well, let me, I think read a special folder for services and move with these two files here. All right, So as four of this service, it here's only injectable important bought. Well, we need, I think, angular off fire store here. So let me important no room and go for to fire swirl We are going to require observable in the next In the 11 of the next videos we're going to talk about it off Rome are reeks JIA's So Reggie s observable on next. He's all mortal And I think let's greet a separate food or here and call it card Move these files here like this dokey. Now let's flesh out the class itself or so specifically here. I'm going to create and add the two carved. There's going to be subject in full for ad and meet it, which is going to be as observable like this and next. What I like to do is I'd like to week our constructor and specifically say that it's going to accepted, which is going to be in your fire store like this. Also, I think we can curried a method called choir. If you which is going to return of these collection, are and this collection is going to be card, the U changes specifically and note that this is going to return a promise so well after all that air third party service. And they said party service will take some time to respond. We the values from our collection, and we can't say for sure how much time it is going to take for the service to respond and therefore their separate illness. And we will need to remember that when we're going to write some tastes for these carte service. Next, let's see in deep is for the item that's going to be these collection on. Then card. We're goingto some deep like this. So this is going to put some item in tow, our collection and, well, what strange we should use next mare on Method Bar to That's correct. So next is going to do all this even for our spot. While I think this name is quite strange. Next, let's say meet change like this. So events going to work with some changes are no speaking about a majority is it requires some changes to several fistful. Let me repeat this. The line off cooed and place it here. And also let's import our service. Let's important service, for example, somewhere over your all that's going to be a car service off course and we're going to import it for all services. Ah, guard cartoons. Also, let's scroll and beat to the bottom and find the imports. Our section Because we shoot a angular fire moon fire module story, we should say initialized. Yep. And then we should say environment and specifically fire. Why? Because here we have this fire bays key and we are using the settings to initialize our fire. More jewels here. No So angular are fire storm or no, of course we need to utilize of these service and therefore I opened up are the component in the tears and I'd like to import of this card service here too. Like these. And also I'd like to greet you constructor here and this constructor is going toe work with the service. So that would be constructor fry that for example, let's say just CS four card serves, you can call the car service a huge our next we should say a VC. Esquire is so we're going to utilize of this method here, that regions a promise and we should see subscribe of that would be itis hell and we should see a visa card equals toe items. And you know what? Here, let's also see, like, these book mortal our next. We should also subscribe by using aired in Need it or subscribe. Now that should be I. We're going to say this dot car proof and I think that seat that should be see us off course now. So we're utilizing this ad in meat it off that is created as observable. Lastly, by the way, what we should do is we should create, actually this year data method because we don't hear one, and this method should go to book mood. So let's go toe brutal and and eat somewhere. Let's also let's see, your details are the problem is we must greet of this method for the model because unfortunately, when the object is being returned by fire base, it has lords off additional information, some meta information, maybe from fire base, and we are not really interested in this information. And so your data basically teak are the keys for our book motile so of brewskis and creates and you object and it takes only the information that we are interested in. So it takes title description price etcetera. But it strips out Wilmette information. So that's why no this net that he's really needed All the things that I like to do in this video is that week. Book that component. Do tears. Our first awful you should import are carte service here at the top and off. One thing that we forgot to do in the previous section is I should add, like to be to troll. So here, let's see, to lead it around from angular are ultra, and this constructor is going to accept a route and car service job CS Also, Let's see the trunk. Haram's subscribe, and we're going to find the request it Oh, a book by its title for ism. Ah, that's it. Our next next what we should do. It usually is. We shoot at week of the Cento card method by adding this line off Good, because we should utilize the newly created service off course on Dwell the service uses of the air on effort of that was greeted in the beginning off this leader. So here it is, and it uses the strangely named Next are never so. That's how we can organize our cool and integrate firebase. But off course, no artist. Our tests are going to fail because we have introduced the service. We have introduced some new events. So you, of course, of the fail because, well, for example, we have not. Year two included a car service everywhere. And so if the tests are failing, as you see, quite a lot off test are actually failing. So we're going to take care of these failing tests in the next video. So hold on tight and see your realism. So, as you remember, we wanted to greet a mook off that allows us to isolate our tests and not work with the real service when, before men out tests. So let me treat it now by saying carte service more years, for example, here, I'm going to do some imports at Yeah, by the way, that's an incorrect both. Of course, that should be just car service. Yeah, on your next, let's see for signing cold. Well, then we're going to get somebody to read her. And for example, I lasts event in I plus plus, and inside, we're going to create toe populate these cart least array created online five. By using and as before, we're going to utilize feet. Cool. Generate some simple detail for us. Of that would be Laura Do symptoms, for example, next Web description with thicker lure. Um, are paragraph, for example, and in a upswept to get some price. And next, we're going to get some something that through of that's step number one and Step number two. We need Toe Creed, A Kloss. I'm going to cool it. Card service mook. It's not going to extend anything. It's going to kill and in meat and to card fall. That should be a subject. So we are basically mimicking three functionality that was created in our Carter was previously. So here is a, uh, cart basically mimicking dysfunctional year, so aired in need it. Ah, with a door sign. Well, this door science is going to mean that Well, that's an event. A meat and two cart, as observable as a durable. Next is for the constructor. Basically don't need to do anything here next we're going to mimic the AB method on it is going to simply return the item because well, here for the real aired method, we are doing something. So we are adding something to the collection where storing the date in firebase off parties for the mook. We don't want to work where the fire base were simply doing. This'll lost line by simply return in the date and pretend in event the safe was performed for us. But of course, the same, they say, Who was not informed that on this for the choir, we were going to do pretty much same. So we're goingto say observable off cart least without doing anything else. So that's our mook. And next, I'd like to week a component tears by doing or some even ports. You Hewlett seekers service look and car believed Oh, for room services, um, court car service. So we're doing this import on. We also need or started. By the way, I am really sorry. I am editing the incorrect file. That should be, of course, a component spec Dirty. It's not just a components or for that, So, yeah, of course it should be done here the next. Let's hold for import of the card service, its sale for all A services card carts or risk. It also lets maybe import, I think right. ISS Speaker from people. Also, let's go to our configured testing memorial section and your I'd like to add providers is for the providers. We're going to see Perlite. Oh, course Childress A. Bought here. We're going to see use close so we're going to utilize our move instead off using of the aerial service. So that's how it's done. You're saying youth close and you're basically replacing this. A riel implementation with some implementation. Ah, great. Also, I think we can add in U T EST here seen something like Eat should do display the cart off the surrender. We're going to utilize freak scene here. All that's going to be a function here. Oh, let's do something indentation properly so that everything is more clear. And inside this fake seen Colette Glynn to say Constant Fixture is a test bed. Create component a component as before. Anything to quote it like this. Next. Let's say detect changes. And let's that said the expectation off fixture component. Instance. Our card So we are interested in the car to be carte least for we are simply checking There it works are properly so the cart least doesn't feel we don't have fake ASEAN comported so late. It's important now also, let me I think open this line off court because we need to do some more Changes are specifically inside book component spec are so insatiable Components speak. We should also r c providers after declarations and we also need you these two imports guard service and card service smoke We don't really need cart least so correct off right and not want to the taste off our our Carter's. So as for carte service, we need to do quite a lot off various imports, so test better inject is a key. Next we need fake scene we need to seek Also we need to guard service which is already imported for us, which is quite nice are also in need of the fool in our angular fire. Cordial because we are working with fire store after roll from and your fire to full the angular off fire four um, more do you and angular um fire store from angular fire to first store. Also car please off Rome gets wort carte service more full observable um pro Marex GS. So that's pretty much, I guess that's more than enough. Various imports, I believe. Also, we need our environment. So it's for environment. I'm going to just go ahead and could be the school year and pieced it all right here. All right before the imports. Next, let's also Crete Fire store mook Elated these angular wires for so that's going to be used to to simulate the real library toe work with fire store. So I don't want to send some real request to Google Fire store. So instead I'm going to pretend that this request is sent for We are interested in really changes that is going to return observable for car, please. Like this also Why? Because in our car service, specific value changes on so here we are mimicking this functionally to once again. Also, we are interested in the air function there is going to accept an item and simply return, decided that I would do anything else. So that's our fire store mook and now we'd like to utilize it somehow. Fu, let's I think read. The imports and inside imports were going to be utilized in rural angular. Far more initialized a up using one Siggy, an environment endured fire base, angular are fire store more? You and it, said providers. There should be card service and also on all from Let's seat for a white and Giller fire store. But using values off from our book, there was greeted on my 20. So we are using this. Most here are instead off somewhere values for on the real model. All right, next next weekend. All right, some tests. So that's the first just here. It doesn't need any changes. Basically, we can, for example, say it shoud method he find. And you know what? I'm just going took what? You this line your close that here. And as for the service and it should be called service, that's off key. We're going to say, expect soles end to be our truth. Let's solve clues. Old break, it says Needed. That's nice. Are the same can be done for of the choir in effort choir hell and here Or that's break much of the scene Now, also, we need to check that some method is working. So, for example, we can say it should here who wire in their foot working. But in this case, we need our fiqh. It seemed because, well, that's in singleness. Operation are yells. It should be wrapped group earlier. It's even move. Break. It's here. A real lots off break itself with Franklin, so it's for the service of the service will be the same. Let's say, let oh service the Squire's Let's great some response. And now let's subscribe to this event. Subscribe to this event. We are interested in Night Country turned by this event, and inside were going to say that the response equals two items. So we are waiting for the response tree arrive and stores the result. Next, let's because it it's in a synchronous separation and we need to say Go ahead and dual the necessary changes. And next, let's simply say that the response is a short list. He's a car. Trees, That's it. Ah, Sue. After doing all these changes, hopefully our tests should work. Correct. Are the were last finger that I forgot to do in the previous videos is important there out or testing more do inside book component spec t s because, well, it uses of these around this component use this road. And so inside Rupert's unique toe say, router testing like these and that seat. So it should work. No, we should say, and g deiced And after some time, everything should become pilot, and I think it will be successful. So that's how you can create MOOCs off various third party services to isolate your tests, to make sure they don't a rely on some real service in order to work. So everything is successful, which is quite fine of these wraps up this lecture, we're going to proceed to the next one. And they took a bit more about tasting http in the angular application. So hold on tight and see you in a moment. So basically off forcing police to we're going to utilize the same third party service event years fire ablaze. And we are going to pretend that we're not using any library where using some http request toe get well, some response. It doesn't really matter what the's responses is going to be. We will simply create some message of their sands and each to be request. And yet http request and then we're going to test of a at these request are succeeds. So the first question is how to make our get requests to cloud fire story B I and these Duke here explains how to do it. And basically you have some here. L like this that you may utilize and sand wary us requests we're going to hear this year. Ale hard coded for simplicity purposes. So inside our our car service, let's greet a heart coded year. L are so yeah, let me do it. So it's so you can see the full year l some like that. So that is quite simple. We have fire store Google Ap, eyes of then version one, but one projects and then the name off your project, which you can take for own environment, do tears. So for me, the project I d is angular, TDD and adorning for you. The project name, of course, will be quite different is for a day to basis. And that should be default because we have another wonderful database documents and then carved, which is the name of our collection. As for the key once again that he can be taken from environment. So here is the A P i G. That I'll please did hell no. Let me fikse of this hard coded. You're ill since long. All right, are now we need to do some imports. So specifically, we are interested in off course, Http, I am. Yeah, I think that So we were on only interested in each before this video, we're going to import it for all your http, and let's great a very simple method. And that's going to make this http request. I also I think the constructor except Http like that. And next, let's say something like Http, cool. That's just a sample method for demonstration purposes. Here, we're going to say return thes. Http, get and it's for the argument. Let's simply utilize our heart coded or Europe hard coded Curiel and we want to test of this Neff it here and make sure it returns Well, some are some response and will present preferably of this response should be a correct. So I opened Carter respect of tears. And here we need to import officer food. Big can't for home angular Http testing and the next other foreign HDD be connection killed . These require fortunes response. Parole. Angular. Okey. Now I know we need to do some more changes to our configure chest to more Jew. So let's scroll and beat Don't and a right here. Let's aired these a request Look deck and and also let's see provide from. But in this case, we're going to see provide each city p and next see what we're going to. We're going to say use spectrum and will, but there's going to be function that accept their kills and default. Look, shells. These requests options. Let me do it like these sold that it feeds to the screen. And that's going to return their Sorry, by the way, it should be http like this. So that's going to return on a new http with the deck and set and default conscience set like this and know also, let's see dips, dependencies, mook beckoned and these request call options. So, as you see, instead of doing some real request way, I use in a so called factory to mimic of these requests and that's eat, know what's right. The actual test. As for the test, I'm going to say it should fear of Ah, cool HD to be working. We're going to use injection again, and we're going to inject to the full so card service and look back and well. So let's see. Freak a sink. And as for the freak scene of that should be service, he's cart serous leg before big, and he's will look back. And so we are Mokin. Some response. But in this case we're not creating our own more kwehr using some existing mocha, their angular provides for us keys will make extra should be function once again. Many, many break. It's key. Um, no, that's great sorrow. Very both, for example, response from Kim's something that and next we need of the actual or response and I'm going to just beast. The full in content of that can be yielded for wrong with by using Curl. So I've used Girl to make a real a request to fire base, and I've got some response. It doesn't really matter what are the quantity. It's off this response. We are only interested in the structure of the street, so it's for it doesn't really matter what the fatigue Aries With the price he's in dozens. We are only interested in the structure off this response. Yeah, let me format. It'd be differently. So it doesn't really matter what the Greek time. Ease, etcetera, etcetera, etcetera. Only the structure a really metal. OK, no, let's see Vicky and, um, connections a subscribe for we are going to subscribe through an event. I think connection like this and where you're going to use smoke or respond which is going to return. And you response here, let's say Daniel, and let's construct or this response So once again, we're not doing any real connection. We are creating some fake response, and it's for the body of this response. I'm going to use Jeez and string if I and, uh, boss are were a response. Do Jason string defying. So we are agreed in some things structure for the response and well, using Jesus string. If I and past the Israeli you to the body over the freak or response something? No. Let's say service door. Each city people so great. So we are doing the actual testing off the H E typical method created for the service. And here I'd like to see D and let's are utilize the response from big and variable on Just say Equal student. No. Once again, we need to see teeth to apply all the necessary changes. Well, it's age, Eason off room that end equals Ji sun. A good bars our response from back and and let's grab of the actual text. So here at this line, we are making sure that the detour returned by response. He's worked in some wearable and lost. We were going to ST Expectation and say the geese 100 parse Yes, ofcourse we can utilize this variable here story just application. It's not equal on no response. So what's happened? What's happening? We are basically cheek in off that This line here are returns. What of this structure? So returns that these proper structure and we're just comparing these two really is here to make sure of there, the HD typical actually works and once again, Notre that we are no to an annual RealAge typical were simply utilizing this mook are respond here and we are false sent something body, some fiqh a response. But at least we can make sure sort of let me read test. But at least we're making sure that this newly greeted method works. So this is it. Let's cheer. Love it. The test. He's working now. That's how you can tell us to your http requests by using some Mokin functionality created by angular itself So you don't need to utilize any third party library. It should work out of the books. And as you see, we hear all the tests parsing, which is really nice key. So this is it for this lecture. Or let's proceed to the next one and talk a bit more about pipes in the angular. And after that, we're going to wrap up of this section, and we're going to talk about routes in the next one. So hold on tight and see realism. Say Engine Jiri them point. Then let's provide the boss or, for example, that would be discovered for matter. Well, let's suppose our books for me, for some these columns, and we would like to format our prices differently. Maybe we the some additional warts and also by a lion in some discount so first off will make sure this line is added to a module chairs, and next, let's proceed to pipes, discount for matter and open this T s file. Hell, let's tweak it. No or so the first. Impart that Sochi off then Rs for the knee. We can maybe call it just discount for brevity and then the close. So who here? The method of that we are interested in is transformed, so transform ease the main. Never that is going to accept some argument or arguments, and then our return. Some you text. So first of all, we need a value and a discount off Muslim. That would be a number. Also, we can provide some clear values, for example, provide some special maybe discount stuff like lived, then arguments, some other arguments if they are needed now, we're going to return some text and do well, let's say, or Norton number are not an inter jer Serie all of you, Then simply return this value. Next, let's go for the text convert of the daily Lake V's and then creed the discovered. That's our discount represented in a very simple manner. And then it's for the text itself. We can see something like, you see, you know, some some work up and then Interpol elite of the rail you and then for something provided the discounted. Really? Of course. Well, that's of it, Some damn with text and we're going to return this text all right here. Now onto this back onto the deiced at these new pipe. It's for the imports. We don't need to import anything. Nails eat. Well, let's say, actually, creeds, because otherwise relief will say it. Greed it like a kid speak. Kittel gets language arm. So this test, we can leave it be and proceed to the next one by saying it shoud are not transform unloved values for no real. You mean Okay, So it should be function of rule with, let's say, constant pipe by simply quoting this line of court. And then let's see that we are expected by transform on. No, As for the value anti and four discount oh, to equal no our way because in this line we are returning very you. If it's not an individual, OK, no, let's, for example, R c this on it should transform price. We that Scott And in this keys instead of phenol, I'm going to see 15 for example. And instead of no, we're going to see you see beat eggs so you save 50 here. What he now is for the book component. Our component. We can, for example, copy this line of gold because, well, here we are already using a pipe bar. That's a beauty in pipe on, Let's see use our were newly created pipe by, for example, well of their I bunch off these to achieve the results. Let me show you yet and now the one we can see Ebner html of then equals two because it's price and then we are applying despite by seeing discount eastward. So this Communist Wendy and that's eat. Also, we need to make sure that the test actually works. So we need to go to a component spec and see that will. The component is actually working correctly with despite ffolliott import, wipe and wipe transform off role and Gillard war, it will so police it somewhere or year. For example, after the Roatan and next, we can greet and look off our wipe by doing the full. We give it a name off discolored, just like it was done for the real pipe, and we're going to see more pipe implements are transformed for once again. We are greeted the book. Oh, that should be truthful year, really your number. And he lets simply see return of the So that's a very, very simple moke Off their mimics the functionality of this point. That's how you can create it but will. Don't forget to add your pipe here to the least off off declarations. No, in order for our application to compile properly left for a week. Yep, component or spec heels are specifically let's you know what leads hoping this line and tweak it and sold it to save it. Who here and so discovered for Metra pipe. There should be pipes discount for matter, discount for metal pipe. I like this. So we must import each or right here and also aired discount for matter pipe to the least off to the list of declarations. Let's implicit change just anti coup at how this works. So once again we have created some pipe. We have created a test. We have utilized the despite, and we have also seen how to greet move for some existent pipe that's needed, which is quite nice as well. Andy, I've made a type of in our component html shortest start feeling because well square buried here should be obviously ended here I and so is for discount. Let's say 20. So now everything is quite Okies. So success. But before wrapping up this video, I also wanted to tie some loose ends are so specifically what I have for gotten to do in a module tales is importance on additional modules. So specifically, we are interested in HDP client module because we are doing some htp requests after all. Um oh, that should be angular, awkward Http. And also htp more jewels are each to be like this. And also, let's two week of the imparts section force here. I've made mystique that should not be fire module of that should be actually off fire sore module and next, our work client and http module here. And lastly, let's odd at carte service here because, well, that should be leased it in from the borough wide or Serie and lastly lived one minor tweak . That's not well, really mystique. Bart steals Let's go here and be initialized books to an empty array of this point because otherwise wouldn't get seven new in warnings about these variables there to know initially , which is not really great, right? So now let's article Ucat how our application actually works. Also here is the root beach. You. Well, that's Ah, a bug here off course because, well, we have two large big discount. The price is only 15 body can. Hopefully you can fix it yourself and that she occurred there that the price can not be negative. And also, let's try to who two books edit, and we see that the forms are still there, which is really nice, and so these can be clicked. These bottle works as well, which is really, really great. Our note, by the way, that if you open your far based console of their insight, your database inside the card collection, you can see that the card is populated with values, which is nice as well. So you see, I've clicked at the end to card bought in a couple of times. Were that few four times in total and no, here we have four books in my cart, which means that they had integration. Where the fire stories. We're working as well. All right, let's wrap up of these video and this section Percy to the next one and we're going to talk about our test in rounds in Anglo. And in the last section off this course, we're going to talk about end toe end destined. So hold on tight and see you in the next video. 6. 6 Testing Routes: So let's go ahead. And inside the application folder I'm going to greed and you file cooled, are out. Are spent 30 years. It is going to contain tests for our routes. And here I like to import some off off the models that we're going to use Our That would be , of course, there's beds that good to be seen on and fake a seeing. So all the France that were working with in the previous videos also will need teak even in checked, because we're going to inject some fake services. Onda also component, fixture and also component I fix Sure for room and your core testing on Let's let's import our component offer on gifts. Wards component Our next I'd like to import router model because, Well, obviously we're tasting route in here on the X trolls Salter Ah, for all angular are out assorted other. It should be a route or on next, He's off card service are leased from card services. Smoke our next we're going to import. All were own carte service sale for all. Let me cope with this bath. That should be court service. Our next we can import all this car for match our bip That would have created in the previously deal. Or that should be pipes discount for monitor on, then discomfort matter pipe. Um, okay. Next we will need to environment leg, please. Next, we're going to import component and no errors. Scheme of room, Angular core lost little net location for the route and that would be angular. Our woman like these, let me see, would know are we haven't seen of the no error schema yet are but, well, radius Quite simple. That's a constant that can define a schemer that allows any property or on any element. And we're going to use off this constant in one off our tests Also, we need to do some more preparations for the route and so specifically I later define our component. You're like these should be component and it's four selector I'm going to see just broke and it's for the template Well can be we're minimalistic, curable is the same All that is going to be our component. So, as you see, we are like a redefining our components and we are creating a very simple versions off them because, well, we're intestine route and we're not really interested in how our components work, so we are only interested in their out in itself. That's why we're great. In this feat. Components feel next. Next, let's greet off ended, for example, is for the template. I'm going toe this line year and same created Doesn't really matter what I'm going to write , you know, that would be a bold and live and lost Lee leads a single head and copy this line here, and it's for selector. We're going to see lyft and least here policed component. So do Circumpolar. It's of that we have redefined for our or old in distance, right? I think we can know Percy to the next video to the second part off this small section and see how we're going toe actually taste our out. And so see you in a moment ground by doing some imports and by creating some think are components based or the real once because we're not really interested in how this components actually work. So OK, no, let's write some, I think more boilerplate code. By seeing describe our outing, for example, I'm not sure you can call it anything else on there. Let's say that's going to be function and said Describe and where we'll see that's going to be around. Well, let's deal So location also. Let's see. Fixture Oh, that would be component. Fixture are component. No, before each local, while of it's way too many boilerplate stuff. I don't think we need it right now, So yeah, and said before each are Well, yeah, First off full, I'd like to say a sink like that are and next are out or stub. It would be a dude All that is going to hear one every day. So that's not a real road or that's a stop The big you ocean off this router. That would be a function like these and a wrong door. Our state off that's going to be in just empty like this. Empty object. Okey now. So I'm going to great a spy on this thicker out on this router stub. And I'm going to say that we are interested in this navigate Ah, function and this navigate method. Jealousy. Ah, so that sits by own own for ultra Staab, the navy. Geet, is this drink our next We're going to see our tails beard, Our everything. Configure testing module. So we're going to do some configuration here. Let's say so. Says well, scheme us all. We should see new errors. Schema. That was important in the previous video. And once again, this is a constant but that allows any property on any object our next. This for declarations. We should hear component. We should hear component. We should live. Booklist component. Look it it on discount for mater by Okay, also, we need importance off course. So let's say even ports. So is for the imports. We should ah, say rotor destined. More job. Well, arounds. And you know what? I think we haven't imported of this router are testing module at Waffle. That dude No s so that would be angular are out our destiny, So Yeah, When? Of course, we need the testing module, Obviously. Okay, so let's return to our outer testing what you end. So here we're going to define some. Both some parts are like this. So, for example, we can see both is startle. And as for the component of that, we are interested in a veteran people comportment. So whenever someone heats books slash some title we should dio invoke, shall we say the component. And next, Let's before the same action for our title. A ditch canned. Well, guess what it should be. He added component well, through books, just books. There should be a car leased and lastly, boots snow. You So, Corey Chinna, when you book of it will be brocaded component as well. I think off that seat for the imports offer the providers Yes, for the providers were going to provide well guard service that we worked with in the previous section and that should be used close, just like before our car service work because we're not interested in the real serious in this case and all four were going to provide environment are used. Valeo, you'll just an empty object. So the environment should hear some of a few baht once again, We're not really interested in what of these valleys because we are only interested in their out and and we are creating very, very minimalistic are set up. Okay, now, next we should see compile components and lastly, we're going to see fixture equal. Student is Baird, our creed component component. So that's our yet more boilerplate coat and now we can actually write some tests. It lost, shall we say? So let's say eat shooting Navy G. Teoh, too. The default are all, for example, and here we will need to use some injection, some injection. So let's see the rotor allocation. But then we will need fake sink on. As for the rotor, well, that's going to be rolled through. Obviously, this fool location there's going to be location. What? It's a price. That's also Ah, like the saying is way too many break. It's again. Unfortunately, embody eso here on good to see rotor. Oh, initial litigation. Can we need to seek toe actually Well, apply these changes to actually performed the sexual like because, Like something like that. Okay, now next, we're going to see never g oh books. Once again, it's like, you know, it's like we have a magic wand and I leave with my major wanted. Say, go ahead and before the section and we're going to say, Expect location, Don't both to actually toe actually be books. So that's our default route. A route around, shall we say, And we are just checking that it's correct. No, I think you know what? Let me Korpi because then we'd related to table these break its again, remove it and is for the next test we can say it shoud are navigate toe book agent, for example. It's for the injections. I think we can leave them be And we can say, for example, Rotor do navigate our But in this case, we are only also interested in the books Maybe trying toe there. Well, I don't know. I just see one here. It really doesn't natural. What's the value for the title of this book to do? List are so let's see it like this. Number 18 it then once again on we are expecting the location toe Be well, guess what. Both want it and it. What's more, if you're interested in the actual contents or for the beach off, the that we are navigating to were are we can actually taste acquaintance as well because is you remember are here at the very top or this file we have created the template for our book ended on Why don't we check the page, actually hear this template in place? So let's say that expect fixture need to element you know HTML or to contain. Then we could So we're simply chicken. Let it hits the fool in our contents. Ah, yeah. Also here it should be said books, not just book Ondo full it. See, I think we don't need books new because we're not or really using it. And you'll so well, my editor completes of that of their Goodman type of Navy GT's into sustainable in the year . Let's see in you here instead of the object, because otherwise it won't compile it all they believe. And now we can send you just to make sure that everything is working fine. So we've are seen how to test our outs. We the these techniques that have showed you Hopefully. Well, now you're feeling a bit more confident about these, But we're once again noted that most gauges distant roles is not really needed on and well , in many keys is of a it would be just an overkill. And this is it. My tests have executed if they are successful, which is quite nice. And these reps up of these section about Justin Road, so there Well, there is not much to say about it, and I think we can proceed to the last main section off this course and take a look. It testing we the per tractor. So we're going to see how to implement and 20 tests. And after that, we're going to wrap up the score. So hold on tight. We have a couple more videos to see to some topics to discuss, So see you in the next. 7. 7 End to End testing: Newt. They initially this framework was created for endure GS applications. And energias, as you probably know, is very different from engine off, too, and and you're for so, unfortunately, some features off for Tractor Main. You want to be working with the newer, angular Ah, so, for example, here in the Duke's you may open off. I like look eaters dot MD And here in the comments you me found similar notes. So you see, it says in the moment this is supported only for Energias. So which out for these notices? Because, for example, by Model, unfortunately, is not working for Angle Off, too, and and go for and some other methods may not be working as well as for our getting started tutorial off There is and link tweet so you can simply open it. I hear it least the prerequisites for protractor. So it's a no GS program. Well, of course, we already have. No Jason strode. Next, it's it explains how to install protractor, and then it just shoes. How to write. Various tests are well are We have already installed for a tractor when creating the applications, so it should be released it in development. Dependence is I am going to be using protection five that wanted to. But really, for some reason, you don't have a year to go ahead and install it now. Also, let's open the protractor that wanted RGs file that contains are the configurations for our per tractor. So here we can set the time out here. We can also provide at the bath to our end to end Destin. Ah, specs. Next you can say it. Which Efrain worker you're going to use, which is just men in all keys. Then, of course, the base derail some configuration for just men. And I think that seat. So feel free to tweak this configuration if needed, or taking a look at these. Lean here when you already you can say simply MGI you need to be and that's going to run and render tests in our application. Well, we have already seen this circum and in the beginning, off this course. Ah, but well, we haven't written any deaths yet, so well, let's just make sure that the school mond least works for us and, well, unfortunately, field, which is the expected behavior, Actually, probably it is going to fail for you as well. And the problem is, they're ng's own fields to stabilize you too. Long running processes. So here, you see, it says angular tasks failed, Finished after 11 seconds. So there are a couple of possible ways to Fikse of this issue. So first a full are make sure that you update t s no diversion for due and payment stroll and then one, Ah, think that you may try to Dewey's Ed in and G zone here because you need to import it as well on this line and then a wrap this instruction with the four winds, strangely looking code. So say and G zoom and then earn outside angular like that. I think that should be a function. And then inside this function, simply see a run. It's going to be a function to so like these that's close. These closed these on and off. That's one way to try and solve this problem. Unfortunately, doesn't really work for me, but for Roman of these works. So let me commend it out and show you another possible way of fixing this problem. And to do that, you need to go toe to e folder here is a speck of their towards initially created for us that simply she exercise their toe. Welcome to AARP String is displayed on the page. So once again we are simulating users behavior by navigating through the route page and checking that the stakes that they're so four before each, you must say, browser, wait for angular enabled fools and also you need to import of the browser itself or weakened click open this land. Place it here when it only the browser. So we are important, his brother from Protractor. And we are configuring not to wait for an Gertie neighbor. Well, that separated heart or solution. Barbara. Unfortunately, that's the only known way to Fikse thes issue capital. Let's try to run our into ended tests again and make sure that now everything is working fine. And now it tries to enable from It says that room is controlled by third party, um, solution and simulating users be here and we see that our taste succeeds, which means of that issue was solved. Also, a couple of words above these ended two and two directories, so four smaller projects you may place all the files are right inside this folder. But for bigger projects, it is are recommended to create separate folders. So far, for example, you can create a folder like book added, and inside this folder, we're going to place our tests out. Specs as well as B O files are so p file looks like these b o means page object and inside this file week in at define various actions that can be applied to this page. So, for example, here is never G to method of that we are using toe actually go to the speech. And also there is a yet burger method of that. We are using that this expectation and yet paragraph deaths simply using by C says like eater. And here we are passing the bath toothy, selectable toe the tag off that we are interested in. So P o is a page object and it is used to define some actions to apply to the page. Okay, I think we can rip up this episode. We have done some preparations. So we hear feats to the per tractor. No problem. And no, we can proceed to the next video and write some tests for our edit page. So see you in the moment, director. And also we have created a book agent folder inside it to eat. And now here I'm going to greet in you and you file Book A Did A, which means be page object our duty as and do full A e to e spec. Cheers. Let's populate our page object filed with some court So we're going to require a fool in more jewels, browser element and by lucky for room tractor. Oh, that's so not many imports. Next, let's say expert Kloss Bouquet to Page leads defiant title inputs machine puts description . So allow our even boots and said Meet of bottom, for example. Reactive. Because you remember in one of the previous sections we have talked about where is types off forms that we can hear their Indian thesis Example. We're going to be working with direct All right? No, it's for constructor. No, it's the constructor equivalent to say Get page are that's going to be a meth at and defiant later. Let's let's see Churchill input equal WTO element by C. S. A s. And so on the beach we're going to look eat C s, a s with class. Well, basin class title. Then let's go with the Sline and see much in, for example, Yes, for the image that's going to because Seema Childress linea xto the same for description on description. Hell, this corruption like and lastly said Meet Barton reactive, submit boat directive here and by I am going to see by i d. Because, well, if we take a look Yeah, actually, that's reactive. Submit bottom. So let's Ah, a week each properly. All right, so that's our constructor. No leads. Define get reach. Are there going to be? Wait here because it's not going to return anything. But instead, we're going to see get so yet is a special never to say and to get our requests to our server. Now, this way, we are emulating. Ah, well, three users Action toe visit some page and we're going to say books new, for example, because, well, the books new and book said it is pretty much of the same mind. It has the same for No, let's defend the next method called set title. All this good tricks text off the strait. Early input are we're going to say sand Kieser text to set this value of the same for 30 much. Ah, that will set in which year image input going to be a cent keys as well. And let's do the same for description description year. And here. And let's also create, I think, submit reactive work. We've at the bottom. There's going to be submitted Barton reductive, and in this geese it shouldn't accept anything. But instead of that, shoot well, Khaliq on this bottle, obviously, And we're going to be using all this methods to populate the form with some values and then simply click off the bottle to actually sand of these four. That's eat four of the page object file. Next, let's proceed toe our spec inside the speaker. We should import age off for room three people file. Next, I'm going to import the browser for Remember, Tractor and next, uh, faker for Rome freak er that should be a string off course. No, What's they describe off located page, for example, of that should be function, Aziz Always. No, let's say layer okay, did so I have created these before each blow to define book aided, and no one can say eat. Are shooting fee of reactive former working function again. And by the way, let's apply the same treek as before. There. I've surely in the previous video, by coping this line of code and placing it here because our the wise of the stairs to want off work for me now let's define in image by using fiqh or like we have done many times before, then told example, Santon's then description off lead, coral or, um, paragraph, for example, Or, I don't know. Let's go with this Santon's and then let's say these booky and you see it title and sprah. Why the title? So as you see, we're using this set title method to create it previously, and we can perform the same action for the E much and for of the description in much and amenities description. Let's a or submit are wrecked, which simply means are silicon of the corresponding bottom. Now the problem is, we need some methods to actually choir E for the books attributes on the page because after all, if we submit the form and everything is fine, the book should be saved due to the day to beast, and it should be displayed on the screen and we need some way to acquire it for the books properties. And for that I'm going I should creat yet in not a folder called And here I am going to place and you filed Simply called book Don't be dirty s. So inside this file, we're going to provide methods toe work with the book itself Not were the four Select Scorpy A this'll I'm here. Place it all right here. I know we can flesh out of the close for this book people. So say expert Kloss which title elements Image element any and description element in you were going to be interested in these elements on the page. Next, let's greet the constructor again, which is going to accept the title of the book because after all our books are being referenced to with their titles. We don't have any ideas for the books. Oh, full. Next, let's see these yet beach our title off these title element he's elements Boise assists take So this close comes off room our markup. Let's double chica that it's correct. And yes, indeed it is. So hero is say that we see that this class is, Ah, defiant already. Let's scoop it like this and say Immature mint is going to be much and description element is going to be description. Now we need to define yet beach method to visit the page. It is going to accept Try toe off Street and return, which we're going to see browser yet or bluster. So we are simply the TV's it in the beach to show the actual All right now let's a return to our spec file And here I'd like to import my newly created book Beach for Own Slash and no, we can it lost finalized our a speck by setting an expectation. So let's say let Brockway each equals to you beach and then title. So we already have defined this title of then we are in states creating this class. So we are set in the struggle here and when the sightless said we are basically cool and get page which obviously ah sends and you get request to books slash some type and next us for the expectation we want of these book beach gitell element get danced to equal or guess what with title of this book, which is not a really surprised I think. And let's be like these and see much element. Ah, but in this case, we can't use get the extra mass to use get attribute source to contain, not to equal bar to Considine of the much and lastly description element in this case we can use Get to extensive description here. Okay, let's double check everything. I think I have any spelled the description award here. And also I think we haven't introduced at the proper route. Let's open up Maju t s And here, As you see, we hear book's title aided. But we don't have books. You are out anyway. Or so that's it when you said no by saying books new and using this book agent component. Also, let's do some clean up in our component. We don't need to be strong for book anymore because it's called it. It's hard coded, so this was introduced for demonstration purposes. And also let's go to our Web component. HTML Anthes book here is not needed as well because we're using her out or outlet so this can be safely removed now. Ochiai think I think this is it. So let's try saying interned and taking a look at the output. So as you see, greed in search tests is quite simple. It's quite intuitive. And I think these tests are the most will form tests to write because see what happens. You saw it. It has field in of the art form, which is so in the real time, just like the user would do to feel the form through this is eat about right. And these tests, I think in the next section we'll talk more about and to intestine. Oh, I'm going to show you how to enable de bargain, um, and a buying mood for your tests so that you can understand what's going wrong if your tastes are feeling so yes, you see it all our specs. Well, to our specs, shows say are succeeding. All right, so now let's wrap up this episode and see you in the next video picture once again. And here is our and turn test, And suppose we'd like to debunk it somehow. So, for example, I'd like to see the contents of these variables at some point of time or stuff like that. So you might think that setting something like our browser debug your warming before. Also pulls should be enough and, well, years some years ago, that was enough. But unfortunately, when using no gs version eight or higher Ah, that won't work anymore, unfortunately, and well, another problem is that these debug in our feature is not really well our document. So there is a guide about it on protract or official website. So here you can see some information about de barking your protractor, but it appears to be quite buggy. Well, at least at the moment, off record in this reduce So, Elia, somewhat barking, unfortunately. So we need to perform a bit more complex set up to start debugging our enter in tests because, well, I'm using no GE s version Eat and you might be using version nine. So you need to do a bit more conflict set up and do some will have its range things, to be honest, especially if you're r on windows. So if you're on windows, go to North Modules directory, then find Daut Beam folder here and then search for a file called protractor of that has no extension. So then click edit and you're going to see something like that? Probably. So if you are seeing these contents inside your file, then it should be replaced because for some reason, I'm not sure why. Because this is no documented anywhere. And I have not found any information of the Net. Unfortunately, while this air barter this school doesn't work it. Correct it gracious for me on Windows. And I had to replace it with the full and cooed looking like this. And here inside this require statement you should, boss the fool are both to the file cooled. Uh, c l I G s. It should be located inside Note more jobs per tractor, beauty, etcetera, etcetera. But here you should provide the food both to this file. And for me, that would be, well, these our note there the delicious should be forward like these, not backwards licious. So when you're ready, a safe and this file and that's our Steve number one that you should be formed to make your per trapped or our work correctly. The next thing is that we need to do is see a think here leg these and for a long iterations of their indirect with the browser somehow we need to see a wait. So wait here. Wait here. And full or other in directions, we need to see a weight because otherwise of those promises won't be resolved correctly. So that's step number two. And for step number three, we should go to our per tractor are configuration file and somewhere inside this file, provide the full when option. So say selenium, Promise manager, and set it to fools that that should be done only when you are performing some debunking After you've finished with debugging, your tests are bringing back to drew or simply remove this setting. So that's step number three. And that should be enough to get our debunker working. So no. After everything is done, you can go to your taste to your entry into test and say simply debunker here like this. Well, eight, um, highlights is with this stressed strange green background. Well, that's just how this a theme are because But well, anyways, our next you can open your or can learn interface and a beast of the full income. And so you're saying nude and then you must specify this option. Inspect, be air key, then provide the both to protract or are binary file there? We have changed a couple moments ago and also provide the path to the configuration off your protractor of Then press enter and now see what happens. It opens room for us, and also if you go to her own devices. So that's a special bathroom. Inspect devices. You are going to see that protractor is working. So here we go. You see, It's the path to this file that we have just brought it. So it appeared here and here we see a that this file is being executed. So here it says that deep value is attached and it's listening on this sport 9 to 29 Next are you should click of these bottom here or resume script execution. So press on it. It's going to boot our browser. A simple a separate browsers, you see, are it's going to be site can be reached that started. OK, so as you see it, here's ah, Iran, our first test that sees that the welcoming message is displayed and then it waits. Why? Because it will return toe our our first from browser. We see that the bugger you see, it has posed kill. And this at this point. So now we can, for example, see the continents off with These are variables. So, for example, is for the image. It has a value off. Lauren picks alert some kit. As for the title that has some failures for description is has some value. So at this point of time, we can't see the contents off our variables. And, of course, that this school is now beauty JavaScript. It's not types grouped anymore because it was compiled. So simply javascript on. So this is how it works on. Well, when you're done, you can simply click on this button again. Eso to summarize. You're going to hear two separate browsers. And well, when you're on this command once again, you here in this window, you should see First off all of that D bugger is supposed to. Then you say, resume execution. It is going to a separate instance off grown, and then you can start a deep bargain. Your coat. It's well, yeah, I know it's a bit strange, to be honest, but well, this is how it's working now. Started with starting with no diversion, age and higher for we must stick to this style off de barking your application, your tests. And once again, don't forget to say it as they set into True when you are done debunking your your test. Actually, you can place that this D bugger statement to the very group or for your test. So let me remove it from Severe and Sadie bugger. If the explained of the Unless boot of these again, let's see. Go ahead. Let's wait for this to refresh to container or actual code. And then you see, I can set break points at various lines. So, for example, I can say break point for the description or something like that. So for title or for the image or for thesis expectations or for book page, maybe. And then when I click this button again, toe the right, you see it stops execution air of these break point so you can add as many break points as you like. Then it proceeds to book page. And then, for example, I considered here Andi Well, it's for the really of Book Beach. It says that it contains some element finder, so that's how you can set a break points for your Oh, for your koot are once you noted there this section enabled control flu It is not a relevant for us anymore. So it's here. It's saying that it it is not supported for no gs eat. And I highly doubt that you are going to use no JIA seven because, well, it's even not available for download on the main page off. No JIA slip sides because it can be found somewhere. But now it suggests to download either version eight or nine. So no one really using No JIA seven anymore? I think so. These two features are not supported And so this section is not relevant. So don't even try and tow. Don't even try this at home. Eso thes features are not supported anymore. So this wraps up of these video about de bark in our tests once again, don't figure to or remove it. You're debunker from the good and remove thes sating from here when you're done, so I'm going to commend it out. You know what? And here let me come into town coming to talk to So this wraps up this video about D bugger and the next lecture We're going to be talking about screen shirt in functionality, That is who for support it by protractor. And I'm going to show you how toe capture your screen when something goes wrong or well, when everything is okay with your tests. So let's proceed to the next video and see how to capture Screenshots with the help of some third party to And we'll see you in a moment some point of time when, for example, something goes wrong so you can see with your own eyes how the beach looks like. So to reform our screen shirting, we're going to use these true called protractor screen short or blocking. And so let's ah find the actual command to install it are so here we go. It should say in PM in stool per tractor, Our screen shorter blocking are so old fool, It saved a of what should be appended here Soviet of this plug in is there did to you bakish togs and file and well, while this is being installed, I also want to say a one thing about angular fire too. So while I was recording this course and you issue was opened and currently it is not yet resolved. So this issue looks like this. Say you might see an error saying cannot find the name, space, fire ways. And this is because And you fire base uploaded version was released for that one. Or don't eat it. One. Sorry. And if you are seeing this issue too well, temporarily, you should downgrade to version for dot Eat the zero. So there is ah long discussion on this issue, and it is not resolved yet. Unfortunately. So once again, if you're seeing this issue, just don't great toe firebase for dog eat dog Zero are all right. So next after you've installed this Bakich just to go ahead and copy thes options of this configuration options here, this is just sample configuration file of There are lots of different options and a lot of them are explained here with all the possible Raelians. But for now, we are key. We've of these sample config file. Let's go to Protractor Corner gs and, for example, here let's split beast that this conf ead. So it's say as we are activated in you plug in. We'd like to store our screen shorts under reports its E folder and that would like on toe save screen shorts on failure and on success. Ah, but well, you know what? I don't want screen shows to be saved on each expectation because we will end up with their too many screenshots. Let's saves green shorts after each spec. And here, let's say none. Oh, key. Next. So everything is okey, Let's say between let's go, so is you See there, I Lord, off options and day it can be even used for multi browser are applications about? Well, we're using a single browser application, so we don't need to be for many other configuration. It'll all right? So it is booted and you see it says, Activated for a tractor screenshot in plug in. Okay, so it has activated, which means everything should be working are just fine. Let's go. So here is reports folder here is each we It was created right now and here we go. So screen shorts are here. Well, let's use on the offensive you So let's go to reports. And if i open index dot html you see, it has even generated offensive looking page for us, powered by bootstrap styling, and here we can see some information about our A screen shorts about our tastes of their two tests get past, which is organized, and here ease some other beaches. Well, it's not really informative because we don't have our really many tests, but but still. So if you'd like to see the screenshot simply go here and we're going to see our beach So here is some key it with some year, some simple title. Our port Zero, of course. And here is the card so we can see that the page share looks exactly like it should and humorous of the index speech as well. Ah yeah, off course. We should aired Thistle Reports folder to get ignore because I don't think we like Thies to be committed. So I'm going to see Screenshots and then let's say, simply reports this Okay? And now it's excluded off her own version control. So that's how you can are save. Screenshots are, by the way. It is also recommended to add to the school to tow one pre pay our section two Well, wait for tractor for the reporter configure. So let's do it now. My place in it here are Elwell, are The other thing to note is, if you like image to ski a setting toe work properly, you should be form additional steps so specifically you'll need to install graphics magic on your PC by full and ah, the um, by following this steps, or you can simply go to the download section off Graphics Magic website and simply choose in of the version that works for you. After that, you should install the Bakich cold image to a ski and after that of this stating image to a ski shoot, work all property. So that's how you can capture your your screen shoots to de bark. Your tastes fill the That's quite a useful feature. I think so. Probably using this sunscreen shutter plug in is a good thing as well. So let's wrap up of these episodes and to proceed to the next we do where we're going to see how to t just your application in various browsers by using 1/3 body solutions. So hold on tight and see you anymore that allows you to perform. Your tastes are well in automated profession, and so this service allows you to take us your application and a monocle various devices and also you can ransom manual testing as well are so wealthy services actually beat. But you can just go ahead and try it out by creating air free account. Ah, by just specifying your name and email so you won't need toe will enter any created card or anything like that. So, for example, here I'm using a free account as well, and you're going to hear toe are worse or free Time to just believe with the service suit Get started. You can go to tunnel section and here Down Lord, a special software to establish tunnel between your PC And so slave apps are servers. Well, this sees required if you hear, for example, of firewall or if you server is behind some brooksie So just go hit and down. Lord of the version of that works for you. And also don't forget to open and outbound board for it's a sale, so that would be poured for 43 After you are done, you can go to your a count section and here you should see the excess key section. You can just go Ochlik untrue and to re you are boss word and you're going toe to toe to have access to your ex excuse. So that's my access key. It will be invalidated. Of course, after a record on this video, after you're done and after you have downloaded the software to establish that eternal simply extracted somewhere l've in Iran the full when our binary file by providing your user name that was specified upon registration and by provided the excess key, he'll then simply press enter. And that's going to establish connection to source lapse A servers. It will take some time. So note that it says wait for you may start your tests message before actually test in anything. So are we should wait for for some time and year here ago. So now we have silly name Listener started on the sport and it says it Now you may start your tests and by the way, know that that here no say as one active tunnel is being established. So here we go and I'm an owner off the sternal and we can use it. Noto actually or on our guests are on Weise. Um, on this service off course, we require some additional configuration so specifically we need to establish a ah well to provide some settings to establish connection to source layups inside protract or off. So first, awful. We need to commit out at least setting because we're not having direct connection anymore. And also we need to pull away, provide source user and so a key. Sorry like this And this key should be simply court for or from Hugh. Police said here. No, simply I see NGO do you and you will be able to see in real time how you just he's p foreman. So no note what happens after everything? EADS compiled R C its sales using so slap psyllium server at one demands or slabs not cool . So we are not actually tasting anything locally anymore. We are actually using so slaps servers. And if I goto dashboard you see inside automatic test and it says unnamed job was started a few seconds ago and note that here it even Lords Alief video so we can see in real time how everything is actually tested, which is really cool. So here you can observe what is going on. Unfortunately, it may take some time before everything is done, but will the new It's quite a handy way to test your application, and in the next we do. We will even see ah, that are we can test our application on a variety off various platforms and for and brothers because, well, up to this point, we were only using chrome toe test our application. But of course, there are some other our browsers and other devices as well. And if you like to be sure that your application behaves properly on various devices, but then off course, using so slips might be a good way. So that's how you can use those layups to Teest your application on. Well, I think we can now proceeded to the next video and see how to enable capability off testing . Among there is devices and various browsers. So we'll see you in the next video. Here is of the least off a lot possible Brother sent what's interesting. For example, Firefox seeks is still supported, and even Firefox four I don't think in anyone is using its bardwell stewards supported, and you can use it. So the safe Rome and Internet Explorer and various Windows operation systems or something work it and Of course, making Tosh is here and you see their assertions off making Tosha supported. And Lennox is here as well. So you can choose any off Ah, parish and operation system any browser and to use your application on at these, browse around the separation system, which is quite nice. And what's more, it can be done in a pretty is simple wing. So all you have to do is open your protractor corn, our file. And here are well, as you see it already. Sales capabilities, browser name Kroll. So we are testing on Hurled I bought. Go ahead and here, police of the full win our configuration. So here we're seeing multi capability snow that scenery. And instead of saying Carone with four can for example, see, maybe Firefox or you can of course specify the platform of very wished to use may be making Toshka something like that You can provide the ocean for ah Firefox off, for example. No, I dont know Firefox 55 so we can see devotion 55 or so. We're going to say your share just files. Well, it I think that's remove it and we can say mark maximum instances said it to maybe do so. How many browsers are going to be Ron? I'm going to see one. Ah, so that's how you can introduce and you plant for to test your application on and you can introduce as many platforms as you like, But well, currently I'm on free account so I can introduce only two plate forme. Said it once because, well, I'm somewhat limited here, for example, that same for Koroma and only six just like that. Let's see what it has to go for. Yeah, that's for example. Say 60. You and no, After you're done, simply go Here are C and G E to e again. And now it's going to say that the capabilities are sections off. This is being ignored, and only this is being ah, was taken into consideration. Now eso you see, it says you can specify both capabilities and multi capabilities, so capabilities will be ignored now. And let's go to our word as worked. And here is you see it. It is running to instances at once and noted sales Dan Dirt 13 and it says this ex here, which means that's American Dash and here it says Fire, It's here. So it's as Firefox and here it says her home. So it's working just as expected. So here we see that is basically Rome, and that's definitely air making Toshi interface. And here it's, well, it's differently. Fire Force. Well, it's a big bargains, you see. Unfortunately, well, the video has some problems. Badia. Well, at least it it's it works and eso decision their accusations. So we have reached our limit so we can not start any more sessions because we are when a free account. So that's how you contest moon multiple browsers at once, and so a few free to choose any off the broader sent in the off the operation systems of that are supported. Eso is for the price in hero various price and solutions. It starts from 90 box per month, so you have unlimited. You are minutes. You can well have access to a lot browsers and any combination off browser and operation system, and you can excess even my bile emulate or simulator send stuff like that. So if you are feeling that it might be helpful, then feel free toe believe with the source slips a bit more so well here. You see that our tests are being executed. Um, is expected. So I think we can wrap up the section about Ended two and taste. And I think we have discussed a load off Where a stop picks. We have seen how to actually write and 20 guests. We have seen how to debug them how to do screen shorts. Also, we have seen how to ds stone various platforms with the help of force lay up. So hopefully this section was useful for you. Basically, we have come to the end off this course. So that's eat in the next section. We will just conclude this course. I will give you some final thoughts on the score. Some useful length, maybe. Ah, what will know? Hopefully now you're feeling a bit more confident about Justin. Angular applications. So which off course can be quite a complex? Oh, job. So I understand that you may need some time to, uh, get the grasp off. Destiny. Angular obligation. That's well total neural. All right, 8. 8 Angular applications: in the section, and in this lecture we're going to do some preparations before driving to the code. Let's at discuss over briefly the types of forms of that we can create in angle, the first type of forms e schooled, a reactive forms, or sometimes that they are called motile driven forms. Are they? I used to be formed some complex chicks, complex validations, and that's the first tripe or forms of it. We're going to discuss in this section the second type of school template driven forms. But they are much simpler off, then reactive. They're fully defined in the template itself, and we're not going to talk a where in Well, they're very detailed about template, dream forms and the scores. Nevertheless, Stipe east called two dynamic. I think if they can be either a reactive or gently driven now, they are defined inside the component itself and later of the surrender to on the fly. Inside the template, we're going to create a dynamic forms as well and hear what I like to do is I like to import some. You stop here so specifically are I think we will require our forms more do obviously because we're going to test forms and a reactive forms. Would you? But we should require a From and Giller. Oh, for like, this are nice Are the next step is I'd like to import on it here. I think I'd like to import a Walter and more Jew and rolls are we doing? We're not going to Deke are very deep into routing in these sell video because we'll have a special our section about testing the roads in and you're but for no, we need at least some, some basic our routes so that we can hear their speeches with the various forms. So here I am simply a requiring this stuff. Next. What I like to do is I like to create in you construct and see her ALDS That's going to be our worlds. And Hugh, we can see some like off two books I am. Then the title is going to be the variable part eyes for the component. That should be book component, obviously so that ah, this path here is going to be used to display are some book based on its title. Next, let's say agent so that we can modify our book, and that's going to be booked. Added component. We don't have it yet, but we're going to create it. You the next we do. Then we're going to hear um, yet another path to of the books just to display along the books from our some kind of database. For now, where used in local storage a zit is well instead of a database. But that doesn't petrol. So there's going to be a least component. And next, let's often see both like these. We're going to redirect Toe X are both march. Be fooled sorts like our route beach off our application. Alright, Next What I like to do is I'd like to go to imports and say that we're going between for true cultural. So are out. Or, um, the more you'll like these all four route Arons. So we're simply taken this sort they think here and pass it to four route Our function okay are also I think, left import off forms model and a reactive forms are marching. Our next let's do some changes to all the component door html and here, specifically I'd like to display are out or outlet. So let's see your altar, you forward. Let's cruz it. So that's how it it is done inside our HTML file. And next, let's go toe a ah component spec! All right, here and in part rotor. The esteem. More deal. That's like for the future, because I don't think we're going to test around in this section. But why don't we import it right now? So that's going to be Uncle Roger Destin Next. Here off the declarations, Let's see imports and see your older testing model so that we can utilize it. A leader eso next we can generate and you component eso. We can generate a component called or lift to display, basically, at least off our books. Alleged dude by saying Angie generate component book least so is you See all the files a bill created for us and a up module tortillas. Waas changed for us as well, so it says book released component here. But I think let's move to the components. Directory him specifically. I'm going to take this food er and move it right here. So here is our book least off three Al. It's double check of that Everything evil right? And indeed it is so we have somewhere everywhere. Basic structure for our when you component oki aan Lastly water like to do is I'd like to cheer our HTML file. So let's, I think, remove this one. And instead, let's define a very simple Marco. Ah, here. We're going to use N G four lead book off books. That's going to be our diva right here and next Redland to see It's going to be a call off three off three units and next is going to hear and force Wolf. All were much, and it's going to be a close off image fluid so that they see much years well, somewhat responsive, Shall we say or next? Let's close by. It's already closed. Let's move next. We're going to see our Coolum life, for example. Cool Cities one here and next. Seabrook took type, so we're simply displaying some basic information about this book and then once again called on Off through. We like these can weekend display H riff well, for example, let's do some flag of it. Let's see here did here and next. I'm going to see books or than loss title. Our loss ate it, so that's the link to edit our book and we've generated of this both right here. Off course. We don't hear this component yet, but we're going to create it in the next video. So that's pretty much eat. Ah regard in our view, our template. Next, let's go to book least dude component Notts And here let's see if we have everything in place are specifically I'd like toe change this. Construct a repeat by seeing these notebooks The model endured choir. Our book that model don't query. Obviously we don't have any book Mortal year. So let's important right now by saying total and it's for form of that should be, I think mo dels we don't tomorrow. Sorry. Booked a mortal. All right. Also here we need to see that books. He's in a rage off poodle. So I think I like to do in this video is greed and you method called quietly because we're using it in our component. But this method is not was not created in our mortal yet. That's going to be a prayer public static method. I'm going to paste the code now because it will looks very much the same s of the method off find. So once again we're getting the array off the books. Then we are cheek in. We are iterating over the Serie and Bush, each book to our book models array. And then we're simply returning all the book mood ALS like this. So there's pretty much eat for this video. We've done some preparations so that we can proceed to the next. We do Onda start greed and are the book editing component and our flesh in it out. So see you in the next video. So let's are proceed to our terminal and here I'd like to generate and you component cooled book aided. So the component that's going to take a year off book editing are once again let's let's move this food folder here on the components go here and the change of the bath beats by seen components Total are all right on next. Let me open are this component and here I'd like to import some additional stuff. Also, that's a wrong component. Of course, we are interested in book, edit or now sue. First of all, we need activity to try out are for Rome and your or older Next I like to import off the full in form Beautiful foreign group are really liters two will perform validations, obviously abstract, uh, control and for control. Uh, friend Ah, angular stood like this. Angular, All forms off course, A nice. And also we're going to import our book motile That may just coping the corresponded line off code from this file Because after all, we're going toe work with Brooke here as well. Oh, as for the next line with component, we don't need to do anything A tool. Ah, but next, let's two week of this book aided component are close. So here, let's save now. Book edit form. He's a former group. Our sorry book is going to be a book model just like before On next fictive form is going to be a string are reactive. Oh, that's going to be used to see well, to cheer or to change or what type form do we care our next? Next? We're going to a week. Are were constructor here? All right, let's I think collapse of these our component for now. I'm just thinking we need to remove this app here. And so do this seem for our book least component. Remove this tape art here as well. All right, let's collapse of these and now proceed to all construct. So as for constructor, we're going to hear quite a lot off. Good. But, well, fear not, it's not. Ah, that's company at that complex. First, awful, literally will require a form beautiful. Next, the private is going to be around, Activated wrote. Next, let's say these notebook edit form equals two of the group, so that's going to be Authors Group, and obviously here I'd like toe least all the fields of that the book are has. So the fields that would like to modify let's see, for example, will it deters got required so that the title well is required. That's copy this line off code and do the same for the image. Image is required as well. Yes, for description. I think we do want to really require the description, and it's with a price that in all its well, it's not your quiet as well. But of course, you can't required if e. If you'd like to. Next, let's say route adult forums and don't subscribe, so we're going to subscribe to some changes or let's Next are defined function and said this function I'm going to police the full of include so specifically we're going to utilize a method called find that was already created in the previous video are Here it is . It's a public static method off that gets in a real for the books and then finds of the book by its title war. If nothing was found a now he's returned. So inside of these subscribe Look here Where? Chicken. If the book is no, then we're just gonna head and creating. And you book motile hokey. No, let me collapse of this constructor and greed said meat Look, submit a reactive form and it's inside. We're going to see Lay it all indeed. Are these doors prepare? Save nice on next of these equal stony you Total de Toe indoor team Which and then all are the fields of that We here for slow on 2345 Here we should see title Then we should see description Then we should see price Okay. And after that we'd like to see see Oh, just like that. Okay. Are so next we off course needed to define prepare save book because we don't hear this method yet. So that dude below by are taping the foreign cooked. We're going to give a constant called for model of this notebook aided form. Not really. So that's going to be all for, and it's going to be retuned for room. Are this method from this method? No. Let's tweak our HTML file for both edit here. I'm going to create our old once again And yes, for the first cool of it occupies all the available space we're going to display in each one hit or seen edited book Our Buddha title so that a user I can see what exactly he tries to edit next. I think Let's define yet another room. I am inside this rule. We're going to hear a one colon for now, and that's going to be around for early. And when this is clicked, I would like, um, the active form to be a real detective so that a user can choose what a type of form are he wishes to use. Well, of course, that that's not something that you were you that you'd often do own well riel world websites because well. Basically, users do not know what is a reactive form or what is that simply driven form. But that's going to be done. Only four are starting purposes for us, so that we can change the type or the four that is going to be used. And so this active form here, mystique and for this life here, basically on later, we're going to create more links in this room and, um, greet more types of forms. All right, No, let's agree to form and see in G. If active form is sort of form, he's Richt. So if our we've chosen their reactive form, but we're going to have a form group did for then alleged Ung said. Meat our end off this limb, Let's say here's a meat or reactive for that's supposed to see Novalee Deed for now and lose all four. So submit Reactive form is a method that was created by us in a moment ago. Looks, let's see Allegra and give a role. We've some margin on the stoop. Some strange things are happening with indentations, but yeah, all right, our next. Let's see, that's going to be Call them. That's our reactive form. Next. Let's define yet in north the room he your with deep closing. That's going to beat wealth here without any margin talk. But there's going to be a form group, so I'd like you both trip to do some style. And for us there's going to be a label for title. So here we should see Giant off course. Next we'd like to see are in. And as for the input week in our be wary where specific about how this input a should be, heave how it should be validated. So let's do some more code. And for this important alright, so first awful that say form control. Our name is a title and the type of sticks to the name ist title and the glass is tryto form control. All right, next a next we're going to see in geek loss and then we're going to see it some well conditions through. Specifically, What I'd like to do here is I'd like to assign a close school. He's invalid. But only when I did it for where the book edit formed are the controls, or try to he starched. So if it was mortified somehow and and when we created form are controlled Stato. Let me just go, Pete, I think, due to errors. So if there are any errors were going to mark of this field as invalid, which is, well, quite office, basically. So this way we can control um, What should happen toe our input if something goes wrong. If the usually has provided something correct, input mixed, let's a yet and as a dif and c vale it off feedback for except And here we just will just display a very small or feedback by saying police provide if they let title like that. All right, our next. I think we can just go ahead and cologne of these former world beast it right, Hugh And see, for example, in which are you rail? Ah, here. It should be much image and then pretty much of the same for all other attributes. So image, image, your image here Avila t much or of illegitimate Eurail even. Let's scope it once again. And here we're going to hear a description. But Willis, what descriptions thinks are a bit more simple, I guess. Yeah, by the way, here it should be image here. It should be description. So it for the image. We don't hear any validation checks because we have specified that the description is an optional field end and doesn't have any other cheeks. So I'm going to destroy school here and safe text area. So as for text area, we're going to display Ah for control name Close on, and that's pretty much it. Next. Next, let's a justly fields to cheat and share the prize. I think so. The price here price here and here and here as well are of the type. Should be a number, I guess, because it's new Marieke, after all. And it's for the glass that is going to be price here. We don't have any validation. See year for the price soul that's just removed and remove the feedback so that it does not steen away. And lastly, let's display bottom. The type is submit off course because we'd like to submit the form when the button is clicked on the I D should be reactive. Ah, Sig meet. Bottom of the gloss should be bottom, but on our primaries, so that it is displayed an offense. The offensive blew off the ground as the attribute Disabled should be saved if the group did it off for these. No, something that then we're going to upset us to say submit or a Did something like that? No. Then what off? So of this way. This way, we've created all first all office form, office reactive form. And as you see, nothing really complex is going on here. So in the next video, I think we can go a hit and write some tests for this form. So see you in a moment. So I've opened book aided component of that speck file. And here I'm going to import a some really useful stuff. There is going to be used, you know, this speck or so next. What I like to do is under this fixture. All that's great in the chief element, just like we've done it before. And that's going to be html element are so nothing else should be tweaked. Here are Let's cheer our test beds off. The declarations are correct. I think Bartlett's old are also edge imports And see our altar testing module all reactive forms more deal and forms module. All right, are so compile. Components is okey So let's collapse. It are now speaking off before each, so the fixture is already created. Our component is greeted. Let's also take year off native element by saying Fix journey to filament key. Now we can collapse it as well. And also we need to be from some cleanup Orwell tear down. So we like to destroy a book after each have to reached spec after each desk. But I would like to do it only if the component actually here's the book. So if the book, if is there, would like to say component that book to destroy so that we are performing the clean up, as has the necessary. Okay, so we already here one test there simply checks that the component is truthfully, that's nice, but of course not enough. What I'd like to do know is I'd like to create a special helper function that is going to few a four for us because after all, in the States, would like to feel in the form and see that it is being submitted are properly. So let's say they're going to hear function gold field form not full, but feel feel the form image title description and price for the fields of it. We are working. We've let's see component door agent form. So the form that was created by us and the proof is in video once again, we're going to reference to the controls were going to sell the value off image. So this way we are asking the test. Please go ahead and say some specific value for some field. Nothin really complex. As you see hokey. I know we can carry the actual test. As for the test, let's off first lists they eat. Oh, I should Here off the lawn feels in reactive a form. All right. And here I am expecting that all were he Did it form? Uh, live you equals, Um I m e much empty title. Empty description. Well, you I think you understand. So we just want to check that initially the fields are blunk. Okay, let's go. Next. Eyes for the next test. I'd like to see that this meat Barton, I should be disabled. If all the required fields are not set or are not field in or what? Here. I'd like to stick with the sink. Oh, like this. That should be a function here, I guess. All right. So that seats and that's his. Break it here. Key. Okay, so here, we're going to create a spy Or maybe even super spy or we're going to spy on our component are specifically we are interested in submit a reactive for oh, Then we're going to fuel the form. They're using the corresponded function and we real Aussie it of the required fields to empty values toe bullet blonde curse drinks. Then we can use fiqh or a warm rigor, for example, but to feel in the description on them, they use faker to fuel in the price by using Connors commercial. Bryce. So we are feeling in of the form and then a little fatigue. The bottom by using need to filament are wary selector. And as for the idea, we can utilize swell of the idea that we already here. All right, you are reactive of meat bottom. Next, we're going to dispatch an event like we've already did in the previous section and there's going to be in your event off. So we are trying to create his bottom. But we are expecting spine note to hear being called for what it means is basically if even if we are trying to leave the bottom, that the form is not submitted, which basically means that the bottom is disabled so the form can not be submitted or we can also simply check our bottom. Here's a tribute. Are disabled to be for two. So we're chicken that this attribute is actually say it on this bottom. Nothing really complex. Basically, just don't figure that you need to wrap it with the freak sink because where this section is quite well, it's a sink. Rooms hooky. Next we should a season like it shoot hips of meat Longboat if required fields are filled in Oh, once again, we're going to hear at this Fleek sink and this you've probably guessed off the stairs toe will be pretty much of the scene properly. Dual the indentations. Once a year we can greet our spy submit reactive form. But in this case, I'd like toe and cool off for Ruto. Actually, go ahead and call the A really function the rial method. So even if well so and you remember of the spy basically prevents their real function from being called so if I create some spy on this component, if I spy on submit reactive form are this way. So let's make a little committed for a second. So if I do just this of the submit, reactive form will never yet executed. So that's going to be like a stop function, a fake function. But if I like the real function to be executed, if then I should say and call through. So the spy is being will be involved and then the real function will be called. That's the I D. Here. Okay, Next, I'd like to feel in the form, but at this time I like to use some. Really, Whaley's not blank a blank ones. So let's say fi freak or you much adored Premature Langley's and next speaker Do what world dot for example, sentence. Or we can use words about in this case, Don't forget to utilize Jew in as well to turn eat to a string you know to in a rate. All right. Next, let's say fixture are detect changes. A net splits search for all bottom we can use by the way de bark element Y're and use a boy . See Assis bottom May development. It's yet another way for finding the bottom or the page. Next, we can simply say Barton, click Barton that click because, well, if we try to find a bottom using the These way here, the clicker method doesn't seem to be working. So unfortunately, we need to use this lawn conversion, finding or finance the bottom and getting its Ernie two felons. And next we are expecting Spy too cold to have been called. Okay, next, let's get from storage. Let's define it and used motile toe actually find of the book by its title. I booked a title and cynical and next we are expecting book from storage to equal gift. What component? So we are making sure of the This book was actually placed in the local storage off. That's why were seen and go through. Because if we don't do this in this case, admit reactive form wouldn't be called as the book will not end up in our local storage. Toki are no. When I try to run my tastes, I receive this error from typescript. If you are receiving the same error thes well, bonus. That's strange here on not sure why it started to appear. But in order to fix it, you can go to your are motile spec. And here online 59 you can see any like these and do the same four Line 60 and next week unjust R c. This file is going to build all mortals again Air The error should be resolved of the error should be resolved Now let's see if our other tests are working. And as you see, we are heading problems. Who ive Ah submit reactive form spy Let's double check on Dyear here An hour in G said meat we would like to see submit reactive form Bart are break its should be specified. Let's see So that's going to be re compiled. And now everything is green which means that everything is working just fine. We can even do n g serve See open and there's going toe open on this application for us. We can go here and see how hours aided form all looks like with all the tasting, I'm going to provide some something I hear in this string. This one, um here is our reactive form. And if I enter nothing here you see it says police provide a really title. You may ask, why is this working this way? Basically, basically, when this'll input or receives gloss off is invalid. Our boots drop is going to automatically display of these Deve here. So that's our bootstraps job off style in our this form properly and displaying this message. So the rule is really simple. If Theis element this input has a class off, even in Vail, it off them invalid seat back is displayed. Basically, that's how it works. As soon as I reserve this error of these invalid feedback, he's gone for good. And the theme is for the material, you see. So no, I enter something and it works. It doesn't Well, nothing is happening. Four description and price, of course, obviously because we don't have any validations at all. So that's horrible trip are Say it saves the D for us, shall we say? All right, that's quite nice. We have greeted some tests for our worry active form. Now I think we can proceed to the next video and take year off template driven forms. So hold on tight and see in a moment. All right, so we've discussed reactive forms. And no, we can create another Coolum here and see that it's going to be template driven. Let's say simply, torm are here. All right. Our next weekend, Kewpie part off this line off court, he'll close the former right way. Let me collapse of this and next replace it. We've complete even and C r t complete four equals two n g for like this Next Let me open for a second. Copy this. Well, you know what? Let me just coping well this markup so that I don't need to type it. Once again, police in cubicles dif closed the beef again and say template driven off form here. Well, next and next. It should be formed group here as well so we can see trilateral group here may before some most child and and let's school it a title to so that we can differentiate between different titles on next under the label. I'm going to create a union put obviously And as for the input we're going to see and judge immortal, it is going to equal to look title off the names going to be, of course, tryto but not just title, but title. All the type is going to be the text. Just like before our beacon separated to try toe to lien cloths should be title for control and next, a total to is in total. And also let's say that minimum length is three. So events how we can introduce some validations for our inputs. So that's an HTML five attribute, basically. Ah, but angle will also are well, which would this attribute? And if the user does not enter enough symbols, enough characters into this field of this future will be will be marked as invalid. All right. Also, I want this feel to be a required. So this way I'm introducing yet another holiday show. Oh, Keys, Nets next left school part through the deep are Yeah, I think Let's say ngf are we're going to see North title to village. So if the title you've not avail it and our title to his duty meaning that it was judge it meaning that it was changed somehow or if it was starched. Yes. So if the title here's inexistent very or if it was modified and if it is invaded off, then west scene the at this future should be displayed. It is going to hear with the gloss in a veil. It feed Vic just like before and death for the style we're going to see displayed. Look Meaning, um, the meaning of that. It should be a displayed on the screen. Well, it's double check. I think we've missed with the DIFC beat because of these TIF should go here. Then we hear that it's quite correct. Like this are inside inside. We can display once again get to know the deal. Yes, that's maybe too many gifts We're going to see Title is required if let's say a and G e f our title to mirrors. Very quiet on Do the same A little too errors mean length or and say title must be at least are three characters along. So you see what's happening here? Basically we have are nested are conditions So this is like top level condition And if our the title is invalid and it has some changed value off their okay, way are displaying of this parent dif and then inside the Parenti, we have to child deaths. One is being displayed only if the title he has no value at all. So the validation Ah, this required validation is being violated. We did. We're saying title is required. And if of the title here, lay off of then through each character's we are displaying of this message here. So that's how you can display your are validation how you can define your validation rules . Kissel. That's doubled. She excell isn't if you're and then we have dif here of energy here. Okay, um nice. We can do pretty much of the same four all or in which by scene in which here, actually, if you need the state will group by the way. Or let's say you much too, and say a much too. And in which of the type of sticks that the i D. E is image Do the classes image our image to? We don't have. We don't need to specify minimum length, obviously but we'd like to specify are require or then once again in G for image to really it image to dirty image toe touched once a gear in village feedback And then I think we can get rid off this one here What say much to errors required in which euro Andi mature. All hell So the validation rules operate in March of this scene? No. Let's a display on description Text area for description that's going to be label full screen description. Legal event is going to be exterior and Jim Auteuil equal to do it description. Schools are text cereal, really quick are and next description to he's INGE Immortal. Next, What's a vet? Our next we are going to say name is description. Toe to here is well on Next Will Kloss is the description. All form control, and we can also say it's going to be required. So it's up to you. You can make it required. You can meet off this validation Sheikh at I think you know what. Let's admit it for no for breathing. And lastly, let's take a year off. The price R is for the price. We're going to save price you off then. Price, too, for ice you you're and here and here is well, so everything Ripley's replaced Bryce ah is going to be required as well. But our part from a requiring of the price. I'd also like to introduce a potter, so I'd like of these rice to fool a even our bottom. But the Parton can be specified as a regular expression. So I'm going to say, beginning off the stream off, then any digit. But then there can be cool one to teach the young we can say three you. So that's how our regular expression they look like you can tweet as and it next. Let's Chia covet here with specified everything properly, so that should be dirty touched then invalid feedback display bloke are than once again that should be our price he's required. And also weekend introduce yet been not. The feedback by Saint Water Police are full of the former, for example, something like that. Of course you can specify you informant Barthwell for demonstration purposes. I've specified quite complex format with the coma as limiter between ah here and also his daughter to delimit between our box and sense. All right. Next. Of course, we need a bottom truth. That meat of this form, the bottom is going to have a type of sand meat off the gloss should be BT and Bt and primary. We were going to say it once again. That's going to be on the bottom or this is it? This is it. So I've opened the book aided component to dot Specter tedious file. And here we're going to introduce a couple off you tests. So let's see eat. Or should he have tried toe ever are, if less of them Three symbols provided. So, as you remember in the previous video, have specified validation rule for our form, and we have said of that minimum length should be through it. So in this test, we're going to check if this validation is actually working, we're going to say freak sink again. There's going to be like event. And yes, let's for murder to be differently. Yep. Nice. So inside this fake, I think we're going to sail. Have the component active form chutikul through template A driven. Why? Because we'd like to utilize thes condition. So it should be template. It should be template driven. You know what? Let's move. I think this form to the bottom off this file like these. Keep on nice or through next. Let's say fixture or detect changes. What I'd like to do next is it like to, um, get our form room that beach by using template for what to be able to do this, I need to do some changes to our component specifically here. I'd like to add this line by sea by using and deformed on and same template form like this . Obviously, we need our of your child to be added here and also will require Angie form in this import statement in Kate, Let's are returned to our tests and see because Well, after all, all those separations, they are asynchronous. And I like to see teak to actually see toe our on engine, go ahead and apply the separations. Okay, Now we can use this forum to save some values through. As for the values, let's do the full Let's see title to Well, I don't know. Let's say just just like these, so you can use Fiqh or if you'd like next, we're going to see much tool to which the taste it doesn't really natural. Next, we're going to see description too equals two non and Christ Ruiz 100 for example, key. Next, we're going to see formed form. Dort controls little to Mark s untouched. So we are going to programmatically touch of these title to field because it's you remember here are in our form. We have this title touched, condition keen. Once again, let's detect changes. And Lex. Let's set an expectation by seeing four controls total two errors. Toby Truth E. In the year, By the way, here we need to provide only two symbols because otherwise that the title will be correct. So we are providing two singles, some random symbols, and we are expecting that of the error is being displayed because of the title does not contain enough characters. Next, let's do the full. And let's say it's clear to me to development our acquiree selector. And it's for this electoral. We're going to see title group, um text content to are contained to contain our title must be at least three charity talks long. So we are simply making sure that this message is being displayed for us as you fully understand. Next, let's a write a similar Teest bought for the price. I'm going to quote here this close fake sink close, eat and we're going to say it should have price error e for incorrect Will you provided for some incorrect ville you provided now inside Freaking think we're going to say it. Active form to template driven again. We're going to say detect changes were going toe. Pick the form. Elope, form the teak once again said the values and then Mark price is starched, so we're going to do porridge much of the same arm. But as for the title were going to say it, I think that part of the correct value bottles for the price. We're going to say some incorrect. There's going to be a stream with a dual or sign at the beginning, which is incorrect because it doesn't fool Our were our template off part that we have specified offer this feud on next. We are going to say it some expectations once again. For example, let's do the full when. So let's see that the price here's errors and next off to we change value for the price are it should be truthful. So that's yet another way off Chicken of the future ease of whale it by using, forget and then saying to be true. See, all roll right? No, that's saying gee test to make sure that all the tests are actually working. So, yeah, we've seen how to set up some validations. Try to say it. Bartering Andi Well, this are aspirating much Eat one simply dream informs. Let's make sure that it works. No, and indeed it works. You can also try to do in Giselle by seen also open, just to see how our form looks like with their full style. And it takes some time to Lord No, let's go toe ended beach And here are two links I'm going to click template form, so notice it says no template driven form, so t