Mirage JS Deep Dive: การใช้ Mirage JS และ Cypress สำหรับการทดสอบ UI (ตอนที่ 4)

คำพูดหนึ่งที่ฉันชื่นชอบเกี่ยวกับการทดสอบซอฟต์แวร์มาจากเอกสาร Flutter มันบอกว่า:

“คุณจะมั่นใจได้อย่างไรว่าแอปของคุณจะยังคงทำงานต่อไปเมื่อคุณเพิ่มคุณสมบัติเพิ่มเติมหรือเปลี่ยนฟังก์ชันที่มีอยู่ ด้วยการเขียนแบบทดสอบ”

ในบันทึกย่อนั้น ส่วนสุดท้ายของซีรีส์ Mirage JS Deep Dive จะเน้นที่การใช้ Mirage เพื่อทดสอบแอปพลิเคชันส่วนหน้าของ JavaScript

หมายเหตุ : บทความนี้ถือว่าสภาพแวดล้อม Cypress Cypress เป็นเฟรมเวิร์กการทดสอบสำหรับการทดสอบ UI อย่างไรก็ตาม คุณสามารถถ่ายโอนความรู้ที่นี่ไปยังสภาพแวดล้อมการทดสอบ UI หรือเฟรมเวิร์กใดก็ได้ที่คุณใช้

อ่าน ส่วนก่อนหน้า ของซีรีส์:

• ส่วนที่ 1: ทำความเข้าใจกับโมเดลและความสัมพันธ์ของ Mirage JS
• ส่วนที่ 2: ทำความเข้าใจเกี่ยวกับโรงงาน อุปกรณ์ติดตั้ง และตัวระบุลำดับ
• ส่วนที่ 3: ทำความเข้าใจเกี่ยวกับเวลา การตอบสนอง และการส่งผ่าน

UI การทดสอบไพรเมอร์

การทดสอบ UI หรือส่วนต่อประสานผู้ใช้เป็นรูปแบบหนึ่งของการทดสอบการยอมรับที่ทำขึ้นเพื่อตรวจสอบกระแส ผู้ใช้ ของแอปพลิเคชันส่วนหน้าของคุณ การทดสอบซอฟต์แวร์ประเภทนี้เน้นที่ผู้ใช้ปลายทางซึ่งเป็นบุคคลจริงที่จะโต้ตอบกับเว็บแอปพลิเคชันของคุณบนอุปกรณ์ต่างๆ ตั้งแต่เดสก์ท็อป แล็ปท็อป ไปจนถึงอุปกรณ์พกพา ผู้ใช้ เหล่านี้จะเชื่อมต่อหรือโต้ตอบกับแอปพลิเคชันของคุณโดยใช้อุปกรณ์ป้อนข้อมูล เช่น แป้นพิมพ์ เมาส์ หรือหน้าจอสัมผัส ดังนั้น การทดสอบ UI จึงถูกเขียนขึ้นเพื่อเลียนแบบการโต้ตอบของ ผู้ใช้ กับแอปพลิเคชันของคุณให้ใกล้เคียงที่สุด

ยกตัวอย่างเว็บไซต์อีคอมเมิร์ซ สถานการณ์การทดสอบ UI ทั่วไปจะเป็น:

• ผู้ใช้สามารถดูรายการสินค้าเมื่อเข้าสู่หน้าแรก

สถานการณ์การทดสอบ UI อื่นๆ อาจเป็น:

• ผู้ใช้สามารถดูชื่อผลิตภัณฑ์ได้ในหน้ารายละเอียดของผลิตภัณฑ์
• ผู้ใช้สามารถคลิกที่ปุ่ม “หยิบใส่ตะกร้า”
• ผู้ใช้สามารถชำระเงิน

คุณได้รับความคิดใช่มั้ย?

