Svelte with Test Driven Development - slot

now let's refactor our implementation in login page we have this button which is disabled based on these values and it has this spinner and it has this text in it and just like this one we have same functionality in the sign up button so instead of repeating this in both of these components let's extract this part as a new component so under components folder creating a new file and this is button with progress and just copying this part this button from signup page or login page it doesn't matter and pasting here [Music] so in this component we need these properties this disabled this api progress and let's move this to the next line and also we need this function this one click assignment and also we need to import spinner and we need this api progress and we need this this button text so let's make sure this component is looking for those properties and first let's import spinner it is in the current directory with this component and let's have properties export that and the first one is let's say the text the text will be used right here and the next one is let's say the disabled and the other one is api progress and let's have this function let's call this one as one click so let's assign it right here so we have this component and let's use this one in login page so here importing button with progress from components folder button with progress now the spinner is in that component so we will not use spinner anymore so right here just going to replace this one with button with progress and now we are going to set the properties the the first one is let's say the text this is looking for a text and the text will be this one [Music] and the next one is this disabled disabled is disabled and the other one is api progress here it is looking for api progress we can go with the shorter way of assignment so instead of having the property name and the assignment both are having the same text we can just go like this and we can do the same thing for api progress and the other property is on click so we can pass this on click to it like this on click and that's it now we don't need this button so we replace the button implementation with this button with progress so saving this one to make sure everything is fine and the tests are passing and we can verify the functionality here in this login page here the button is enabled and if we click this one it is displaying spinner and the spinner is gone after the the api call is finishing so basically we are able to catch the click events from this one and the properties we are setting to this one is also applied as we expected and also our tests are confirming that behavior now in this button we no longer set the text in this one is a child element like we do right here so this is html button and this text is child element for this one but in our custom element we are setting the text as a property we can also add child elements to our custom components so just like this one let's remove this text assignment and let's change this one to something like this so here we are opening this button with progress tag and closing here and in it we are adding this text so we are adding child element to our custom component now to use this one this text in our component we will update this one like this so instead of text we no longer receive text property and we were displaying the text right here here we are going to use a special html element and this is slot so this slot is dynamically filled with the the child element we are passing to it so if we save these changes here in this window we can see the text is right here and the login page tests are passing and let's use this button in sign up page two so just removing the spinner from this login page and just copying this button with progress import and pasting right here in the sign up page in this one we will not going to use spinner 2 so removing that spinner import and here we are going to replace this part so we will have button with progress so we are going to set the disabled we are going to set api progress and we are going to set the on click functionality which is submit for this case so we will set on click property of this button with progress and we will set submit for it so just commenting out this part so we don't have child element added to this button with progress so saving this one and let's open the sign up page so here in sign up the button is shown like this because there is nothing in it and the tests are also failing for the signup page because there is no text in it so we cannot query that one and we won't be able to click that one in test27 tests are failing so when we are using slot in our custom elements we can have fallback values so for this slot we can set the text like this one so here we are seeing the text button and if we go to login page we see the login text so this slot is displaying this button text if it is not having any value assigned to it so this is a fallback value if there is nothing in the slot then this one is visible but in login page here we are adding a child element this one and this is filling this slot therefore the text we are passing right here is visible so for the sign up case we will also show this sign up text so just copying this part pasting here and removing this commented out parts and saving all changes and if you go to sign up page here we can see the sign up text is visible in it and here we can see all this are passing so we extracted this repeating functionality so it has this logic to show hide the spinner and it is this functionality to disable the button so instead of repeating this part in both signup page login page or any other page we may need in future we extracted this part to a separate component and we use that component like this so with this way we are creating reusable components we extracted this button with progress as a separate component and we have this functionality this slot and we can do same thing for another repeating part in our application in signup page we have this form of card layout of bootstrap we have card header card body and we also same thing in the login page here there is card header buddy and also in user list we have this card header and the this one also has card footer so instead of repeating these parts let's create a new component and let's use this one for our repeating layouts so under components creating a new one and this is going to be card swells [Music] and basically the card is having a div and the root div has the class of card and in this div we have another one and this is generally for like this card header and text center and we also have same thing right here the difference is we are setting the text center in the h1 instead of div and we have the same thing in the sign up so this has the class of card header and text center and in this div the in this header we are having this h1 so in the in the user list we have this h3 as a child element and in sign up we have this h1 again as a child element in this cart header so just like we have this in button with progress we are able to include child elements to our custom components with the slot so for this one we will also have a slot right here we also need to have slot for the cart body part we also have elements in here so we will have multiple slots so let's add the div for card body and in this one we will also have slot now we have two slots in this card and whenever we add child elements to the card it won't be easy to figure out which element will go into which slot so we can specify for instance this header this h1 we can tell put this h1 to this specific slot this one by setting slot names so for the slot we can set the name and let's call this one as header and we don't have to set name all the time for instance we didn't do that in the button with progress and when we don't set slot name it is considered as default so whenever any element is added as a child that slot is used automatically so the card is partially ready let's use it in let's say in sign up page so here in signup page let's import card from components card sweat and here in the form we were using the class card right here but let's do it like this let's wrap the card with form so we have the card right here now we don't need to use this card style anymore so removing this class from the form now we are going to have this h1 we no longer need to define this divs the header and the body all we will do is just move this h1 into this card and we tell this card to be used in this slot header and we do that by using the attribute slot and we want it to be used in this header we no longer need to set this text center class 2 because by default in this div everything is centered and then we will be adding these elements the input inputs and the button right here to our card and we can do it like this just cutting this part and pasting in to the card and now we can get rid of this part we no longer need this these divs for card header and card body so we have this card now we are having this h1 which will be positioned in to this slot having the name of header this one and we also have these other elements and we are not specifying any slot for them so by default these elements will be filled into this slot so let's save these changes and here in sign up page we don't see any difference and if we inspect this page with the swelt extension here in sign up page we have this card we are filling the slot in the card header and we are filling another slot in cart body which is default with the elements right here input and the button so let's also use slot name for the body so let's say this is body now to make this inputs to be visible in this slot we need to wrap all this part with another element like this div and moving to here and we can say this div to be slotted to body we have to do it like this because we cannot use this slot attribute for custom elements so that's why we are wrapping this part with another div and setting slot for it so saving these changes and here we can see the page is still same now let's use this card in login page too so just like we did in sign up page importing card from components [Music] cards welt and here we are going to use card in this form now we don't need to set the class to form for card and just like we did for the h1 right here for sign up page we assigned it to slot so we will do that one right here moving h1 into card we don't need to set the class text center anymore because it is already set in card in this card's header and we are going to set the slot as header this part and we are going to be displaying these elements in another div and this is going to be put into the slot of body and let's move this input and the button part into this one so just like this and that's it we don't need these divs anymore so saving this one so opening the login page here we can see the form is same now let's use this card in user list 2. so again importing cards from current directory card swelt now in this card now in this user list card right here we have this div and we have this card header we have this card footer which we don't have our card yet so first let's add a div right here for card footer and let's have a slot in it so that we can add elements into this part and the name is let's say let's say footer so in user list we are going to use the card so here adding the card and we will have this h3 and this is going to be visible in slot header and just removing this stiff and we will have this unordered list right here it wasn't part of either cards header or we don't have the card body in this user list so the current card layout is taking child elements into these div blocks but in user list we have this element unordered list which is not part of any of those header body or footer so to this display this one let's add another slot right here after this card header and let's set this one like this let's not set a name for it so it's going to be default so if we move this one into this card this h3 will be added right here this unordered list will be added right this slot and then we have this card footer so let's have a div right here and let's slot this one into [Music] filter right here and let's have this part this control part in it so we just replaced this implementation with our custom cart so let's save these changes now let's go to home page here we can see the user list and the footer but there is a styling issue here the format is a bit broken so this there is a space right here between this user list and the the footer and that's coming from this card there is this card but if we inspect this part right here we can see there is this card body and it is filling this space so this card body is part of the card component but in user list we don't need that card body to be visible so that's the situation right now we can make these slots to be conditionally visible and for this one we can do something like this so this card body will be conditionally visible and we can do this by adding and if controlled right here so if we'll be starting from this one and ending at this line and the control is now we are going to check if we have any assignment to this slot body and to access to the slots used for this card component we can do like this double dollar sign slots so we are accessing to the slots used in this component and we can check if there is body this one is used is assigned so in this slots object we are checking if there is body if we do then we are going to display this part so let's say this one so if there is no body slot assigned to this component like in this card in the user list we are not using the slot name of body we are using header and footer but the body is not used there for this if check is making sure that body is used or not and if it's not used and not displaying this card by the end here in the user list if we inspect this part once again here we have card header in the cart we have card header we have this unordered list and we have this card footer but if we go to the sign up here we can see we have the cart body visible right here so just inspecting this part here we have cart header card body and also we have this card footer which was not part of our forms previously so login is also having this card footer so just like this body usage we are not using the card body in in user list and also we are not using the footer in login or signup page so this part must be also conditional and we can conditionally show that one again like this if slots has footer assignment then we will be displaying this div otherwise we won't be showing this footer so saving this one and here in the login form we no longer see the footer in sign up we are not seeing the footer and if we go to home page here we see the user list we have this user list which is not part of the cart body visible and we don't see any extra space here so now all the layouts are back to their style this lecture is more about practicing the slot for different use cases and with slot we are able to extract the repeating markup as a component and reuse them with different use cases

Channel: Programming with Basar

Views: 41

Rating: 3.6666667 out of 5

Keywords:

Id: tkwfXHpW5KU

Length: 26min 46sec (1606 seconds)

Published: Fri Oct 01 2021