state
, a criação de métodos que definem o state
e a atribuição de manipuladores de clique para acionar esses métodos. Counter
registra um valor de count
no state
. Existem dois botões que chamam os métodos increment()
e decrement()
. Escreva esses métodos para que o valor do contador seja incrementado ou diminuído em 1 quando o botão apropriado for clicado. Além disso, crie um método reset()
para que, ao clicar no botão de reinicialização, a contagem seja definida como 0. Nota: Certifique-se de não modificar os classNames
das classNames
dos botões. Além disso, lembre-se de adicionar as ligações necessárias para os métodos recém-criados no construtor. Counter
deve retornar um elemento div
que contém três botões com conteúdo de texto nesta ordem Increment!
Decrement!
, Reset
.'
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find(".inc").text() === "Increment!" && mockedComponent.find(".dec").text() === "Decrement!" && mockedComponent.find(".reset").text() === "Reset"); })(), "Counter
should return a div
element which contains three buttons with text content in this order Increment!
, Decrement!
, Reset
.");'
- text: O estado do Counter
deve inicializar com uma propriedade de count
definida como 0
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state("count"), 0, "The state of Counter
should initialize with a count
property set to 0
.");'
- text: Clicar no botão de incremento deve incrementar a contagem em 1
.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state("count")); }; const second = () => { mockedComponent.find(".inc").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Clicking the increment button should increment the count by 1
."); }; '
- text: Clicar no botão de decremento deve diminuir a contagem em 1
.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state("count")); }; const second = () => { mockedComponent.find(".dec").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, "Clicking the decrement button should decrement the count by 1
."); }; '
- text: Clicar no botão de redefinição deve redefinir a contagem para 0
.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state("count")); }; const increment = () => { mockedComponent.find(".inc").simulate("click"); mockedComponent.find(".inc").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const decrement = () => { mockedComponent.find(".dec").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const reset = () => { mockedComponent.find(".reset").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 2 && thirdValue === 1 && fourthValue === 0, "Clicking the reset button should reset the count to 0
."); }; '
```