Professional Documents
Culture Documents
Sam Liu
1
D1 Basic query engine
2
D1
Developer friendly
D2
D3 User friendly!
3
D3 Web Server + Frontend UI
4
D1
Server
D2
D3 Server + Client
5
Server + Client
Server Client
Present data
6
What’s New in your Repository?
7
What’s New in your Repository?
UI
8
What’s New in your Repository?
Client
Server
Client
Server
UI InsightFacade
11
D3 Overview
UI InsightFacade
. UI Controller
InsightFacade
. Server
12
D3 Overview
UI InsightFacade
. UI Controller
Tests
InsightFacade
. Server
13
Today’s Topics
InsightFacade
. Server REST
Tests UI Testing
14
REST
15
Web Service
• Cloud information
• Client incapability
• Code protection
• …
16
Representational State Transfer (REST)
17
REST Style (An example address book server)
PUT https://a.com/address/:id
POST https://a.com/address/:id
18
Demo 310d3.cf
PUT https://a.com/address/:id
POST https://a.com/address/:id
20
What are they?
(content)
How to
present them?
HTML
(layout, style)
CSS
What
JS
they should do?
(behavior)
21
CSS
Images
22
!"" index.html
23
24
How to What are they?
present them? (content)
(layout, style)
CSS
HTML
(Optional)
What
JS
they should do? (Optional)
(behavior)
25
HTML CSS JS Wonderful webpage
26
HTML CSS Ugly webpage
27
Campus Explorer
28
www.cs.ubc.ca
29
Want to change content?
Programming
Click a link
31
DOM
The Document Object Model (DOM)
is a cross-platform and language-
independent application programming
interface that treats an HTML,
XHTML, or XML document as a tree
structure where in each node is an
object representing a part of the
document.
—Wikipedia
32
33
Let’s try Chrome Developer Tools (inspect Element)
34
Use JavaScript to interact with DOM
37
Use JavaScript to interact with DOM
Find an
element
38
Use JavaScript to interact with DOM
Find an
element
document.getElementsByClassName(‘logo’);
document.getElementsByClassName(‘logo’)[0];
39
Use JavaScript to interact with DOM
document.getElementsByClassName('logo')[0].innerText = "1"
40
Use JavaScript to interact with DOM
element.style.color
element.children
document.getElementsByClassName('logo')[0].innerText = "1"
element.src = ‘http://....’;
element.style.visibility = ‘hidden’;
element.appendChild(newElement);
41
Use JavaScript to interact with DOM (Console)
42
DOM Event
43
DOM Event
44
DOM Event
buttonElement.addEventListener("click", function(event) {
…
});
45
Sometimes, we need to update the webpage
with remote information
46
Asynchronous JavaScript and XML (AJAX)
47
An AJAX Scenario
{
// query
}
2
buttonElement.addEventListener(“click”…
3 4
{
result: []
}
48
An AJAX Snippet
49
Mini Project
UI for Geolocation
A text input
A “query” button
Show it on Google Maps
310d3.cf
50
UI Testing
with Karma
51
How you create tests in D3?
!52
How we run your tests in D3?
!54
“UI can be buggy”
Maybe we need to test it
https://www.askvg.com/microsoft-windows-seven-bug-report/
!55
UI Testing
“In software engineering, graphical user
interface testing is the process of testing a
product's graphical user interface to ensure it
meets its specifications. This is normally done
through the use of a variety of test cases.”
!56
Common Approaches
Manual Test
Automated Test
!57
Automated UI Testing
1. UI automation
2. Testing check
2. Navigations work
4. …
58
Tools
59
• A test runner
!60
Mini Project
310d3.cf
61
Come back to D3
62