Building 2 : Chapter 4. What Are We Doing with All These Tests?

Using Selenium to Test User Interactions

functional_tests.py

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import unittest

class NewVisitorTest(unittest.TestCase):

def setUp(self):
self.browser = webdriver.Firefox()
self.browser.implicitly_wait(3)

def tearDown(self):
self.browser.quit()

def test_can_start_a_list_and_retrieve_it_later(self):
# Edith has heard about a cool new online to-do app. She goes
# to check out its homepage
self.browser.get('http://localhost:8000')

# She notices the page title and header mention to-do lists
self.assertIn('To-Do', self.browser.title)
header_text = self.browser.find_element_by_tag_name('h1').text
self.assertIn('To-Do', header_text)

# She is invited to enter a to-do item straight away
inputbox = self.browser.find_element_by_id('id_new_item')
self.assertEqual(
inputbox.get_attribute('placeholder'),
'Enter a to-do item'
)

# She types "Buy peacock feathers" into a text box (Edith's hobby
# is tying fly-fishing lures)
inputbox.send_keys('Buy peacock feathers')

# When she hits enter, the page updates, and now the page lists
# "1: Buy peacock feathers" as an item in a to-do list table
inputbox.send_keys(Keys.ENTER)

table = self.browser.find_element_by_id('id_list_table')
rows = table.find_elements_by_tag_name('tr')
self.assertTrue(
any(row.text == '1: Buy peacock feathers' for row in rows)
)

# There is still a text box inviting her to add another item. She
# enters "Use peacock feathers to make a fly" (Edith is very
# methodical)
self.fail('Finish the test!')

# The page updates again, and now shows both items on her list
if __name__ == '__main__':
unittest.main(warnings='ignore')

Code นี้จะทำการ Test เมื่อเปิด web pages แล้วมีช่องให้พิมข้อความ เมื่อพิมเสร็จจะแสดงสื่งที่พิมออกมา

ทดสอบรันโดยคำสั่ง python3 functional_tests.py

เนื่องจาก functional_tests มีการเปลี่ยนแปลงจึงต้องทำการ commit

The “Don’t Test Constants” Rule, and Templates to the Rescue

อย่า Test โดยใช้ ค่าคงที่

Refactoring to Use a Template

แก้ไข code ที่ผ่านมา โดยการใช้ Template คือ แยก ส่วนที่เป็น html กับ Method ต่างๆ ที่สำคัญอย่าแก้ code โดยไม่มีตัว test

ทำการรัน python3 manage.py test ตัวเก่า

lists/templates/home.html.

<html>
<title>To-Do lists</title>
</html>

lists/views.py

from django.shortcuts import render

def home_page(request): return render(request, 'home.html')

ผลการทดสอบ หา template ไม่เจอจึงไปเพิ่ม list เข้าในไฟล์ settings

superlists/settings.py

# Application definition

INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'lists',
)

ในไฟล์ lists/tests.py ให้เพิ่ม .stip() เข้าไป

self.assertTrue(response.content.strip().endswith(b'</html>'))

ไปที่ lists/tests.py เพิ่มcode ตามตัวอย่างเพื่อเปลี่ยนมาใช้ render_to_string

from django.template.loader import render_to_string
[...]

def test_home_page_returns_correct_html(self):
request = HttpRequest()
response = home_page(request)
expected_html = render_to_string('home.html')

self.assertEqual(response.content.decode(), expected_html)

On Refactoring

การแก้ code ควรแก้ code หรือ test ที่ละอย่าง ไม่ควรแก้ทั้งสองอย่างพร้อมกัน

$ git status # ดูไฟล์ที่ เพิ่มลดของการทำงาน
$ git add . # เพิ่ม templates folder ที่ยังไม่ได้ติดตาม
$ git diff --staged # ดูการเปลี่ยนแปลงของ commit
$ git commit -m "Refactor home page view to use a template"

A Little More of Our Front Page

ไปที่ lists/templates/home.html แก้ code ตามนี้

<html>
<head>
<title>To-Do lists</title>
</head>
<body>
<h1>Your To-Do list</h1>
</body>
</html>

แล้วรันด้วยคำสั่ง python3 functional_tests.py โปรแกรมจะฟ้องว่า
selenium.common.exceptions.NoSuchElementException: Message: 'Unable to locate
element: {"method":"id","selector":"id_new_item"}' ; Stacktrace: [...]

เพิ่ม input เข้าไปใน lists/templates/home.html

[...]
<h1>Your To-Do list</h1>
<input id="id_new_item" />
</body>

[...]

lists/templates/home.html เพิ่ม placeholder เข้าไป

<input id="id_new_item" placeholder="Enter a to-do item" />

lists/templates/home.html.

<input id="id_new_item" placeholder="Enter a to-do item" />
<table id="id_list_table">
</table>

</body>

test ด้วยการใช้ funtional_test