TDD Tut 7 : การทดสอบ Layout

1 2 3 4 5 6 7 8 9 10 11 12 13

def test_layout_and_styling(self): # Edith goes to the home page self.browser.get(self.live_server_url) self.browser.set_window_size(1024, 768) # She notices the input box is nicely centered inputbox = self.browser.find_element_by_id('id_new_item') #inputbox.send_keys('testing\n') self.assertAlmostEqual( inputbox.location['x'] + inputbox.size['width'] / 2, 512, delta=6 )

บรรทัดที่ 4 จะทำการเปิดBrowser ด้วยขนาด 1024 ,768(ยาว, สูง)
หากล่อง inputbox และทำการเช็คว่า ตำแหน่งของ inputbox อยู่ที่ 512 ( คลาดเคลื่อนได้ 6 ) รึเปล่า

โดยส่วนใหญ่ใน Tutorial นี้จะกล่าวถึงการนำ template มาประกอบกัน หรือ Inheritence
จะมีไฟล์ base.html เป็นตัวหลักที่ home.html และ list.html  นำ template มาใช้แต่เปลี่ยนแปลงเนื้อหาข้างใน เช่น header , formaction header

การใช้ CSS Framework Boostrap ขั้นตอนคือ
โหลดไฟล์ boostrap มาจากเว็บไซต์จากนั้นแตกไฟล์เข้าโฟลเดอร์ static ภายในโฟลเดอร์ app (lists)
ทำการแก้ไขไฟล์ base.html เพื่อให้มี stylesheet เป็น boostrap.min.css

<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

เปลี่ยนจาก LiveServerTestCase เป็น StaticLiveServerTestCase เพื่อให้ใช้งานไฟล์ static (เช่น css ) ได้ด้วย


RECAP : 
ไม่ควรใช้ test ในการ test ขนาดและตำแหน่งของ layout
แต่ควร test ว่า css และไฟล์ static ใช้งานได้จริง