模擬一個點擊酶和反應

我在學習酶，我已經開始在一個團隊編寫的應用程序上寫一些測試。我試圖模擬點擊一個元素。該應用程序基本上有一個列表，並且每當您點擊它時，都會出現一個複選標記（的圖像）。如果再次點擊，則（圖像）不顯示覆選標記。應用程序通過單擊元素來更改狀態，然後確定要呈現哪個圖像。模擬一個點擊酶和反應

它適用於實際應用，但不知何故酶失敗。有什麼我錯過了酶的方面？

下面是一些簡化的代碼。這裏是類：

class RecipeInfo extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.doneClick = this.doneClick.bind(this); 
    } 

    doneClick(event) { 
    let index = event.target.name; 
    let state = {}; 
    state[index] = !this.state[index]; 
    this.setState(state) 
    } 

    renderIngredients(ingredients) { 
    let quantities = ingredients.quantity; 
    let lines = []; 
    for(let i = 0; i < quantities.length; i++){ 
    lines.push(
     <div className='flex-body-ingredients' key={i}> 
     <div onClick={this.doneClick} id={i} > 
     {this.state[i] ? 
      (<img className='empty-check' src="/assets/success.png" alt="success" name={i} />) 
      : (<img className='empty-check' src="/assets/oval.png" name={i} alt="oval" />)} 
     </div> 
     </div> 
     ) 
    } 
    return lines.map((line) => line) 
    } 

    render() { 
    return (
     {this.renderIngredients(ingredients)} 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    recipe: state.recipes.selectedRecipe 
    } 
} 
export default connect(mapStateToProps, actions)(RecipeInfo);

並在下面我只是寫測試：

describe('Recipe Info',() => { 
    const recipeInfo = mount(<Provider store={createRecipeStore}><RecipeInfo/></Provider>); 

    it('shows a click and then hides the click when clicking an ingredient',() => { 
    const notChecked = recipeInfo.find('[alt="oval"]').first(); 
    expect(notChecked).toBeDefined(); 

    recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click'); 

    const checked = recipeInfo.find('[alt="success"]').first(); 
    expect(checked).toBeDefined(); 
    }); 

});

當我運行測試，和我控制檯日誌的元素，我看到以下內容：

<div id="0"><img class="empty-check" src="/assets/oval.png" name="0" alt="oval"></div>

點擊後，這絕不會改變。

來源

2017-04-23 Hadoren

我想出了這個問題。這是我沒有將一個事件處理程序傳遞給模擬。

我不得不將其更改爲：

recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click', {target: {name: 0}});

來源

2017-04-23 03:18:18 Hadoren

模擬一個點擊酶和反應

回答

相關問題