Flutter Testing Guide for Beginners - Part 1: Unit Tests & Setup

how can you make sure that an app does exactly what it should do without any weird unexpected surprises well you tested of course you could test everything manually by launching the app using it and trying your best to make the app blow up with errors or you can write a bunch of automated tests which is arguably a more time efficient and thorough way to test your apps let's take a look at unit widget and integration tests [Music] hello welcome to riso coder where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you build so subscribe and hit the bell to join us on our quest for becoming in-demand flutter developers and be sure to check out the article from the link in the description where you will be able to find the starter project and also the code snippets which i point to throughout this video so this tutorial will actually consist of two parts in this first part which you're watching right now we're going to take a brief overview of the whole testing world when it comes to flutter we're going to talk about unit widget and integration tests and then very soon after this brief intro we're going to focus just on unit tests and also on well setting up your test environment in general about mocks for example and so on and so forth because for example mocks are used also in widget and integration tests and not just in unit tests then in the second part we're going to take a look exactly at those widget and integration tests but you will have your foundations already covered by watching this week's tutorial so what is testing testing is simply said ensuring that your app does exactly what it should do and one of the reasons why we write tests is that we are testing for regression and regression is simply a bug which gets introduced into the app as you try to for example expand its functionality right so you have your code already written and then you decide that you are going to i know maybe in the login feature you don't want to just be able to sign in as a user by using the email and password but also you want to add the option to sign in using let's say twitter right through oauth now you add this twitter sign-in functionality and what might happen is that you introduce a bug into your code base which is going to cause some issues with your email sign in it worked previously but now you may have messed something up and it's no longer going to work properly now if you have your testing suite already set up you have all of your tests running after adding your twitter functionality you can just run all of your tests and if they fail you know that something is wrong and you can check out exactly the test which has failed and it's going to tell you what exactly went wrong and you can quickly fix that issue as opposed if you had not written any tests previously you did not have any tests set up prior to writing that twitter feature if something failed you would not know about it until you either tested for it well manually right by just using the app or in the worst case you would actually get these bugs reported by your users from your production app which is on google play app store or somewhere on the web which is the worst case scenario so testing allows you to catch these regressions catch these newly introduced bugs prior to releasing your app for the users of course this is not the only reason why we test tests also allow you to think more clearly as you are implementing your features because we can actually write tests prior to writing code this is called test driven development where you write test first and according to your test which you have written you write code only afterwards which is something that we are going to take a close look at in this exact lesson and then of course there are two main types of testing i've mentioned both of them actually so manual testing is when you just test your app manually by clicking through it as if you're a regular user and then you have automated tests which is what we are going to focus on in these two lessons in this one and the next one so before we get right into it let's talk a bit more about tests in flutter so in flutter we recognize three types of tests the first one are unit tests these are used for all code beside the ui widgets and one set of unit tests usually tests a single class so we are going to use these stats for example for testing change notifiers blocks some kind of a just business logic but not for widgets for widgets we have widget tests which are used for testing a single widget and then we have also the third group called integration tests which are for testing large parts of the app from the user perspective we could also call them ui flow tests but also integration test because well they test the integration of multiple parts how it works together now both widget and integration tests they work with the ui widgets but the main difference is that integration tests actually run on a real device or on a emulator which means they are slower to run and widget tests they don't really run on an emulator or a device they just run on a we could say simulated ui environment so they run quicker but also they are not as comprehensive as integration tests simply said if you run an integration test you can literally see that on the device something is going on you can see the clicks you can see the text being typed in and so on but with widget tests you don't see none of it it just runs without any ui the ui is basically just simulated in the computer we could say these differences are also reflected in this nifty table which you could have probably seen already on official flutter docks so here we have unit widget and integration tests and the confidence level you have with them maintenance cost dependencies and execution speed so because of the data you can see inside of this table your testing suite should consist mostly from unit tests then a bit less widget tests and even less integration tests because of the execution speed and just the ease of writing these tests integration tests are truly one of the toughest to write because you just need to work with so much code at once because if you're testing integration between multiple parts of the app whereas with for example widget tests or unit tests you are just testing a single unit or a single widget so in this lesson we're going to take a close look at unit tests so let's get right to it alright so here is the app we are going to be working with this is the already finished app as it's running on mac os but you can also launch it wherever you want on android ios web windows it doesn't matter it's a very simple app we're just going to be focusing on how to test it so this app simply displays some news which are just lorem ipsum text it has two screens this main news page contains a list view which just displays these list styles containing news excerpts right and after you click on one of these list styles for example this one boom it takes you to an article page which displays just that particular article and its full length and then you can just swipe here boom right to get back to the news page which contains all of the news all right so this is how the app looks we're going to be working with it all throughout these two parts and also we are going to be sort of finishing up in this part because we are going to be doing test driven development here in this part where we are going to be writing unit tests for this news change notifier which is not yet implemented and we should implement its get articles functionality and again we're going to do it in a test driven way but firstly let's take a look at what is here in this app how do all of the pages look like what's going on actually here so let's start from main.dart here main.dart contains just a simple material app and then we are going to be using well provider namely the change notifier provider here to provide the news change notifier which we should implement in this lesson it's get articles functionality to be exact and then we have a news page here which contains the list view displaying well this list of all the news right here before we jump into the ui let's take a look at this news service which is being passed into the news change notifier to take a look at its functionality now whenever you are trying to test something you always need to keep your dependencies separate and easily swappable which is exactly what we are doing here by allowing the new service to be passed into the change notifiers constructor right right here in news change notifier we accept a news service instead of just for example instantiating a new service right here right it's possible to do it but doing this instead of allowing it to be passed through the constructor would really make testing hard if not actually impossible because we actually sometimes in testing and quite oftentimes we need to swap a particular implementation of the new service for some other implementation which is called mocked implementation with that said let's actually take a look at the real implementation of new service which we are then going to sort of simplify in the tests so the real implementation of new service is simulating a communication with a server where we have just one method called get articles and here we just wait for one second by using future.delay so this is simulating that we are actually communicating with a remote server so it's not instant and then we return articles which are simply a list of 10 articles which is completely random right it returns a class called article which we are going to take a look at next but it's a very simple class containing just a string title and string content for the article and this content is simply generated using the lorem ipsum generator which we actually have here from a package right here in pubspigamo package called flutter lorem all of this of course is already available in your starter project so you can just check it out and begin working immediately by cloning it from github all the links are in the lesson notes as always so the title is just one paragraph long containing three words and then the content of the article is again lorem ipsum but 10 paragraphs and 500 words so this articles list is basically a simulated remote database everything is kept local to keep things simple but basically a server would behave in much the same way we would have changing articles because of course articles change over time you don't have the same articles in the news site for multiple days in a row and also there will be a delay when communicating with a server which we are also simulating so now that we know how new service is working really the last step to understanding everything beside the ui is to check out how article works so article is a simple data class in our case containing just the string title and string content then being a data class the most important thing is that it has overwritten equality because usually dart objects operate by referential equality where only the same two instances of the same class are ever equal but this being a data class we want it to be equal by value so if we are comparing two articles and both their titles and their content match they are deemed as equal and then we have some funky stuff like overhead and tostring and copy with method to creating copies of articles but we are actually not even going to use this all right and now just briefly let's take a look at the news page first which is the default page you see when you open the app right this is the page which contains all of the news in list view so it's very simply implemented this new news page it's a stateful widget which right at the start from init state it calls the change notifiers get articles method which we of course need to implement in this lesson because it's not yet implemented but of course the idea is that get articles should fill up this article's list in the change notifier right with those 10 articles from the news service of course and then we are going to display those articles using a consumer here and of course i sort of assume that you already know at least something about the provider package which you probably know about because it's really the most popular package and is recommended left and right even by the flower team themselves so i assume in this lesson that you already know what a consumer is and how to use it and these kind of basic things if you don't i would recommend you to just really quickly in like five or ten minutes just run through the documentation of provider of the provider package which we of course also have in pubspec yaml right here right provider just run through it if you are unsure about some of these things and everything will become clear in a matter of really 10 minutes at most so back to the news page here we have a consumer which either displays a circular progress indicator when we are still loading the news or also then of course once the news are already loaded it displays a list view containing cards which contain the individual list styles which display the article title article content and then also upon tapping these cards we navigate to an article page which displays just that single article and that's basically about it for this news page it's very very simple now for the article page it's even simpler because here we just receive one single article object into the constructor it's actually a stateless widget and here we just display the content of the article as a single child scroll view containing a column and this column contains the article title text and then the article content text and that's it now that you basically know all about the app itself let's just for one more time take a look at the pub spec ammo because beside flutter lorem and also provider we also have some other dependencies in here called the dev dependencies which are very useful for testing purposes so firstly we have flutter test flutter test is actually by default included in every flower project you create so this is for well writing tests in flutter is very useful as you might imagine then i have also added integration test this is not here by default but you should add it here because in the next part in the next lesson we're going to be dealing with integration tests and as you may imagine this is very useful for writing them then we have flutter lens this has nothing to do with testing it's just here by default for keeping your code base sound and clean but what's actually important for tests is mocktail if you know what it is then that's great if you don't know i'm actually not going to tell you what that is just now we're going to come to its usefulness uh very soon and then i will explain what mocktail what this package entails simply said it's for creating mocks we're going to take a look at why they are useful very soon so with that out of the way let's now start creating our very first test for the news change notifier which we should implement so we're going to be writing these tests using the test driven approach where we write tests first and then implement the functionality also some of you might be asking why we are not writing tests for the news service the reason why is that this is basically a fake class this doesn't have its real functionality we are just simulating communicating with a server but even then this is at the boundary of our app where we are communicating with a remote server and very many people are against testing at the boundaries of an app right you can imagine a boundary where it literally we are trying to communicate with something which is not in our control anymore because servers they are not a part of the app so they are at the boundary of our app and the outside world so many people don't actually like testing the boundary classes like this new service would be if it actually had its real functionality of communicating with a server as for me sometimes i test boundary classes sometimes i don't depending on their complexity just so you know some people actually don't test boundary classes and this is one of them but in our case we are not testing it because it's completely just fake functionality so to create our first test we actually first need to create a file under the test folder so let's right click on it and create new file we are going to call it news change notifier test dot dart and now the basic scaffolding of a test is that it should have a void main method this void main method is what runs whenever you try to run the test now instead of this void the main method since we try to actually test something in our case that is the news change notifier we need to actually create or have an instance available here of this news change notifier so we're going to create a late news change notifier and we are going to call this actually s-u-t which is a name you should get yourself familiar with it's called system under test so sut shortly why system under tests well because we are testing exactly this class so it's under test sut and why did we create this as a late field and not just regular field and initialize it right here to use change notifier instance right well the reason for that is that you should initialize everything in tests or mostly everything there are some edge cases which you are going to discover as you get more into writing your own tests but for most part you should have a setup method and inside of the setup method which is from the flutter test package by the way which got automatically imported instead of this method you should initialize or set up everything pertaining to your individual tests and this setup method runs before each and every test so if you have one test here right one then second test here and third test here before each and every of these tests this setup method will run and what do we want to do in this setup method that runs before each and every test well for example we want to set our system under test which is the news change notifier to a new change notifier instance so we can actually test its get articles functionality if it works properly now we have a problem though because we need to pass in a new service into this news change notifier and as i've told you passing in the actual news service containing its implementation is not the best thing to do here why is that well even in our case where we are really just simulating a server what happens here is that these articles this list of articles can change and this makes testing quite difficult also there is the communication with the server really uh we are just simulating it by calling future.delay but actually in a real app if you are communicating with a real server what might happen is that the internet might go down and you might not be able to access the server or the server experiences some issues and it just doesn't work so your tests fail not because the code is incorrect but because the server just has some issues this is called test flakiness and you do not want to make your test flaky so the solution to this flakiness is to actually create completely a test specific implementation of news service in our case which is not going to introduce any other third party or outside variables into our tests it's not going to await any futures is not going to have any randomly generated articles everything will be controlled just by us and that will make testing much much more easy so how can we create this kind of a test-specific implementation of the news service well you could argue that we can create a class mock news service these kind of classes are called mocks that's why we call it mock new service actually this would be more of a fake but we're not going to get much into that debate in the flutter world these are just called mocks the for anything that you write with this kind of a use case that a class is used specifically just for testing purposes we can call it just mocks and this class is going to implement the new service because as you know in dart you can implement an interface of any class so this includes this new service class and its interface containing the get articles method will need to be implemented by our mock news service and so here we need to implement the get article so let's just hit command dot or control dot on windows to create one missing override for the get articles method and here we would just well return a predictable list of articles as opposed to what we are doing in the new service where there is the generated list of articles using the flutter lorem package for lorem if some text so here we will just return a list of predictable articles which would be article title the first one would be test one the content would be test content or test one content maybe right boom what's going on here what doesn't it like of course it needs to be async because we are returning a future to fulfill the interface of the class okay now let's just copy this below i'm using shift option down arrow or you can also use shift alt down arrow on windows so we have test 2 let's do content test 3 test 3 content right so this is one way to create a mock news service it would work uh but it's quite uh tough to work with it because you truly you're writing your own new class implementation just for testing purposes but you're truly writing a whole fully fledged class and once you get into trying to get a functionality in here like knowing if this get articles method has been called because for some tests this is actually quite useful to know if this particular method has already been called or how many times it has been called you just need to know a lot of details for these kinds of low-level unit tests so if you try to add that functionality in it becomes even more convoluted so for example we would need to get here bool get articles called would be false by default and then we would just set it to true so get r equals called equals true whenever the get articles is actually called right so again we're just adding all of this functionality in here making it tough to maintain even this test mock news service and it's just quite a lot of convolution going on here because of this exact reason of keeping your mock classes simple we don't need to use this uh approach of just implementing the whole class by ourselves we can actually use the nifty mocktail package and this mocktail package will help us write mock classes much more efficiently so let's take a look at that we're just going to leave this in here right i'm just going to rename this class to for example bed mock new service because we are going to create yet another class mock news service and this will extend mock from the mocktail package right we have just implemented it here and also it's going to of course implement the new service for the interface boom this is it you just add two curly braces at the end and you don't add any actual code into this mock new service which extends mock this is it the advantage of this kind of a mock new service which uses mocktail is that we don't need to provide the implementation up front like here but actually for each test which we have here we can modify the functionality of the mock so if we have one test here second is here third test here had we used the approach of this fully fledged class being just implemented again and again this bad mock news service what would happen is that we would either have to use the same implementation in these three tests or if for example in the third test we need a slightly different implementation for one reason or another we would actually need to create yet another fully fledged class just for that third test but with mocktail we don't have any actual implementation written in the class itself we're going to set up the implementation in the individual tests which you're going to see how it's done in just a little while and therefore we are going to spare a lot of time by using mocktail so what do we actually need to do next in our main method well we now know what we are going to pass as the new service into our news change notifier and that's going to be the mock news service right here right so let's create late mock news service mark new service let's instantiate that so mock new service inside setup is equal to new mock new service and now we're going to pass this mock new service into our new exchange notifier so we have put this mock new service into its own variable within the main method because from individual tests we need to be able to change its functionality all right so let's now write the first test before we actually write any tests for the get articles method let's just test that these values these initial values of articles and is loading are always going to remain correct so for example if in the future someone comes in and changes its loading to be true by default we're going to detect that inside of a test i'm not sure why anybody would do it but it's always good to keep this functionality in check even something as simple as initial values so inside news change notifier test we are going to create a test right which is going to check that initial values are correct it's always good to use descriptive test names and now we're going to have a function in here what's going on okay i'm not sure why this dot appeared here but anyway and how can we check if initial values are correct well there is this expect function which expects us to pass in an actual value and then the matcher which is basically the expected value so the actual value we want to check if well the initial value for the change notifiers articles is correct so that is system under test which is the change notifier dot articles and the initial value should be just an empty list because we don't have any articles loaded initially and then also expect we want to expect that s u d dot is loading is false by default let's just add a comma at the end so that it's nicely formatted this test and let's run it we can either run just one particular test or run the whole main method but either way you do it you just click here on these buttons and after a while you can see that this test has passed it has this check mark right beside it let's open up the testing tab in vs code which is here testing this chemical bank thing here and we can see that initial values are correct has passed which is good we can actually open up the console so let's hit control and the backtick symbol we can go to debug console and even here we can see that the test has passed had it not passed like for example would say that is loading should be true but it's false right now of course we would see that the test has failed and it would tell us exactly why it has failed and basically we are going to be able to fix this issue very soon so expect it true actual false right but let's revert it back so that it passes so false is the expected initial value so now you know the basics of how to write a single test and how to basically scaffold your test file so it contains everything that's needed let's actually delete this bad mog new service because this is really not how you should be writing mocks for your for your well classes it was good for explaining how mugs work but this is really not what you should be doing you should basically always use something like mocktail to create your mock classes but now you might be thinking that hey this is actually quite a lot of code to be writing manually every time over and over again and you are absolutely correct that's why i'm going to provide code snippets for you which you can use for creating these tests and also scaffolds for your test files so you're going to have access to a t-scaffold snippet just write the scaffold right boom and this is going to import the flutter test package and also create a system under test variable inside a main method and also the setup call and also a single test group which is what we are going to take a look at next test group just basically group a bunch of tests together so that you can run them together as a group and then also you have access to a snippet called aaa test this is because we are writing tests using the arrange act assert pattern so aaa arrange act assert so this snippet looks like this very basic you can start writing your name of the test instantly and also start writing your test code inside of this function which is async by default because many times you need to use asynchronous functionality within a test and this allows you to do that instantly also this snippet is called aaa test and not just test because test is already taken right you have the snippet the default snippet already here for tests but this default snippet is not very nicely formatted and also it doesn't have this async keyword so that's why i would recommend you to use my aaa test snippet we're actually going to learn about the arrange act assert pattern very soon once we start implementing the other tests in this file all right so that would be for the code snippets which you can be using instead of just writing everything manually as we did right now just for explanation purposes and so now after we have tested the initial values that they are correct let's get to testing and also implementing therefore the core functionality of the news change notifier which is the get articles method so whenever you are testing methods i would recommend you to create a group for these tests which all test just this single method so we're going to create a group get articles and it's going to also have one callback function inside of there instead of which we're going to write all of our tests i always like to start with a test that checks if a particular dependency of the class which we are currently testing gets called so in this case we know that when we call the get articles we probably want to get those articles from a new service right so it's not a bad idea to write the first test to actually check if the new service get articles is called because we are doing this in a test driven manner so we write tests first and only then the implementation let's do just that let's write the test first so let's create a aaa test arrange act assert test again we're going to get to the arrange act assert pattern in just a bit but what this test checks for is that the get articles method gets articles using the new service boom so how can we test that well first we need to call the system under tests get articles so await because it returns a future sut that get articles so this is calling it articles on our change notifier which we are currently testing and also at the same time implementing since we are doing test driven development here and then we want to verify which is a functionality provided by the mocktail package and we can verify that on a particular mark instead of this callback function that any particular mock in our case the mock new service a particular method in our case the get articles on that mock news service has been called right called and let's say called one time because we just want to call it one time not two times for example right this is all we want to check for in this test for gets articles using the new service right this is the only purpose of this test checking if the get articles on the mark news service has in fact been called one time of course we don't have this functionality it implemented nothing is getting called from this news change notifier get articles so this test would fail by running it and this is actually good you always want your tests to fail first and only then provide the actual implementation so that the test passes and once the test passes you know that you're good you always want the test to fail at the first time it's being run that's what test driven development is all about but i will tell you something here this test would fail even after we had added the functionality to the news change notifier why well because our mock news service once get articles gets called on it there is no implementation right we didn't provide any implementation for these git articles we just have a mock new service which is just an empty class extending mock and implementing new service but there is no actual implementation yet provided for this get articles method so we need to provide it and because we are using mocktail we can do it right here inside of this method as opposed to if we were using that other approach of creating a whole fully fledged class as a mock that will be more cumbersome but here since we are using the mocktail package we can provide an implementation particular to this exact method right here so how can we do that well we're going to say when which is another function which comes from the mocktail package and when inside a callback method like this mock new service dot get articles gets called we then want to answer not return because return is for functions which don't return a future but whenever your function returns a future which is the case of this get articles it returns a future you want to use then answer which provides you with an invocation we can actually ignore that so just provide an underscore there and we want to answer well with some kind of a list for now it can actually be an empty list but let's just provide an async keyword here and that's good enough for this particular test gets articles using the new service right so now the get articles method in the new service is no longer unimplemented it's actually implemented with this exact functionality of returning just an empty list so we can now run this test and of course it's going to fail because we have not implemented yet anything inside of the news change notifier so no matching calls actually no calls at all right we are not calling the new service which is true so let's now go to the news change notifier and add just the functionality we need to add nothing more so what is the functionality we need to add well we need to get the new service which is being passed in through the constructor and call dot get articles and since it's async i'm just going to add a weight for good measure right so this is all we have implemented we are really not doing anything useful in this method we are not updating any fields on the change notifier nothing no what we are doing here is just trying to fulfill what we have prescribed in the test and that is that the new service dog get articles gets called right so now with this functionality implemented let's run the test one more time previously it has failed and now it's going to pass which it does which is very good to see all right and now let's go for the next test which we should have here which is actually because of the simplicity of this particular class going to be the last test we write here and that is after we have checked that new service is actually called we also need to make sure that the fields are updated properly that the return value from this mock new service right here gets assigned to the correct fields so that they can be then read from the ui from the news page and the list view can be nicely populated so that we have a ui looking like this right so how is that test going to look like well again using the aaa test snippet and you already know why it's called range act assert well because here we arrange something arranging means for example arranging the marks then we act and the action is that we call the get articles method on our system under test and then we assert meaning that we check for something for example we verify that a particular method has been called so that's why it's called arrange act assert pattern so this next test is actually going to check that calling get articles indicates loading of data right this means that basically the is loading flag should become true whenever we start loading the data then sets articles to the ones gotten from the service which is quite obvious it needs to happen for this class to be functional so sets articles to the ones from the service and as you can see this string has gotten quite long so i will give you one tip here whenever you want to fit a string so that you can view it properly you can make it into a multi-line string by providing three quotation marks at each side of the string and now you can add a new line character here by pressing enter and it's not going to be any issue right so in the case loading of data sets articles to the one from the service and lastly indicates that the data or that data is not being loaded anymore and so what do we need to do in this test well again we need to arrange something we need to arrange that actually some articles are being returned from the mock news service so that they can be then set as the field value of our news change notifier so are we again going to just right here copy this when call pasted here and just provides some actual articles right well we definitely could but actually it's much better to create a separate function for arranging these things instead of just having these when calls spread around all of your testing code base because this function will have a nice name and will be immediately apparent what we are actually arranging by calling that particular function so let me delete this one call and let's create instead of this group a nested function which will be returning void and it will be called range news service returns three articles all right and inside of here all we want to do is while i have that copied code still in clipboard i'm going to paste it here so we're calling when log new service get articles then answer with an empty list but actually we want to answer with a list of three articles so those are going to be well basically the same ones that we had in the bed mark new service which i have already deleted but anyway let's just write them one more time so oracle title will be test one the content will be test one content and now let's copy this below so this will be test 2 and this will be test 3. let me add a comma here so it is nicely formatted and actually once we have this implemented here uh we can use this arrange new service returns three articles function also from the test we have written previously for checking if the new service actually gets called because here we really don't care if anything is returned there can be an empty list returned but the functionality is going to remain the same also if the three articles are returned so for saving on uh code duplication we are just going to call this method we have just implemented let's just run it for good measure this test it should pass again and of course it does and now with all of this in place we can finally call this arrange function also from the test we are implementing currently so now let's go through these steps bit by bit and test them how can we test that calling get articles indicates loading of data well before we even act on anything before calling the get articles we know that we need to expect that s u t dot is loading is gonna be true right this is how we indicate that something is actually being loaded and we can show the circular progress indicator in the ui and of course before this is loading can become true we of course need to call s-u-t dot get articles right but now this get articles method on our system under test is future void method so we need to await it somewhere but can we await it here the answer is no why because by awaiting get articles call in here once we would get to this expectation is loading would be already false again or it actually it should be false again if we implement everything properly right why well because this get articles is going to set is loading to true only for the period while the articles are actually being loaded but once this method fully runs which this awaits sort of implies a way it finishes when the method has fully successfully run is loading should already be false by then again because the articles are no longer being loaded so what can we do here well instead of awaiting directly at the call side here we're just going to put this future void which is being returned inside final future right so this get articles still gets called but we are not awaiting anything here we are going to await the future only after checking that is loading is true right so at this point the whole method will run and we have already checked that is loading is true and now we can check that articles are the ones that we have also gotten from the service so we can check that expect s-u-t dot articles is equal to the list of articles which are being returned from the service and what are those well they are these three articles right so for now let's just copy this directly here i know code duplication we are going to get rid of that soon but for now it's good all right so we have this expectation here that the articles are exactly the ones which have been also returned from the service and now expect that the data is not being loaded anymore which means in our terms we need to check su t dot is loading false before actually running this test let's fix this code duplication very quickly so what can we do well we can put these articles which are being returned from the mock news service inside a variable here so right above the arrange new service returns three articles function we are going to create a final articles from service and this is going to be equal to this list right here and now from this arrange function we can return instead of the list literal just the articles from service and also here in the expectation we can expect that suv.oracles is equal to articles from service now let's run this test right here it's of course going to fail which is kind of expected because it's not it implemented this functionality at all so how can we implement that well we need to set is loading to true then we need to set the articles to the ones from the service and then is loading back to false so let's do that right now in the news change notifier firstly let's just call is loading to true or not call let's set it to true of course then keeping in the spirit of change notifier we of course need to call notify listener so that this change can get propagated to the ui now we are not testing for it right now this is just something very specific to a change notifier there are ways to test for this but actually i just recommend you to use something uh which is not relying on your manual notification of the ui like something like state notifier or block which handles this for you or x handles this for you instead of you having to handle notifying the listeners by yourself then of course we already are calling git articles from the new service but now actually we can finally use the return value of this git articles call which is a future list article and put these articles into the articles field so we are setting the articles and of course after that we want to call is loading to be false again and yet again notify listeners because just remember that after every change of a field or multiple fields right here you just need to notify the listeners of the change notifier boom so now inside news change notifier test after we run it it's going to pass which it does and just to make sure that everything passes let's run the whole main method so this is going to run all of the tests within the method and all of them pass so that's very good and these are actually all of the tests which we need to have for the news change notifier because it's a very simple class so there is not much else to test there and that's exactly why i chose this simple class for this particular lesson because you just got to learn a whole lot about testing and about the principles behind it about test driven development without writing 100 tests for all the different edge cases that the class might have in the next lesson which is going to be continuing upon what we have done in this first lesson we are going to take a look at widget and also integration tests but that is going to be much simpler for you to understand because the basics and the principles of writing tests remain very much the same there are of course some things that change because we are no longer going to be dealing with just pure logic pure dart code but we're actually going to venture into widgets with the widget test and integration tests but the principles remain the same the arrange act assert patterns remain the same the range functions all of this remains so you're going to feel right at home once you start learning from the next lesson which is going to come out next week until then take care and if you are serious about becoming a great flower developer who can build real apps for clients or at a job go to flutter.education link is also in the video description by the way to get the top curated flutter news and resources aimed at improving your app development career and over there you can also subscribe to my mailing list to get the best flutter resources delivered weekly right into your inbox and if you don't want to miss the next part of this tutorial and also many more tutorials like this be sure to subscribe to this channel and also join notification squad by hitting the bell button to make sure you grow your flutter skills because here on riso coder i am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer if this video helped you give it a like and also share with other people who will benefit from it from knowing how to test their ads with unit tests keep an eye out for the next part of this tutorial series leave a comment and see you in the next video [Music] you

Channel: Reso Coder

Views: 118,511

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter testing, flutter unit testing tutorial, flutter unit testing mockito, flutter unit test example, flutter mockito, flutter mocktail, flutter mockito null safety

Id: hUAUAkIZmX0

Length: 60min 27sec (3627 seconds)

Published: Tue Feb 08 2022