state
inicialización, los métodos de escritura que establecen el state
y la asignación de controladores de clics para activar estos métodos. Counter
realiza un seguimiento de un valor de count
en el state
. Hay dos botones que llaman a los métodos increment()
y decrement()
. Escriba estos métodos para que el valor del contador se incremente o disminuya en 1 cuando se hace clic en el botón apropiado. Además, cree un método de reset()
para que cuando se haga clic en el botón de reinicio, el conteo se establezca en 0. Nota: Asegúrese de no modificar los classNames
de classNames
de los botones. Además, recuerde agregar los enlaces necesarios para los métodos recién creados en el constructor. Counter
debe devolver un elemento div
que contiene tres botones con contenido de texto en este orden 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: El estado del Counter
debe inicializarse con una propiedad de count
establecida en 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: Al hacer clic en el botón de incremento se debe incrementar el conteo en 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: Al hacer clic en el botón de disminución debe disminuir la cuenta en 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: Al hacer clic en el botón de reinicio se debe restablecer la cuenta a 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
."); }; '
```