Visab test

I’m Yosef Mesfin, the manager

of this testing phase of Visab
industry app.
Introduction:

● In this phase, we’re expected to do testing

on our code.

● Software testing is a method to check

whether the actual software product
matches expected requirements.
WHY testing?
● Discovers bugs/defects before the delivery to the client.

● Guarantee the quality of our software.

● It makes our software more reliable and easy to use.

● High performance.
How?
● We’ve already answered WHY?, how was a
matter of hustling within the allotted time.

● We hustled.
Tasks as a manager:

● Study

● Distribute tasks

● Supervise
Tasks:

● Three different tests

○ Widget test

○ Unit test

○ Integration test

● External tests

○ Game groups
Methodology:

● I’ve used the three tier architecture we has used in

the previous phases.

● Without touching the previous organization of the

groups, I’ve assigned:

○ Widget test ~ UI
○ Unit test ~ Firebase group + Controller
Integration test:
● I’ve assigned three members for this task, myself
included.
○ Members:
■ Henok Wendimu
■ Ensermu Yigezu
Challenges:
● As always, we had to study the whole thing anew.
● Exams and Assignments
● Reluctance
Over all:
○ This phase was less stressful.
■ We’ve learned a lot through reading and
struggling to fix bugs.
■ There were a lot of memes from the start.
■ Alems has also her share of memes as well.
○ It was an experience that adds value
Integration test:
● I’ve assigned three members for this task, myself
included.
○ Members:
■ Henok Wendimu
■ Ensermu Yigezu
Widget-test
Subgroup manager:

Girmachew Azanaw
 WIDGET TEST
In this presentation I will present:

❖ What our group task was

❖ What challenge we faced

❖ General overview about Widget test

14
 WIDGET TEST
What is Widget test?
● It is utilized for testing a single widget, and
the objective of this test is to check
whether the widget works and looks true
to form.
● How the UI works and how it interact with
other widget

15
 Challenges

● We didn’t have enough knowledge about testing.

● We had exam, other project and assignment because of
this it was hard to manage time

16
 WIDGET TEST

● Henok mitku : Login and Sign up

● Galane basha : Home page and Popular destination
● Yeshiwas Tikimu : Nearby Hotel and Attraction
● Natnael Dereje : Edit Profile and Favorite
● Meadin seid : Guide detail and Admin page

17
1.
Transition headline
Let’s start with the first set of slides
Widget Test

Login page
Sign up page

By :
Henok Mitku
 Login page Test
In this test we verify the widget looks and interaction in the login
page
❖ We use mockito
Basic widgets in login page

❖ Textfield to receive email

❖ Password field to receive password
❖ Button for login

20
 Login page Test
To see the interaction we have three cases

Case1 :-the given email and password is empty

Case2 :- the given email and password are both non-empty and they
don't match an account on firebase
Case3:-the given email and password are both non-empty and they do
match an account on a firebase

21
Test code for case1

22
Test code for case3

23
 Login page Test
For these tests we get the expected interaction from our app. And we get this
output

24
 Sign up page Test

Sign up page has almost the same test as login page. In sign up
page we have additional widgets like name phone and additional
confirmation password widgets

25
Hello!
I am Galane Basha
I am going to present the Home
page and popular destination tests

26
Home Hotels page section: Check if the
section is displayed, clickable and
detail information about the hotel

Page Test opens after clicking a single card

Cities page section: Check if the Attractions page section: Check if

section is displayed, clickable and the section is displayed, clickable
detail information about the city opens and detail information about the
after clicking a single card hotel opens after clicking a single
card.

27
Home Search Widget: Check if the
search icon on the appbar opens
the search page. Check if the result

Page Test provided on auto complete matches

the requirement. Verify that click on
the search result opens a desired
page.
Bottom Navigation: Access the
bottom navigation buttons and check
if each icon opens it’s designated
page on click.

28
Popular
Destinations Hotels page section: Check if the

Page Test
section is displayed, clickable and
detail information about the hotel
opens after clicking a single card

Challenges: Repository data

Attractions page section: Check if
the section is displayed, clickable Coupling.
and detail information about the
hotel opens after clicking a single
card.
29
This is a slide title

30
 Yeshiwas
