Bloc Test Tutorial – Easier Way to Test Blocs in Dart & Flutter

blocks are meant to hold logic and as proper programmers we should probably write some tests to verify whether or not that logic is correct if you follow des driven development writing test is even more crucial but there's one problem testing blocks requires a lot of boilerplate the block test package sets out to solve this issue by providing abstractions even for testing as if it wasn't enough that block is itself an abstraction for pure streams so from now on there's gonna be no more dealing with classic streams even inside your test files Wow welcome to resew 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 sought-after developers also if you want to meet up with the flutter community if this January in Warsaw check out flutter Europe that def or also go to the link in the video description a while ago I created the tutorial showcasing how to use block version 1.0 0.0 now the block library is actually at the version 2.1 point 1 but I've taken that app done some minor fixes in order for it to work even with the newer version of flutter block and if you haven't watched that tutorial yet definitely check it out from the cart in the corner but basically what we have here and what's also a starter project which you can get from the link in the video description we have a weather search app where we can input a city and we have basically 50% probability that we are going to get an error and we did get an error because the device is supposedly not online now but if we search for that city again so again London we may finally get the actual weather and surely after some time we arrived at the display page where the temperature is displayed and also the name of the city is displayed and also we can see the details for that city and detailed weather simply means that in addition to degrees Celsius there are also going to be degrees Fahrenheit so be sure to check out the written tutorial from the link in the description where apart from this starter project you can also find all of the code written in this video links to the libraries and overall go through this lesson at your own pace so we are interested only in the block which is right over here also present in the starter project as I have already mentioned and in this tutorial about block test package we are actually gonna only test this part for when the get we're event arrives in the block because there are two types of events get wetter which is that one which shows only Celsius and then there is the get detailed weather which shows also Fahrenheit we are not interested in this so we're gonna be testing only the first part of map event to state so basically we are gonna test that it should yield we're loading state and then it should load error we're a loaded state with the weather inside of it if everything goes successfully or when there is some kind of an exception happening it should output where error State so this is what we are going to test first in the absolute classic way as you were probably testing all along if you were testing blocks for example as we were testing in the clean architecture test-driven development tutorial series which you can check out from the cart in the corner we were testing blogs the old way all long and then we are also going to take a look at two newer ways which are absolutely amazing and those come together with the block test package so first up we obviously need to absolutely add the block test package over to our project so under dev dependencies we are going to add this which is block test currently at version 2.2 point to be sure to use the same version as I'm using now to prevent any unexpected changes in the future from confusing you and also you can get all of this from the written tutorial so once we save that block test will be downloaded over to our project and we can begin writing tests for the block first time we actually need to create the test file we can even remove this widget test which we do not need to worry about and we are going to create new file where a block test dot dot we're gonna provide the basic test scaffolding I actually have a nifty little code snippet over here T scaffold so we import maketo flutter test and if we take a look really quickly this block is dependent on whether repository which basically just has two simple methods which fake fetching whether from an API it actually just generates some random weather data over here and it has a possibility to also throw Network error that's not really important we are just going to be testing with this fetch wear method and also if you want to study this code really check out the full project which is available from the link in the video description from the written tutorial which you can get at reso coder calm so let's commence writing the test file we are first going to need to mock the weather repository so class mark weather repository and it's going to extend mock and also it will implement weather repository and you may have noticed that we are using mojito over here but we have not added it as the dependency right we have this flutter test and block this so some of you may already know what's happening mojito is already a dependency for the block test so depending on block test also automatically at mojito so that's why we do not need to add it manually but we can still use it as a regular package from our app or even from the tests so now once we have this mock water repository class we are going to create an instance or a variable where we will hold instance inside main so mark where a repository and let's just assign it to be equal to Newmark instance in setup and now we are getting to the interesting stuff which is the group for testing to get weather event and we're going to first as I promised take a look and the old way of doing things as you were doing that all along probably because just a while ago the block test package was not available so this was the only way to test your blocks but now there are actually better ways but let's appreciate how they are better by first looking at this old way so we're going to first Mach that when the Mach where a repository is fetched whether method is called with any name passed inside of it we are going to answer because that's an asynchronous call and we're gonna answer it synchronously with some sort of a weather so we can for example have a weather which is a simple model class and the weather can hold city name so let's name it London and then also weather can hold temperature Celsius so let's do something like seven because it's already December or almost when I'm recording this so in London is probably quite cold and because we are just calling fetch weather and not fetch weather detail we are actually going to leave leave the temperature Fahrenheit empty and that's not gonna cause any problems so now we are returning weather from here and we can proceed to actually test the block we are first going to create an instance of the block which we want to test so that's our two error block and we're going to pass in the mock where a repository obviously because we have just marked it so we need to pass it and also in order to use this mocked instance of the repository and now we want to add an event to the block so as usual we would do this even from the why and now we are basically faking the UI events from the test file so we are going to end the get weather event and pass in a city named London and now this is an important part the way that you check for a proper output from a block the usual way is by expecting later and here the actual will be blocked because block from the version 1.0 0.0 implements stream and now this block should emit in order or emits in order and the order of the states emitted will be wetter initial then of course we're loading because if we take a look it immediately outputs we're loading and then we're going to say we're low did so we're loading and then we're a loaded with the weather test in there so let's just collapse the sidebar and we're going to pass in the same precise weather as we are outputting from the mock whether it posit or E so we're just going to cut that out and put it into final weather put out capital and it's going to be equal to this weather and now we're going to output weather even from the mock where a repository and also it's going to present this same instance inside the state all right now I have just noticed that I didn't put this into a test method so let's correct it right now of course we wanna create a test put all of this over here except for the weather and now we're going to name this test something like all the way emits we're loading and we're a lot it when successful so this is how you would test your blocks the old way and let's now quickly run all of the tests and we're gonna see that this test should indeed pass and it does so that's awesome now we are going to copy this test and we are going to transform it two times into more and more terse and manageable thing so let's just copy this test method again now we are actually going to start using the block test package because as I said this has nothing to do with block test this is the old way of doing things now we're now going to immediately hop into the best way of doing things in my opinion but we are going to still use block tests to simplify things for us but it's still not going to be esters as it can be so we're going to call this new way but long wine it and why is it still long winded well the only thing which we are going to replace now is that instead of expect later we are going to say omits exactly and now we can just specify the block and actually whereas expect later can take in anything here but basically it should be a stream emits exactly can only take in a block so image exactly is absolutely just geared towards block and nothing else and because of that we do not need to say it again another matcher emits in order and all of that we can just say emits exactly and then pass in the States without any kind of a matcher so just this array we're going to pop it in there and we are good to go now so we can get rid of this expect later and this is the second way of how you can test your blocks however there is a third way which is much much more terse but even now if we take a look at this and run this code it's still going to pass and also you do not need to just test for actual instances over here for example instead of checking for an actual in Sterns of weather initial you can also check for whether or not it's just of a certain type so for example if we did not want to test if we're loaded hence the proper weather inside of it we could just do something like is matter which comes from the package called five matter I guess and we can just test if the last state is where a loaded state and now we do not need to worry about which kind of the weather is present inside of that state so you can do even something like this with this emits exactly assertion but let's just make it back into testing for the actual web and now the last test which we are going to write for the same functionality is going to be test using block test so actually I don't know why I just copied this because I cannot even copy it because it's so different the way that you write a block test because block test takes in a description so we're again going to say emits we're loading and we're loaded when successful that stays the same but now everything is different we have three sub methods which we can populate build and I expect that this is going to at some point change to create so keep that in mind if you are not using the same version of block test this may be renamed to create instead of built just like the build method from the UI is now renamed to be create as you can see right over here in the block provider so just keep this in mind and this built for now which is called built inside of here we are going to want to return the block and also initiate any mocks so we are going to copy the mug initiation for the weather repository paste it into built we're going to return this block so return weather block with the mock whether it was it or it passed in so that's it for built now we have two more subnet it's act you can have this act or not depending on whether or not you want to add an event because over here inside act you should only be adding events to the block so you will receive an instance of the block and over here you can say block that and for some reason intelligence doesn't want to cooperate it's still things that this is dynamic but whatever we can still add get weather for London right and the last thing over here is expect this is as usual going to be an iterable so we can just copy this our trusted iterable here which contains weather in asia we're loading and we're a load it so now when we run this it's going to again pass but it's written in a completely terse and much more readable way because you have block test where you build the block and initiate any marks which go together with the block and then you have act which obviously you should do something with the block and the only thing which you can do with the block is to add an event and then you have expected which speaks for itself so really check out the written tutorial if you want to go over this once more but you can see that the last way of writing block tests is really the most earth and in my opinion the most readable way so because we want to also test the whole case where the get weather event arrives inside the block we also need to test for the option that a network error is thrown in which case the block should output where every so let's test for that right now we are going to test for it in the last most thirds way with block tests so let's just copy this test below it should output where error when unsuccessful and here after calling fetch we're on the repository we should then throw and we're going to throw the network error instantiate that and the last state should not be where a loaded but whether error with the message which is present inside the block so couldn't fetch whether is the device online so let's fix that message over here and now we are good to go even with this test once we run all of the tests everything should still be passing and that's correct so now you know how to use block tests but there is another awesome addition which I want to show you which comes together with the block test package whenever you are unit testing a block which depends on another block there is also a bunch of boilerplate which would benefit from having some kind of simplification and that's precisely why the block test library also comes with a nifty mock block that's right you can mark blocks very easily with block tests so let's take a look at it now even though we have just one block so we have no dependencies in between multiple blocks but still something like that can happen so I want to show you how to do that because of that I'm just going to fabricate an example and we're just going to write a test so we're going to write a new test file let's call it like dependency between blocks example test the dart file that's a long name but anyway here we can just copy whatever we already have inside the previous where a block test just so we have all of the dependencies readily available to us and now we want to actually mark our where a block and just imagine that this where a block is a dependency of another block usually you would have for example authentication block and that would be a dependency of multiple other blocks because usually authentication is needed in multiple places throughout the app so think about something like that now this is just a silly example to prove the point so we are going to mock our weather block create void main' for testing as usual and above it we are going to create a class mock weather block which will extend mark block which will have weather event and whether state and also this mock weather block should obviously implement our weather block and once we have that we can continue in the main method where we are going to populate an instance of mark where a block from the setup method so inside here inside setup we're going to set mark where a block to be equal to a new instance of mark where a block and now with this kind of a setup marking the states which are being outputted from this block is very very easy all we need to do is to create a test method say something like example marked block test and to tell the mark block which states it should output we're going to use one lesson which comes from the block test package so when lesson on the mark where a block it should always output some sort of stream and here you can construct a stream in which ever way you like but probably even as it writes even here inside documentation you are gonna want to construct the stream from an interval because that's the easiest option so we're going to say stream from iterable and we're just going to provide a bunch of elements so for example let just say we're initial and also we're loading and that's it so now we can simply listen to this mock blocks stream as usual with expect later and we expect that the mark where blocks stream is going to emit in order not in any order although that would work too but we want to keep the precise order here and we're going to say that it should be again where initial just like above so let's just copy this list of states and they should be the output from the mocked block and of course it's going to work right so let's do just that let's run all of the tests and see if it works so surely here dependency between blocks this test works and if we change the mock block to output one more initial state right do something like that now when we run this test it's not going to pass because there is one additional stain and surely it does not pass so that's awesome when we delete this weather initial duplicate from the marked block it's begin going to pass just fine cool to go through this tutorial at your own pace once again and to get all of the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flower developer who can build real apps for clients or at the job go to flutter dot education link is also in the description to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best flutter resources delivered weekly right into your inbox so in this tutorial you'll learn how to use the block test package it's an amazing way to simplify the test writing process when you are doing even test-driven development with blocks this would be highly beneficial to our clean architecture test-driven development series it's really a sad thing that back then this package was not available but nowadays so use it really use it when you are testing with blogs because it's going to save you so much time and it's also going to make the tests more readable and if you do not want to miss more tutorials like this be sure to subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skill because here on resale Coulter I am determined to provide you with the best tutorials and resources so that you will become a sought-after flutter developer if this video helps you with the block test package and overall with testing your blocks give this video while I can also share it with our developers who will surely benefit from this too leave a comment if you have anything to say and see you in the next [Music]

Channel: Reso Coder

Views: 16,568

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter bloc, flutter testing, flutter unit test, flutter bloc test, flutter bloc library, flutter bloc pattern, flutter tdd

Id: S6jFBiiP0Mc

Length: 25min 3sec (1503 seconds)

Published: Fri Nov 29 2019