Flutter Widget Testing - Test Scrollable Widgets - Test AssertionError in Widget

hello my friends and welcome back to the third part of the flutter testing series we will explore this fantastic world of widget testing by first taking a deeper look in what is widget testing in general component testing what is the difference after that we want to take and look into the example f of flutter where we use a witcher test and can explain all the important concepts of flutter widget testing and last but not least i prepared three scenarios first where we want to scroll inside of a widget and test that behavior secondly we want to change the screen size and check if the widget behaves still the same and last but not least what happens if an error happens during the creation of a widget all these three set test scenarios will be more explicit we'll explain you how it works and now fire up this episode and let's get started this video is supported by my mentorship program let us begin with the broader part of the testing series and let's have a look into component testing this is a software testing part of the functional testing level of the testing pyramid this test is for each component individually without integrating other components so we don't want to speak with other components surrounding that which layer of this components we are we have to define that it is also called modular testing if you are taking it from an architectural perspective a component tests on leave stuff out on purpose just to test the specific requirements that we have of course this can be in different manners like smoke tests and so on but usually what we are doing is we taking a component and say we want to test this specific component by its behavior without communication to other components or like in unit tests without dependencies to other subsystems so for example we wouldn't call a database or asking any api calls it is important for us that we have to define the component that we want to test so for example if we want to test a log in widget or a login screen or a login component that could include a lot of different components underneath of it it is important that we define the scope what we want to test and we have to be very specific with that the main goal of a component and widget tests is always to find bugs and also make sure that the system requirements that business gave us will work so for example a login screen should log in and navigate the user to another part of the screen or a scroll widget should scroll to a specific part with a specific speed maybe you also want to have a go to button and want to check if you go in a list somewhere so all of these things are specific requirements to this component that you want to test so what is the benefit of a widget test regarding to a unit test a unit test is very small and precise to one function or method that you will find up in the info box the explanation once more to hear it so we want to just rerun all these a component can include multiple functions and multiple methods because the components in flutter are our widgets we can define our scope that we want to test by leveling up inside of the widget tree the higher we go the more we want to test and the broader we get so for example we have maybe a text field that we can test for the username but we could go also one level higher to see the login form or going one level higher to have the whole login component inside that we can test now for login behavior like navigating a user after we click the certain button we check out if the text fields are working correctly the main goal for a widget or component test is always to find bugs bugs in the system requirements that business gave us so for example business don't allows user names that are longer than eight letters we can check that in a component test we can also check that in a unit test but a unit test would maybe only check the validator with a component test we also check the components surrounding it is it visualized correctly is the ui behave and react on the stuff that we have and so on and so forth now that we know the foundations of widget and component tests let's jump into some code and check out how the real implementation looks like so before we start sit back relax grab a cup of coffee because we will get through some very deep interesting stuff and don't forget to hit the like button and subscribe to this channel if you haven't yet widget testing is a fixed part of the flutter framework and comes directly with the creation of the flutter project so usually you have nothing to do to write your unit widget tests you have nothing to do to write your widget tests in the rare case that it does not work check for the development dependency and find flutter test in your def dependencies now that we have that covered the widget test should live inside of the test folder and is included inside of the same files like your unit tests and if you check out the flutter default project you will see that there is already a widget test included let us have a closer look at it this is a test for our counter app and everyone who creates the default project of flutter with flutter create dot or inside of android studio will receive this test right away so you can have a look in parallel with me before we go into too much detail let us just discover what the test does first we initialize the widget up here then we do our our first assertions we can find that here and we check the value 0 exists inside of our app and the value 1 does not then we act and tap on the button this will increase our number by one and removes the zero here we have nearly all concept that we have in the pump which here we have nearly all the concepts of flutter widget testing we have the pump widget pump matches and finder that are the core elements of the widget test additionally we follow the rules of aaa again please pause the video now and write down in the comments what aaa stands for if you cannot remember aaa anymore up in the info box you will find the link to the unit testing video where i explain the free a's but now let's take a deeper look we see as always the primary method main that executes all our tests and here comes our first new thing test widgets this method allows us to give a description but the actual and new thing is that we can pass in a callback with the parameter widget tester tester the widget tester class allows us to interact with our widget testing programmatically inside of the body of this callback we have now access to the widget tester by calling the variable tester to arrange our widget test we have to initialize our widget inside of the test environment the initialization happens by pumping it into the testing environment that happens here as you can see pump widget is a future so we have to wait for it now let's jump to our second concept the finder as you can see here we have access to something called find we use the finder to find particular nodes inside of our widget tree in the tab method here we search the widget tree for an icon that contains the icon add if the test framework finds it it will press the widget for us according to the implementation that will increment our counter variable the next part that i want to talk about are so called matches a matcher checks the value and uses it to explain the expected behavior with that we can check if we have exactly one widget found no widget found n widget found or a golden file matcher that tests image testing the next part is if we have done our tapping and we found our texts then we want to pump our widget while pump widget will force the whole widget tree to rebuild even if the widget is the same as the in the previous call the pump widget the pump method will only update widgets that has changed with the new value you can set for both methods a duration value that defines a time the test applications behave like it has chang before it starts to trigger the rebuild of the app you can set for both methods a duration value that defines the time the test application behaves like it has jank before it starts to trigger the rebuild of the app after the pump happened we can now see the updates on the widget rendered and this allows us to test the value again now we have learned all the concept and now let's take a look into how we write our own widget tests for this example i have created a bookshelf that contains us a list view with multiple books that we want to test for the first test that we want to do we only want to have it contained five books then we want to scroll and because the device will only contains as much books as fit inside of the screen it should not it should not scroll anywhere so we test if the first book is in the view to get started we first have to write our main function inside of this main function we will have a group that groups our tests in order to run our tests we will have to import the dependency of flutter test now we give a description of that i usually give the same as the widget name for the first and parent group i will usually give the same name as the widget scroll testing widget in our case now as we have learned from the example we want to have here a test widgets and a description the first description is should not scroll with less items now we create a callback with the widget tester tester and put inside parentheses inside of the body we want to wait for the tester to come up and want to pump our first widget as you can see the await gets red here because we are currently not in an asynchronous function so let's change that and also we have to give inside a widget in our case we will pass inside our testable widget the scroll testing widget here we have the possibility to pass inside book titles this can be anything like every string would work in order to make it easier for us we will just generate a list with five different books if you have never seen this list generate it will generate us we can pass inside how many elements we want to generate and for every element inside here we will execute this method and then we return a string back so we will get back book 1 book 2 book 3 week four and we will create a list out of it so now with that we have our scroll widget implemented the problem is that this scroll testing widget has a scaffold inside of it if we take a look here we can see it has a scaffold here and the scaffold tells us that we need a material app that surrounds this widget so let's pass it in with that we have now our home of the scroll testing widget and everything should work as we expected so now we want to have testing a scroll behavior for that we wait again for the tester and now we have the possibility to drag some element and which element we want to drag you ask we want to drag the element and we find this element by type in our case which is list view and then we can give the offset by how far we want to scroll we won't scroll to the x-axis but we will scroll -300 in the y-axis we want to pump because we have to see the re-rendering so last but not least we want to expect something in our case we want to just check if we haven't scrolled here in this example so for that we just search for the first book and this should be still visible don't forget that if we start like this generate method here comes from an array method or list method that starts always with zero so you want to make sure that you find the zero book and not the first one then we expect that our first book finder with the matcher of finds one widget so now we expect that our first book finder finds exactly one widget so now if we run this test we should be able to get exactly one result which is true and as you can see everything is green what would happen if we change this to six we don't generate six books so it shouldn't be visible right so this should throw an error and this is exactly what happens now we want to have a long list with multiple books and want to see if we really scroll so for that we will write nearly the same thing so test widgets we give the description and now we add our widget tester we initialize our widget we drag and pump again just to make sure that we move our list now we are searching for the first book in the view and how many widgets should we find correct we shouldn't find any book but what we can also check is that we can find maybe the book that we have scrolled to so that would be the 11th book if you ask yourself how i found out that this is the 11th book and will be visible that is because i have tested it some several times before i made this video so in order to make your test you would do the same thing and last but not least we can also check how many widgets we see in the screen of this type so we could maybe check for how many list tiles we have currently so now we have tested here the result that we don't find any of the first book we find one that we have scrolled to and we find exactly 11 books inside of our bookshelf all the time and if we run now our tests again we get an error which it should scroll with a lot of items fails and as you see we get directly the information where the test has broken so we can jump to it on the other side if we follow up the stack trace we can also read here the exception that has been thrown we expected no matching notes of the book zero so where happens the problem ah the problem comes from the list generate we should of course create more books than five in order to make scrolling possible let's create 300 i think that should be enough and re-run our test perfect all tests have been passed another very important part that happens usually in mobile devices is that we have different screen sizes so we can even write component tests for multiple screen sizes that we want to test for for that we want to test if a screen that is very small will only show two widgets now we have our callback and as we know it already we have the widget tester tester and inside of here we can now change the physical size test value to a specific size we narrow down this device that we are working on inside of the testing now the other steps are pretty dissimilar like before we initialize our app and last but not least we want to make sure to find exactly two widgets inside of the list so let's test if this test has been working for us and as you see the time is just two seconds that this test needs if you would test this manually you would have to start an emulator or a device that has this screen size already this would take so much more time to start the emulator or the device or find even a device to test this behavior and now last but not least i would like to test a last scenario what happens if our widget throws us an error we write again another test that we call should throw error if empty list is provided so now we initialize with pump widget our widget again but this time we make sure that we don't have any element inside of our list this will throw an error because if we take a look inside of our widget we will see that we have an assertion here that checks that book titles are not empty now we want to expect something and we want to expect that this tester receives an exception and we want to make sure that it is from the type assertion error also this is a matcher as you can see if we go inside we see it's a type matcher now let's run this test and you see it's green and if we now pass something in like first book the error should not be happening anymore right so we expected an instance of assertion error but we received now great now let's check out if all our tests are green as a last step and as you can see everything is green all counters are working and inside of two seconds we understood that our app is working as we expected fantastic now it's your turn because what i found out in the times as a software developers is that junior developers and intermediate developers usually come to the same problems and for that i have prepared a learning path that you can use and that is tailored for you because i will take the time to talk with you understand what your problems are where you are currently in the learning curve of flutter and i will prepare something that you can join there and find the right spot where you are additionally i would prepare some challenges and projects that will help you to keep up and bring it also into a portfolio so that you can show off with your work and you will find your next employee maybe with it additionally if you have already a project that you are working on i will support you in one regular one-on-ones and give you honest feedback on your progression so what are you waiting for i'm really looking forward to see you in the mentorship program please hit the like button subscribe to our channel and check out my mentorship program thanks for watching and enjoy the rest of your day see you the next time bye one android studio tip for you you can set up up here and if you go to edit configurations you will receive this window and if you click on that button here plus icon here you can select flutter test in flutter test you can set up the test scope in my case it is all in directory you can specify the test directory where you are in you can give it a name like flutter all testing and after that you can just go okay and click up here on the green arrow to start all the tests amazing that's all for today

Channel: Flutter Explained

Views: 4,526

Keywords: Flutter, Flutter Widget Testing, Widget Testing, Flutter Testing, Testing, Component Testing, Testing Pyramid, Testing Tutorial, Tutorial, Knowledge, Introduction to Testing, flutter run widget test, flutter testing, flutter test find widget, flutter widget test navigation, flutter integration test, flutter test package, flutter test, flutter driver, flutter test navigation, flutter finder example, flutter tap test, flutter integration test example, flutter test wait

Id: pgMI5nmAem0

Length: 20min 1sec (1201 seconds)

Published: Thu Oct 22 2020