Flutter - Automated Testing Crash Course

namaste in this series we'll be learning to test our flutter application in flutter there are generally three types of tests first the unit test we can test individual function or individual classes in unit testing next the wizard testing in this we test individual Wizards by mocking its dependencies and finally the integration test we test the whole app like it is being used by a user to confirm that everything is working and everything is in plus so this will be a three part tutorial series and in this part we will learn unit testing for testing we require a dev dependency so first thing you need to make sure is you have either flutter test or test as your depth dependency in your project here I have setup a simple project that reverses the string typed by the user I'll be publishing this code in the github so you can review it later here in the main dot dot file I have a simple homepage there I have a text field and output field and a reverse button so whenever I type anything and press reverse it reverses to a string and prints out and for reversing the string here I have made a simple functions reverse a string so that takes the initial string splits its up reverses it and so inside together reverse of that string so in this unit test we will see how to test this reverse string function so let us get started inside the test folder let us create our test file I named this reverse string unit test here I write a main function and in here I write tests so you have to import flutter test and title of our test is let's say string should be reversed and the body will be shear we will test that our string gets reversed by be reverse string function so string initial equals to hello so let's reverse this string reversed equal to river system we need to import that from Maine and pass in our initial string finally we need to expect initial so sorry reverse should be equal to so opposite of Hello will be au or ll e ads okay now you can directly run your test from here let us pass run test so here let's see in the debug console sorry let's see it here okay so I'm getting some errors okay so it takes arguments I need to remove this this is not required so let's run it again okay finally actual expected I put it 0 so this should be oh oh ll eh run again and finally our test is passed so each string should be reversed this is how we can simply do unit testing we can test our classes and individual functions in unit testing welcome to part 2 of flutter test tutorial series in this part we will learn to set up with a test in the previous part we learned how to do unit testing of our functions or classes now to get started with wizard test let us create a new file inside our test folder let's say mean we said dot dot test a dot in here first import sorry dot rename dot now in here import water test and let's create our main function in here we'll use test visits function test visits description is rivers string wizard test and the callback should be a awesome function that receives a parameter Wizard tester tester I think we'll use this tester and a couple of other methods to test our visit test testing visits the very first thing we need to do is we need to tell which visit to test and we do that by using a weight tester dot dot pump we say and the wizard to test here is our my app visit we need to import it from our main dot dot file first thing we'd like to do is we need to find this text fill and confirm that it exists so we do that by using fine so far filled equal to find dot by let's say let's find by type types would be text field and for text field we need to import material so my type means we can find wizards by any type finally we need to confirm that this text field is found we do that by using expect and the actual is text field and our matcher is finds one visit so there are different kinds of matters provided here so let us run this test we can do run tests from terminal by slaughter tests and individual file we can do mainly the test dot dot okay ok all tests passed now next thing we can do is we can enter a text in this text field we do that by using intertext method from tester oh wait tester dot intertext so the finder is text filled and the text is hello okay now expect find dot text so we can find by text and this should fine 1vz so we should be able to find one visit with the text hello again let us run this test okay all tests pass so this is also found so we are successfully able to enter this text now we need to find this button and tap it bar button let us find by fine let us find text reverse let us expect button finds one visit so this should also be found and finally okay this should also find one visit and finally we can tap the button we do that by a weight finder dot sorry tester dot tap bu t TM button we tap our button and after we tap we need to we need to wait for execution of one frame we do that by using sorry tester dot from okay one frame and then finally we can expect to find the reverse expect find dot text the reverse of hallo will be o ll e s so we need to find the wizard with this text finds one we say so this test should pass okay okay all tests pass so to look how it looks when test fells let us say here finds nothing so if we defines nothing this test should fell and it should give us the reason why it fell so okay the test failed and here if we go up we can see that the following test failure object was thrown expected no matching nodes in the wizard tree actually one visit with text was found so we're expecting that no visits should be found with text this but one was found this is how it looks when the test fells and we can see the detailed reason say it is also giving us the widget that was found so we found the wizard and we can see our results that we have applied this is how we can do we said testing and when there are visits that have external dependencies we can knock those dependencies by using Makita we will learn that in further advanced tutorial welcome to part 3 of flutter test tutorial series in this part we are going to run a integration tests using flutter driver in our app let us begin to begin with integration testing using flutter driver first we need to add the flutter driver dependency in our of respected ml file so in power spectrum all file under dev dependence seeds lettuce I slaughter driver SDK flutter and I found there are some duplicate declarations in flutter driver and flutter test so instead of flutter test here I'll use tests using test will not hamper our previous tests that uses further tests now packages cat has drawn and we can successfully get the package to place our test files in the root folder of your project let us create a new folder called test driver and inside test driver let us make two files after test and half test dot dot sorry after dot not after test after third and app - dot dot in after dot we need to tell which app to test and we need to enable slaughter driver extension to do that first import slaughter driver driver extension and next input our min file so our package package is slaughter River see main dot dot as and here we'll create a main function here first will enable slaughter driver extension next we'll call the main function from our main file app dot men so this file this is what will run with flutter driver and it will know which to test and this will look for upon the score - to run tests so in upon the square test let us write our test so first import plotter driver next import our package test test dot dot okay now create a main function here let us create a group reverse a AB test first we need to create an instance of driver so let us create plotter driver and in setup all function inside setup all phones and this would be a passing function here driver equals slaughtered by V dot connect so we need to aware this next in TL if driver is not equal to small then dot plus we close the driver now we need to find these elements in our app to run the test so we already have done that in our test if we see main visit test we have a finder so text field finder let us trust it here by type this should be string next we also have button so our button is the one with the text s okay so now we have our text field and button we we have those finders now let us test de versus play string sync function in here we will run the test so first we'd like to enter some text in this field so our wait for that V is driver dot intertext okay before entering test first we need to tap on this field so what we need to do is oh wait driver dot tap so text phil' so first we tap on the text phil' next intertext we enter text in the text file let's say hello now we tap the button sir oh wait tap button and next we need to find our River fine dot text for L LD h we need to find this as diverse so after we tap the button we need to find for that what we can do is oh wait driver dot wait for reverse and next we confirm that there are no more callback so driver there we assert jesus is not equal to null that is the reverse visit exists first here before we tap the button we can oh wait driver dot wait for absent River so first it should be absent then after we tap the button this exists and there should be no more transient calls now we have written our test and in order to run this test what we can do is from our terminal we can run shorter drive drive and our target should be our app dot dot file so it is inside test or driver here is this command plus inter this requires an existing emulator or a device because it runs the apk on actual device so let us see it executing in action belt it is running a test pass so it was able to tap so in order to see how it works let's just say I'll wait here future dot delayed duration let's say seconds please let us delay two seconds so that we can see how it works let us run it again this time we'll be able to see with the two second pause how it is running the test is building the application running okay it types two seconds types Allah the second press reverse yes okay so this is how it does it runs like it is actually being used by a user so this is how easy it is to run integration tests in our flatter application and this is the very basics in the next episode we will continue and do some intermediate testing with unit tests welcome to part 4 of slaughter testing tutorial series in this part we are again going to start with unit testing but this time we are going to test a bit more complex class that is used to authenticate users with firebase authentication so this has external dependency that we will have to mock while testing here I have a very simple application that allows users to log in with their email and password and it uses firebase authentication to authenticate the users in order to run this project you will need to create your own firebase project in have a female and password-based authentication method and add your Google services to adjacent to this project so let us get started with testing for unit testing will not be going to see any outputs here in the emulator so I am going to close this or remove this from the screen for now let me make this large before we begin testing the very first thing we'd like to make sure is that we have test dependencies so in under dev dependency is it a flutter test and a stick flatter this as your dependency and we need to add a few more things so first we will be mocking the external dependencies so we would like to add mockito and I'd like to use version 4.1.1 and then another thing that I would like to add on the dev dependencies is rx that I am using are X starting dev dependencies because I am not actually using it in my app but while testing farbas authentication I'd like to be able to use streams so I am using it in depth dependency mmm OC c ki teo mockito so let's get so it's done now let us create our test so inside test create a folder called modal and inside that folder let's create user repository test dot dot so in this test file very first thing we'll do is we'll create our mock classes so first let us create more classes that is required so we will require three more classes class so mock firebases extends more implements fire best earth next class mock user extends implement fire best user and next thing we'll require is that is required by far best earth that is class more hot result extends implements hot special so these are the three more classes that will be using let us set up our test name inside men let us create instances ma progress all so much fire vessels then we'll create a stream of users or behavior subject mop fire best user user fire best user now let us create our test group group is a repository test so body inside this let us instance yet our so inside this we create our first test that is test signing email and password this is a a sync function in here we will run our tests and next test is sign out sigh now so before we write tests we need to create an instance of our user repository object class repository user repository dot instance and if we see our user repository in instance we have to pass earth while making testable class make sure that any external dependencies can be passed through parameters while instantiating the class so here we can pass the odds so that we can pass a mock earth while testing so here AHS will be our on disk or us that is our mock authentication if we run this test now we'll get an error instead of getting success so we are running the test ok so here we have a error here we can see the error is method lesion was called on null so if we see here while instantiate in the class we have called us dot on earth estate change turtle yishun so in order to be able to do that we need to mop this function so how to do that is shear will use a when method when method so when on discord auth dot on assistant when this is called then we would like to answer so we'd like to answer a stream so our stream is user let's go Iza so when unassisted changed is called we'd like to return the written out behavior subject so now we can run our test again so we can run test with time from terminal flutter test now the test sir pass sorry it's felling again the method lesion was called on now so we need to write this method before this instantiation because if this method is called on this instantiation so this has to be declared before this now we can run and successfully pass the test okay all tests pass now we'll write our test first sign in bull signed in is equal to the poor dot sign in email is let's say email and password is password to expect signed in true also expect repo dot status is authenticated so whenever user provides email as email and password as password users should be signed in and the status also should be authenticated so if we see our sign in method here it returns a bool whenever we successfully signed in and inside this function auth dot sign-in with email and password is called so we need to mock this method before running this test here let us mark this method when auth dot sign-in with email and password email is email password is password is filed then answer so when this is called we'd like to add a user in this stream so on the score user dot add mock fire best user and return sorry we need to return auth result so this function returns auth user and this returns a future of forth results so make this a sink here we have mocked the sign in with email and password message so now if we run our test will again should pass the test okay all tests pass test let us write new test sign in Fell's with incorrect incorrect password so here a sink signed in is filter oh wait sign in email is let's say mail password is on it passed so this would fill expect signed in false and also expect the status is a start a start on authenticated what we need to do is here when underscore odd dot signing with email and password email is mail and password is pass then throw let's just throw and return null with incorrect password this test should pass finally let us test the sign out oh wait sign out here let's make this a sing and when this is signed up we need to expect status should be honest indicated okay so let us finally run our test so when we run this test it's a pass so all test passed thank you everyone for watching this tutorial in this tutorial we saw how to mock external dependencies to test our classes welcome to part 5 of flutter testing tutorial series in this part we are going to write wizard tests for our login page that gives us pharmacist indication to log in previously in the part 4 we tested our user repository that was used to authenticate user with firebase ons now we'll write a test for our login wizard that is as the same user repository class to login the user in this session will write an intermediate test to test a bit more complicated we said that as few external dependencies and quite a good function to authenticate a user so let us get it started very first thing we'd like to continue from our previous project where we did use a repository test and in the test folder let us replicate the folder structure in our leaf so new folder UI inside that países and in there let us create a new file login tests are done now I like to copy few things from here so she will require mock auth and mock user will not require mock or result so let me copy this and let me import those dependencies import package firebase hots input mockito let us write first if we see our login page it also requires user repository class so we'll mop that to class mock user repository extends more implements is a repository and if we see our user repository class it has a instance method singleton so we need to override this method in order to be able to pass our mock auth final mock far best odds art and here mock user repository they start okay and as in user repository will not be using on autistic changed here because we are just mocking this to test our login visit so finally we are ready to create our men main function here we'll again copy some of the things here that is Mach 5 basalt mock user will copy this and let us import this behaviors of that rx start then let us create instance of our mock user repository mock user repository on this first Earth sorry let us create a instance repo because mock user repository and earth is our mock authentication we need quite a few things here first we need to make our visit testable if we see our main function we have a metal app and we have a autumn this and if we go to awesome base we sorry in main function we have providing a chains notify provider and we are providing user repository instance so in order to replicate that we will make a function here that returns a visit and that makes the visit testable let us name it mek testable and it takes in we need to make testify let's manage side and in order to use visit here let's import material and here let us return chains notify provider dot value we are using dot value here because we have already instantiated our repo so value will be our on this curve repo and child will be material app and this will have a home of the past time okay so this will make our wizard testable by providing the user repository provider if we see the login page here we have some of the fields here so we have a email field then we have a password field and we have a login sign-in button so we need a finder to find those so far email field is equal to there is a fine keyword so we use fine cured and by fine let us import it by by key and the key is now fill next 12 is equal to 5 by key is password fill next sign-in button so we'll use a text finder fine dot text sign-in okay now we have finders for our email filled password field and sign-in button let us make up go log in test test here first test will write is just visits so we'll use test wizard not touched this time because we are testing wizard test will write here is will validate that these fields are found email password and bottom are pump here we'll get an instance of wizard tester let us make this sourcing inside visa testing very first thing we need to do is we need to tell which we said to test so we know we would like to test our log in pairs so oh wait tester dot pump one in piss sorry pump wheezy not pump pump wizard log in page however we know that log in page has a dependency that is user repository which is provided by the provider so here we'll use our of a function that we create and make testable function make testable login page next expect sign sorry email filled so there are matters for visa testing so email fill should find one visit sir finds one visit next expect password filled finds one we say next expect sign in button finds one wizard finally we are able to run this task dot slash dust UI Pacers logging tester dot test friend let us see why is it failing is not fun let us see from the beginning what is wrong do not find the correct provider user repository of of the login page visit so we have provided the mock user repository made it testable with make testable Chen's notifier provider and value is our on the score reco aside so change modifier provider we need to pass type here user repository without that it will provide mock user repository as the type so instead of mock user repository we'd like to pass user repository here now let us run the tap ok all tests are passed next we'll run next test that is validates test visit validates empty MLM password so whenever user presses signing button without providing any email and password it should validate first again oh wait let us make this a sink oh wait let's just replicate this line and copy past here and here with a test gesture and next we will do is will tap the Sign In button we can do that by aware test or dot tap and here we pass sign-in button so this would tap the Sign In button and let's wait for one frame to complete by using tester dot pump now we should expect find dot text please so it should validate if we see here in our validate function let's see so in our validate function it will return please enter email and please enter password if not validated so this should be found so find this find one wizard next find that text password finds one we say this should find those validations okay so valid at st. email and password success finally the test that user will be able to sign in by providing email and password so test Weezy so back in unit testing we have already tested that our user repository can sign in user when sign in with email and when signing function is called so in this wizard will only test that when user provides email and password and taps the sign-in button the signing method from user repository is called so here with the tester tester again we'll copy this line next we'd like to enter some email and password so we do that by using tester dot intertext so oh wait tester dot intertext and our find the first email field and our text should be tester - Malcolm let's say so next again into texting password field list enter password next we tap the Sign In button oh wait tap sign-in button and like before we are wait one frame by using tester dot pump finally we verify please verify that the poor dot sign-in is called with email just a test Malcolm and password password verify that this is called once okay so this should verify that correct method is called and it is called only once so let us now run this test okay it fells boolean expression must not be null this is coming from our sign-in method because this should return future and login PES validates that it returns a boolean values so what we do here is we mark our sign-in method from user repository in this world let us write when report that sign-in is called with test meltem and password password then answer this return true so mock test and now if we run this test it should pass okay so our login test is passed so now if we run this flutter test all our tests should run and pass both the user deposited test and login test so our tests pass their web six test okay everyone for watching this tutorial in this part we learn to test our wizards that have external dependencies and that can and then lots of other wizards we can enter text we can tap a bottle so this is wheezy testing in the next episode we'll be running will be using flutter driver and running integration test in this very project welcome to part 6 of flutter testing tutorial series in this part we are going to write an integration test and test our flutter app we have already created unit tests and visit test for this app for our login visit so we can see this app this app uses email and password and locks in user using farthest odds if user name and password is correct science in the user and text them to user info pairs if they enter incorrect email and password they get a error message in a snack bar so we are going to test this with fluttered driver first we add the fluttered driver dependency in our dev dependencies so solder driver SDK slaughter and with slaughter driver I'd like to use test instead of clutter test because they have some repeating functionalities next in order to test our app we need to create few things first create a folder named test driver in here let us create app dot dot that tells which app to test let me just exit this for now okay it has completed now I can import driver driver extension and input our main file import package water hot main dot dot as ah now here will be a domain function in ever photo drive an extension and called AB dot min we have already done this in basic testing with fluttered driver so if you are confused get back there and next we'll create upon this word test dot dot file again in here we'll do some certain settings so which we have already done in basic integrated testing so void main group description should be plotter or app test let's make a body inside this we will need sort and finder so final email field is fine dot by value key in our field pass or fair value key also tell sign in button find our text user info phase by type user info page snack bar snack bar so we'll use this finders tutor let us start off flutter advisor finally we are ready to begin writing now test first test is first login so test cells logging cells with incorrect email and password and provides a snack bar feedback so a sync function first when the app is run will tap email face oh wait driver the tap email field so when we tap the inner cell we like to enter enter text inside email fill s Mel calm and again over tap tap the password failed then enter text in the password field let us just inter test as the password which is incorrect password oh wait now tap the Sign In button finally oh wait driver dot wait for the snack bar so when we tap the Sign In button we should receive a snack bar so we need to wait for a snack bar and I said snack bar is not equal to null wait until your transition callback so there are no more callbacks and oh wait user info user info page is now so user info page should be now because it should not redirect this is aside and let us write another test and we will run it simultaneously so test locks and waves it MLM password then we'll repeat these things until this let me past it here and instead of incorrect password let us use test s1 which is the correct password and finally oh wait this time we will wait for user info is a cert user info phase is not equal to null and finally weapon there is no transient callbacks okay so we have written our test now we would like to run this test we can do that simply by using quarter drive command and provide our target app that done so if we do this this should run the test in our emulator and we should be able to see it running and doing the test by entering the emails and passwords so it is building the application once it is done building it it will run and test this name it's running entering the password wrong correct okay so our test has successfully passed all tests have been passed thank you everyone for watching this tutorial

Channel: React Bits (Damodar Lohani)

Views: 1,230

Keywords: flutter

Id: xx7pk2c1wXY

Length: 61min 6sec (3666 seconds)

Published: Tue May 19 2020