D3 Introduction

Representational State Transfer (REST)

Document Object Model (DOM)
Asynchronous JavaScript and XML (AJAX)
UI Testing

Sam Liu

1
D1 Basic query engine

D2 Advanced query + more details

D3 Are me missing anything?

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

Process requests from clients Process user’s inputs

Send responses Send requests to endpoints

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

UI Process user’s inputs

Send requests to endpoints
Present data

Server

Process requests from clients

Send responses
9
What’s New in your Repository?

Client

UI Process user’s inputs

Send requests to endpoints
Present data
Tests for UI

Server

Process requests from clients

Tests for server
Send responses
*The connections are not necessarily 100% accurate. For example, query-index.js is also in charge of adding listener to the button. 10
D3 Overview

What you have:

UI InsightFacade

11
D3 Overview

What you have:

UI InsightFacade

What you need to do:

. UI Controller

InsightFacade
. Server
12
D3 Overview

What you have:

UI InsightFacade

What you need to do:

. UI Controller
Tests

InsightFacade
. Server
13
Today’s Topics

InsightFacade
. Server REST

. UI Controller DOM, AJAX

Tests UI Testing

14
REST

Representational State Transfer

15
Web Service

• Cloud information

• Client incapability

• Code protection

• …

16
Representational State Transfer (REST)

• A protocol to enable better web services

• Great to access resource-related web services

17
REST Style (An example address book server)

Method Purpose Endpoint

GET query item(s) GET https://a.com/addresses

PUT https://a.com/address/:id

PUT add an item

{“body”: <address string>}

POST https://a.com/address/:id

POST update an item

{“body”: <address string>}

DELETE delete an item DELETE https://a.com/address/:id

18
 Demo 310d3.cf

Simple Address Server

Method Purpose Endpoint

GET query item(s) GET https://a.com/addresses

PUT https://a.com/address/:id

PUT add an item

{“body”: <address string>}

POST https://a.com/address/:id

POST update an item

{“body”: <address string>}

DELETE delete an item DELETE https://a.com/address/:id

19
DOM & AJAX

Document Object Model

Asynchronous JavaScript and XML

20
 What are they?
(content)

How to
present them?
HTML
(layout, style)

CSS

What
JS
they should do?
(behavior)

21
 CSS

!"" bundle.css HTML

!"" index.html
!"" bundle.js
!"" favicon.ico JS
#"" loading.gif

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

HTML CSS JS Good-looking static webpage

HTML CSS JS Ugly dynamic webpage

HTML CSS JS Ugly static webpage

26
HTML CSS Ugly webpage

27
 Campus Explorer

HTML CSS Ugly webpage

28
 www.cs.ubc.ca

HTML CSS Ugly webpage

29
 Want to change content?

Programming

Click a link

Request another html

User Interaction from the server
Except to click links
Render that html
HTML JS
Static webpage
30
 Want to change content?
Programming

Decide what to change

(programming with JS)

Update without reloading

HTML JS
Dynamic webpage

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

DOM allows programs and scripts to

dynamically access and update the
content, structure and style of
documents.
—W3C

32
33
Let’s try Chrome Developer Tools (inspect Element)

34
Use JavaScript to interact with DOM

• JavaScript can change all the HTML elements in the page

• JavaScript can change all the HTML attributes in the page

• JavaScript can change all the CSS styles in the page

• JavaScript can remove existing HTML elements and attributes

• JavaScript can add new HTML elements and attributes

• JavaScript can react to all existing HTML events in the page

• JavaScript can create new HTML events in the page

w3cschools.com 35
!"" index.html

(js files are executed after being downloaded) 36

Use JavaScript to interact with DOM

Update the element

Find an
element
Extract information
from the element

37
Use JavaScript to interact with DOM

Find an
element

• Finding HTML elements by id

• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections

38
Use JavaScript to interact with DOM

Find an
element

document.getElementsByClassName(‘logo’);

document.getElementsByClassName(‘logo’)[0];

39
Use JavaScript to interact with DOM

Extract information document.getElementsByClassName('logo')[0].textContent

document.getElementsByClassName('logo')[0].innerText

from the element

document.getElementsByClassName('logo')[0].innerText = "1"

Update the element

40
Use JavaScript to interact with DOM

Extract information document.getElementsByClassName('logo')[0].textContent

document.getElementsByClassName('logo')[0].innerText

from the element

element.value

element.style.color

element.children

document.getElementsByClassName('logo')[0].innerText = "1"

Update the element

element.src = ‘http://....’;

element.style.visibility = ‘hidden’;

element.appendChild(newElement);
41
Use JavaScript to interact with DOM (Console)

• Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

42
DOM Event

How to know when users click a button?

43
DOM Event

Triggers a “click” event

44
DOM Event

buttonElement.addEventListener("click", function(event) {
…
});

Triggers a “click” event or

function buttonClickHandler(event) {
…
};
buttonElement.onclick = buttonClickHandler

45
Sometimes, we need to update the webpage
with remote information

46
Asynchronous JavaScript and XML (AJAX)

• Dynamic webpage: using JavaScript

• Asynchronous, does not block anything 😀

• Load new data on-the-fly, no HTML reload 😃

• The data does not have to be XML: can be JSON 🤩

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?

Save the current

Interact with the UI
states

!52
How we run your tests in D3?

Simulate the Setup a fixed

“submit” click and environment from
expect something the saved states
!53
What if…

!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

1. Screen render properly

2. Navigations work

3. Values are correct

4. …

58
Tools

59
• A test runner

• Spawn a web server

• Execute source code against test code

• Examine/display the results A test framework

!60
 Mini Project

Fix Geolocation UI bug

Handle wrong address

Handle bad requests

310d3.cf

61
Come back to D3

62