Basar Buyukkahraman - Test Driven Development with Svelte

[Music] [Music] [Music] in this session i will be showing how to apply test driven development in a civility application having external api interactions with it hello my name is bashar bukharma i've been teaching web technologies by applying test driven development and thank you for joining this session we are going to create a simple component it will be loading random users from this public api random user me whenever we click the button and in each request this api returns random user back the project is based on swell template it has additional dependencies for the test environment like we have the jest the soil testing library and the mock service worker test configurations are also set in the project as well you can check the description for the repository and right here in the browser the application is running and right behind me we have the test console let's move it to the front now it's time to see tdd in action i will be doing the implementation in this app so weld and for testing this component adding a new file here app.spec.js the testrunner is detecting the files having the extension of that test js or that spec.js and then runs them with test driven development we start coding by adding the test case for the requirement and let's do that let's import the render and screen functionalities from testing library and then let's import our component now let's add our test it has loaded random user but so in this page we will have a button which is having this text load random user first we are going to render our component this function this render is rendering the app to document body in this document we are going to query the button and we get that button by using this query function coming from the screen screen is containing the query functionalities and we are using this query by role here we are using accessibility roles in our test and the component we are looking for is having the role of button and also it has the load random user text on it and finally we can do the assertion we are expecting this button to be in the document now let's save this one and the test is automatically running and here we can see the test is failing because we don't have the button on the component now let's implement this now just clearing the app and let's add just simple button to this component and saving it now we have the button and the test is passing consider this one as a warm up let's add a more interesting test so going back to our test now let's add functionality to this button let's add our next test it displays title first and last name of user this one has async await in it this username will be visible after async api request is completed again we are going to render f then we will get the button this time we are going to click this one and it will make an http request to random user me but in test environment we don't want a real http request to be gone to actual server because this would make the test environment fragile we cannot control the external dependencies so we cannot have predictable tests our tests may end up with false negative results for solution we can use mocking and we can mock the http client let's use axios in the application so in the test first let's import the axios we are going to use the get functionality of the axios so we are going to replace the existing axios get function and we are assigning a mock function to it as a result this is going to be resolving this value this is not the whole random user api response it is just a part just needed for this case this result value is exactly what what axios get is returning it is having this data wrapping the actual api response now we mock the axios let's click the button for that we are going to use fire event functionality of the testing library and right here we are going to click the button by using the fire event after clicking the button we are going to look for full username this is going to be visible after async api call is completed to await this text to appear we are going to call await screen find by text and the text we are looking for is just the merged version of the title first and the last and we expect this user full name to be in the document now let's save this one so this is failing let's fix it we will use axios in this component and we will have this local state for the user object and let's have this function load random user for loading the user from backend we get the user from random user me let's call this function one click for our button and if we have the user let's display full username let's save this one the test is passing now let's test this on browser here clicking the load random user and here we are seeing this username and if we click this one more time we are receiving another user so we complete the implementation but instead of axios we could have used fetch it is part of the browser functionality so we don't need additional dependency in our project to make http call to backend servers let's do that let's comment out this part and let's do the same thing with fetch so we are using fetch here then we get the body from fetch response like this then we take the user from the body result area and let's save this one now our test is failing but let's try this one in browser just clicking this load random user and here it is working we are receiving new user whenever we click this load random user so this fetch is properly working but our test is failing because our test is dependent on to the axios now we are not using axios therefore we need to refactor our test to make it work with the current implementation now let's fix this one instead of using axios let's go with a better solution let's use mock service worker first let's remove this import and let's get setup server and rest from the mock service worker dependency and in the test before rendering the app let's create server there will be rest get handler and this will be handling the request for this random user me this is going to be intercepting the request and the actual request won't be delivered to the backend this one is going to be returning the response and let's start this server in listening mode now we don't need this small part we don't need anything about the http client in our test now let's say this one and here we can see the test is passing just like we have tested on browser it's working so now our test is not dependent on to the http client we are using currently the test is passing and we are using fetch now let's go back to axios so just commenting out the fetch part and uncommenting the axial's usage here let's say this and this one is also passing we completed this tiny project by applying test driven development as you practice it more it becomes second nature in your coding routine and in test codes if you stay away as much as possible with implementation details then you will be able to implement the requirements however you want that's all from me thanks for watching

Channel: Svelte Society

Views: 1,178

Keywords: Svelte, Javascript, Web development

Id: R265FKnzswI

Length: 10min 0sec (600 seconds)

Published: Fri Dec 03 2021