酵素を使った反応確認ウィンドウ

Question

Reactにボタンがあり、ユーザーがクリックすると簡単な確認ウィンドウが開きます。確認方法を追加する前に、下のテストは緑色でした。追加したら、それは赤です。追加の確認で作業するには、テストをどのように変更する必要がありますか？

は、削除ボタンに反応：

describe('<DeleteButton />',() => { 
    it("deletes the entry",() => { 
    const onDelete = sinon.spy(); 
    const props = {id: 1, onDelete: onDelete}; 
    const wrapper = shallow(<DeleteButton {...props} />); 
    const deleteButton = wrapper.find(Button); 

    deleteButton.simulate("click"); 
    expect(onDelete.calledOnce).to.equal(true); 
    }); 
}); 

Answer 1

あなたはsinon.stubを使用してconfirmスタブすることができます

ここ

const DeleteButton = (props) => { 
    const handleDelete =() => { 
    if(confirm("Are you sure?")) { 
     props.onDelete(props.id) 
    } 
    }; 

    return (
     <Button className="btn" onClick={handleDelete}> 
     <i className="fa fa-trash-o"></i> 
     </Button> 
); 
}; 

は（酵素を使用して）テストです。

describe('<DeleteImportButton />',() => { 
    it("simulates delete event",() => { 
    const onDeleteImport = sinon.spy(); 
    const props = {id: 1, onDelete: onDeleteImport}; 
    const wrapper = shallow(<DeleteImportButton {...props} />); 
    const deleteButton = wrapper.find(Button); 

    const confirmStub = sinon.stub(global, 'confirm'); 
    confirmStub.returns(true); 
    deleteButton.simulate("click"); 
    expect(confirmStub.calledOnce).to.equal(true); 
    expect(onDeleteImport.calledOnce).to.equal(true); 

    confirmStub.restore(); 
    }); 
});