เราได้ทำการฝึกอบรมขั้นพื้นฐานมากมายในขั้นตอนก่อนหน้าดังนั้นตอนนี้เราสามารถทำสิ่งง่าย ๆ ได้ เราต้องการเพิ่มฟังก์ชั่นการค้นหาข้อความแบบเต็ม (ใช่มันง่ายมากจริงๆ!) ในเวลาเดียวกันเราจะเขียนการทดสอบแบบ end-to-end เนื่องจากการทดสอบแบบ end-to-end ที่ดีสามารถช่วยได้มาก มันตรวจสอบแอปของคุณและรายงานอย่างรวดเร็วเมื่อเกิดการถดถอย
โปรดรีเซ็ตไดเรกทอรีการทำงาน:
git checkout -f step -3
แอปของเราตอนนี้มีช่องค้นหา ขอให้สังเกตว่ารายการโทรศัพท์ในหน้าจะเปลี่ยนไปเมื่อผู้ใช้ป้อนในช่องค้นหา
ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 2 และขั้นตอนที่ 3 แสดงอยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub
ผู้ควบคุม
เราไม่ได้ทำการเปลี่ยนแปลงใด ๆ กับคอนโทรลเลอร์
เทมเพลต
App/index.html
<div> <div> <div> <!-เนื้อหาแถบด้านข้าง-> ค้นหา: <อินพุต ng-model = "query"> </div> <div> <!-เนื้อหาของร่างกาย-> <ul> <li ng-repeat = "โทรศัพท์ในโทรศัพท์ | ตัวกรอง: {{{{phone.name}} <p> </div> </div>ตอนนี้เราเพิ่มแท็ก <put> และใช้ฟังก์ชัน $ filter ของ AngularJS เพื่อจัดการอินพุตของ NGREPEAT Directive
สิ่งนี้ช่วยให้ผู้ใช้สามารถป้อนเกณฑ์การค้นหาและดูผลการค้นหาสำหรับรายการโทรศัพท์ทันที มาอธิบายรหัสใหม่:
การเชื่อมโยงข้อมูล: นี่เป็นคุณสมบัติหลักของ AngularJs เมื่อโหลดหน้าเว็บ AngularJS จะผูกกับตัวแปรที่มีชื่อเดียวกันในรูปแบบข้อมูลตามชื่อค่าคุณสมบัติของกล่องอินพุตเพื่อให้แน่ใจว่าการซิงโครไนซ์ระหว่างทั้งสอง
ในรหัสนี้ชื่อข้อมูลที่ป้อนโดยผู้ใช้ในกล่องอินพุตเรียกว่าแบบสอบถามซึ่งจะถูกใช้ทันทีเป็นอินพุตไปยังตัวกรองโดยรายการ Iterator (โทรศัพท์ในโทรศัพท์ | ตัวกรอง: Query`) เมื่อรูปแบบข้อมูลทำให้เกิดการเปลี่ยนแปลงในอินพุตตัววนซ้ำตัววนซ้ำสามารถอัปเดต DOM ได้อย่างมีประสิทธิภาพเพื่อสะท้อนสถานะล่าสุดของรูปแบบข้อมูล
ใช้ตัวกรองตัวกรอง: ฟังก์ชั่นตัวกรองใช้ค่าของแบบสอบถามเพื่อสร้างอาร์เรย์ใหม่ที่ตรงกับบันทึกการสืบค้นเท่านั้น
NGREPEAT จะอัปเดตมุมมองโดยอัตโนมัติตามอาร์เรย์ข้อมูลบันทึกมือถือที่สร้างโดยตัวกรองตัวกรอง กระบวนการทั้งหมดโปร่งใสต่อนักพัฒนา
ทดสอบ
ในขั้นตอนที่ 2 เราเรียนรู้วิธีการเขียนและเรียกใช้การทดสอบ การทดสอบหน่วยนั้นสะดวกมากในการทดสอบคอนโทรลเลอร์และส่วนประกอบอื่น ๆ ที่เราเขียนใน JS แต่ไม่สามารถทดสอบการทำงานของ DOM และการรวมแอปพลิเคชันได้อย่างง่ายดาย สำหรับสิ่งเหล่านี้การทดสอบแบบ end-to-end เป็นตัวเลือกที่ดีกว่า
คุณลักษณะการค้นหาถูกนำไปใช้ทั้งหมดผ่านเทมเพลตและการเชื่อมโยงข้อมูลดังนั้นการทดสอบแบบ end-to-end ครั้งแรกของเราตรวจสอบว่าคุณสมบัติเหล่านี้ตรงตามความคาดหวังของเรา
ทดสอบ/e2e/scenarios.js:
อธิบาย ('แอพ phonecat', function () {อธิบาย ('มุมมองรายการโทรศัพท์', function () {beforeeach (function () {เบราว์เซอร์ (). navigateto ('../../ app/index.html');}); มัน (ควรกรองรายการโทรศัพท์ อินพุต ('Query'). Enter ('Nexus');แม้ว่าไวยากรณ์ของรหัสทดสอบนี้จะดูคล้ายกับการทดสอบหน่วยที่เราเขียนในจัสมินมาก่อนการทดสอบแบบ end-to-end ใช้อินเทอร์เฟซที่จัดทำโดยผู้ทดสอบ end-to-end AngularJS
เรียกใช้การทดสอบแบบ end-to-end และเปิดสิ่งต่อไปนี้ในแท็บเบราว์เซอร์ใหม่:
node.js ผู้ใช้: http: // localhost: 8000/test/e2e/runner.html
ผู้ใช้ที่ใช้เซิร์ฟเวอร์ HTTP อื่น ๆ : http: // localhost: [port-number]/[context-path] /test/e2e/runner.html
ผู้เยี่ยมชม: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
การทดสอบนี้ตรวจสอบว่ากล่องค้นหาและตัววนซ้ำมีการรวมเข้าด้วยกันอย่างถูกต้อง คุณสามารถค้นหาว่ามันง่ายแค่ไหนในการเขียนการทดสอบแบบ end-to-end ใน AngularJs แม้ว่าตัวอย่างนี้เป็นเพียงการทดสอบที่ง่าย แต่ก็เป็นเรื่องง่ายที่จะสร้างการทดสอบแบบ end-to-end ที่อ่านได้ง่าย
ฝึกฝน
เพิ่ม A {{query}} การเชื่อมโยงไปยังเทมเพลต index.html เพื่อแสดงค่าปัจจุบันของโมเดลการสืบค้นแบบเรียลไทม์จากนั้นสังเกตว่าพวกเขาเปลี่ยนแปลงอย่างไรตามค่าในกล่องอินพุต
ทีนี้ลองมาดูกันว่าเราจะทำให้ค่าของแบบสอบถามของแบบสอบถามปรากฏบนชื่อหน้า HTML ได้อย่างไร
คุณอาจคิดว่าการเพิ่มการเชื่อมโยงกับแท็กชื่อเช่นนี้:
<title> แกลเลอรี่โทรศัพท์ Google: {{Query}} </title>
อย่างไรก็ตามเมื่อคุณโหลดหน้าใหม่คุณจะไม่สามารถรับผลลัพธ์ที่ต้องการได้ นี่เป็นเพราะโมเดลการสืบค้นนั้นใช้ได้ภายในขอบเขตที่กำหนดโดยองค์ประกอบของร่างกายเท่านั้น
<body ng-controller = "phonelistctrl">
หากคุณต้องการให้องค์ประกอบ <title> ผูกกับโมเดลการสืบค้นคุณต้องย้ายประกาศ NGController ไปยังองค์ประกอบ HTML เพราะมันเป็นบรรพบุรุษร่วมกันของชื่อและองค์ประกอบของร่างกาย
<html ng-app ng-controller = "phonelistctrl">
ตรวจสอบให้แน่ใจว่าได้ลบประกาศ NG-Controller ในองค์ประกอบของร่างกาย
เราสามารถบรรลุเป้าหมายของเราเมื่อผูกวงเล็บปีกกาสองอันในองค์ประกอบชื่อเรื่อง แต่คุณอาจพบว่าพวกเขาจะแสดงต่อผู้ใช้แล้วเมื่อหน้ากำลังโหลด ทางออกที่ดีกว่าคือการใช้คำสั่ง NGBIND หรือ NGBINDTEMPLATE ซึ่งผู้ใช้มองไม่เห็นเมื่อโหลดหน้าเว็บ:
<title ng-bind-template = "Google Phone Gallery: {{Query}}"> Google Phone Gallery </title>
เพิ่มรหัสทดสอบแบบ end-to-end ต่อไปนี้ลงในบล็อกอธิบายการทดสอบ/e2e/scenarios.js:
มัน ('ควรแสดงค่าตัวกรองปัจจุบันภายในองค์ประกอบที่มี ID "สถานะ"', function () {คาดหวัง (องค์ประกอบ ('#สถานะ'). text ()). tomatch (/ตัวกรองปัจจุบัน:/s*$/); อินพุต ('query') ป้อน ('nexus'); การทดสอบเพียงค่าของการเชื่อมโยงโดยใช้ ('#สถานะ') คาดหวัง (การเชื่อมโยง ('Query')). tobe ('nexus');});รีเฟรชเบราว์เซอร์และผู้ทดสอบแบบ end-to-end จะรายงานความล้มเหลวในการทดสอบ หากต้องการผ่านการทดสอบให้แก้ไข index.html และเพิ่มองค์ประกอบ div หรือ p ด้วย ID "สถานะ" ซึ่งเป็นการเชื่อมโยงการสืบค้นและตัวกรองปัจจุบัน: คำนำหน้า ตัวอย่างเช่น:
<div id = "สถานะ"> ตัวกรองปัจจุบัน: {{query}} </div>
เพิ่มหยุดชั่วคราว (); คำสั่งต่อการทดสอบแบบ end-to-end และเรียกใช้อีกครั้ง คุณจะพบว่าผู้ทดสอบถูกหยุดชั่วคราว! สิ่งนี้ช่วยให้คุณมีโอกาสดูสถานะของแอปพลิเคชันของคุณในระหว่างการทดสอบ การทดสอบแอปพลิเคชันเป็นแบบเรียลไทม์! คุณสามารถเปลี่ยนเนื้อหาการค้นหาเพื่อพิสูจน์ได้ ด้วยประสบการณ์เล็กน้อยคุณจะรู้ว่าสิ่งนี้สำคัญแค่ไหนที่จะพบปัญหาอย่างรวดเร็วในการทดสอบแบบ end-to-end
สรุป
ตอนนี้เราได้เพิ่มคุณสมบัติการค้นหาข้อความแบบเต็มและเสร็จสิ้นการทดสอบเพื่อพิสูจน์ว่าการค้นหานั้นถูกต้อง! ตอนนี้เราไปที่ขั้นตอนที่ 4 เพื่อดูการเพิ่มฟังก์ชั่นการเรียงลำดับไปยังแอพมือถือของเรา
ข้างต้นเป็นการรวบรวมข้อมูลการกรอง AngularJS Iterator และเราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!