ในการทดสอบ UI คุณจะอาศัยสถานะส่วนหลังของคุณเป็นส่วนใหญ่ นั่นคือส่งคืนผลิตภัณฑ์หรือมีข้อผิดพลาดหรือไม่? บทบาทของ Mirage ในเรื่องนี้คือการทำให้สถานะเซิร์ฟเวอร์เหล่านั้นพร้อมให้คุณปรับแต่งตามที่คุณต้องการ ดังนั้นแทนที่จะส่งคำขอจริงไปยังเซิร์ฟเวอร์ที่ใช้งานจริงในการทดสอบ UI ของคุณ คุณต้องส่งคำขอไปยังเซิร์ฟเวอร์จำลอง Mirage

สำหรับส่วนที่เหลือของบทความนี้ เราจะทำการทดสอบ UI บน UI เว็บแอปพลิเคชันอีคอมเมิร์ซที่สมมติขึ้น มาเริ่มกันเลยดีกว่า

การทดสอบ UI ครั้งแรกของเรา

ตามที่ระบุไว้ก่อนหน้านี้ บทความนี้ถือว่าสภาพแวดล้อม Cypress Cypress ทำให้การทดสอบ UI บนเว็บทำได้ง่ายและรวดเร็ว คุณสามารถจำลองการคลิกและการนำทาง และเยี่ยมชมเส้นทางโดยทางโปรแกรมในแอปพลิเคชันของคุณ ดูเอกสารสำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Cypress

ดังนั้น สมมติว่า Cypress และ Mirage พร้อมใช้งาน เรามาเริ่มกันโดยกำหนดฟังก์ชันพร็อกซีสำหรับคำขอ API ของคุณ เราสามารถทำได้ในไฟล์ support/index.js ของการตั้งค่า Cypress ของเรา เพียงวางรหัสต่อไปนี้ใน:

 // cypress/support/index.js Cypress.on("window:before:load", (win) => { win.handleFromCypress = function (request) { return fetch(request.url, { method: request.method, headers: request.requestHeaders, body: request.requestBody, }).then((res) => { let content = res.headers.map["content-type"] === "application/json" ? res.json() : res.text() return new Promise((resolve) => { content.then((body) => resolve([res.status, res.headers, body])) }) }) } })

จากนั้น ในไฟล์การบูตแอปของคุณ ( main.js สำหรับ Vue, index.js สำหรับ React) เราจะใช้ Mirage เพื่อพร็อกซีคำขอ API ของแอปของคุณไปยังฟังก์ชัน handleFromCypress เฉพาะเมื่อ Cypress กำลังทำงานเท่านั้น นี่คือรหัสสำหรับสิ่งนั้น:

 import { Server, Response } from "miragejs" if (window.Cypress) { new Server({ environment: "test", routes() { let methods = ["get", "put", "patch", "post", "delete"] methods.forEach((method) => { this[method]("/*", async (schema, request) => { let [status, headers, body] = await window.handleFromCypress(request) return new Response(status, headers, body) }) }) }, }) }

ด้วยการตั้งค่านั้น ทุกครั้งที่ Cypress ทำงาน แอปของคุณรู้ว่าจะใช้ Mirage เป็นเซิร์ฟเวอร์จำลองสำหรับคำขอ API ทั้งหมด

มาเขียนการทดสอบ UI กันต่อ เราจะเริ่มต้นด้วยการทดสอบหน้าแรกของเราเพื่อดูว่ามี ผลิตภัณฑ์ 5 รายการ แสดงอยู่หรือไม่ ในการทำสิ่งนี้ใน Cypress เราจำเป็นต้องสร้างไฟล์ homepage.test.js ในโฟลเดอร์ tests ในรูทของไดเร็กทอรีโครงการของคุณ ต่อไป เราจะบอกให้ Cypress ทำสิ่งต่อไปนี้:

