2017-01-03 16 views
7

Tôi đã viết một thành phần đơn giản Phản ứng mà ám một :Kiểm tra các nội dung của một <iframe> trong một thành phần phản ứng với Enzyme

export class Iframe extends React.component { 
    render() { 
     return <iframe src={ this.props.src } />; 
    } 
} 

và tôi cố gắng để kiểm tra nó bằng cách kiểm tra rằng nội dung nạp với src là được điền đúng trong số . Để làm như vậy, tôi cố gắng truy cập frame.contentWindow, nhưng sau khi gắn nó với Enzyme, nó luôn trả về undefined.

tôi đã cố gắng để thử nội dung với Sinon FakeXMLHttpRequest:

server = sinon.fakeServer.create(); 
server.respondWith('GET', 'test', [200, { 'Content-Type': 'text/html' }, '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><body><div class="myClass">Amazing Unicorn</div></body></html>']); 
container = mount(<Iframe src='test' />); 

và với <iframe src='data:text/html' >:

const src = 'data:text/html;charset=utf-8,<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><body><div class="myClass">Amazing Unicorn</div></body></html>'; 
container = mount(<Iframe src={ src } />); 

nhưng trong cả hai trường hợp trên thử nghiệm với Enzyme:

container = mount(<Iframe src='...' />); 
container.instance().contentWindow // equals 'undefined' 
container.find('iframe').contentWindow // equals 'undefined' 

Thành phần hoạt động và hiển thị như mong đợi trên trán ser khi được cung cấp với thuộc tính hợp lệ src. Có cách nào để truy cập contentWindow trong các bài kiểm tra Phản ứng với Enzyme (hoặc bất kỳ khung kiểm tra nào khác) không?

+0

Tôi gặp vấn đề tương tự để kiểm tra, bạn có tìm thấy giải pháp không? –

+5

Bạn sẽ phải thiết lập enzyme bằng trình duyệt "đang hoạt động". Không biết nếu điều đó là có thể. Tuy nhiên, tại sao bạn nên thử nghiệm điều này? IMHO thử nghiệm này là vô nghĩa như bạn sẽ không kiểm tra mã của bạn nhưng phản ứng. Tôi nghĩ bạn chỉ nên kiểm tra nếu prop "src" được truyền xuống một cách chính xác như thuộc tính "src" của iframe có thể với enzyme. – lipp

+0

contentWindow sẽ thực sự null không được xác định, sau khi bạn getDOMNode() và kiểm tra nội dung thuộc tínhWindow. những gì bạn đã kiểm tra là nội dung thuộc tínhWindow trên trình bao bọc enzim không phải khung nội tuyến – maciejW

Trả lời

-1

Nếu bạn đang viết một bài kiểm tra đơn vị (và tôi cho rằng đây là những gì bạn đang làm), bạn nên kiểm tra hành vi, không phải chi tiết triển khai.

Nếu tôi đã phải viết một bài kiểm tra cho thành phần như vậy tôi muốn sử dụng smth như thế:

  • dương kịch bản: thành phần làm cho một khung nội tuyến với truyền src
  • kịch bản tiêu cực: thành phần làm cho null (phụ thuộc vào logic nghiệp vụ) nếu không có src được chuyển vào đạo cụ

Thử nghiệm này xử lý cả hai: hành vi chính xác và không chính xác. Xem Defensive programming để biết thêm chi tiết.

Nếu chúng ta đang nói về triển khai thử nghiệm, tôi sẽ sử dụng phương pháp JesttoMatchSnapshot để kiểm tra kết quả hiển thị trên cả hai trường hợp.

Các vấn đề liên quan