if/else
в JavaScript. Они не настолько устойчивы, как традиционные инструкции if/else
, но они очень популярны среди разработчиков React. Одна из причин этого заключается в том, что JSX скомпилирован, if/else
инструкции не могут быть вставлены непосредственно в код JSX. Возможно, вы заметили это несколько проблем назад - когда требовался оператор if/else
, он всегда находился за пределами оператора return
. Тернарные выражения могут быть отличной альтернативой, если вы хотите реализовать условную логику в своем JSX. Напомним, что тройной оператор состоит из трех частей, но вы можете комбинировать несколько тройных выражений. Вот основной синтаксис: состояние ? выражениеIfTrue: выражениеIfFalse
CheckUserAge
component should render with a single input
element and a single button
element.");'
- text: ''
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The CheckUserAge
component's state should be initialized with a property of userAge
and a property of input
, both set to a value of an empty string.");'
- text: 'Когда компонент CheckUserAge
сначала отображается в DOM, внутренний текст button
должен быть Submit.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the CheckUserAge
component is first rendered to the DOM, the button
's inner text should be Submit.");'
- text: 'Когда во input
элемент вводится число менее 18, и button
нажата, внутренний текст button
должен быть прочитан « You Shall Not Pass
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter3AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "3" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter17AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "17" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === "Submit" && userAge3 === "You Shall Not Pass" && userAge17 === "You Shall Not Pass", "When a number of less than 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You Shall Not Pass
."); }; '
- text: 'Когда число больше или равно 18, вводится в input
элемент и button
нажата, то button
«s внутренний текст должен прочитать You May Enter
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter35AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "35" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === "Submit" && userAge18 === "You May Enter" && userAge35 === "You May Enter", "When a number greater than or equal to 18 is entered into the input
element and the button
is clicked, the button
's inner text should read You May Enter
."); }; '
- text: 'Как только число будет отправлено, и значение input
снова будет изменено, button
должна вернуться к чтению Submit
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the input
is once again changed, the button
should return to reading Submit
."); }; '
- text: В вашем коде не должно быть никаких операторов if/else
.
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any if/else
statements.");'
```