-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTesting.html
320 lines (271 loc) · 13.2 KB
/
Testing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Testing</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Team 18</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="Research.html">Research</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="Requirements.html">Requirements</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="HCI.html">HCI</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="Design.html">Design</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="Testing.html">Testing</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="Evaluation.html">Evaluation</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="Management.html">Management</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- about Section -->
<section id="about" class="about-section ">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<strong><h1 style="color:#729E9D"><img src="img/TestingIcon.png" alt="pic" height="75" width="75" class="img-fluid" hspace="15">TESTING</h1></strong><br>
<h4 class="text-white mb-4">Stress testing</h4>
<p class="text-white-50">A part of this project was to show that it can be used in a professional healthcare industry such as Nuffield Health and
thus stress tests have been implemented which would confirm that the system could support reasonable loads (around 10,000 users), without crashing.<br>
The main technology used was Artillery JS along with a set of user interactions. Finally, this shows that the system can operate irrespective of the amount of requests.<br>
<br><img src="img/stress.png" alt="pic" height="420" width="420" class="img-fluid">
</p>
<h4 class="text-white mb-4">Performance testing</h4>
<p class="text-white-50">Efficiency is always important, making sure that the users login and get their data as fast as possible is always important and thats
why a lot of performance tests have been implemented. The following cases has been considered and were successful upon testing
<ul style="color:#8A1C1C;">
These tests have been carried for both
<ul><li>Individual Users</li><li>Corporate Users</li></ul><br>
<li style="color: grey;">System should take less than 0.5s on average to log in</li>
<li style="color: grey;">System should never take more than 1s on average to log in</li>
<li style="color: grey;">System should take less than 5s on average to retrieve user preferences</li>
<li style="color: grey;">System should never take more than 10s to retrieve preferences</li>
<li style="color: grey;">System should take less than 6s on average to get user-company associations</li>
<li style="color: grey;">System should never take more than 10s to get user-company associations</li>
<li style="color: grey;">System should take less than 20s on average to get user data</li>
<li style="color: grey;">System should never take more than 40s to get user data</li>
</ul>
<img src="img/example.png" alt="pic" height="620" width="620" class="img-fluid"><br><br>
</p>
<h4 class="text-white mb-4">Integration testing</h4>
<p class="text-white-50">Integration testing focuses on the construction and design of the software.
It helps in better test coverage and improves test gaps,
majorly helps to build real-time use cases during the end to end testing.<br><br>
After creating a fake server, several distinct
cases were tested using Chai JS, Assert JS and webdriverio. Here are a few examples:
<ul style="color: grey;">
<li>The web application should allow an individual user to log in</li>
<li>Home page should should display the correct preference names</li>
<li>Home page should display the correct number of preferences</li>
<li>Home page should display the correct number of goals</li>
<li>Home page should display the correct names of goals</li>
<li>Data page should display options for the supported types of data</li>
<li>Data page should display the correct selected color for HeartRate</li>
<li>Data page should display the correct available visualizations for HeartRate</li>
<li>Data page should display the correct selected color for BodyHeight</li>
<li>Data page should display the correct selected color for BodyWeight</li>
<li>Data page should display the correct selected color for BloodPressure</li>
<li>Data page should display the correct selected color for SystolicAndDiastolic</li>
<li>Data page should display the correct selected color for BMI</li>
</ul>
</p>
<h4 class="text-white mb-4">Unit testing</h4>
<p class="text-white-50">Optional</p>
<h4 class="text-white mb-4">Compatability testing</h4>
<span class="text-white-50">The web application was tested and was working on <br><br>
<ul class="text-white-50">
<li>Safari Version 12</li>
<li>Google Chrome Version 73</li>
<li>Microsoft Edge 16 for Windows 10</li>
</ul>
</span>
<br>
<h4 class="text-white mb-4">Automated testing</h4>
<p class="text-white-50">Selenium browser driver was used to test user interactions with the system automatically. <br><br>
These automated tests provided a quick way of ensuring that any changes made don't introduce errors in the frontend - as the tests would confirm that all user flows were still accessible following the change.<br><br>
<img src="img/Automated.png" alt="pic" height="450" width="450" class="img-fluid">
</p>
<h4 class="text-white mb-4">User acceptance testing</h4>
<p class="text-white-50"></p>
<h6 class="text-white mb-4">Test cases</h6>
<p class="text-white-50">
<!-- Use case 1 -->
<table style="color:white;" class="table">
<thead >
<tr >
<th style="color:#729E9D;">Test Case Name</th>
<th >Find User Registeration Form<br /> <strong>Test Case 1</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="color:#729E9D;">Related Use Case</td>
<td>2</td>
</tr>
<tr>
<td style="color:#729E9D;">Description</td>
<td>User must securely sign in to view data</td>
</tr>
<tr>
<td style="color:#729E9D;">Main Flow</td>
<td><strong>1.</strong> User presses on the "Go To Individual Sign In" button at the bottom-right corner of the screen or presses on the "Go To Corporate Sign In" button at the bottom-left corner of the screen <br />
<strong>2.</strong> User click enter his/her credentials <br />
<strong>3.</strong> User clicks the login button <br />
</td>
</tr>
<tr>
<td style="color:#729E9D;">Valid Outcome</td>
<td>User is allowed access and can view his/her data</td>
</tr>
<tr>
<td style="color:#729E9D;">Invalid Outcome</td>
<td>User is denied access to the system</td>
</tr>
<tr>
<td style="color:#729E9D;">Success Status</td>
<td>Pass</td>
</tr>
</tbody>
</table>
<br><br>
<table style="color:white;" class="table">
<thead >
<tr >
<th style="color:#729E9D;">Test Case Name</th>
<th >Find User Registeration Form<br /> <strong>Test Case 2</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="color:#729E9D;">Related Use Case</td>
<td>1</td>
</tr>
<tr>
<td style="color:#729E9D;">Description</td>
<td>A user opens FHIR FLI 2.0 to sign up.</td>
</tr>
<tr>
<td style="color:#729E9D;">Main Flow</td>
<td>1. User presses on the "Go To Individual Sign In" button at the bottom-right corner of the screen or presses on the "Go To Corporate Sign In" button at the bottom-left corner of the screen <br />
2. User click the "Sign Up" button at the screen center <br />
3. User enters his email and password <br />
4. User presses register and his done.</td>
</tr>
<tr>
<td style="color:#729E9D;">Valid Outcome</td>
<td>User can successfully create an account</td>
</tr>
<tr>
<td style="color:#729E9D;">Invalid Outcome</td>
<td>User's credentials are rejected</td>
</tr>
<tr>
<td style="color:#729E9D;">Success Status</td>
<td>Pass</td>
</tr>
</tbody>
</table>
<br><br>
<table style="color:white;" class="table">
<thead >
<tr >
<th style="color:#729E9D;">Test Case Name</th>
<th >Find visualisations on the user's dashboard<br /> <strong>Test Case 3</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="color:#729E9D;">Related Use Case</td>
<td>3</td>
</tr>
<tr>
<td style="color:#729E9D;">Description</td>
<td>A user open the FHIR FLI web application to view his/her visualisations</td>
</tr>
<tr>
<td style="color:#729E9D;">Main Flow</td>
<td><strong>1.</strong> User presses on the "Go To Individual Sign In" button at the bottom-right corner of the screen or presses on the "Go To Corporate Sign In" button at the bottom-left corner of the screen <br />
<strong>2.</strong> User enter his/her credentials and logs in <br />
<strong>3.</strong> If login is successful user will see the visualisations <br />
</td>
</tr>
<tr>
<td style="color:#729E9D;">Valid Outcome</td>
<td>User is allowed access and can view his/her data</td>
</tr>
<tr>
<td style="color:#729E9D;">Invalid Outcome</td>
<td>User is denied access to the system</td>
</tr>
<tr>
<td style="color:#729E9D;">Success Status</td>
<td>Pass</td>
</tr>
</tbody>
</table>
<br><br>
</p>
<h6 class="text-white mb-4">Feedback from testers and client</h6>
<p class="text-white-50">
Testing is an essential part of any software project,
the 2 main testing strategies we relied on was users testing and code testing through mocha and chai JS,
but we did place higher emphasis on actual users.
The user surveys, utilized the Amazon Mechanical Turk service to send out 400 surveys,
targeting the user demographics specified by the client (UK-based gym-going individuals aged 18-30).
Moreoever, Stress testing was used to show that this project can be used in a professional healthcare industry such as
Nuffield Health and thus the tests confirmed that the system could support reasonable loads (around 10,000 users),
without crashing. Moreover Efficiency is always important, making sure that the users login and get
their data as fast as possible is always important and thats why a lot of performance tests have been implemented. <br><br>
<img src="img/feedback.png" height="500" width="550" class="img-fluid" alt=""><br><br><br>
</p>
<h4 class="text-white mb-4">References</h4>
<span class="text-white-50"> Photos were taken from the previous project.</span><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</body>
</html>