Tikimu
Widget test
Hotel detail page and attraction site page
Hotel details page widget test
Tab 1. Location : Check if the
location icon is displayed,
1. Overview: check if the
clickable and redirected to
overview tab is exists and
google map.
clickable .
2. Phone: check if the phone
2. Photo: check if the photo
icon is displayed, clickable
tab is exists and clickable .
and redirected to call dial.
3. Review: check if the review
3. Name and rating icon:check
tab is exists and clickable .
if the page displays name and
rating icon

32
33
 Attraction site details page
widget test
Tabs 1. Location : Check if the location
icon is displayed, clickable and
1. Overview: check if the
redirected to google map.
overview tab is exists and
2. Phone: check if the phone icon is
clickable .
displayed, clickable and redirected
2. Photo: check if the photo
to call dial.
tab is exists and clickable .
3. Button : check if the find guide
3. Review: check if the review
elevated button exists ,clickable
tab is exists and clickable .
and redirected to guides page.

34
This is a slide title

35
In two or three columns
Blue Red
Is the colour of the Is the color of blood,
clear sky and the and because of this it
deep sea. It is located has historically been
between violet and associated with
green on the optical sacrifice, danger and
spectrum. courage.

36
1.
Transition headline
Let’s start with the first set of slides
Natnael Dereje

Widget Testing
1. Edit profile page
2. Favorites page

38
 Widget Testing
Widget(component) testing is used for testing a single widget, and the objective of this test
is to check whether the widget works and looks true to form.

To test widget classes, we need a few additional tools provided by the flutter_test package.
The flutter_test package provides the following tools for testing widgets:

1. The WidgetTester :- allows building and interacting with widgets in a test

environment.
2. The testWidgets() function :- automatically creates a new WidgetTester for each
test case, and is used in place of the normal test() function.
3. The Finder classes :- allow searching for widgets in the test environment.
4. Widget-specific Matcher :- constants help verify whether a Finder locates a widget
or multiple widgets in the test environment.

39
1. Add the flutter_test dependency :- Before writing tests, i have
included the flutter_test dependency in the dev_dependencies section of
the pubspec.yaml.

2. Create a widget to test :- create a widget for testing. create a widget

that used to edit the profile of a user. which contains User name, phone
number and languages input Feild and picture input button.

3. Create a testWidgets test :- Use the testWidgets() function provided

by the flutter_test package to define a test. The testWidgets function allows
us to define a widget test and creates a WidgetTester to work with.This test
verifies that EditProfile displays a given text. The WidgetTester allows us to
build and interact with widgets in the test environment.

void main() {
testWidgets('Testing for edit profile page', (WidgetTester tester) async {

// Test code will be here.

});
}
40
4. Build the widget using the WidgetTester :-
build MyWidget inside the test environment by
using the pumpWidget() method provided by
WidgetTester. The pumpWidget method builds and
renders the provided widget.

5. Search for our widget using a Finder :- With

a widget in the test environment, search through
the widget tree for different Text widgets using a
Finder. This allows verification that the widgets are
being displayed correctly.

6. Verify the widget using a Matcher

Finally, verify the Text widgets appear on screen
using the Matcher constants provided by
flutter_test.

41
42
Hey!
My name is maedin seid
I have done widget test related to the
admin app

43
 Admin page widget test
widgets User Expectation
interaction

Tour guides Pressing Responding and show guide list

tab /sliding when it is pressed

Admins Tab Pressing Responding and show Admin

/sliding list when it is pressed

Setting icon Pressing Responding and shows add city

and sign out as a list whent is
pressed

Add Guide Pressing Responding and shows the add

guide page form when it is
pressed

Add Admin Pressing Responding and shows the add

admin page form when it is
pressed
44
 Basic steps to follow to do widget test
Steps

1. Add the flutter_test dependency.

2. Create a test Widgets test

.
3. Build the widget using the
WidgetTester.

4. Search for the widget using a

Finder.

5. Verify the widget using a Matcher.

6. check if it fulfill the expectation 45

 Implementation of the code to test the widgets mentioned

General code structure for testing widget

Finding all the widgets

code snippets