• เยี่ยมชมโฮมเพจเช่น / เส้นทาง
• จากนั้นให้ ยืนยัน ว่ามีองค์ประกอบ li กับคลาสของ product หรือไม่ และตรวจสอบว่าเป็นตัวเลข 5 หรือไม่

นี่คือรหัส:

 // homepage.test.js it('shows the products', () => { cy.visit('/'); cy.get('li.product').should('have.length', 5); });

คุณอาจเดาได้ว่าการทดสอบนี้จะล้มเหลวเนื่องจากเราไม่มีเซิร์ฟเวอร์ที่ใช้งานจริงที่ส่งคืนผลิตภัณฑ์ 5 รายการไปยังแอปพลิเคชันส่วนหน้าของเรา ดังนั้นสิ่งที่เราจะทำ? เราเยาะเย้ยเซิร์ฟเวอร์ใน Mirage! หากเรานำ Mirage เข้ามา มันสามารถดักจับการโทรเครือข่ายทั้งหมดในการทดสอบของเรา ลองทำด้านล่างและเริ่มเซิร์ฟเวอร์ Mirage ก่อนการทดสอบแต่ละครั้งในฟังก์ชัน beforeEach และปิดการทำงานในฟังก์ชัน afterEach beforeEach และ afterEach จัดเตรียมโดย Cypress และได้จัดเตรียมไว้เพื่อให้คุณสามารถเรียกใช้โค้ดก่อนและหลังการทดสอบแต่ละครั้งในชุดทดสอบของคุณ จึงเป็นที่มาของชื่อ มาดูรหัสสำหรับสิ่งนี้:

 // homepage.test.js import { Server } from "miragejs" let server beforeEach(() => { server = new Server() }) afterEach(() => { server.shutdown() }) it("shows the products", function () { cy.visit("/") cy.get("li.product").should("have.length", 5) })

โอเค เรากำลังจะไปที่ไหนสักแห่ง เราได้นำเข้าเซิร์ฟเวอร์จาก Mirage และกำลังเริ่มต้นและปิดการทำงานใน beforeEach และ afterEach ตามลำดับ มาล้อเลียนทรัพยากรผลิตภัณฑ์ของเรากัน

 // homepage.test.js import { Server, Model } from 'miragejs'; let server; beforeEach(() => { server = new Server({ models: { product: Model, }, routes() { this.namespace = 'api'; this.get('products', ({ products }, request) => { return products.all(); }); }, }); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { cy.visit('/'); cy.get('li.product').should('have.length', 5); });

หมายเหตุ : คุณสามารถดูส่วนก่อนหน้าของชุดข้อมูลนี้ได้เสมอ หากคุณไม่เข้าใจบิต Mirage ของข้อมูลโค้ดด้านบน

• ส่วนที่ 1: ทำความเข้าใจกับโมเดลและความสัมพันธ์ของ Mirage JS
• ส่วนที่ 2: ทำความเข้าใจเกี่ยวกับโรงงาน อุปกรณ์ติดตั้ง และตัวระบุลำดับ
• ส่วนที่ 3: ทำความเข้าใจเกี่ยวกับเวลา การตอบสนอง และการส่งผ่าน

ตกลง เราได้เริ่มสร้างอินสแตนซ์เซิร์ฟเวอร์ของเราโดยการสร้างโมเดลผลิตภัณฑ์และด้วยการสร้างตัวจัดการเส้นทางสำหรับเส้นทาง /api/products อย่างไรก็ตาม หากเราทำการทดสอบ การทดสอบจะล้มเหลวเนื่องจากเรายังไม่มีผลิตภัณฑ์ใดๆ ในฐานข้อมูล Mirage

มาเติมฐานข้อมูล Mirage ด้วยผลิตภัณฑ์บางอย่างกัน ในการทำเช่นนี้ เราอาจใช้วิธี create() บนอินสแตนซ์เซิร์ฟเวอร์ของเรา แต่การสร้างผลิตภัณฑ์ 5 รายการด้วยมือนั้นค่อนข้างน่าเบื่อ ควรมีวิธีที่ดีกว่านี้

