<sectionid="instructions"> Primero, en el método <code>render()</code> , haga que el componente renderice un elemento de <code>input</code> , elemento de <code>button</code> y elemento <code>ul</code> . Cuando el elemento de <code>input</code> cambia, debe activar un método <code>handleChange()</code> . Además, el elemento de <code>input</code> debe representar el valor de la <code>input</code> que se encuentra en el estado del componente. El elemento de <code>button</code> debe activar un método <code>submitMessage()</code> cuando se hace clic. Segundo, escribe estos dos métodos. El método <code>handleChange()</code> debe actualizar la <code>input</code> con lo que el usuario está escribiendo. El método <code>submitMessage()</code> debe concatenar el mensaje actual (almacenado en la <code>input</code> ) a la matriz de <code>messages</code> en el estado local, y borrar el valor de la <code>input</code> . Finalmente, use la <code>ul</code> para mapear sobre la matriz de <code>messages</code> y procesarlos en la pantalla como una lista de elementos <code>li</code> . </section>
- text: 'El componente <code>DisplayMessages</code> debe generar un <code>div</code> contenga un elemento <code>h2</code> , un elemento de <code>button</code> , un elemento <code>ul</code> y elementos <code>li</code> como elementos <code>li</code> .'
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: ["__TEST__MESSAGE"]}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find("div").length === 1 && updated.find("h2").length === 1 && updated.find("button").length === 1 && updated.find("ul").length === 1, "The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children."); }; '
- text: El elemento de <code>input</code> debe representar el valor de <code>input</code> en estado local.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const testValue = "__TEST__EVENT__INPUT"; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find("input").props().value === testValue, "The <code>input</code> element should render the value of <code>input</code> in local state."); }; '
- text: Al llamar al método <code>handleChange</code> debe actualizar el valor de <code>input</code> en estado a la entrada actual.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = "__TEST__EVENT__MESSAGE__"; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === "" && afterInput.state().input === "__TEST__EVENT__MESSAGE__", "Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input."); }; '
- text: Al hacer clic en el botón <code>Add message</code> se debe llamar al método <code>submitMessage</code> que debe agregar la <code>input</code> actual a la matriz de <code>messages</code> en el estado.