DisplayMessages
. render()
، اجعل المكون يعرض عنصر input
، عنصر button
، وعنصر ul
. عندما يتغير عنصر input
، يجب أن يقوم بتشغيل أسلوب handleChange()
. أيضًا ، يجب أن يعرض عنصر input
قيمة input
في حالة المكوِّن. يجب أن يقوم عنصر button
بتشغيل طريقة submitMessage()
عند النقر عليها. ثانيًا ، اكتب هذين الأسلوبين. يجب أن تقوم الطريقة handleChange()
بتحديث input
بما handleChange()
المستخدم. يجب أن تسلسل طريقة submitMessage()
الرسالة الحالية (المخزنة في input
) إلى مصفوفة messages
في الحالة المحلية ، ومسح قيمة input
. وأخيرًا ، استخدم ul
لتعيين أكثر من مجموعة من messages
وعرضها على الشاشة كقائمة من عناصر li
. DisplayMessages
بحالة مساوية { input: "", messages: [] }
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && initialState.input === "" && initialState.messages.length === 0); })(), "The DisplayMessages
component should initialize with a state equal to { input: "", messages: [] }
.");'
- text: يجب أن يقوم مكون DisplayMessages
بعرض div
يحتوي على عنصر h2
، وعنصر button
، وعنصر ul
، وعناصر li
كأطفال.
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 DisplayMessages
component should render a div
containing an h2
element, a button
element, a ul
element, and li
elements as children."); }; '
- text: يجب أن يؤدي عنصر input
عرض قيمة input
في الحالة المحلية.
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 input
element should render the value of input
in local state."); }; '
- text: يجب استدعاء الأسلوب handleChange
تحديث قيمة input
في الحالة إلى الإدخال الحالي.
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 handleChange
should update the input
value in state to the current input."); }; '
- text: يجب النقر فوق الزر " Add message
استدعاء الأسلوب submitMessage
الذي يجب إضافة input
الحالي إلى صفيف messages
في الحالة.
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_1 = "__FIRST__MESSAGE__"; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = "__SECOND__MESSAGE__"; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2, "Clicking the Add message
button should call the method submitMessage
which should add the current input
to the messages
array in state."); }; '
- text: يجب أن تقوم طريقة submitMessage
بمسح الإدخال الحالي.
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 = "__FIRST__MESSAGE__"; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === "", "The submitMessage
method should clear the current input."); }; '
```