อ๋อ มีครับ มาใช้โรงงานกันเถอะ (ตามที่อธิบายไว้ในส่วนที่สองของชุดนี้) เราจะต้องสร้างโรงงานผลิตภัณฑ์ดังนี้:

 // homepage.test.js import { Server, Model, Factory } from 'miragejs'; let server; beforeEach(() => { server = new Server({ models: { product: Model, }, factories: { product: Factory.extend({ name(i) { return `Product ${i}` } }) }, routes() { this.namespace = 'api'; this.get('products', ({ products }, request) => { return products.all(); }); }, }); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { cy.visit('/'); cy.get('li.product').should('have.length', 5); });

สุดท้าย เราจะใช้ createList() เพื่อสร้างผลิตภัณฑ์ 5 รายการอย่างรวดเร็วซึ่งการทดสอบของเราต้องผ่าน

ลงมือทำกันเถอะ:

 // homepage.test.js import { Server, Model, Factory } from 'miragejs'; let server; beforeEach(() => { server = new Server({ models: { product: Model, }, factories: { product: Factory.extend({ name(i) { return `Product ${i}` } }) }, routes() { this.namespace = 'api'; this.get('products', ({ products }, request) => { return products.all(); }); }, }); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { server.createList("product", 5) cy.visit('/'); cy.get('li.product').should('have.length', 5); });

ดังนั้นเมื่อเราทำการทดสอบ มันก็ผ่าน!

หมายเหตุ : หลังจากการทดสอบแต่ละครั้ง เซิร์ฟเวอร์ของ Mirage จะปิดและรีเซ็ต ดังนั้นจะไม่มีสถานะใดรั่วไหลในการทดสอบ

หลีกเลี่ยงเซิร์ฟเวอร์ Mirage หลายตัว

หากคุณได้ติดตามซีรีส์นี้ คุณจะสังเกตเห็นเมื่อเราใช้ Mirage ในการพัฒนาเพื่อสกัดกั้นคำขอเครือข่ายของเรา เรามีไฟล์ server.js ในรูทของแอพที่เราตั้งค่า Mirage ด้วยจิตวิญญาณของ DRY (อย่าทำซ้ำตัวเอง) ฉันคิดว่ามันคงจะดีถ้าใช้อินสแตนซ์เซิร์ฟเวอร์นั้น แทนที่จะมี Mirage สองอินสแตนซ์แยกกันสำหรับการพัฒนาและการทดสอบ ในการดำเนินการนี้ (ในกรณีที่คุณไม่มีไฟล์ server.js อยู่แล้ว) ให้สร้างไฟล์ในไดเร็กทอรี src ของโปรเจ็กต์

หมายเหตุ : โครงสร้างของคุณจะแตกต่างกันหากคุณใช้เฟรมเวิร์ก JavaScript แต่แนวคิดทั่วไปคือการตั้งค่าไฟล์ server.js ในรูท src ของโปรเจ็กต์ของคุณ

ด้วยโครงสร้างใหม่นี้ เราจะส่งออกฟังก์ชันใน server.js ที่รับผิดชอบในการสร้างอินสแตนซ์เซิร์ฟเวอร์ Mirage ของเรา มาทำกัน:

 // src/server.js export function makeServer() { /* Mirage code goes here */}

มาดำเนินการใช้งานฟังก์ชัน makeServer ให้เสร็จสิ้นโดยลบเซิร์ฟเวอร์ Mirage JS ที่เราสร้างใน homepage.test.js และเพิ่มลงในเนื้อหาฟังก์ชัน makeServer :

 import { Server, Model, Factory } from 'miragejs'; export function makeServer() { let server = new Server({ models: { product: Model, }, factories: { product: Factory.extend({ name(i) { return `Product ${i}`; }, }), }, routes() { this.namespace = 'api'; this.get('/products', ({ products }) => { return products.all(); }); }, seeds(server) { server.createList('product', 5); }, }); return server; }