Final variable name= find.bykey(value.Key(‘widget name’)

Final variable name= find.text(value.Key(‘widget name’)

Execute the actual test

code snippets

await tester .pumpWidget(_makeWidetTestable(nameofwidget()))

await tester.tap(widgetName)

Check outputs
code snippets
expect(find.byType(widgetName),findsOneWidget)

46
 Add city page widget test
widgets User Expectation
interaction

Field Widgets Entering text Responding and display text

entered

Add button Pressing Responding . validate execute

the on pressed action

Camera icon Pressing Responding and shows the

appropriate folder(gallery)

47
 Implementation of the code to test the widgets mentioned

General code structure for testing widget

Finding all the widgets

code snippets

Final variable name= find.bykey(value.Key(‘widget name’)

Final variable name= find.text(value.Key(‘widget name’)

Execute the actual test

code snippets

await tester .pumpWidget(_makeWidetTestable(nameofwidget()))

await tester. enterText(addfield, ‘text’)
await tester.tap(widgetName)

Check outputs
code snippets
expect(find.byType(widgetName),findsOneWidget)

48
 UNIT TEST
Controller class unit test

Subgroup Manager
Samuel Negalign

Group members
● Samuel negalign * Daniel Abera
● Tigist Solomon * Natnael Fitsum
● Nigatu paulos
● Robenus Belete

49
What is going to be covered
● Introduction
● Our role as a group
● Challenges
● How do we face challenges
Introduction
What is Unit Test
❖ UNIT TESTING is a type of software testing where individual
units of components of a software are tested
❖ Unit Test isolates a section of code and verify its correctness.A
unit may be an individual function, method,procedure,module,
or object
❖ The purpose is to validate that each unit of the software code
performs as expected.
❖ There are many available tools for unit testing
but we use Mockito package.
❖ What mockito does is that, it emulates a live web service
or database and return results depending on the situation
Our role as a group
❖ Our role is mainly unit testing every logic business’s
method (controller class’s method).
❖ Getting defects as possible as we can by creating test
Classes
❖ And to do that we create Test classes that contains
tests of the method and through expect method verify
expected result with test result
 Challenges
❖ Understanding how to unit test and how
to use mockito properly was our main challenge
❖ As a manager to this group I faced some challenge on
dividing the tasks equally because some classes have more
methods than the other
❖ Also the time is not good for us since there were mid exams and
other projects
 How do we face Challenges
❖ We solve the first issue by reading flutter documentation
on how to unit test using mockito
❖ I solved the second issue by trying to give them equal tasks based
on their weigh by checking each methods on every class
❖ By using our time properly
Nigatu Paulos
State Management sub group

Worked on testing:
❖ 1. Favorite_Attraction_Controller
❖ 2. Favorite_Hotel_Controller
❖ 3. Favorite_Guide_Controller
❖ 4. Detail_Item_Controller
 Implementation

Tested method (addfavorites)

which is part of
favorite_attractions_controller
Testing code for addfavorites
method above which is part of
favorite_attractions_controller

Same approach used for the

other 2 classes
Tested code of ( fetchDetails) method above which is part
of Detail_item_contrller class
Testing code for fetchdetails method above which is part of
Detail_Item_controller
Robenus Belete
State Management sub group

Worked on testing:
❖ 1. Hotel Page Controller
❖ 2. Sign up Controller
❖ 3. Search Controller
❖ 4. Tour guide authentication Controller
❖ 5. Reset Password Controller (Admin)
 1. Hotels Controller
Methods Test Error Comment
tested result summary

fetchNext Failed Method works, Previously Hotel details

Page no error weren’t fetched correctly.
detected
makeIma Pass Method works, The pictures are not fetched
geUrlFor no error randomly
mReferen detected
ce

We’ve fixed the bug to make it fetch the data we

require.
 2. Sign up Controller
Methods Test result Error summary Comment
tested
validateE Pass Method works, Only a valid email is
mail no error accepted to create an
detected account.
checkEmp Pass Method failed, It checks and reports if there
tyField no error is an empty field.The email
detected field check empty test
previously failed, but is
corrected.

There is no method that checks the phone number validity.

 3. Search Controller

Methods Test result Error summary Comment

tested
searchPla Fail The search not found Existing locations are
ces notification is not searched efficiently.
displayed when
necessary.
 4. Tour guide
authentication Controller

Methods Test result Error summary Comment

tested
onContinu Pass Method works, no Enables sign in as a
ePressed error detected tour guide.

onSignOut Pass Method works, no Enables sign out from

error detected tour guide accounts.
 5. Reset Password
Controller (Admin)

Methods Test result Error summary Comment

tested
validate Pass Method works, no Validates a recovery
error detected email when it is
requested.
From State management Team

Unit Test part:-

Dashboard controller
Edit profile controller By:
Guides controller Daniel Abera
Homepage controller
DashBoard controller
has method
ChangeTabIndex that Place your screenshot here

changes index of lower

index dashboard
properly

69
Edit_profile controller
has method called
Validate but this
method only validate
empty field it takes
any string for phone Place your screenshot here

and language.

70
Methods Test Comment
tested Result When
connection
is lost.

Guide pass Always fetch properly

controller when internet is access

#getTourGui
de method

Homepage pass Fetch data properly and

controller have try catch to handle
error for example when
#fetchData
connection is lost.
Natnael Fitsum
Unit Test for:
1.Attraction Controller
2.Authentication Controller
3.Cities Controller
4.Cities Detail Controller
5.Reset Password Controller
 Attraction controller
Methods Test Result Comment
tested

fetchNextPage pass There is no problem on fetching

the next page.

addToFavorites pass The method adds to favorites

successfully in a given time slot.

removeFromFav pass It removes from favorites

orites successfully so there is no
problem.

73
 Authentication Controller
Methods Test Result Comment
tested

createUser pass User created successfully

logIn pass If the user enters a valid username

and password it will successfully
pass to the homepage.

signOut pass If the user enters a valid username

and password it will successfully
pass to the homepage.

checkIfEmpty pass If the user hasn’t entered fields it

will catch error.
Cities Controller
Methods Test Result Comment
tested

fetchData pass It fetch data through repository

and catch error if occurred
properly
 Cities Detail Controller
Methods Test Result Comment
tested

fetchData pass It properly display fetched data

 Reset_password Controller
Methods Test Result Comment
tested

validate pass It take email from user and send

reset code through email to
reset new password
 Admin App
Worked on testing:
1.Add Admin Controller
2.Add Guide Controller
3.Add City Controller
4.Admin Authentication Controller
By:- Tigist Solomon
State Management sub group
 1.Add Admin Controller

Methods Test Comment

tested result

createAdmin Pass Create the admin by the

information the user
provided.
validate Pass This will validate the
email and the information
that are needed to create
admin.
onSubmitPres Pass If it is valid,it will create
sed the admin and add it to
admin list and firebase.
 2.Add Guide Controller

Methods Test Comment

tested result

createGuide Pass Create the guide by the

information the user
provided.
validate Pass This will validate the
email and the information
that are needed to create
guide.
onSubmitPres Pass If it is valid,it will create
sed the guide and add it to
admin list and firebase.
 3.Add City Controller

Methods Test Comment

tested result
createCity Pass Create the city by the
information user provided.

validate Pass This will validate the

information that are
needed to create city.
onSubmitPres Pass If it is valid,it will create
sed the city and add it to
firebase.
 4.Admin Authentication Controller
Methods Test result Comment
tested
login Pass In here it will tell us the state
of the user.
sign Out Pass When pressed sign out button
it will clear and go to the initial
state.
validate Pass This will validate the email
and the information that are
needed to login in.
onLoginPressed Pass If it is valid,it will successfully
login into the system.
 Data module unit test

Subgroup Manager :
Samiya hamid

Group members

● Ababu Alemu
● Yordanos Teku
● Dagmawi Gebrewold
● Betemariam Assaminew
● Abel Alem
I will be presenting:
● Our group’s task
● Unit test overview
● Challenges
● Task distribution
Our group’s task :
● Our group’s main task was performing a unit test on the
data layer or module of the app using flutter’s test
package.
Unit test
● What is a Unit test?
○ is a software testing method by which individual units
of source code are tested to determine whether they
are fit for use and behaves as intended.
Challenges:
● To logically isolate a unit of code in the app.
● Using stubs and mocks objects to resolve isolation
issues.
Unit test
● Why a Unit test?
● to ensure that our app continues to work as we
add more features or change existing functionality.
● Ensures that all codes meets quality standards
before it’s deployed.
● It is very handy.
Task distribution
● Ababu tested model classes.
● Betemariam and Abel tested GooglePlacesApi service.
● Dagmawi and Yordanos tested FirebaseRepository.
 Testing Model Classes
To test a model class, we need a database. We already have the one we
use for our development, but it is always a good habit to create a
dedicated one for our tests.
This can be done with the help of Mockito. Mockito is used to mock
interfaces so that a dummy functionality can be added to a mock
interface that can be used in unit testing.

I used JSONPlaceholder to test HTTP request and to set up API

link with the model classes.
Then we need to make a separate class to make requests and get
responses and for this, I implemented HTTP in api_provider class I
created for the sake of testing. The next thing to do is creating test
class in the test folder already available for us.
90
API provider class

91
API provider test class

92
In the code on the previous page,in the main() function
there is the test method in which first a description of
our test is given then an object of that api_provider
class is created and by using its reference variable we
can change the client() object into MockClient()
actually MockClient is a package provided by ‘
package:http/testing.dart’ which imitates an HTTP
request instead of real request to the server as you can
see in the above code

93
Hey, I Am Abel Alem

94
 Unit Testing Using Mockito

1. A mock object is a dummy implementation for an interface or a class. It allows to define

the output of certain method calls. They typically record the interaction with the system
and tests can validate that.
2. You can create mock objects manually (via code) or use a mock framework to simulate
these classes. Mock frameworks allow you to create mock objects at runtime and define
their behavior.
3. The classical example for a mock object is a data provider. In production an
implementation to connect to the real data source is used. But for testing a mock object
simulates the data source and ensures that the test conditions are always the same.

95
 Basic steps to follow to do widget test

Mockito is a popular mock framework which can be used in conjunction with JUnit. Mockito
allows you to create and configure mock objects. Using Mockito greatly simplifies the
development of tests for classes with external dependencies.
If you use Mockito in tests you typically:
● Mock away external dependencies and insert the mocks into the code under test
● Execute the code under test
● Validate that the code executed correctly

96
To use the mockito package, add it to the pubspec.yaml file along with the flutter_test
dependency in the dev_dependencies section.
This example also uses the http package, so define that dependency in the dependencies
section.
mockito: 5.0.0 supports Dart’s null safety thanks to code generation. To run the required code
generation, add the build_runner dependency in the dev_dependencies section.

97
1. Provide an http.Client to the function. This allows providing the correct http.Client
depending on the situation. For Flutter and server-side projects, provide an http.IOClient.
2. Use the provided client to fetch data from the internet, rather than the static http.get()
method, which is difficult to mock.

98
Test case ID Summary of Defect if any comments

makecompleteUrl This task was successful no In this case we have tested if the function make complete
defect was detected. Url delivers a complete url to our http request this function
was successful it worked it is ready for prior release.

Fetchhotels This task was successful no At this case we have tested if fetchhotels fetch the right data
defect was detected. from the google API and present that to our json parser this
task successfully worked this case have fetched a correct
data and gave us what we asked.

FetchAttraction Our defect was that the This case we have found some bugs to solve and we solved
fetched data included some that by using a concept related to filtering the outputs and
unwanted data that is not presenting the correct outputs to the widget.
related to the concept that
unwanted data was present
in the attraction site part so
we solved this defect by
excluding content of such
types. 99
Test The Functionality of Demo App

100
 API
Betemariam Assaminew
Today I will be presenting about my
work in testing phase.

101
How is a request sent ?

102
 In testing we don’t want our code to make any
request to any outside API why?
1. Any time we want to make a network request it takes some amount of
time if we have many test in our project we don’t want to be waiting for
them to make request to the outside ApIs it will make our test delay.
2. Sometimes our outside API might be down in that case we might not test
our product.
3. We never know what data we will get the APIs might change so based on
this reasons we avoided using real requests in our testing.

103
the testing diagram will look like

104
 Mock client
When we use Mock client if we try to run some code that execute a request
this request never actually goes to the outside APIs there is no actual
network request completed instead the Mock client instantly complete the
request for us so this way we have the ability to control the data that gets
returned from the mock client.

Mock client
105
 Http: package & client class
Http: package
This package contains a set of high level functions and classes that make
it easy to consume Http resources Its multi-platform and supports mobile
desktop and the browser.
import 'package:http/http.dart' as http;

Client class
The interface for HTTP client class that take care of maintaining persistent
connections across multiple requests to the same user.
Client httpClient = http.Client();

106
We used the flutter test
package which is MockClient
to not make the request to
external APIs .

107
Test case ID Summary of Defect if any comments

FetchNextpage This task was successful no In this case we have tested if the next page fetches
defect was detected. the place id form the Json formatted file and inputs it
to the next page which will bring the detail of that
specific attraction.

FetchItemDetail In fetching the details of the In this case we have tested and found a bug in which
hotels and the attraction the the item description was not being fetched and being
descriptions were not in its organized to be displayed so what we did was we
place so the description site prepared a collection of inputs which we fetched and
was filled with a dummy text. joined them to be read as a description.

ParseItemDetail This task was successful no In this case we have tested if the previously fetched
defect was detected. data was correctly being parsed. This test returned a
successful output telling us all the data that are
fetched as the item details are parsed with style.

108
I’m Dagmawi
Gebrewold
Worked on testing Firebase repository on user side

109
The Firebase repository is an abstract class where all units that paves path for exchanging
data with the could firestore. I was then assigned to test whether all data is being
successfully sent to and read from the database.

The app has local database and loads list of favorite items from the firebase to store and
make them available offline. I had to test whether the units in the two classes
synchronized properly or not.

The Mockito package is used to create Rest API to perform the test being passed by
custom made fake data, as described earlier by team members.

110
Test The Functionality of Demo App

111
Let’s review some concepts
Yellow Blue Red
Is the color of gold, butter Is the colour of the clear sky Is the color of blood, and
and ripe lemons. In the and the deep sea. It is because of this it has
spectrum of visible light, located between violet and historically been associated
yellow is found between green on the optical with sacrifice, danger and
green and orange. spectrum. courage.

Yellow Blue Red

Is the color of gold, butter Is the colour of the clear sky Is the color of blood, and
and ripe lemons. In the and the deep sea. It is because of this it has
spectrum of visible light, located between violet and historically been associated
yellow is found between green on the optical with sacrifice, danger and
green and orange. spectrum. courage.

112
Yordanos
Teku Place your screenshot here

Testing firebase
repository on admin side

113
Test case ID Pass/fail Comments

CreatNewAdmin Pass This unit register new

admins

CreatNewtourGuide Pass This unit register new tour

guide

getGuides Pass Retrieve registered guides

from firebase

GetGuide Pass Retrieve registered

tourguide from firebase

CreatNewCity Pass This unit register new city

removeGuide Pass Remove guide from tour

guides list

removeAdmin Pass Remove admin from admins

list
getAdmins Pass Retrieve registered admins
from firebase

getAdmin Pass Retrieve registered admins

from firebase

UploadImageToFirebase Pass This unit can upload an

image in the firebase
Integration-test

Henok Wondimu:
User app: Place your screenshot here

Integration test:

117
Some automated tests we made :
● Login
● Navigation And respective functionality tests for each pages of the
following:
○ Home -> popular Destinations -> Attraction ->
Find a Guide -> Click on a Guide -> phone call
○ Home -> Attraction site -> Attraction site detail ->
○ Home-> Account page -> Edit Profile page
○ Home -> Favorites -> Hotels -> Hotel detail page
○
● Autocomplete search functionality test

118
Sample Code: LogIn

119
Sample Code: Home -> City -> Attraction -> find aguide

120
Integration-test

Ensermu Yigezu:
Admin app: Place your screenshot here

Integration test:

122
Login:
● Tested whether the form validates or not.
○ When invalid, tested whether the snackbar
notifies.
● Tested when correct input is given navigates to the
homepage successfully.
● Tested the forgot password text button and
navigates into buttonsheet when link will be sent to
the user.

123
● Since we worked on one script, we automated the
whole process from login to add and remove admin
functionalities.
● The script is the same as that of the user.

124
● We’ve been working together on the same file
dividing each functionality and test case
scenarios as we did.
●

125
On the manager:

126
On Alem:

127
On Alem:

128
Thanks!

129