Mô phỏng trực tuyến/ngoại tuyến với JSDOM

Question

Chúng tôi đang nghiên cứu các hướng dẫn cơ bản về các ứng dụng ngoại tuyến đầu tiên và đang sử dụng JSDOM bằng Tape để kiểm tra mã của chúng tôi. Trong mã của chúng tôi, chúng tôi cập nhật DOM sao cho nút văn bản thay đổi từ "trực tuyến" thành "ngoại tuyến" và ngược lại bằng cách đính kèm trình xử lý sự kiện vào cửa sổ và nghe sự kiện "trực tuyến"/"ngoại tuyến" và navigator.onLine khởi tạo văn bản thành trực tuyến/ngoại tuyến. Giống như vậy:

// get the online status element from the DOM 
var onlineStatusDom = document.querySelector('.online-status'); 
// navigator.onLine will be true when online and false when offline. We update the text in the online status element in the dom to reflect the online status from navigator.onLine 
if (navigator.onLine) { 
    onlineStatusDom.innerText = 'online'; 
} else { 
    onlineStatusDom.innerText = 'offline'; 
} 

// we use the 'online' and 'offline' events to update the online/offline notification to the user 
// in IE8 the offline/online events exist on document.body rather than window, so make sure to reflect that in your code! 
window.addEventListener('offline', function(e) { 
    onlineStatusDom.innerText = 'offline'; 
}); 

window.addEventListener('online', function(e) { 
    onlineStatusDom.innerText = 'online'; 
}); 

Chúng tôi muốn sử dụng JSDOM để kiểm tra xem khi ngoại tuyến sự kiện ngoại tuyến kích hoạt và nút văn bản của chúng tôi cập nhật là "ngoại tuyến".

JSDOM có thuộc tính window.navigator.onLine, but it is read only và chúng tôi không thể tìm cách thay đổi nó (luôn đúng). Có vẻ như nó có online/offline events as well, nhưng tôi không thể thấy làm thế nào để có được chúng để bắn.

Làm cách nào chúng tôi có thể mô phỏng trực tuyến/ngoại tuyến khi thử nghiệm với nút?

Answer 1

Không có điều khoản nào trong JSDOM 11.0.0 (đây là phiên bản hiện tại khi tôi viết câu trả lời này) để thay đổi navigator.onLine hoặc để tạo các sự kiện online và offline.

Tuy nhiên, bạn có thể vượt qua navigator.onLine để kiểm soát và tự tạo các sự kiện. Đây là một bằng chứng của khái niệm:

const { JSDOM } = require("jsdom"); 
const { window } = new JSDOM(); 

class OnlineController { 
    constructor(win) { 
     this.win = win; 
     this.onLine = win.navigator.onLine; 

     // Replace the default onLine implementation with our own. 
     Object.defineProperty(win.navigator.constructor.prototype, 
           "onLine", 
           { 
            get:() => { 
             return this.onLine; 
            }, 
           }); 
    } 

    goOnline() { 
     const was = this.onLine; 
     this.onLine = true; 

     // Fire only on transitions. 
     if (!was) { 
      this.fire("online"); 
     } 
    } 

    goOffline() { 
     const was = this.onLine; 
     this.onLine = false; 

     // Fire only on transitions. 
     if (was) { 
      this.fire("offline"); 
     } 
    } 

    fire(event) { 
     this.win.dispatchEvent(new this.win.Event(event)); 
    } 
} 

window.addEventListener("offline", function() { 
    console.log("gone offline"); 
}); 

window.addEventListener("online", function() { 
    console.log("gone online"); 
}); 

const cont = new OnlineController(window); 
console.log("online?", window.navigator.onLine); 
cont.goOffline(); 
console.log("online?", window.navigator.onLine); 
cont.goOnline(); 
console.log("online?", window.navigator.onLine); 

Nếu bạn chạy các tập tin, bạn sẽ nhận được:

online? true 
gone offline 
online? false 
gone online 
online? true