ตอนนี้สิ่งที่คุณต้องทำคือนำเข้า makeServer ในการทดสอบของคุณ การใช้อินสแตนซ์ Mirage Server ตัวเดียวนั้นสะอาดกว่า วิธีนี้ทำให้คุณไม่จำเป็นต้องดูแลเซิร์ฟเวอร์สองอินสแตนซ์สำหรับสภาพแวดล้อมการพัฒนาและการทดสอบ

หลังจากนำเข้าฟังก์ชัน makeServer การทดสอบของเราควรมีลักษณะดังนี้:

 import { makeServer } from '/path/to/server'; let server; beforeEach(() => { server = makeServer(); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { server.createList('product', 5); cy.visit('/'); cy.get('li.product').should('have.length', 5); });

ดังนั้นตอนนี้ เรามีเซิร์ฟเวอร์ Mirage ส่วนกลางที่ให้บริการเราทั้งในด้านการพัฒนาและการทดสอบ คุณยังสามารถใช้ฟังก์ชัน makeServer เพื่อเริ่ม Mirage ในการพัฒนา (ดูส่วนแรกของชุดนี้)

รหัส Mirage ของคุณไม่ควรนำไปใช้ในการผลิตจริง ดังนั้น คุณจะต้องเริ่ม Mirage ในระหว่างโหมดการพัฒนาเท่านั้น ทั้งนี้ขึ้นอยู่กับการตั้งค่าบิลด์ของคุณ

หมายเหตุ : อ่านบทความของฉันเกี่ยวกับวิธีตั้งค่า API Mocking ด้วย Mirage และ Vue.js เพื่อดูว่าฉันทำสิ่งนั้นได้อย่างไรใน Vue เพื่อให้คุณสามารถทำซ้ำในเฟรมเวิร์กส่วนหน้าที่คุณใช้

สภาพแวดล้อมการทดสอบ

Mirage มีสองสภาพแวดล้อม: development (default) และ test ในโหมดการพัฒนา เซิร์ฟเวอร์ Mirage จะมีเวลาตอบสนองเริ่มต้นที่ 400 มิลลิวินาที (ซึ่งคุณสามารถปรับแต่งได้ ดูบทความที่สามของซีรีส์นี้) บันทึกการตอบกลับของเซิร์ฟเวอร์ทั้งหมดไปยังคอนโซล และโหลดเมล็ดพันธุ์การพัฒนา

อย่างไรก็ตาม ในสภาพแวดล้อมการทดสอบ เรามี:

• 0 ล่าช้าเพื่อให้การทดสอบของเราเร็ว
• Mirage ระงับบันทึกทั้งหมดเพื่อไม่ให้บันทึก CI ของคุณเสียหาย
• มิราจจะละเว้นฟังก์ชัน seeds() เพื่อให้ข้อมูลเมล็ดพันธุ์ของคุณสามารถนำมาใช้เพื่อการพัฒนาเท่านั้น แต่จะไม่รั่วไหลเข้าสู่การทดสอบของคุณ ซึ่งจะช่วยให้การทดสอบของคุณกำหนดขึ้นได้

มาอัปเดต makeServer ของเรากัน เพื่อให้เราได้รับประโยชน์จากสภาพแวดล้อมการทดสอบ ในการทำเช่นนั้น เราจะทำให้มันยอมรับวัตถุที่มีตัวเลือกสภาพแวดล้อม (เราจะตั้งค่าเริ่มต้นให้เป็นการพัฒนาและแทนที่ในการทดสอบของเรา) server.js ของเราควรมีลักษณะดังนี้:

 // src/server.js import { Server, Model, Factory } from 'miragejs'; export function makeServer({ environment = 'development' } = {}) { let server = new Server({ environment, models: { product: Model, }, factories: { product: Factory.extend({ name(i) { return `Product ${i}`; }, }), }, routes() { this.namespace = 'api'; this.get('/products', ({ products }) => { return products.all(); }); }, seeds(server) { server.createList('product', 5); }, }); return server; }

โปรดทราบว่าเรากำลังส่งตัวเลือกสภาพแวดล้อมไปยังอินสแตนซ์เซิร์ฟเวอร์ Mirage โดยใช้ชวเลขคุณสมบัติ ES6 เมื่อมีสิ่งนี้แล้ว เรามาอัปเดตการทดสอบของเราเพื่อแทนที่ค่าสภาพแวดล้อมที่จะทดสอบ การทดสอบของเราตอนนี้มีลักษณะดังนี้:

 import { makeServer } from '/path/to/server'; let server; beforeEach(() => { server = makeServer({ environment: 'test' }); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { server.createList('product', 5); cy.visit('/'); cy.get('li.product').should('have.length', 5); });

การทดสอบ AAA

Mirage สนับสนุนมาตรฐานสำหรับการทดสอบที่เรียกว่าวิธีการทดสอบแบบ Triple-A หรือ AAA ซึ่งย่อมาจาก Arrange , Act และ Assert คุณสามารถเห็นโครงสร้างนี้ในการทดสอบข้างต้นของเราแล้ว:

 it("shows all the products", function () { // ARRANGE server.createList("product", 5) // ACT cy.visit("/") // ASSERT cy.get("li.product").should("have.length", 5) })

คุณอาจต้องทำลายรูปแบบนี้ แต่ 9 ครั้งจาก 10 ครั้งน่าจะใช้ได้ดีสำหรับการทดสอบของคุณ

มาทดสอบข้อผิดพลาดกัน

จนถึงตอนนี้ เราได้ทดสอบหน้าแรกของเราเพื่อดูว่ามีผลิตภัณฑ์ 5 รายการหรือไม่ แต่ถ้าเซิร์ฟเวอร์ไม่ทำงานหรือมีข้อผิดพลาดในการดึงข้อมูลผลิตภัณฑ์ เราไม่จำเป็นต้องรอให้เซิร์ฟเวอร์หยุดทำงานเพื่อให้ UI ของเรามีหน้าตาเป็นอย่างไรในกรณีเช่นนี้ เราสามารถจำลองสถานการณ์นั้นได้ด้วย Mirage

ส่งคืน 500 (ข้อผิดพลาดของเซิร์ฟเวอร์) เมื่อผู้ใช้อยู่ในหน้าแรก ดังที่เราได้เห็นในบทความที่แล้ว ในการปรับแต่งการตอบสนองของ Mirage เราใช้คลาส Response มานำเข้าและเขียนการทดสอบของเรา

 homepage.test.js import { Response } from "miragejs" it('shows an error when fetching products fails', function() { server.get('/products', () => { return new Response( 500, {}, { error: "Can't fetch products at this time" } ); }); cy.visit('/'); cy.get('div.error').should('contain', "Can't fetch products at this time"); });

ช่างเป็นโลกแห่งความยืดหยุ่น! เราเพียงแค่ลบล้างการตอบสนองที่ Mirage จะกลับมาเพื่อทดสอบว่า UI ของเราจะแสดงอย่างไรหากไม่สามารถดึงข้อมูลผลิตภัณฑ์ได้ ไฟล์ homepage.test.js โดยรวมของเราจะมีลักษณะดังนี้:

 // homepage.test.js import { Response } from 'miragejs'; import { makeServer } from 'path/to/server'; let server; beforeEach(() => { server = makeServer({ environment: 'test' }); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { server.createList('product', 5); cy.visit('/'); cy.get('li.product').should('have.length', 5); }); it('shows an error when fetching products fails', function() { server.get('/products', () => { return new Response( 500, {}, { error: "Can't fetch products at this time" } ); }); cy.visit('/'); cy.get('div.error').should('contain', "Can't fetch products at this time"); });

สังเกตว่าการปรับเปลี่ยนที่เราทำกับตัวจัดการ /api/products นั้นใช้ได้เฉพาะในการทดสอบของเราเท่านั้น นั่นหมายความว่ามันทำงานได้ตามที่เรากำหนดไว้ก่อนหน้านี้เมื่อคุณอยู่ในโหมดการพัฒนา

ดังนั้นเมื่อเราทำการทดสอบ ทั้งสองควรผ่าน

หมายเหตุ : ฉันเชื่อว่าควรสังเกตว่าองค์ประกอบที่เรากำลังค้นหาใน Cypress ควรมีอยู่ใน UI ส่วนหน้าของคุณ Cypress ไม่ได้สร้างองค์ประกอบ HTML ให้กับคุณ

การทดสอบหน้ารายละเอียดสินค้า

สุดท้าย มาทดสอบ UI ของหน้ารายละเอียดสินค้ากัน นี่คือสิ่งที่เรากำลังทดสอบสำหรับ:

• ผู้ใช้สามารถดูชื่อผลิตภัณฑ์ในหน้ารายละเอียดสินค้า

ไปกันเถอะ ขั้นแรก เราสร้างการทดสอบใหม่เพื่อทดสอบโฟลว์ผู้ใช้นี้

นี่คือการทดสอบ:

 it("shows the product's name on the detail route", function() { let product = this.server.create('product', { name: 'Korg Piano', }); cy.visit(`/${product.id}`); cy.get('h1').should('contain', 'Korg Piano'); });

ในที่สุด homepage.test.js ของคุณควรมีลักษณะเช่นนี้

 // homepage.test.js import { Response } from 'miragejs'; import { makeServer } from 'path/to/server; let server; beforeEach(() => { server = makeServer({ environment: 'test' }); }); afterEach(() => { server.shutdown(); }); it('shows the products', function() { console.log(server); server.createList('product', 5); cy.visit('/'); cy.get('li.product').should('have.length', 5); }); it('shows an error when fetching products fails', function() { server.get('/products', () => { return new Response( 500, {}, { error: "Can't fetch products at this time" } ); }); cy.visit('/'); cy.get('div.error').should('contain', "Can't fetch products at this time"); }); it("shows the product's name on the detail route", function() { let product = server.create('product', { name: 'Korg Piano', }); cy.visit(`/${product.id}`); cy.get('h1').should('contain', 'Korg Piano'); });

เมื่อคุณทำการทดสอบ ทั้งสามควรผ่าน

ห่อ

การแสดงให้คุณเห็นถึงความลึกซึ้งของ Mirage JS ในซีรีส์นี้เป็นเรื่องสนุก ฉันหวังว่าคุณจะพร้อมมากขึ้นในการเริ่มมีประสบการณ์การพัฒนาส่วนหน้าที่ดีขึ้นโดยใช้ Mirage เพื่อจำลองเซิร์ฟเวอร์แบ็คเอนด์ของคุณ ฉันยังหวังว่าคุณจะใช้ความรู้จากบทความนี้เพื่อเขียนการทดสอบการยอมรับ/UI/end-to-end เพิ่มเติมสำหรับแอปพลิเคชันส่วนหน้าของคุณ

• ส่วนที่ 1: ทำความเข้าใจกับโมเดลและความสัมพันธ์ของ Mirage JS
• ส่วนที่ 2: ทำความเข้าใจเกี่ยวกับโรงงาน อุปกรณ์ติดตั้ง และตัวระบุลำดับ
• ส่วนที่ 3: ทำความเข้าใจเกี่ยวกับเวลา การตอบสนอง และการส่งผ่าน
• ส่วนที่ 4: การใช้ Mirage JS และ Cypress สำหรับการทดสอบ UI